#58, patched searchbar, add iconSize for toast #62, change weui depen…

…dency to 0.4.1 (#63)
weui · Apr 11, 2016 · 9df3c19 · 9df3c19
1 parent bf0278a
commit 9df3c19
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 45 deletions.
diff --git a/docs/toast.md b/docs/toast.md
@@ -6,6 +6,7 @@
 属性 | 类型 | 默认值 | 可选值 | 备注
 -----|------|--------|-------|------|
 icon|string|toast|所有icon| 
+iconSize|string|'small'|small, large| icon size
 show|bool|false|| 是否显示 
 
 示例：

diff --git a/example/pages/toast/index.js b/example/pages/toast/index.js
@@ -13,8 +13,10 @@ export default class ToastDemo extends React.Component {
     state = {
         showToast: false,
         showLoading: false,
+        showCustom: false,
         toastTimer: null,
-        loadingTimer: null
+        loadingTimer: null,
+        customTimer: null
     };
 
     componentWillUnmount() {
@@ -26,7 +28,13 @@ export default class ToastDemo extends React.Component {
         return (
             <Page className="toast" title="Toast" spacing>
                 <Button onClick={this.showToast.bind(this)}>Toast</Button>
+                <Button onClick={this.showCustom.bind(this)}>Custom Toast</Button>
                 <Button onClick={this.showLoading.bind(this)}>Loading</Button>
+                <Toast
+                    show={this.state.showCustom}
+                    icon="waiting_circle"
+                    iconSize="large"
+                >waiting...</Toast>
                 <Toast show={this.state.showToast}>完成</Toast>
                 <Toast icon="loading" show={this.state.showLoading}>正在加载中...</Toast>
             </Page>
@@ -48,4 +56,12 @@ export default class ToastDemo extends React.Component {
             this.setState({showLoading: false});
         }, 2000);
     }
+
+    showCustom() {
+        this.setState({showCustom: true});
+
+        this.state.customTimer = setTimeout(()=> {
+            this.setState({showCustom: false});
+        }, 2000);
+    }
 };
diff --git a/package.json b/package.json
@@ -66,6 +66,6 @@
         "url-loader": "^0.5.7",
         "webpack": "^1.12.2",
         "webpack-dev-server": "^1.12.1",
-        "weui": "^0.4.0"
+        "weui": "^0.4.1"
     }
 }
diff --git a/src/components/searchbar/searchbar.js b/src/components/searchbar/searchbar.js
@@ -72,7 +72,12 @@ class SearchBar extends React.Component {
                             onChange={this.changeHandle.bind(this)}
                             value={this.state.text}
                         />
-                        <a className='weui_icon_clear' onMouseDown={this.clearHandle.bind(this)}/>
+                        {/*React will not trigger onMouseDown when not onClick presented*/}
+                        <a
+                            className='weui_icon_clear'
+                            onClick={e=>e/*issues #59*/}
+                            onMouseDown={this.clearHandle.bind(this)}
+                        />
                     </div>
                     <label
                         className='weui_search_text'

diff --git a/src/components/toast/toast.js b/src/components/toast/toast.js
@@ -13,22 +13,23 @@ import Icon from '../icon/index';
 class Toast extends React.Component {
     static propTypes = {
         icon: React.PropTypes.string,
+        iconSize: React.PropTypes.string,
         show: React.PropTypes.bool
     };
 
     static defaultProps = {
         icon: 'toast',
-        show: false
+        show: false,
     };
 
     render() {
-        const {icon, show, children} = this.props;
+        const {icon, show, children, iconSize} = this.props;
 
         return (
             <div className={icon === 'loading' ? 'weui_loading_toast' : ''} style={{display: show ? 'block' : 'none'}}>
                 <Mask transparent={true}/>
                 <div className="weui_toast">
-                    <Icon value={icon}/>
+                    <Icon value={icon} size={iconSize}/>
                     <p className="weui_toast_content">{children}</p>
                 </div>
             </div>

diff --git a/test/toast.js b/test/toast.js
@@ -12,51 +12,71 @@ import WeUI from '../src/index';
 const {Toast, Mask, Icon} = WeUI;
 
 describe('<Toast></Toast>', ()=> {
-    [undefined, null, false, true].map((show) => {
-        ['toast', 'loading'].map((icon) => {
-            describe(`<Toast icon="${icon}" show="${show}"></Toast>`, ()=> {
-                const body = '加载中...';
-                const wrapper = shallow(
-                    <Toast show={show} icon={icon}>
-                        {body}
-                    </Toast>
-                );
+    ['small', 'large'].map((iconSize) => {
+        [undefined, null, false, true].map((show) => {
+            ['toast', 'loading'].map((icon) => {
+                describe(`<Toast icon="${icon}" iconSize="${iconSize}" show="${show}"></Toast>`, ()=> {
+                    const body = '加载中...';
+                    const wrapper = shallow(
+                        <Toast show={show} icon={icon} iconSize={iconSize}>
+                            {body}
+                        </Toast>
+                    );
 
-                it(`should render <Toast></Toast> component`, () => {
-                    assert(wrapper.instance() instanceof Toast);
-                    assert(wrapper.find('.weui_toast'));
-                });
+                    it(`should render <Toast></Toast> component`, () => {
+                        assert(wrapper.instance() instanceof Toast);
+                        assert(wrapper.find('.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 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 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 a icon`, ()=> {
+                        const icon = wrapper.find(Icon).shallow();
+                        assert(icon.instance() instanceof Icon);
+                    });
 
-                it(`should have 'weui_loading_toast' class name when icon is 'loading'`, ()=> {
-                    if (icon === 'loading') {
-                        assert(wrapper.hasClass('weui_loading_toast'));
-                    }
-                });
+                    it(`should have a icon with appropriate size`, ()=> {
+                        const icon = wrapper.find(Icon).shallow();
+                        assert(icon.instance() instanceof Icon);
+                    });
+
+                    it(`should have a icon with appropriate size: ${iconSize}`, ()=> {
+                        const iconWrapper = wrapper.find(Icon).shallow();
+                        //exclude loading case
+                        if(icon != 'loading'){
+                            if (iconSize === 'large') {
+                                assert(iconWrapper.hasClass('weui_icon_msg'));
+                            }
+                            else {
+                                assert(!iconWrapper.hasClass('weui_icon_msg'));
+                            }
+                        }
+                    });
+
+                    it(`should have 'weui_loading_toast' class name when icon is 'loading'`, ()=> {
+                        if (icon === 'loading') {
+                            assert(wrapper.hasClass('weui_loading_toast'));
+                        }
+                    });
 
-                it(`should have body`, ()=> {
-                    const $body = wrapper.find('.weui_toast_content');
-                    assert($body.text() === body);
+                    it(`should have body`, ()=> {
+                        const $body = wrapper.find('.weui_toast_content');
+                        assert($body.text() === body);
+                    });
                 });
             });
         });