@arcblock/ux 1.17.15 → 1.17.18

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/Blocklet/blocklet.js

@@ -36,7 +36,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 const Div = _styledComponents.default.div.withConfig({
   displayName: "blocklet__Div",
   componentId: "sc-atxvkd-0"
-})(["&.arcblock-blocklet{padding:16px 16px 0 16px;}.arcblock-blocklet__content{cursor:pointer;display:flex;", "{align-items:center;}}.arcblock-blocklet__cover{width:64px;height:64px;margin-right:16px;overflow:hidden;border-radius:12px;transform:translateZ(0);", "{width:80px;height:80px;margin-bottom:12px;}}.arcblock-blocklet__button--hover{&:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;transition:opacity 0.3s;}&:hover::before{opacity:0;}&::after{content:'';position:absolute;height:100%;width:100%;background-color:", ";transform:scale(0.1);opacity:0;z-index:-1;transition:transform 0.3s,opacity 0.3s,background-color 0.3s;}&:hover::after{opacity:1;transform-origin:center;transform:scale(1);}}&:not(.Mui-disabled){background-color:transparent !important;color:", ";}&:not(.Mui-disabled){&:hover{color:", ";}}}.arcblock-blocklet__info{flex:1;overflow:hidden;border-bottom:1px solid ", ";padding-bottom:24px;}.arcblock-blocklet__text{height:57px;overflow:hidden;}.arcblock-blocklet__title{margin:0;font-size:16px;font-weight:500;line-height:19px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;max-height:38px;word-break:break-all;}.arcblock-blocklet__describe{margin-top:2px;color:", ";font-size:14px;font-weight:500;line-height:17px;max-height:17px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__version{color:", ";font-size:12px;}"], props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.up('sm'), props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white, props => props.theme.palette.divider, props => props.theme.palette.grey[600], props => props.theme.palette.grey[600]);
+})(["&.arcblock-blocklet{padding:16px 16px 0 16px;}.arcblock-blocklet__content{cursor:pointer;display:flex;", "{align-items:center;}}.arcblock-blocklet__cover{width:64px;height:64px;margin-right:16px;overflow:hidden;border-radius:12px;transform:translateZ(0);", "{width:80px;height:80px;margin-bottom:12px;}}.arcblock-blocklet__button--hover{&:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';position:absolute;height:100%;width:100%;left:0;top:0;transition:opacity 0.3s;}&:hover::before{opacity:0;}&::after{content:'';position:absolute;height:100%;width:100%;background-color:", ";transform:scale(0.1);opacity:0;z-index:-1;transition:transform 0.3s,opacity 0.3s,background-color 0.3s;}&:hover::after{opacity:1;transform-origin:center;transform:scale(1);}}&:not(.Mui-disabled){background-color:transparent !important;color:", ";}&:not(.Mui-disabled){&:hover{color:", ";}}}.arcblock-blocklet__info{flex:1;overflow:hidden;border-bottom:1px solid ", ";padding-bottom:24px;}.arcblock-blocklet__text{height:57px;overflow:hidden;}.arcblock-blocklet__title{margin:0;font-size:16px;font-weight:500;line-height:19px;max-height:19px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__describe{margin-top:4px;color:", ";font-size:14px;font-weight:500;line-height:17px;max-height:34px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;word-break:break-all;}.arcblock-blocklet__version{color:", ";font-size:12px;}"], props => props.theme.breakpoints.up('sm'), props => props.theme.breakpoints.up('sm'), props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white, props => props.theme.palette.divider, props => props.theme.palette.grey[600], props => props.theme.palette.grey[600]);
 
 function BlockletStore(_ref) {
   let {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "1.17.15",
+  "version": "1.17.18",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -53,10 +53,10 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "e51d6944347d5f6df5b43cb31104683ad290926f",
+  "gitHead": "d5c90d25f6b2e2313188645b82e997cf53ce274f",
   "dependencies": {
-    "@arcblock/icons": "^1.17.15",
-    "@arcblock/react-hooks": "^1.17.15",
+    "@arcblock/icons": "^1.17.18",
+    "@arcblock/react-hooks": "^1.17.18",
     "@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/Blocklet/blocklet.js

@@ -95,24 +95,24 @@ const Div = styled.div`
     font-size: 16px;
     font-weight: 500;
     line-height: 19px;
+    max-height: 19px;
     overflow: hidden;
     text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    max-height: 38px;
-    word-break: break-all;
+    white-space: nowrap;
   }
   .arcblock-blocklet__describe {
-    margin-top: 2px;
+    margin-top: 4px;
     color: ${props => props.theme.palette.grey[600]};
     font-size: 14px;
     font-weight: 500;
     line-height: 17px;
-    max-height: 17px;
+    max-height: 34px;
     overflow: hidden;
     text-overflow: ellipsis;
-    white-space: nowrap;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    word-break: break-all;
   }
   .arcblock-blocklet__version {
     color: ${props => props.theme.palette.grey[600]};