@para-ui/core 3.0.55 → 3.0.56

package/DragVerify/index.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @author linhd
+ * @date 2023/2/14 10:24
+ * @description 滑块验证
+ */
+import React, { FunctionComponent } from 'react';
+import './index.scss';
+export interface DragVerifyImgProps {
+    /** 背景图 */
+    sourceImage?: string;
+    /** 移动图 */
+    newImage?: string;
+    /** Y轴位置 */
+    y?: number;
+    [name: string]: any;
+}
+export interface DragVerifyProps {
+    /** 类名 */
+    className?: string;
+    /** 样式 */
+    style?: React.CSSProperties;
+    width?: number | string;
+    /** 图片高 */
+    height?: number | string;
+    /** 刷新 */
+    refresh?: any;
+    /** 获取图片接口 */
+    getImgInfo: () => (Promise<DragVerifyImgProps> | DragVerifyImgProps);
+    /** 提交校验接口 xPos: x轴坐标，imgInfo：图片信息
+     *  true 通过
+     *  false 不通过
+     * */
+    verify: (xPos: number, imgInfo: DragVerifyImgProps) => Promise<boolean> | boolean;
+}
+export declare const DragVerify: FunctionComponent<DragVerifyProps>;
+export default DragVerify;

package/DragVerify/index.js

@@ -0,0 +1,385 @@
+import { _ as _slicedToArray } from '../_verture/slicedToArray-76060636.js';
+import { r as regenerator } from '../_verture/index-beef914f.js';
+import { a as __awaiter } from '../_verture/tslib.es6-55ed4bd2.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import clsx from 'clsx';
+import DoubleRight from '@para-ui/icons/DoubleRight';
+import CloseIcon from '@para-ui/icons/Close';
+import Check from '@para-ui/icons/Check';
+import { $ as $prefixCls } from '../_verture/constant-66aa48a1.js';
+import { u as useFormatMessage } from '../_verture/useFormatMessage-703f8b20.js';
+import { Loading } from '../Loading/index.js';
+import { s as styleInject } from '../_verture/style-inject.es-300983ab.js';
+import '../_verture/unsupportedIterableToArray-cb478f24.js';
+import '@para-ui/core/GlobalContext';
+import '@para-ui/icons/LoadingF';
+
+var en = {
+  tryAgain: 'Try again',
+  swipe: 'Swipe right to fill puzzle'
+};
+
+var zh = {
+  tryAgain: '再试一次',
+  swipe: '向右滑动填充拼图'
+};
+
+var localeJson = {
+  zh: zh,
+  en: en
+};
+
+var css_248z = "@charset \"UTF-8\";\n/**\n* @author Hanz\n* @date 2021/10/20 下午2:08\n* @description color\n*/\n.paraui-v3-drag-verify {\n  width: 100%;\n  position: relative;\n}\n.paraui-v3-drag-verify > svg {\n  position: absolute;\n  right: 4px;\n  top: 4px;\n  z-index: 10;\n  cursor: pointer;\n  display: none;\n}\n.paraui-v3-drag-verify > .slider-img {\n  position: relative;\n  border-radius: 4px;\n  overflow: hidden;\n  line-height: 0;\n  min-height: 60px;\n}\n.paraui-v3-drag-verify > .slider-img .slider-img-bg {\n  width: 100%;\n  height: auto;\n  border-radius: 4px;\n}\n.paraui-v3-drag-verify > .slider-img .slider-img-move {\n  position: absolute;\n  left: 0;\n  height: auto;\n}\n.paraui-v3-drag-verify > .slider-move {\n  position: relative;\n  text-align: center;\n  line-height: 32px;\n  height: 32px;\n  margin-top: 12px;\n}\n.paraui-v3-drag-verify > .slider-move > .slider-move-bg {\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  background-color: rgba(171, 176, 185, 0.12);\n  height: 32px;\n  border-radius: 4px;\n  border: 1px solid rgba(171, 176, 185, 0.2);\n}\n.paraui-v3-drag-verify > .slider-move > .slider-move-mask {\n  position: absolute;\n  left: 0;\n  top: 0;\n  height: 32px;\n  width: 2px;\n  border-bottom-left-radius: 4px;\n  border-top-left-radius: 4px;\n}\n.paraui-v3-drag-verify > .slider-move > .slider-move-mask > .slider-move-box {\n  position: absolute;\n  top: 0;\n  left: -1px;\n  width: 32px;\n  height: 32px;\n  background: #fff;\n  cursor: pointer;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid rgba(171, 176, 185, 0.2);\n}\n.paraui-v3-drag-verify > .slider-move > .slider-move-mask > .slider-move-box:hover .svg-right {\n  color: rgb(54, 102, 214);\n}\n.paraui-v3-drag-verify > .slider-move > .slider-move-mask > .slider-move-box .svg-right {\n  display: inline-block;\n  color: rgba(46, 55, 67, 0.7);\n}\n.paraui-v3-drag-verify > .slider-move > .slider-move-mask > .slider-move-box .svg-close {\n  display: none;\n}\n.paraui-v3-drag-verify > .slider-move > .slider-move-mask > .slider-move-box .svg-check {\n  display: none;\n}\n.paraui-v3-drag-verify > .slider-move > .slider-move-text {\n  color: rgba(46, 55, 67, 0.4);\n  font-size: 14px;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-move > .slider-move > .slider-move-mask {\n  border: 1px solid rgb(54, 102, 214);\n  border-width: 1px 0 1px 1px;\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-move > .slider-move > .slider-move-mask > .slider-move-box {\n  background-color: rgb(54, 102, 214);\n  border-top: 1px solid rgb(54, 102, 214);\n  border-bottom: 1px solid rgb(54, 102, 214);\n  top: -1px;\n  border-bottom-left-radius: 0;\n  border-top-left-radius: 0;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-move > .slider-move > .slider-move-mask > .slider-move-box > .svg-right {\n  color: #fff;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-error > .slider-move > .slider-move-mask {\n  border: 1px solid rgb(235, 96, 84);\n  border-width: 1px 0 1px 1px;\n  background-color: rgba(54, 102, 214, 0.05);\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-error > .slider-move > .slider-move-mask > .slider-move-box {\n  background-color: rgb(235, 96, 84);\n  border-top: 1px solid rgb(235, 96, 84);\n  border-bottom: 1px solid rgb(235, 96, 84);\n  top: -1px;\n  border-bottom-left-radius: 0;\n  border-top-left-radius: 0;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-error > .slider-move > .slider-move-mask > .slider-move-box > .svg-close {\n  display: inline-block;\n  color: #fff;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-error > .slider-move > .slider-move-mask > .slider-move-box > .svg-right {\n  display: none;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-error > .slider-move > .slider-move-mask > .slider-move-box > .svg-check {\n  display: none;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-success > .slider-move > .slider-move-mask {\n  border: 1px solid rgb(83, 195, 27);\n  border-width: 1px 0 1px 1px;\n  background-color: rgba(83, 195, 27, 0.05);\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-success > .slider-move > .slider-move-mask > .slider-move-box {\n  background-color: rgb(83, 195, 27);\n  border-top: 1px solid rgb(83, 195, 27);\n  border-bottom: 1px solid rgb(83, 195, 27);\n  top: -1px;\n  border-bottom-left-radius: 0;\n  border-top-left-radius: 0;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-success > .slider-move > .slider-move-mask > .slider-move-box .svg-close {\n  display: none;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-success > .slider-move > .slider-move-mask > .slider-move-box .svg-right {\n  display: none;\n}\n.paraui-v3-drag-verify.paraui-v3-drag-verify-success > .slider-move > .slider-move-mask > .slider-move-box .svg-check {\n  display: inline-block;\n  color: #fff;\n}";
+styleInject(css_248z);
+
+var DragVerify = function DragVerify(props) {
+  var className = props.className,
+    style = props.style,
+    refresh = props.refresh,
+    getImgInfo = props.getImgInfo,
+    verify = props.verify,
+    width = props.width,
+    height = props.height;
+  var intl = useFormatMessage('DragVerify', localeJson);
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    refreshCom = _useState2[0],
+    setRefreshCom = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    loading = _useState4[0],
+    setLoading = _useState4[1];
+  var refDom = useRef(null);
+  var constData = useRef({
+    getImgInfo: getImgInfo,
+    verify: verify
+  });
+  var prefixCls = $prefixCls + '-drag-verify';
+  constData.current.getImgInfo = getImgInfo;
+  constData.current.verify = verify;
+  useEffect(function () {
+    reset();
+    getImgInfoReq();
+    return function () {
+      clearTimeout(constData.current.timerError);
+      clearTimeout(constData.current.timerSuccess);
+    };
+  }, [refresh, refreshCom]);
+  /** 获取图片信息 */
+  var getImgInfoReq = function getImgInfoReq() {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee() {
+      var result;
+      return regenerator.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            constData.current.padding = true;
+            setLoading(true);
+            _context.next = 4;
+            return constData.current.getImgInfo();
+          case 4:
+            result = _context.sent;
+            constData.current.imgInfo = result;
+            initImg();
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+  };
+  /** 校验滑块 */
+  var sliderPosiCheck = function sliderPosiCheck(x, callback) {
+    return __awaiter(void 0, void 0, void 0, /*#__PURE__*/regenerator.mark(function _callee2() {
+      var result;
+      return regenerator.wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            _context2.next = 2;
+            return constData.current.verify(x, constData.current.verify);
+          case 2:
+            result = _context2.sent;
+            callback(result);
+          case 4:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+  };
+  /** 初始化图片 */
+  var initImg = function initImg() {
+    var _a;
+    if (!refDom.current) return;
+    // 背景图
+    var imgBg = document.createElement('img');
+    imgBg.setAttribute('src', (_a = constData.current.imgInfo) === null || _a === void 0 ? void 0 : _a.sourceImage);
+    imgBg.style.display = 'none';
+    // 滑动的图片
+    var imgMove = document.createElement('img');
+    constData.current.imgMove = imgMove;
+    imgMove.className = 'slider-img-move';
+    imgMove.style.display = 'none';
+    var sliderImgEle = refDom.current.querySelector('.slider-img');
+    var refreshEle = refDom.current.querySelector('.refresh');
+    if (!sliderImgEle || !refreshEle) return;
+    refreshEle.style.display = 'none';
+    sliderImgEle.innerHTML = '';
+    sliderImgEle.append(imgBg);
+    imgBg.onload = function () {
+      var _a;
+      imgBg.style.display = 'inline-block'; // 必须先显示图片,要不然ie10获取不到图片
+      imgMove.setAttribute('src', (_a = constData.current.imgInfo) === null || _a === void 0 ? void 0 : _a.newImage);
+      var a = imgBg.width;
+      imgBg.className = 'slider-img-bg';
+      imgBg.style.display = 'inline-block';
+      if (!refDom.current) return;
+      var sliderImgEle = refDom.current.querySelector('.slider-img');
+      var sliderImgEleRect = sliderImgEle === null || sliderImgEle === void 0 ? void 0 : sliderImgEle.getBoundingClientRect();
+      var b = sliderImgEleRect.width;
+      constData.current.imgScale = a / b;
+      sliderImgEle === null || sliderImgEle === void 0 ? void 0 : sliderImgEle.append(imgMove);
+      imgMove.onload = function () {
+        var _a;
+        constData.current.padding = false;
+        imgMove.style.display = 'inline-block'; // 必须先显示图片,要不然ie10获取不到图片
+        refreshEle.style.display = 'inline-block';
+        imgMove.width = imgMove.width / constData.current.imgScale;
+        imgMove.style.top = ((_a = constData.current.imgInfo) === null || _a === void 0 ? void 0 : _a.y) / constData.current.imgScale + 'px';
+        setLoading(false);
+      };
+    };
+    registerEvents(imgBg, imgMove);
+  };
+  /** 注册事件 */
+  var registerEvents = function registerEvents(imgBg, imgMove) {
+    var sliderBox = refDom.current;
+    if (!sliderBox) return;
+    var moveDom = sliderBox.querySelector('.slider-move-box'); // 滑块
+    var moveProgress = sliderBox.querySelector('.slider-move-mask'); // 滑动距离元素
+    var moveSliderEle = sliderBox.querySelector('.slider-move'); // 进度条的宽
+    var sliderText = sliderBox.querySelector('.slider-move-text'); // 互动轨道显示的文字
+    var moveSliderRect = moveSliderEle.getBoundingClientRect();
+    var moveDomRect = moveDom.getBoundingClientRect();
+    var moveDomWidth = moveDomRect.width; // 移动箭头的框
+    var moveSliderWidth = moveSliderRect.width; // 进度条的宽
+    moveDom.onmousedown = function (e) {
+      if (constData.current.padding) return;
+      sliderBox.classList.add(prefixCls + '-move');
+      document.onmousemove = function (event) {
+        var moveW = event.pageX - e.pageX; // 鼠标移动的距离
+        if (moveW < 0) moveW = 0;
+        if (moveW + moveDomWidth > imgBg.width) moveW = imgBg.width - moveDomWidth;
+        moveDom.style.left = moveW - 1 + 'px';
+        // 加一防止滑块与进度条之间有间隙
+        moveProgress.style.width = (moveW < 2 ? 2 : moveW) + 'px';
+        // 进度条走过的比例
+        var ratio = moveW / (moveSliderWidth - moveDomWidth);
+        var imgMoveWidth = (imgBg.width - imgMove.width) * ratio;
+        imgMove.style.left = imgMoveWidth + 'px';
+        sliderText.innerHTML = '';
+      };
+      // 鼠标抬起
+      document.onmouseup = function () {
+        document.onmousemove = null;
+        document.onmouseup = null;
+        sliderBox.classList.remove(prefixCls + '-move');
+        constData.current.padding = true;
+        var X = parseFloat(imgMove.style.left);
+        var handX = X * constData.current.imgScale;
+        sliderPosiCheck(handX, function (result) {
+          if (!result) {
+            // 错误
+            sliderBox.classList.add(prefixCls + '-error');
+            constData.current.timerError = setTimeout(function () {
+              constData.current.padding = false;
+              reset();
+              sliderText.innerHTML = intl({
+                id: 'tryAgain'
+              }); // 再试一次
+              getImgInfoReq();
+            }, 1000);
+            return;
+          }
+          sliderBox.classList.add(prefixCls + '-success');
+          /*constData.current.timerSuccess = setTimeout(() => {
+              //constData.current.padding = false;
+              //sliderBox.classList.remove(prefixCls + '-success');
+          }, 1000);*/
+        });
+      };
+    };
+  };
+  /** 复位 */
+  var reset = function reset() {
+    var sliderBox = refDom.current;
+    if (!sliderBox) return;
+    sliderBox.classList.remove(prefixCls + '-success');
+    sliderBox.classList.remove(prefixCls + '-error');
+    var moveDom = sliderBox.querySelector('.slider-move-box'); // 滑块
+    var moveProgress = sliderBox.querySelector('.slider-move-mask'); // 滑动距离元素
+    var sliderText = sliderBox.querySelector('.slider-move-text'); // 互动轨道显示的文字
+    sliderText.innerHTML = intl({
+      id: 'swipe'
+    }); // 再试一次
+    moveDom.style.left = '-1px';
+    moveProgress.style.width = '0px';
+    if (constData.current.imgMove) constData.current.imgMove.style.left = '0px';
+  };
+  /* 刷新 */
+  var clickRefresh = function clickRefresh() {
+    setRefreshCom(Math.random());
+  };
+  /* 处理标签内容 */
+  var handStyle = function handStyle() {
+    var obj = {};
+    if (width) {
+      var widthHand = width;
+      if (typeof width === 'number') widthHand = width + 'px';
+      obj.width = widthHand;
+    }
+    if (height) {
+      var heightHand = height;
+      if (typeof height === 'number') heightHand = height + 'px';
+      obj.height = heightHand;
+    }
+    return obj;
+  };
+  var makeCls = function makeCls() {
+    return clsx(prefixCls, className);
+  };
+  return jsxs("div", Object.assign({
+    className: makeCls(),
+    style: style,
+    ref: refDom
+  }, {
+    children: [jsxs("svg", Object.assign({
+      onClick: clickRefresh,
+      className: 'refresh',
+      width: "26.529",
+      height: "26.017",
+      viewBox: "0 0 26.529 26.017"
+    }, {
+      children: [jsxs("defs", {
+        children: [jsxs("filter", Object.assign({
+          id: "a",
+          x: "0",
+          y: "0",
+          width: "26.529",
+          height: "17",
+          filterUnits: "userSpaceOnUse"
+        }, {
+          children: [jsx("feOffset", {
+            dy: "1"
+          }), jsx("feGaussianBlur", {
+            stdDeviation: "1",
+            result: "b"
+          }), jsx("feFlood", {}), jsx("feComposite", {
+            operator: "in",
+            in2: "b"
+          }), jsx("feComposite", {
+            in: "SourceGraphic"
+          })]
+        })), jsxs("filter", Object.assign({
+          id: "c",
+          x: "0",
+          y: "9.017",
+          width: "26.529",
+          height: "17",
+          filterUnits: "userSpaceOnUse"
+        }, {
+          children: [jsx("feOffset", {
+            dy: "1"
+          }), jsx("feGaussianBlur", {
+            stdDeviation: "1",
+            result: "d"
+          }), jsx("feFlood", {}), jsx("feComposite", {
+            operator: "in",
+            in2: "d"
+          }), jsx("feComposite", {
+            in: "SourceGraphic"
+          })]
+        }))]
+      }), jsxs("g", Object.assign({
+        style: {
+          opacity: 0.7,
+          isolation: 'isolate'
+        },
+        transform: "translate(-286.735 -95.991)"
+      }, {
+        children: [jsx("g", Object.assign({
+          transform: "translate(288 96)"
+        }, {
+          children: jsx("rect", {
+            style: {
+              fill: 'none'
+            },
+            width: "24",
+            height: "24"
+          })
+        })), jsxs("g", Object.assign({
+          transform: "translate(289.735 97.991)"
+        }, {
+          children: [jsx("g", Object.assign({
+            style: {
+              filter: 'url(#a)'
+            },
+            transform: "matrix(1, 0, 0, 1, -3, -2)"
+          }, {
+            children: jsx("path", {
+              style: {
+                fill: '#FFFFFF'
+              },
+              d: "M577.409,536.791a1,1,0,0,0,1-1A8,8,0,0,1,592.817,531h0c.077.1.149.207.22.312l-1.911-.765a1,1,0,1,0-.743,1.856l3.7,1.483a1,1,0,0,0,1.3-.557l1.482-3.7a1,1,0,1,0-1.857-.744l-.448,1.12c-.048-.067-.093-.137-.143-.2h0a10,10,0,0,0-18.009,5.989A1,1,0,0,0,577.409,536.791Z",
+              transform: "translate(-573.41 -523.79)"
+            })
+          })), jsx("g", Object.assign({
+            style: {
+              filter: 'url(#c)'
+            },
+            transform: "matrix(1, 0, 0, 1, -3, -2)"
+          }, {
+            children: jsx("path", {
+              style: {
+                fill: '#FFFFFF'
+              },
+              d: "M595.938,534.808a1,1,0,0,0-1,1,8,8,0,0,1-14.409,4.79h0c-.076-.1-.148-.206-.219-.312l1.911.765a1,1,0,0,0,.743-1.857l-3.7-1.482a1,1,0,0,0-1.3.557l-1.482,3.7a1,1,0,0,0,1.856.743l.449-1.12c.047.067.093.136.142.2h0a10,10,0,0,0,18.009-5.989A1,1,0,0,0,595.938,534.808Z",
+              transform: "translate(-573.41 -523.79)"
+            })
+          }))]
+        }))]
+      }))]
+    })), jsx("div", {
+      className: "slider-img",
+      style: handStyle()
+    }), jsxs("div", Object.assign({
+      className: "slider-move"
+    }, {
+      children: [jsx("div", {
+        className: "slider-move-bg"
+      }), jsx("div", Object.assign({
+        className: "slider-move-mask"
+      }, {
+        children: jsxs("div", Object.assign({
+          className: "slider-move-box"
+        }, {
+          children: [jsx(DoubleRight, {
+            className: 'svg-right'
+          }), jsx(CloseIcon, {
+            className: 'svg-close'
+          }), jsx(Check, {
+            className: 'svg-check'
+          })]
+        }))
+      })), jsx("span", Object.assign({
+        className: "slider-move-text"
+      }, {
+        children: intl({
+          id: 'swipe'
+        })
+      }))]
+    })), loading && jsx(Loading, {})]
+  }));
+};
+
+export { DragVerify, DragVerify as default };

package/DragVerify/lang/en_US.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    tryAgain: string;
+    swipe: string;
+};
+export default _default;

package/DragVerify/lang/index.d.ts

@@ -0,0 +1,11 @@
+declare const _default: {
+    zh: {
+        tryAgain: string;
+        swipe: string;
+    };
+    en: {
+        tryAgain: string;
+        swipe: string;
+    };
+};
+export default _default;

package/DragVerify/lang/zh_CN.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    tryAgain: string;
+    swipe: string;
+};
+export default _default;

package/Drawer/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @author Hanz
+ * @date 2021/8/9 下午3:46
+ * @description drawer
+ */
+import { FunctionComponent } from 'react';
+import { DrawerProps } from './interface';
+import './index.scss';
+export declare const Drawer: FunctionComponent<DrawerProps>;
+export type { DrawerProps };
+export default Drawer;