@arcblock/ux 1.17.10 → 1.17.13

package/src/AnimationWaiter/index.js

@@ -0,0 +1,227 @@
+import React, { useState, useEffect, useRef } from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import Lottie from 'react-lottie-player';
+import lottieJson from './default-animation.json';
+
+/**
+ * 用于长时间等待的用的动画组件
+ * 动画会随着时间的变化而逐步加快播放速度，好适应用户的等待心理
+ * @param {Object} animationData lottie json 动画数据
+ * @param {Number} size 动画的尺寸，单位px
+ * @param {String｜Array} message 动画下方的文字；数组情况下会在一定时间切换文案
+ * @param {Number} messageDuration 动画下方的文字为数组时，每个文案的持续时间；默认5000ms
+ * @param {Array} tips 底部的提示元素
+ * @param {Number} tipsDuration 底部提示的切换时间，单位毫秒，默认3000ms
+ * @param {Number} speed 动画默认的播放速度
+ * @param {Number} maybeDuration 整个动画大概的持续时间，单位毫秒，用于计算增量下的动画速度，默认两分钟(120000ms)
+ * @param {Number} increaseSpeed 在 maybeDuration 时间下增加的速度，默认为0（不增加速度）
+ * @returns element
+ */
+export default function AnimationWaiter({
+  animationData,
+  size,
+  message,
+  messageDuration,
+  tips,
+  tipsDuration,
+  maybeDuration,
+  speed,
+  increaseSpeed,
+  ...rest
+}) {
+  const [tipsId, setTipsId] = useState(0);
+  const [currentSpeed, setCurrentSpeed] = useState(speed);
+  const [desc, setDesc] = useState('');
+  // 动画的开始时间
+  const startTime = useRef(new Date().getTime());
+
+  // 省略号
+  useEffect(() => {
+    if (!message) {
+      return;
+    }
+
+    let timer1;
+    let msgId = 0;
+
+    if (Array.isArray(message)) {
+      setDesc(message[msgId]);
+      timer1 = setInterval(() => {
+        msgId++;
+        if (msgId >= message.length) {
+          msgId = 0;
+        }
+        setDesc(message[msgId]);
+      }, messageDuration);
+    } else {
+      setDesc(message);
+    }
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      clearInterval(timer1);
+    };
+  }, [message, messageDuration]);
+
+  // tips
+  useEffect(() => {
+    if (!tips.length) {
+      return () => {};
+    }
+
+    const timer = setTimeout(() => {
+      let nextId = tipsId + 1;
+
+      if (nextId >= tips.length) {
+        nextId = 0;
+      }
+
+      setTipsId(nextId);
+    }, tipsDuration);
+
+    return () => clearTimeout(timer);
+  }, [tips, tipsDuration, tipsId]);
+
+  // 动画speed
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      const diffTime = new Date().getTime() - startTime.current;
+
+      let percentage = diffTime / maybeDuration;
+      if (percentage > 1) {
+        percentage = 1;
+      }
+
+      const newSpeed = speed + increaseSpeed * percentage;
+
+      setCurrentSpeed(newSpeed);
+    }, 1000);
+
+    return () => clearTimeout(timer);
+  }, [currentSpeed]);
+
+  return (
+    <Container {...rest}>
+      <Lottie
+        loop
+        animationData={animationData || lottieJson}
+        play
+        speed={currentSpeed}
+        style={{
+          width: size,
+          height: size,
+        }}
+      />
+      {message && (
+        <div className="waiter-message">
+          {desc}
+          <span className="waiter-loading" />
+        </div>
+      )}
+
+      {tips.length ? (
+        <div className="waiter-tips-container">
+          {tips.map((e, index) => {
+            return (
+              <div
+                className={`waiter-tips-block ${tipsId === index ? 'show-tips' : ''}`}
+                // eslint-disable-next-line react/no-array-index-key
+                key={index}>
+                {e}
+              </div>
+            );
+          })}
+        </div>
+      ) : (
+        ''
+      )}
+    </Container>
+  );
+}
+
+AnimationWaiter.propTypes = {
+  animationData: PropTypes.any,
+  size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  message: PropTypes.any,
+  messageDuration: PropTypes.number,
+  tips: PropTypes.array,
+  tipsDuration: PropTypes.number,
+  speed: PropTypes.number,
+  maybeDuration: PropTypes.number,
+  increaseSpeed: PropTypes.number,
+};
+
+AnimationWaiter.defaultProps = {
+  animationData: null,
+  size: '',
+  message: '',
+  messageDuration: 5000,
+  tips: [],
+  tipsDuration: 5000,
+  speed: 1,
+  maybeDuration: 120000,
+  increaseSpeed: 0,
+};
+
+const Container = styled.div`
+  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: '';
+    }
+  }
+`;

package/src/index.js

@@ -1,6 +1,7 @@
 import ActionButton from './ActionButton';
 import ActivityIndicator from './ActivityIndicator';
 import Alert from './Alert';
+import AnimationWaiter from './AnimationWaiter';
 import Async from './Async';
 import Badge from './Badge';
 import Button from './Button';
@@ -33,6 +34,7 @@ export {
   ActionButton,
   ActivityIndicator,
   Alert,
+  AnimationWaiter,
   Async,
   Badge,
   Button,