weui · n7best · Apr 26, 2016 · Apr 25, 2016 · Apr 25, 2016
diff --git a/docs/actionsheet.md b/docs/actionsheet.md
@@ -26,17 +26,20 @@ class App extends React.Component {
         show: false,
         menus: [{
             label: '拍照',
+            className: 'customClassName',
             onClick: ()=>{
 
             }
         }, {
             label: '从手机相册中选择',
+            className: 'customClassName',
             onClick: ()=>{
 
             }
         }],
         actions: [{
             label: '取消',
+            className: 'customClassName',
             onClick: this.hide.bind(this)
         }]
     };

diff --git a/src/components/actionsheet/actionsheet.js b/src/components/actionsheet/actionsheet.js
@@ -48,26 +48,28 @@ export default class ActionSheet extends React.Component {
 
     _renderMenuItem() {
         return this.props.menus.map((menu, idx) => {
-            const {label, ...others} = menu;
-            const className = classNames({
-                weui_actionsheet_cell: true
+            const {label, className, ...others} = menu;
+            const cls = classNames({
+                weui_actionsheet_cell: true,
+                [className]: className
             });
 
             return (
-                <div key={idx} {...others} className={className}>{label}</div>
+                <div key={idx} {...others} className={cls}>{label}</div>
             );
         });
     }
 
     _renderActions() {
         return this.props.actions.map((action, idx) => {
-            const {label, ...others} = action;
-            const className = classNames({
-                weui_actionsheet_cell: true
+            const {label, className, ...others} = action;
+            const cls = classNames({
+                weui_actionsheet_cell: true,
+                [className]: className
             });
 
             return (
-                <div key={idx} {...others} className={className}>{label}</div>
+                <div key={idx} {...others} className={cls}>{label}</div>
             );
         });
     }

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/actionsheet.js b/test/actionsheet.js
@@ -16,12 +16,15 @@ describe('<ActionSheet></ActionSheet>', ()=> {
     [undefined, null, true, false].map((show) => {
         describe(`<ActionSheet></ActionSheet>`, ()=> {
             const menus = [{
-                label: '拍照'
+                label: '拍照',
+                className: 'customClassName1'
             }, {
-                label: '从相册中选取'
+                label: '从相册中选取',
+                className: 'customClassName2'
             }];
             const actions = [{
-                label: '取消'
+                label: '取消',
+                className: 'customClassName'
             }, {
                 label: '确定'
             }];
@@ -67,7 +70,9 @@ describe('<ActionSheet></ActionSheet>', ()=> {
                 assert(menuItems.length === menus.length);
 
                 menuItems.map((menuItem, index)=> {
-                    assert(menuItem.text() === menus[index].label);
+                    const menu = menus[index];
+                    assert(menuItem.text() === menu.label);
+                    menu.className && assert(menuItem.hasClass(menu.className));
                 });
             });
 
@@ -76,7 +81,9 @@ describe('<ActionSheet></ActionSheet>', ()=> {
                 assert(actionItems.length === actions.length);
 
                 actionItems.map((actionItem, index)=> {
-                    assert(actionItem.text() === actions[index].label);
+                    const action = actions[index];
+                    assert(actionItem.text() === action.label);
+                    action.className && assert(actionItem.hasClass(action.className));
                 });
             });
         });

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);
     });