@arcblock/ux 1.17.10 → 1.17.13

package/lib/AnimationWaiter/index.js

@@ -0,0 +1,174 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = AnimationWaiter;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactLottiePlayer = _interopRequireDefault(require("react-lottie-player"));
+
+var _defaultAnimation = _interopRequireDefault(require("./default-animation.json"));
+
+const _excluded = ["animationData", "size", "message", "messageDuration", "tips", "tipsDuration", "maybeDuration", "speed", "increaseSpeed"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+/**
+ * 用于长时间等待的用的动画组件
+ * 动画会随着时间的变化而逐步加快播放速度，好适应用户的等待心理
+ * @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
+ */
+function AnimationWaiter(_ref) {
+  let {
+    animationData,
+    size,
+    message,
+    messageDuration,
+    tips,
+    tipsDuration,
+    maybeDuration,
+    speed,
+    increaseSpeed
+  } = _ref,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  const [tipsId, setTipsId] = (0, _react.useState)(0);
+  const [currentSpeed, setCurrentSpeed] = (0, _react.useState)(speed);
+  const [desc, setDesc] = (0, _react.useState)(''); // 动画的开始时间
+
+  const startTime = (0, _react.useRef)(new Date().getTime()); // 省略号
+
+  (0, _react.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
+
+  (0, _react.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
+
+  (0, _react.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 /*#__PURE__*/_react.default.createElement(Container, rest, /*#__PURE__*/_react.default.createElement(_reactLottiePlayer.default, {
+    loop: true,
+    animationData: animationData || _defaultAnimation.default,
+    play: true,
+    speed: currentSpeed,
+    style: {
+      width: size,
+      height: size
+    }
+  }), message && /*#__PURE__*/_react.default.createElement("div", {
+    className: "waiter-message"
+  }, desc, /*#__PURE__*/_react.default.createElement("span", {
+    className: "waiter-loading"
+  })), tips.length ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "waiter-tips-container"
+  }, tips.map((e, index) => {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "waiter-tips-block ".concat(tipsId === index ? 'show-tips' : '') // eslint-disable-next-line react/no-array-index-key
+      ,
+      key: index
+    }, e);
+  })) : '');
+}
+
+AnimationWaiter.propTypes = {
+  animationData: _propTypes.default.any,
+  size: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  message: _propTypes.default.any,
+  messageDuration: _propTypes.default.number,
+  tips: _propTypes.default.array,
+  tipsDuration: _propTypes.default.number,
+  speed: _propTypes.default.number,
+  maybeDuration: _propTypes.default.number,
+  increaseSpeed: _propTypes.default.number
+};
+AnimationWaiter.defaultProps = {
+  animationData: null,
+  size: '',
+  message: '',
+  messageDuration: 5000,
+  tips: [],
+  tipsDuration: 5000,
+  speed: 1,
+  maybeDuration: 120000,
+  increaseSpeed: 0
+};
+
+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:'';}}"]);

package/lib/index.js

@@ -21,6 +21,12 @@ Object.defineProperty(exports, "Alert", {
     return _Alert.default;
   }
 });
+Object.defineProperty(exports, "AnimationWaiter", {
+  enumerable: true,
+  get: function get() {
+    return _AnimationWaiter.default;
+  }
+});
 Object.defineProperty(exports, "Async", {
   enumerable: true,
   get: function get() {
@@ -190,6 +196,8 @@ var _ActivityIndicator = _interopRequireDefault(require("./ActivityIndicator"));
 
 var _Alert = _interopRequireDefault(require("./Alert"));
 
+var _AnimationWaiter = _interopRequireDefault(require("./AnimationWaiter"));
+
 var _Async = _interopRequireDefault(require("./Async"));
 
 var _Badge = _interopRequireDefault(require("./Badge"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@arcblock/ux",
-  "version": "1.17.10",
+  "version": "1.17.13",
   "description": "Common used react components for arcblock products",
   "keywords": [
     "react",
@@ -53,16 +53,16 @@
     "react": ">=16.12.0",
     "react-ga": "^2.7.0"
   },
-  "gitHead": "5be9cb0f8aa802a2c7d198f3258f74e4bcc65c64",
+  "gitHead": "da903274c188ed5dbb9e318b1495af6faa5ce668",
   "dependencies": {
-    "@arcblock/icons": "^1.17.10",
-    "@arcblock/react-hooks": "^1.17.10",
+    "@arcblock/icons": "^1.17.13",
+    "@arcblock/react-hooks": "^1.17.13",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@fontsource/lato": "^4.5.3",
     "@material-ui/core": "^4.12.3",
     "@material-ui/icons": "4.11.2",
     "@solana/qr-code-styling": "^1.6.0-beta.0",
-    "axios": "^0.26.1",
+    "axios": "^0.21.2",
     "base64-url": "^2.3.3",
     "copy-to-clipboard": "^3.2.0",
     "core-js": "^3.6.4",
@@ -76,6 +76,7 @@
     "react-cookie-consent": "^6.4.1",
     "react-helmet": "^6.1.0",
     "react-intersection-observer": "^8.31.1",
+    "react-lottie-player": "^1.4.2",
     "react-player": "^1.15.2",
     "react-router-dom": "^5.1.2",
     "react-shadow": "^19.0.2",