#51 ActionSheet 的 menus 和 actions 增加支持传入自定义 className

Author: progrape

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

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

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