#68 Cell* 增加支持传入自定义 className

weui · Apr 25, 2016 · a09719a · a09719a
1 parent 4a577ad
commit a09719a
Show file tree

Hide file tree

Showing 10 changed files with 55 additions and 25 deletions.
diff --git a/src/components/cell/cell_body.js b/src/components/cell/cell_body.js
@@ -9,14 +9,15 @@ import classNames from 'classnames';
 
 export default class CellBody extends React.Component {
     render() {
-        const {children, ...others} = this.props;
-        const className = classNames({
+        const {className, children, ...others} = this.props;
+        const cls = classNames({
             weui_cell_bd: true,
-            weui_cell_primary: true
+            weui_cell_primary: true,
+            [className]: className
         });
 
         return (
-            <div className={className} {...others}>{children}</div>
+            <div className={cls} {...others}>{children}</div>
         );
     }
 };
diff --git a/src/components/cell/cell_footer.js b/src/components/cell/cell_footer.js
@@ -9,13 +9,14 @@ import classNames from 'classnames';
 
 export default class CellFooter extends React.Component {
     render() {
-        const {children, ...others} = this.props;
-        const className = classNames({
-            weui_cell_ft: true
+        const {className, children, ...others} = this.props;
+        const cls = classNames({
+            weui_cell_ft: true,
+            [className]: className
         });
 
         return (
-            <div className={className} {...others}>{children}</div>
+            <div className={cls} {...others}>{children}</div>
         );
     }
 };
diff --git a/src/components/cell/cell_header.js b/src/components/cell/cell_header.js
@@ -9,13 +9,14 @@ import classNames from 'classnames';
 
 export default class CellHeader extends React.Component {
     render() {
-        const {children, ...others} = this.props;
-        const className = classNames({
-            weui_cell_hd: true
+        const {className, children, ...others} = this.props;
+        const cls = classNames({
+            weui_cell_hd: true,
+            [className]: className
         });
 
         return (
-            <div className={className} {...others}>{children}</div>
+            <div className={cls} {...others}>{children}</div>
         );
     }
 };
diff --git a/src/components/cell/cells_tips.js b/src/components/cell/cells_tips.js
@@ -9,13 +9,14 @@ import classNames from 'classnames';
 
 export default class CellsTips extends React.Component {
     render() {
-        const {children, ...others} = this.props;
-        const className = classNames({
-            weui_cells_tips: true
+        const {className, children, ...others} = this.props;
+        const cls = classNames({
+            weui_cells_tips: true,
+            [className]: className
         });
 
         return (
-            <div className={className} {...others}>{children}</div>
+            <div className={cls} {...others}>{children}</div>
         );
     }
 };
diff --git a/src/components/cell/cells_title.js b/src/components/cell/cells_title.js
@@ -9,13 +9,14 @@ import classNames from 'classnames';
 
 export default class CellsTitle extends React.Component {
     render() {
-        const {children, ...others} = this.props;
-        const className = classNames({
-            weui_cells_title: true
+        const {className, children, ...others} = this.props;
+        const cls = classNames({
+            weui_cells_title: true,
+            [className]: className
         });
 
         return (
-            <div className={className} {...others}>{children}</div>
+            <div className={cls} {...others}>{children}</div>
         );
     }
 };
diff --git a/test/cell_body.js b/test/cell_body.js
@@ -15,8 +15,9 @@ describe('<CellBody></CellBody>', ()=> {
 
     ['cell body wording', <img src="http://mmrb.github.io/avatar/jf.jpg" />, <div><h2 className="title">文章标题</h2><p className="desc">文章描述</p></div>].map((child)=>{
         describe(`<CellBody>${child}</CellBody>`, ()=>{
+            const customClassName = 'customClassName1 customClassName2';
             const wrapper = shallow(
-                <CellBody>{child}</CellBody>
+                <CellBody className={customClassName}>{child}</CellBody>
             );
 
             it(`should render <CellBody></CellBody> component `, ()=>{
@@ -27,6 +28,10 @@ describe('<CellBody></CellBody>', ()=> {
                 assert(wrapper.hasClass(`weui_cell_bd`));
             });
 
+            it(`should have custom class name ${customClassName}`, ()=> {
+                assert(wrapper.hasClass(customClassName));
+            });
+
             it(`should have child ${child}`, ()=>{
                 assert(wrapper.contains(child));
             });

diff --git a/test/cell_footer.js b/test/cell_footer.js
@@ -15,8 +15,9 @@ describe('<CellFooter></CellFooter>', ()=> {
 
     ['cell footer wording', <img src="http://mmrb.github.io/avatar/bear.jpg" />].map((child)=>{
         describe(`<CellFooter>${child}</CellFooter>`, ()=>{
+            const customClassName = 'customClassName1 customClassName2';
             const wrapper = shallow(
-                <CellFooter>{child}</CellFooter>
+                <CellFooter className={customClassName}>{child}</CellFooter>
             );
 
             it(`should render <CellFooter></CellFooter> component `, ()=>{
@@ -27,6 +28,10 @@ describe('<CellFooter></CellFooter>', ()=> {
                 assert(wrapper.hasClass(`weui_cell_ft`));
             });
 
+            it(`should have custom class name ${customClassName}`, ()=> {
+                assert(wrapper.hasClass(customClassName));
+            });
+
             it(`should have child ${child}`, ()=>{
                 assert(wrapper.contains(child));
             });

diff --git a/test/cell_header.js b/test/cell_header.js
@@ -15,8 +15,9 @@ describe('<CellHeader></CellHeader>', ()=> {
 
     ['cell header wording', <img src="http://mmrb.github.io/avatar/jf.jpg" />, <p>cell header wording</p>].map((child)=>{
         describe(`<CellHeader>${child}</CellHeader>`, ()=>{
+            const customClassName = 'customClassName1 customClassName2';
             const wrapper = shallow(
-                <CellHeader>{child}</CellHeader>
+                <CellHeader className={customClassName}>{child}</CellHeader>
             );
 
             it(`should render <CellHeader></CellHeader> component `, ()=>{
@@ -27,6 +28,10 @@ describe('<CellHeader></CellHeader>', ()=> {
                 assert(wrapper.hasClass(`weui_cell_hd`));
             });
 
+            it(`should have custom class name ${customClassName}`, ()=> {
+                assert(wrapper.hasClass(customClassName));
+            });
+
             it(`should have child ${child}`, ()=>{
                 assert(wrapper.contains(child));
             });

diff --git a/test/cells_tips.js b/test/cells_tips.js
@@ -14,8 +14,9 @@ const {CellsTips} = WeUI;
 describe('<CellsTips></CellsTips>', ()=> {
 
     const text = `cells tips wording`;
+    const customClassName = 'customClassName1 customClassName2';
     const wrapper = shallow(
-        <CellsTips>{text}</CellsTips>
+        <CellsTips className={customClassName}>{text}</CellsTips>
     );
 
     it(`should render <CellsTips></CellsTips> component `, ()=>{
@@ -26,6 +27,10 @@ describe('<CellsTips></CellsTips>', ()=> {
         assert(wrapper.hasClass(`weui_cells_tips`));
     });
 
+    it(`should have custom class name ${customClassName}`, ()=> {
+        assert(wrapper.hasClass(customClassName));
+    });
+
     it(`should have text ${text}`, ()=>{
         assert(wrapper.text() === text);
     });

diff --git a/test/cells_title.js b/test/cells_title.js
@@ -14,8 +14,9 @@ const {CellsTitle} = WeUI;
 describe('<CellsTitle></CellsTitle>', ()=> {
 
     const text = `cells tips wording`;
+    const customClassName = 'customClassName1 customClassName2';
     const wrapper = shallow(
-        <CellsTitle>{text}</CellsTitle>
+        <CellsTitle className={customClassName}>{text}</CellsTitle>
     );
 
     it(`should render <CellsTitle></CellsTitle> component `, ()=>{
@@ -26,6 +27,10 @@ describe('<CellsTitle></CellsTitle>', ()=> {
         assert(wrapper.hasClass(`weui_cells_title`));
     });
 
+    it(`should have custom class name ${customClassName}`, ()=> {
+        assert(wrapper.hasClass(customClassName));
+    });
+
     it(`should have text ${text}`, ()=>{
         assert(wrapper.text() === text);
     });