Alert Loading fix

docoder · Jan 9, 2020 · 2aaf322 · 2aaf322
1 parent b009836
commit 2aaf322
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/example/src/containers/Loadings/index.js b/example/src/containers/Loadings/index.js
@@ -20,9 +20,8 @@ export default function Loadings () {
     const [isAlertLoading, setAlertLoading] = useState(false);
     return (
             <LoadingsBody>
-                <StyledButton title="Alert Loading" onClick={()=>{setAlertLoading(true)}} />
-                <StyledButton title="Close Alert Loading" onClick={()=>{setAlertLoading(false)}} />
-                <StyledButton title="Overall Loading" onClick={()=>{setOverallLoading(true)}} />
+                <StyledButton title="Toggle Alert Loading" onClick={()=>{setAlertLoading(!isAlertLoading)}} />
+                <StyledButton title="Toggle Overall Loading" onClick={()=>{setOverallLoading(!isOverallLoading)}} />
                 <Loading show={isOverallLoading} type="overall" timeout={() => {setOverallLoading(false)}} />
                 <Loading show={isAlertLoading} type="alert" timeout={() => {setAlertLoading(false)}} />
             </LoadingsBody>

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ant-colony-ui",
-  "version": "1.7.18",
+  "version": "1.7.19",
   "description": "Ant Colony UI Toolkit based on Ant Design and React",
   "author": "docoder",
   "license": "MIT",

diff --git a/src/components/UI/Loading/index.js b/src/components/UI/Loading/index.js
@@ -51,14 +51,18 @@ export default class Loading extends React.Component {
             this.timer = null
         }
     }
+    componentDidUpdate(preProps) {
+        if (preProps.show !== this.props.show && this.props.type==='alert') {
+            if (this.props.show) {
+                message.loading(this.props.message, 30, this.props.timeout)
+            }else {
+                message.destroy()
+            }
+        }
+    }
     render() {
         switch(this.props.type) {
             case 'alert':
-            this.props.show 
-            ? 
-            message.loading(this.props.message, 30, this.props.timeout)
-            :
-            message.destroy()
             return null;
             case 'overall':
             return(