icon add loading

chenshuai2144 · chenshuai2144 · commit e7a6ab579e1f · 2019-10-06T16:45:09.000+08:00
diff --git a/packages/umi-plugin-ui/src/bubble/Bubble.jsx b/packages/umi-plugin-ui/src/bubble/Bubble.jsx
@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import Dragger from './Dragger';
 import Hide from './Hide';
 import logoDecorator from './Logo';
+import IconLoading from './IconLoading';
 import * as ENUM from './enum';
 import Close from './Close';
 
@@ -62,6 +63,14 @@ class Bubble extends React.Component {
     );
   };
 
+  /**
+   * 初始化dom
+   */
+  componentDidMount() {
+    // eslint-disable-next-line
+    this.nodeDom = ReactDOM.findDOMNode(this);
+  }
+
   showBubble = e => {
     // 显示 bubble 时取消页面的编辑模式
     window.postMessage(
@@ -71,7 +80,6 @@ class Bubble extends React.Component {
       '*',
     );
 
-    const node = ReactDOM.findDOMNode(this);
     const { toggleMiniOpen } = this.props;
     if (this.state.hide) {
       // isHide
@@ -83,7 +91,7 @@ class Bubble extends React.Component {
           window.localStorage.removeItem(ENUM.STORE_BUBBLE_HIDE);
         },
       );
-    } else if (e.target === node) {
+    } else if (e.target === this.nodeDom) {
       // not hide, show iframe
       toggleMiniOpen();
     }
@@ -96,11 +104,10 @@ class Bubble extends React.Component {
   };
 
   render() {
-    const { isBigfish, open, children, message } = this.props;
+    const { isBigfish, open, loading, children, message } = this.props;
     const { hide } = this.state;
 
     const Logo = logoDecorator({ isBigfish });
-
     return (
       <Dragger
         open={open}
@@ -111,6 +118,7 @@ class Bubble extends React.Component {
         onDrag={this.handleDrag}
       >
         <BubbleWrapper open={open}>
+          {loading && <IconLoading />}
           <Logo open={open} />
           <CloseComponent open={open} />
         </BubbleWrapper>
diff --git a/packages/umi-plugin-ui/src/bubble/IconLoading.jsx b/packages/umi-plugin-ui/src/bubble/IconLoading.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+const bounceTransform = keyframes`{
+    0%, 100% { 
+        transform: scale(0.4);
+      } 50% { 
+        transform: scale(1.0);
+      }
+}`;
+
+const Bounce = styled.div`
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: #1890ff;
+  opacity: 0.6;
+  position: absolute;
+  top: 0;
+  left: 0;
+  animation: ${bounceTransform} 2s infinite ease-in-out;
+`;
+
+const BounceTwo = styled.div`
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background-color: #1890ff;
+  opacity: 0.6;
+  position: absolute;
+  top: 0;
+  left: 0;
+  animation-delay: -1s;
+  animation: ${bounceTransform} 2s infinite ease-in-out;
+`;
+
+const Spinning = styled.div`
+  width: 60px;
+  height: 60px;
+  position: absolute;
+  top: 0;
+  left: 0;
+`;
+
+export default () => (
+  <Spinning>
+    <Bounce />
+    <BounceTwo />
+  </Spinning>
+);
diff --git a/packages/umi-plugin-ui/src/bubble/index.jsx b/packages/umi-plugin-ui/src/bubble/index.jsx
@@ -27,6 +27,7 @@ class App extends React.Component {
       open: undefined,
       connected: false,
       uiLoaded: false,
+      loading: false,
       currentProject: props.currentProject,
     };
     window.addEventListener('message', this.handleMessage, false);
@@ -63,6 +64,13 @@ class App extends React.Component {
           });
           break;
         }
+        // 切换loading
+        case 'umi.ui.toggleIconLoading': {
+          this.setState(({ loading }) => ({
+            loading: !loading,
+          }));
+          break;
+        }
         default:
         // no thing
       }
@@ -142,7 +150,7 @@ class App extends React.Component {
   };
 
   render() {
-    const { open, connected, uiLoaded } = this.state;
+    const { open, connected, uiLoaded, loading } = this.state;
     const { isBigfish = false } = this.props;
     const miniUrl = this.getMiniUrl();
     // get locale when first render
@@ -157,6 +165,7 @@ class App extends React.Component {
         // TODO: loading when currentProject not loaded
         toggleMiniOpen={this.toggleMiniOpen}
         open={open}
+        loading={loading}
         message={message}
       >
         {open !== undefined && (
