@arcblock/ux 1.17.16 → 1.17.19

package/lib/AnimationWaiter/index.js

@@ -59,39 +59,37 @@ function AnimationWaiter(_ref) {
 
   const [tipsId, setTipsId] = (0, _react.useState)(0);
   const [currentSpeed, setCurrentSpeed] = (0, _react.useState)(speed);
-  const [desc, setDesc] = (0, _react.useState)(''); // 动画的开始时间
+  const [messageId, setMessageId] = (0, _react.useState)(0); // 动画的开始时间
 
   const startTime = (0, _react.useRef)(new Date().getTime());
+
+  if (!Array.isArray(message)) {
+    // eslint-disable-next-line no-param-reassign
+    message = [message];
+  }
+
   (0, _react.useEffect)(() => {
     if (!message) {
       return;
     }
 
-    let timer1;
-    let msgId = 0;
-
-    if (Array.isArray(message)) {
-      setDesc(message[msgId]);
-      timer1 = setInterval(() => {
-        msgId++;
+    let msgIndex = 0;
+    const timer = setInterval(() => {
+      msgIndex++;
 
-        if (msgId >= message.length) {
-          if (messageLoop) {
-            msgId = 0;
-          } else {
-            msgId = message.length - 1;
-          }
+      if (msgIndex >= message.length) {
+        if (messageLoop) {
+          msgIndex = 0;
+        } else {
+          msgIndex = message.length - 1;
         }
+      }
 
-        setDesc(message[msgId]);
-      }, messageDuration);
-    } else {
-      setDesc(message);
-    } // eslint-disable-next-line consistent-return
-
+      setMessageId(msgIndex);
+    }, messageDuration); // eslint-disable-next-line consistent-return
 
     return () => {
-      clearInterval(timer1);
+      clearInterval(timer);
     };
   }, [message, messageDuration]); // tips
 
@@ -126,6 +124,19 @@ function AnimationWaiter(_ref) {
     }, 1000);
     return () => clearTimeout(timer);
   }, [currentSpeed]);
+
+  const getMsgClassName = index => {
+    let className = 'message-before';
+
+    if (messageId === index) {
+      className = 'show-message';
+    } else if (messageId < index) {
+      className = 'message-after';
+    }
+
+    return className;
+  };
+
   return /*#__PURE__*/_react.default.createElement(Container, rest, /*#__PURE__*/_react.default.createElement(_reactLottiePlayer.default, {
     loop: true,
     animationData: animationData || _defaultAnimation.default,
@@ -137,8 +148,16 @@ function AnimationWaiter(_ref) {
     }
   }), message && /*#__PURE__*/_react.default.createElement("div", {
     className: "waiter-message"
-  }, desc, /*#__PURE__*/_react.default.createElement("span", {
-    className: "waiter-loading"
+  }, message.map((text, index) => {
+    const className = getMsgClassName(index);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      // eslint-disable-next-line react/no-array-index-key
+      key: index
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "message-block ".concat(className)
+    }, text), /*#__PURE__*/_react.default.createElement("span", {
+      className: "placeholder-message ".concat(className)
+    }, text));
   })), tips.length ? /*#__PURE__*/_react.default.createElement("div", {
     className: "waiter-tips-container"
   }, tips.map((e, index) => {
@@ -178,4 +197,4 @@ AnimationWaiter.defaultProps = {
 const Container = _styledComponents.default.div.withConfig({
   displayName: "AnimationWaiter__Container",
   componentId: "sc-1qcr25l-0"
-})(["display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;height:100%;.waiter-message{font-weight:700;font-size:18px;line-height:22px;}.waiter-tips-container{position:relative;margin-top:auto;width:100%;.waiter-tips-block{position:absolute;bottom:0;left:0;width:100%;opacity:0;pointer-events:none;z-index:1;transform:translate(-20px,0);transition:all ease 0.4s;&.show-tips{opacity:1;pointer-events:auto;z-index:2;transform:translate(0,0);}}}.waiter-loading::after{display:inline-block;animation:dotty steps(1,end) 2s infinite;content:'';}@keyframes dotty{0%{content:'';}25%{content:'.';}50%{content:'..';}75%{content:'...';}100%{content:'';}}"]);
+})(["display:flex;justify-content:center;align-items:center;flex-direction:column;width:100%;height:100%;.waiter-message{position:relative;width:100%;font-weight:700;font-size:18px;line-height:22px;text-align:center;overflow:hidden;.message-block{position:absolute;left:0;width:100%;opacity:0;transition:all ease 0.3s;user-select:none;&.message-before{transform:translate(-20px,0);}&.message-after{transform:translate(20px,0);}&.show-message{transform:translate(0,0);opacity:1;user-select:text;z-index:2;}}.placeholder-message{user-select:none;display:none;opacity:0;&.show-message{display:block;}}}.waiter-tips-container{position:relative;margin-top:auto;width:100%;.waiter-tips-block{position:absolute;bottom:0;left:0;width:100%;opacity:0;pointer-events:none;z-index:1;transform:translate(-20px,0);transition:all ease 0.4s;&.show-tips{opacity:1;pointer-events:auto;z-index:2;transform:translate(0,0);}}}"]);

package/lib/Header/header.js

@@ -94,7 +94,7 @@ Header.defaultProps = {
 const Root = _styledComponents.default.div.withConfig({
   displayName: "header__Root",
   componentId: "sc-15qnwg1-0"
-})(["position:relative;z-index:", ";font-size:14px;background:", ";.header-container{display:flex;align-items:center;height:64px;padding:8px 16px;}.header-logo{display:inline-flex;justify-content:center;position:relative;height:40px;margin-right:16px;img,svg{width:auto;height:100%;}> a{height:100%;line-height:1;}> a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.header-brand{display:flex;flex-direction:column;flex-shrink:0;margin-right:16px;.header-brand-title{display:flex;align-items:center;h2{font-size:16px;}.header-brand-addon{margin-left:8px;}}.header-brand-desc{color:#9397a1;}}.header-addons{display:flex;align-items:center;}", "{.header-brand{margin-right:12px;.header-brand-title{h2{font-size:14px;}}}}", "{.header-container{height:56px;}.header-menu{display:inline-block;}.header-logo{height:32px;}.header-brand{display:none;}}"], props => props.$theme.zIndex.drawer + 1, props => props.$theme.palette.common.white, props => props.$theme.breakpoints.down('md'), props => props.$theme.breakpoints.down('sm'));
+})(["position:relative;z-index:", ";font-size:14px;background:", ";.header-container{display:flex;align-items:center;height:64px;padding:8px 0;}.header-logo{display:inline-flex;justify-content:center;position:relative;height:40px;margin-right:16px;img,svg{width:auto;height:100%;}> a{height:100%;line-height:1;}> a::before{position:absolute;top:0;right:0;bottom:0;left:0;background-color:transparent;content:'';}}.header-brand{display:flex;flex-direction:column;flex-shrink:0;margin-right:16px;.header-brand-title{display:flex;align-items:center;h2{font-size:16px;}.header-brand-addon{margin-left:8px;}}.header-brand-desc{color:#9397a1;}}.header-addons{display:flex;align-items:center;}", "{.header-brand{margin-right:12px;.header-brand-title{h2{font-size:14px;}}}}", "{.header-container{height:56px;}.header-menu{display:inline-block;}.header-logo{height:32px;}.header-brand{display:none;}}"], props => props.$theme.zIndex.drawer + 1, props => props.$theme.palette.common.white, props => props.$theme.breakpoints.down('md'), props => props.$theme.breakpoints.down('sm'));
 
 var _default = Header;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "1.17.16",
+  "version": "1.17.19",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -53,10 +53,10 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "acab741ed856df9b4def509821a1ab6217350625",
+  "gitHead": "fc295196e19ee7355a7dacab7f85fd9694cd2eb9",
   "dependencies": {
-    "@arcblock/icons": "^1.17.16",
-    "@arcblock/react-hooks": "^1.17.16",
+    "@arcblock/icons": "^1.17.19",
+    "@arcblock/react-hooks": "^1.17.19",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/lato": "^4.5.3",
     "@material-ui/core": "^4.12.3",

package/src/AnimationWaiter/index.js

@@ -34,38 +34,37 @@ export default function AnimationWaiter({
 }) {
   const [tipsId, setTipsId] = useState(0);
   const [currentSpeed, setCurrentSpeed] = useState(speed);
-  const [desc, setDesc] = useState('');
+  const [messageId, setMessageId] = useState(0);
   // 动画的开始时间
   const startTime = useRef(new Date().getTime());
 
+  if (!Array.isArray(message)) {
+    // eslint-disable-next-line no-param-reassign
+    message = [message];
+  }
+
   useEffect(() => {
     if (!message) {
       return;
     }
 
-    let timer1;
-    let msgId = 0;
-
-    if (Array.isArray(message)) {
-      setDesc(message[msgId]);
-      timer1 = setInterval(() => {
-        msgId++;
-        if (msgId >= message.length) {
-          if (messageLoop) {
-            msgId = 0;
-          } else {
-            msgId = message.length - 1;
-          }
+    let msgIndex = 0;
+
+    const timer = setInterval(() => {
+      msgIndex++;
+      if (msgIndex >= message.length) {
+        if (messageLoop) {
+          msgIndex = 0;
+        } else {
+          msgIndex = message.length - 1;
         }
-        setDesc(message[msgId]);
-      }, messageDuration);
-    } else {
-      setDesc(message);
-    }
+      }
+      setMessageId(msgIndex);
+    }, messageDuration);
 
     // eslint-disable-next-line consistent-return
     return () => {
-      clearInterval(timer1);
+      clearInterval(timer);
     };
   }, [message, messageDuration]);
 
@@ -106,6 +105,16 @@ export default function AnimationWaiter({
     return () => clearTimeout(timer);
   }, [currentSpeed]);
 
+  const getMsgClassName = index => {
+    let className = 'message-before';
+    if (messageId === index) {
+      className = 'show-message';
+    } else if (messageId < index) {
+      className = 'message-after';
+    }
+    return className;
+  };
+
   return (
     <Container {...rest}>
       <Lottie
@@ -120,8 +129,17 @@ export default function AnimationWaiter({
       />
       {message && (
         <div className="waiter-message">
-          {desc}
-          <span className="waiter-loading" />
+          {message.map((text, index) => {
+            const className = getMsgClassName(index);
+            return (
+              <div
+                // eslint-disable-next-line react/no-array-index-key
+                key={index}>
+                <span className={`message-block ${className}`}>{text}</span>
+                <span className={`placeholder-message ${className}`}>{text}</span>
+              </div>
+            );
+          })}
         </div>
       )}
 
@@ -180,9 +198,42 @@ const Container = styled.div`
   height: 100%;
 
   .waiter-message {
+    position: relative;
+    width: 100%;
     font-weight: 700;
     font-size: 18px;
     line-height: 22px;
+    text-align: center;
+    overflow: hidden;
+    .message-block {
+      position: absolute;
+      left: 0;
+      width: 100%;
+      opacity: 0;
+      transition: all ease 0.3s;
+      user-select: none;
+      &.message-before {
+        transform: translate(-20px, 0);
+      }
+      &.message-after {
+        transform: translate(20px, 0);
+      }
+      &.show-message {
+        transform: translate(0, 0);
+        opacity: 1;
+        user-select: text;
+        z-index: 2;
+      }
+    }
+
+    .placeholder-message {
+      user-select: none;
+      display: none;
+      opacity: 0;
+      &.show-message {
+        display: block;
+      }
+    }
   }
 
   .waiter-tips-container {
@@ -207,28 +258,4 @@ const Container = styled.div`
       }
     }
   }
-
-  .waiter-loading::after {
-    display: inline-block;
-    animation: dotty steps(1, end) 2s infinite;
-    content: '';
-  }
-
-  @keyframes dotty {
-    0% {
-      content: '';
-    }
-    25% {
-      content: '.';
-    }
-    50% {
-      content: '..';
-    }
-    75% {
-      content: '...';
-    }
-    100% {
-      content: '';
-    }
-  }
 `;

package/src/Header/header.js

@@ -78,7 +78,7 @@ const Root = styled.div`
     display: flex;
     align-items: center;
     height: 64px;
-    padding: 8px 16px;
+    padding: 8px 0;
   }
   .header-logo {
     display: inline-flex;