#7 remove ActionSheet show & hide method, use show prop instead, …

…and add `onRequestClose` event
weui · Dec 18, 2015 · 3a158e0 · 3a158e0
1 parent 5c172f0
commit 3a158e0
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 106 deletions.
diff --git a/docs/actionsheet.md b/docs/actionsheet.md
@@ -10,6 +10,8 @@
 ------|------|--------|--------|------|
 menus |array |[ ]      |        |菜单描述，至少包含`label`属性|
 actions|array|[ ]      |        |动作描述，至少包含`label`属性|
+show|bool|false      |        |是否显示|
+onRequestClose|func|      |        |请求关闭事件, 点击蒙层时触发|
 
 例如：
 ```javascript
@@ -33,12 +35,6 @@ const actions = [{
     }];
 ```
 
-#### 方法
-
-- show 显示ActionSheet
-
-- hide 隐藏ActionSheet
-
 #### 示例
 
 ```javascript
@@ -49,6 +45,7 @@ import {ActionSheet, Button} from '../../index';
 class App extends React.Component {
 
     state = {
+        show: false,
         menus: [{
             label: '拍照',
             onClick: ()=>{
@@ -62,23 +59,27 @@ class App extends React.Component {
         }],
         actions: [{
             label: '取消',
-            onClick: ()=>{
-                this.refs.actionsheet.hide();
-            }
+            onClick: this.hide.bind(this)
         }]
     };
 
-    handleClick() {
-        this.refs.actionsheet.show();
-    }
+
     render() {
         return (
             <section style={{padding: `15px`}}>
-                <Button onClick={this.handleClick.bind(this)}>选择</Button>
-                <ActionSheet ref="actionsheet" menus={this.state.menus} actions={this.state.actions} />
+                <Button onClick={this.show.bind(this)}>选择</Button>
+                <ActionSheet ref="actionsheet" menus={this.state.menus} actions={this.state.actions} onRequestClose={this.hide.bind(this)} />
             </section>
         );
     }
+
+    show() {
+        this.setState({show: true});
+    }
+
+    hide() {
+        this.setState({show: false});
+    }
 }
 
 ReactDOM.render((

diff --git a/example/bundle.js b/example/bundle.js
diff --git a/example/pages/actionsheet/index.js b/example/pages/actionsheet/index.js
@@ -11,6 +11,7 @@ import Page from '../../component/page';
 export default class ActionSheetDemo extends React.Component {
 
     state = {
+        show: false,
         menus: [{
             label: '拍照',
             onClick: ()=> {
@@ -30,20 +31,20 @@ export default class ActionSheetDemo extends React.Component {
         ]
     };
 
-    show() {
-        this.refs.actionSheet.show();
-    }
-
-    hide() {
-        this.refs.actionSheet.hide();
-    }
-
     render() {
         return (
             <Page className="actionsheet" title="ActionSheet" spacing>
                 <Button onClick={this.show.bind(this)}>ActionSheet</Button>
-                <ActionSheet ref="actionSheet" menus={this.state.menus} actions={this.state.actions}/>
+                <ActionSheet menus={this.state.menus} actions={this.state.actions} show={this.state.show} onRequestClose={this.hide.bind(this)} />
             </Page>
         );
     }
+
+    show() {
+        this.setState({show: true});
+    }
+
+    hide() {
+        this.setState({show: false});
+    }
 };
diff --git a/package.json b/package.json
@@ -53,6 +53,7 @@
         "react-dom": "^0.14.2",
         "react-router": "^1.0.2",
         "rimraf": "^2.4.3",
+        "sinon": "^1.17.2",
         "style-loader": "^0.13.0",
         "uglify-loader": "^1.2.0",
         "url-loader": "^0.5.7",

diff --git a/src/components/actionsheet/actionsheet.js b/src/components/actionsheet/actionsheet.js
@@ -3,7 +3,6 @@
  */
 
 
-
 import React from 'react';
 import classNames from 'classnames';
 import Mask from '../mask/index';
@@ -12,19 +11,41 @@ export default class ActionSheet extends React.Component {
     static propTypes = {
         menus: React.PropTypes.array,
         actions: React.PropTypes.array,
-        active: React.PropTypes.bool
+        show: React.PropTypes.bool,
+        onRequestClose: React.PropTypes.func
     };
 
     static defaultProps = {
         menus: [],
         actions: [],
-        active: false
-    };
+        show: false,
+        onRequestClose: ()=> {
 
-    state = {
-        active: this.props.active
+        }
     };
 
+    render() {
+        const {show, onRequestClose} = this.props;
+        const className = classNames({
+            weui_actionsheet: true,
+            weui_actionsheet_toggle: show
+        });
+
+        return (
+            <div>
+                <Mask style={{display: show ? 'block' : 'none'}} onClick={onRequestClose}/>
+                <div className={className}>
+                    <div className="weui_actionsheet_menu">
+                        {this._renderMenuItem()}
+                    </div>
+                    <div className="weui_actionsheet_action">
+                        {this._renderActions()}
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
     _renderMenuItem() {
         return this.props.menus.map((menu, idx) => {
             const {label, ...others} = menu;
@@ -50,32 +71,4 @@ export default class ActionSheet extends React.Component {
             );
         });
     }
-
-    render() {
-        const className = classNames({
-            weui_actionsheet: true,
-            weui_actionsheet_toggle: this.state.active == true
-        });
-        return (
-            <div>
-                <Mask style={{display: this.state.active ? 'block' : 'none'}} onClick={this.hide.bind(this)}/>
-                <div className={className}>
-                    <div className="weui_actionsheet_menu">
-                        {this._renderMenuItem()}
-                    </div>
-                    <div className="weui_actionsheet_action">
-                        {this._renderActions()}
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    show() {
-        this.setState({active: true});
-    }
-
-    hide() {
-        this.setState({active: false});
-    }
 };
diff --git a/test/actionsheet.js b/test/actionsheet.js
@@ -6,63 +6,79 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
+import sinon from 'sinon';
 import assert from 'assert';
 import WeUI from '../src/index';
 
 const {ActionSheet, Mask} = WeUI;
 
 describe('<ActionSheet></ActionSheet>', ()=> {
-    const menus = [{
-        label: '拍照'
-    }, {
-        label: '从相册中选取'
-    }];
-    const actions = [{
-        label: '取消'
-    }, {
-        label: '确定'
-    }];
-    const wrapper = shallow(
-        <ActionSheet menus={menus} actions={actions}/>
-    );
+    [undefined, null, true, false].map((show) => {
+        describe(`<ActionSheet></ActionSheet>`, ()=> {
+            const menus = [{
+                label: '拍照'
+            }, {
+                label: '从相册中选取'
+            }];
+            const actions = [{
+                label: '取消'
+            }, {
+                label: '确定'
+            }];
+            const onRequestClose = sinon.spy();
+            const wrapper = shallow(
+                <ActionSheet menus={menus} actions={actions} show={show} onRequestClose={onRequestClose}/>
+            );
 
-    it('should render <ActionSheet></ActionSheet> component', () => {
-        assert(wrapper.instance() instanceof ActionSheet);
-    });
+            it('should render <ActionSheet></ActionSheet> component', () => {
+                assert(wrapper.instance() instanceof ActionSheet);
+            });
 
-    it(`<ActionSheet></ActionSheet> should have a hidden <Mask></Mask>`, ()=> {
-        const mask = wrapper.find(Mask).shallow();
-        assert(mask.instance() instanceof Mask);
-        assert(mask.prop('style').display === 'none');
-    });
+            it(`should have a hidden <Mask></Mask> when 'show' prop is false or undefined`, ()=> {
+                const mask = wrapper.find(Mask).shallow();
+                assert(mask.instance() instanceof Mask);
+                if (show) {
+                    assert(mask.prop('style').display === 'block');
+                }
+                else {
+                    assert(mask.prop('style').display === 'none');
+                }
+            });
 
-    it(`<ActionSheet></ActionSheet> state.active should be false when created`, ()=> {
-        assert(wrapper.state('active') === false);
-    });
+            it(`should have 'onRequestClose' event on Mask when 'show' prop is true`, ()=> {
+                if (show) {
+                    wrapper.find(Mask).simulate('click');
+                    assert(onRequestClose.calledOnce === true);
+                }
+            });
 
-    it(`<ActionSheet></ActionSheet> should render ${menus.length} menu items `, ()=> {
-        const menuItems = wrapper.find('.weui_actionsheet_menu').shallow().find('.weui_actionsheet_cell');
-        assert(menuItems.length === menus.length);
-
-        menuItems.map((menuItem, index)=> {
-            assert(menuItem.text() === menus[index].label);
-        });
-    });
+            it(`should have 'weui_actionsheet_toggle' class name when 'show' prop is true`, ()=> {
+                const actionSheet = wrapper.find('.weui_actionsheet');
+                if (show) {
+                    assert(actionSheet.hasClass(`weui_actionsheet_toggle`));
+                }
+                else {
+                    assert(!actionSheet.hasClass(`weui_actionsheet_toggle`));
+                }
+            });
 
-    it(`<ActionSheet></ActionSheet> should render ${actions.length} actions`, ()=> {
-        const actionItems = wrapper.find('.weui_actionsheet_action').shallow().find('.weui_actionsheet_cell');
-        assert(actionItems.length === actions.length);
+            it(`should render ${menus.length} menu items `, ()=> {
+                const menuItems = wrapper.find('.weui_actionsheet_menu').shallow().find('.weui_actionsheet_cell');
+                assert(menuItems.length === menus.length);
 
-        actionItems.map((actionItem, index)=> {
-            assert(actionItem.text() === actions[index].label);
-        });
-    });
+                menuItems.map((menuItem, index)=> {
+                    assert(menuItem.text() === menus[index].label);
+                });
+            });
 
-    it(`<ActionSheet></ActionSheet> should have 'show' & 'hide' method`, ()=> {
-        // TODO
-    });
+            it(`should render ${actions.length} actions`, ()=> {
+                const actionItems = wrapper.find('.weui_actionsheet_action').shallow().find('.weui_actionsheet_cell');
+                assert(actionItems.length === actions.length);
 
-    it(`<ActionSheet></ActionSheet> method`, ()=> {
-        assert(wrapper.state('active') === false);
+                actionItems.map((actionItem, index)=> {
+                    assert(actionItem.text() === actions[index].label);
+                });
+            });
+        });
     });
 });