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

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

Hide file tree

Showing 4 changed files with 59 additions and 57 deletions.
diff --git a/docs/toast.md b/docs/toast.md
@@ -6,6 +6,7 @@
 属性 | 类型 | 默认值 | 可选值 | 备注
 -----|------|--------|-------|------|
 icon|string|toast|所有icon| 
+show|bool|false|| 是否显示 
 
 示例：
 
@@ -15,13 +16,17 @@ import ReactDOM from 'react-dom';
 import {Button, Toast} from 'react-weui';
 
 class App extends React.Component {
+    state = {
+        show: false
+    };
+
     handleClick() {
-        this.refs.toast.show();
+        this.setState({show: true});
     }
     render() {
         <section>
             <Button onClick={this.handleClick.bind(this)}>显示toast</Button>
-            <Toast ref="toast">
+            <Toast show={this.state.show}>
                 加载中...
             </Toast>
         </section>

diff --git a/example/pages/toast/index.js b/example/pages/toast/index.js
@@ -11,14 +11,15 @@ import Page from '../../component/page';
 export default class ToastDemo extends React.Component {
 
     state = {
+        show: false,
         timer: null
     };
 
     handleClick() {
-        this.refs.toast.show();
+        this.setState({show: true});
 
         this.state.timer = setTimeout(()=> {
-            this.refs.toast.hide();
+            this.setState({show: false});
         }, 2000);
     }
 
@@ -30,7 +31,7 @@ export default class ToastDemo extends React.Component {
         return (
             <Page className="toast" title="Toast" spacing>
                 <Button onClick={this.handleClick.bind(this)}>Toast</Button>
-                <Toast ref="toast">完成</Toast>
+                <Toast show={this.state.show}>完成</Toast>
             </Page>
         );
     }

diff --git a/src/components/toast/toast.js b/src/components/toast/toast.js
@@ -11,21 +11,21 @@ import Icon from '../icon/index';
 
 
 class Toast extends React.Component {
-    static propTypes = {};
-
-    static defaultProps = {
-        icon: 'toast'
+    static propTypes = {
+        icon: React.PropTypes.string,
+        show: React.PropTypes.bool
     };
 
-    state = {
-        active: false
+    static defaultProps = {
+        icon: 'toast',
+        show: false
     };
 
     render() {
-        const {icon, children} = this.props;
+        const {icon, show, children} = this.props;
 
         return (
-            <div className="weui_toast" style={{display: this.state.active ? 'block' : 'none'}}>
+            <div className="weui_toast" style={{display: show ? 'block' : 'none'}}>
                 <Mask transparent={true}/>
                 <div className="weui_toast">
                     <Icon value={icon}/>
@@ -34,14 +34,6 @@ class Toast extends React.Component {
             </div>
         );
     }
-
-    show() {
-        this.setState({active: true});
-    }
-
-    hide() {
-        this.setState({active: false});
-    }
 }
 
 export default Toast;
diff --git a/test/toast.js b/test/toast.js
@@ -12,41 +12,45 @@ import WeUI from '../src/index';
 const {Toast, Mask, Icon} = WeUI;
 
 describe('<Toast></Toast>', ()=> {
-    const body = '加载中...';
-    const wrapper = shallow(
-        <Toast>
-            {body}
-        </Toast>
-    );
-
-    it(`should render <Toast></Toast> component`, () => {
-        assert(wrapper.instance() instanceof Toast);
-        assert(wrapper.hasClass('weui_toast'));
-    });
-
-    it(`should be hidden when active is false`, ()=> {
-        assert(wrapper.state('active') === false);
-        assert(wrapper.prop('style').display === 'none');
-    });
-
-    it(`should have a transparent 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 have a icon`, ()=> {
-        const icon = wrapper.find(Icon).shallow();
-        assert(icon.instance() instanceof Icon);
-    });
-
-    it(`should have body`, ()=> {
-        const $body = wrapper.find('.weui_toast_content');
-        assert($body.text() === body);
-    });
-
-    it(`should have 'show' & 'hide' method`, ()=> {
-        // TODO
+    [undefined, null, false, true].map((show) => {
+        describe(`<Toast show="${show}"></Toast>`, ()=> {
+            const body = '加载中...';
+            const wrapper = shallow(
+                <Toast show={show}>
+                    {body}
+                </Toast>
+            );
+
+            it(`should render <Toast></Toast> component`, () => {
+                assert(wrapper.instance() instanceof Toast);
+                assert(wrapper.hasClass('weui_toast'));
+            });
+
+            it(`should be hidden when 'show' attribute is false`, ()=> {
+                if (show) {
+                    assert(wrapper.prop('style').display === 'block');
+                }
+                else {
+                    assert(wrapper.prop('style').display === 'none');
+                }
+            });
+
+            it(`should have a transparent 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 have a icon`, ()=> {
+                const icon = wrapper.find(Icon).shallow();
+                assert(icon.instance() instanceof Icon);
+            });
+
+            it(`should have body`, ()=> {
+                const $body = wrapper.find('.weui_toast_content');
+                assert($body.text() === body);
+            });
+        });
     });
 });