#7 remove Alert show & hide method, use show prop instead

weui · Dec 17, 2015 · 437e5d9 · 437e5d9
1 parent 0146ad6
commit 437e5d9
Show file tree

Hide file tree

Showing 4 changed files with 81 additions and 74 deletions.
diff --git a/docs/dialog.md b/docs/dialog.md
@@ -6,7 +6,8 @@
 
 属性 | 类型 | 默认值 | 可选值 | 备注
 -----|------|--------|-------|------|
-title| string| 标题  | | alert弹框标题
+title| string|   | | alert弹框标题
+show| bool| false | | 是否显示
 buttons| array| | | 确认按钮描述，至少包含label属性
 
 #### 方法
@@ -25,12 +26,14 @@ const {Alert, Confirm} = Dialog;
 
 class DialogTest extends React.Component {
     state = {
+        showAlert: false,
+        showConfirm: false,
         alert: {
             title: '标题标题',
             buttons: [
                 {
                     label: '好的',
-                    onClick: this.onHideAlert.bind(this)
+                    onClick: this.hideAlert.bind(this)
                 }
             ]
         },
@@ -54,7 +57,7 @@ class DialogTest extends React.Component {
     render() {
         return (
             <section>
-                <Button type="warn" onClick={this.onShowAlert.bind(this)}>警告你</Button>
+                <Button type="warn" onClick={this.showAlert.bind(this)}>警告你</Button>
                 <Button type="primary" onClick={this.onShowConfirm.bind(this)}>确认</Button>
 
 
@@ -74,12 +77,12 @@ class DialogTest extends React.Component {
         );
     }
 
-    onShowAlert(){
-        this.refs.alert.show();
+    showAlert(){
+        this.setState({showAlert: true});
     }
 
-    onHideAlert(){
-        this.refs.alert.hide();
+    hideAlert(){
+        this.setState({showAlert: false});
     }
 
     onShowConfirm(){

diff --git a/example/pages/dialog/index.js b/example/pages/dialog/index.js
@@ -12,6 +12,8 @@ const {Alert, Confirm} = Dialog;
 
 export default class DialogDemo extends React.Component {
     state = {
+        showAlert: false,
+        showConfirm: false,
         alert: {
             title: '标题标题',
             buttons: [
@@ -39,11 +41,11 @@ export default class DialogDemo extends React.Component {
     };
 
     showAlert() {
-        this.refs.alert.show();
+        this.setState({showAlert: true});
     }
 
     hideAlert() {
-        this.refs.alert.hide();
+        this.setState({showAlert: false});
     }
 
     showConfirm() {
@@ -61,7 +63,9 @@ export default class DialogDemo extends React.Component {
                 <Button type="primary" onClick={this.showConfirm.bind(this)}>确认</Button>
 
 
-                <Alert ref="alert" title={this.state.alert.title} buttons={this.state.alert.buttons}>警告内容</Alert>
+                <Alert title={this.state.alert.title} buttons={this.state.alert.buttons} show={this.state.showAlert}>
+                    警告内容
+                </Alert>
                 <Confirm ref="confirm" title={this.state.confirm.title} buttons={this.state.confirm.buttons}>确认内容？</Confirm>
             </Page>
         );

diff --git a/src/components/dialog/alert.js b/src/components/dialog/alert.js
@@ -11,17 +11,14 @@ import Mask from '../mask/index';
 class Alert extends React.Component {
     static propTypes = {
         buttons: React.PropTypes.array,
-        active: React.PropTypes.bool,
+        show: React.PropTypes.bool,
         title: React.PropTypes.string
     };
 
     static defaultProps = {
         buttons: [],
-        active: false
-    };
-
-    state = {
-        active: this.props.active
+        show: false,
+        title: ''
     };
 
     _renderButtons() {
@@ -40,9 +37,9 @@ class Alert extends React.Component {
     }
 
     render() {
-        const {title, children} = this.props;
+        const {title, show, children} = this.props;
         return (
-            <div className="weui_dialog_alert" style={{display: this.state.active ? 'block' : 'none'}}>
+            <div className="weui_dialog_alert" style={{display: show ? 'block' : 'none'}}>
                 <Mask/>
                 <div className="weui_dialog">
                     <div className="weui_dialog_hd">
@@ -58,14 +55,6 @@ class Alert extends React.Component {
             </div>
         );
     }
-
-    show() {
-        this.setState({active: true});
-    }
-
-    hide() {
-        this.setState({active: false});
-    }
 }
 
 export default Alert;
diff --git a/test/dialog.js b/test/dialog.js
@@ -13,62 +13,73 @@ const {Dialog, Mask} = WeUI;
 const {Alert, Confirm} = Dialog;
 
 describe('<Dialog></Dialog>', ()=> {
-    describe('<Alert></Alert>', ()=> {
-        const title = '提示';
-        const body = '警告内容';
-        const buttons = [{
-            label: '取消',
-            type: 'default',
-            onClick: ()=> {
-            }
-        }, {
-            label: '确定',
-            type: 'primary',
-            onClick: ()=> {
-            }
-        }];
-        const wrapper = shallow(
-            <Alert title={title} buttons={buttons}>
-                {body}
-            </Alert>
-        );
+    [undefined, null, true, false].map((show)=> {
+        describe(`<Alert></Alert>`, ()=> {
+            const title = '提示';
+            const body = '警告内容';
+            const buttons = [{
+                label: '取消',
+                type: 'default',
+                onClick: ()=> {
+                }
+            }, {
+                label: '确定',
+                type: 'primary',
+                onClick: ()=> {
+                }
+            }];
+            const wrapper = shallow(
+                <Alert title={title} buttons={buttons} show={show}>
+                    {body}
+                </Alert>
+            );
+
+            it('should render <Alert></Alert> component', () => {
+                assert(wrapper.instance() instanceof Alert);
+                assert(wrapper.hasClass('weui_dialog_alert'));
+            });
 
-        it('should render <Alert></Alert> component', () => {
-            assert(wrapper.instance() instanceof Alert);
-            assert(wrapper.hasClass('weui_dialog_alert'));
-        });
+            it(`should render a non transparent <Mask></Mask>`, ()=> {
+                const mask = wrapper.find(Mask).shallow();
+                assert(mask.instance() instanceof Mask);
+                assert(mask.hasClass('weui_mask'));
+                assert(!mask.hasClass('weui_mask_transparent'));
+            });
 
-        it(`should render a non transparent <Mask></Mask>`, ()=> {
-            const mask = wrapper.find(Mask).shallow();
-            assert(mask.instance() instanceof Mask);
-            assert(mask.hasClass('weui_mask'));
-            assert(!mask.hasClass('weui_mask_transparent'));
-        });
+            it(`should be hidden when 'show' prop is false or undefined`, ()=> {
+                if (show) {
+                    assert(wrapper.prop('style').display === 'block');
+                }
+                else {
+                    assert(wrapper.prop('style').display === 'none');
+                }
+            });
 
-        it(`should have title ${title}`, ()=> {
-            const $title = wrapper.find('.weui_dialog_title');
-            assert($title.text() === title);
-        });
+            it(`should have title ${title}`, ()=> {
+                const $title = wrapper.find('.weui_dialog_title');
+                assert($title.text() === title);
+            });
 
-        it(`should have body ${body}`, ()=> {
-            const $body = wrapper.find('.weui_dialog_bd');
-            assert($body.text() === body);
-        });
+            it(`should have body ${body}`, ()=> {
+                const $body = wrapper.find('.weui_dialog_bd');
+                assert($body.text() === body);
+            });
 
-        it(`should render ${buttons.length} buttons`, ()=> {
-            const $buttons = wrapper.find('.weui_btn_dialog');
-            assert($buttons.length === buttons.length);
+            it(`should render ${buttons.length} buttons`, ()=> {
+                const $buttons = wrapper.find('.weui_btn_dialog');
+                assert($buttons.length === buttons.length);
 
-            $buttons.map(($button, index) => {
-                assert($button.text() === buttons[index].label);
-                assert($button.hasClass(buttons[index].type));
-                assert($button.prop('onClick') === buttons[index].onClick);
+                $buttons.map(($button, index) => {
+                    assert($button.text() === buttons[index].label);
+                    assert($button.hasClass(buttons[index].type));
+                    assert($button.prop('onClick') === buttons[index].onClick);
+                });
             });
-        });
 
-        it(`should have 'show' & 'hide' method`, ()=> {
-            // TODO
-        });
+            it(`should have 'show' & 'hide' method`, ()=> {
+                // TODO
+            });
+        })
     });
 
     describe('<Confirm></Confirm>', ()=> {