From 9df3c19fe80d15870b4ba7aa397089841708530a Mon Sep 17 00:00:00 2001
From: n7best <n7best@gmail.com>
Date: Sun, 10 Apr 2016 22:43:29 -0400
Subject: [PATCH] #58, patched searchbar, add iconSize for toast #62, change
 weui dependency to 0.4.1 (#63)

---
 docs/toast.md                         |  1 +
 example/pages/toast/index.js          | 18 ++++-
 package.json                          |  2 +-
 src/components/searchbar/searchbar.js |  7 +-
 src/components/toast/toast.js         |  7 +-
 test/toast.js                         | 98 ++++++++++++++++-----------
 6 files changed, 88 insertions(+), 45 deletions(-)

diff --git a/docs/toast.md b/docs/toast.md
index 09667cf..08b6be7 100644
--- 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
index fe48ef2..6334f83 100644
--- 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);
+    }
 };
\ No newline at end of file
diff --git a/package.json b/package.json
index 88dc383..ce019e2 100644
--- 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
index 81ec426..df1ca1e 100644
--- 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
index e7c526c..91e3489 100644
--- 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
index e572887..10b4376 100644
--- 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);
+                    });
                 });
             });
         });