#14 add loading icon & loading toast

weui · Dec 22, 2015 · 3a4c8b0 · 3a4c8b0
1 parent 3a158e0
commit 3a4c8b0
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 21 deletions.
diff --git a/example/bundle.js b/example/bundle.js
diff --git a/example/pages/progress/index.js b/example/pages/progress/index.js
@@ -34,11 +34,11 @@ export default class ProgressDemo extends React.Component {
             return;
         }
         this.setState({value: ++this.state.value % 100});
-        this.state.timer = setTimeout(this.upload.bind(this), 20);
+        this.state.toastTimer = setTimeout(this.upload.bind(this), 20);
     }
 
     componentWillUnmount () {
-        this.state.timer && clearInterval(this.state.timer);
+        this.state.toastTimer && clearInterval(this.state.toastTimer);
     }
 
     render() {

diff --git a/example/pages/toast/index.js b/example/pages/toast/index.js
@@ -11,28 +11,41 @@ import Page from '../../component/page';
 export default class ToastDemo extends React.Component {
 
     state = {
-        show: false,
-        timer: null
+        showToast: false,
+        showLoading: false,
+        toastTimer: null,
+        loadingTimer: null
     };
 
-    handleClick() {
-        this.setState({show: true});
-
-        this.state.timer = setTimeout(()=> {
-            this.setState({show: false});
-        }, 2000);
-    }
-
     componentWillUnmount() {
-        this.state.timer && clearTimeout(this.state.timer);
+        this.state.toastTimer && clearTimeout(this.state.toastTimer);
+        this.state.loadingTimer && clearTimeout(this.state.loadingTimer);
     }
 
     render() {
         return (
             <Page className="toast" title="Toast" spacing>
-                <Button onClick={this.handleClick.bind(this)}>Toast</Button>
-                <Toast show={this.state.show}>完成</Toast>
+                <Button onClick={this.showToast.bind(this)}>Toast</Button>
+                <Button onClick={this.showLoading.bind(this)}>Loading</Button>
+                <Toast show={this.state.showToast}>完成</Toast>
+                <Toast icon="loading" show={this.state.showLoading}>正在加载中...</Toast>
             </Page>
         );
     }
+
+    showToast() {
+        this.setState({showToast: true});
+
+        this.state.toastTimer = setTimeout(()=> {
+            this.setState({showToast: false});
+        }, 2000);
+    }
+
+    showLoading() {
+        this.setState({showLoading: true});
+
+        this.state.loadingTimer = setTimeout(()=> {
+            this.setState({showLoading: false});
+        }, 2000);
+    }
 };
diff --git a/src/components/icon/icon.js b/src/components/icon/icon.js
@@ -3,7 +3,6 @@
  */
 
 
-
 import React from 'react';
 import classNames from 'classnames';
 
@@ -26,9 +25,24 @@ class Icon extends React.Component {
             [className]: className
         });
 
-        return (
-            <i {...others} className={cls}/>
-        );
+        if (value === 'loading') {
+            return (
+                <div className="weui_loading">
+                    {
+                        [...Array(12)].map((x, i) => {
+                            return (
+                                <div key={i} className={`weui_loading_leaf weui_loading_leaf_${i}`}></div>
+                            );
+                        })
+                    }
+                </div>
+            );
+        }
+        else {
+            return (
+                <i {...others} className={cls}/>
+            );
+        }
     }
 }
 

diff --git a/src/components/toast/toast.js b/src/components/toast/toast.js
@@ -25,7 +25,7 @@ class Toast extends React.Component {
         const {icon, show, children} = this.props;
 
         return (
-            <div className="weui_toast" style={{display: show ? 'block' : 'none'}}>
+            <div className={icon === 'loading' ? 'weui_loading_toast' : ''} style={{display: show ? 'block' : 'none'}}>
                 <Mask transparent={true}/>
                 <div className="weui_toast">
                     <Icon value={icon}/>