donghy 0.0.1

package/dist/esm/components/display/tour/Tour.js

@@ -0,0 +1,449 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { forwardRef, useState, useCallback, useRef, useEffect, useLayoutEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { useScrollListener } from "../../shared/hooks/useScrollListener";
+import { useEscapeKey } from "../../shared/hooks/useEscapeKey";
+import styles from "./Tour.module.css";
+
+/** 滚动到视图配置 */
+
+/**
+ * 向导步骤接口
+ */
+
+/**
+ * 向导组件属性
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var GAP = 8;
+var PLACEMENT_POSITION_MAP = {
+  top: function top(target, popup) {
+    return {
+      top: target.top - popup.height - GAP,
+      left: target.left + target.width / 2 - popup.width / 2
+    };
+  },
+  topLeft: function topLeft(target, popup) {
+    return {
+      top: target.top - popup.height - GAP,
+      left: target.left
+    };
+  },
+  topRight: function topRight(target, popup) {
+    return {
+      top: target.top - popup.height - GAP,
+      left: target.right - popup.width
+    };
+  },
+  bottom: function bottom(target, popup) {
+    return {
+      top: target.bottom + GAP,
+      left: target.left + target.width / 2 - popup.width / 2
+    };
+  },
+  bottomLeft: function bottomLeft(target) {
+    return {
+      top: target.bottom + GAP,
+      left: target.left
+    };
+  },
+  bottomRight: function bottomRight(target, popup) {
+    return {
+      top: target.bottom + GAP,
+      left: target.right - popup.width
+    };
+  },
+  left: function left(target, popup) {
+    return {
+      top: target.top + target.height / 2 - popup.height / 2,
+      left: target.left - popup.width - GAP
+    };
+  },
+  leftTop: function leftTop(target, popup) {
+    return {
+      top: target.top,
+      left: target.left - popup.width - GAP
+    };
+  },
+  leftBottom: function leftBottom(target, popup) {
+    return {
+      top: target.bottom - popup.height,
+      left: target.left - popup.width - GAP
+    };
+  },
+  right: function right(target, popup) {
+    return {
+      top: target.top + target.height / 2 - popup.height / 2,
+      left: target.right + GAP
+    };
+  },
+  rightTop: function rightTop(target, _popup) {
+    return {
+      top: target.top,
+      left: target.right + GAP
+    };
+  },
+  rightBottom: function rightBottom(target, popup) {
+    return {
+      top: target.bottom - popup.height,
+      left: target.right + GAP
+    };
+  }
+};
+function getSemantic(part, defaultClass, classNamesProp, stylesProp) {
+  var classExtra = classNamesProp === null || classNamesProp === void 0 ? void 0 : classNamesProp[part];
+  var styleExtra = stylesProp === null || stylesProp === void 0 ? void 0 : stylesProp[part];
+  return {
+    className: [defaultClass, classExtra].filter(Boolean).join(' '),
+    style: styleExtra || {}
+  };
+}
+function resolveTarget(target) {
+  if (!target) return null;
+  if (typeof target === 'function') return target();
+  return target;
+}
+function resolveMaskValue(stepValue, globalValue) {
+  var _ref;
+  var raw = (_ref = stepValue !== null && stepValue !== void 0 ? stepValue : globalValue) !== null && _ref !== void 0 ? _ref : true;
+  if (raw === false) return {
+    visible: false
+  };
+  if (raw === true) return {
+    visible: true
+  };
+  return {
+    visible: true,
+    style: raw.style,
+    color: raw.color
+  };
+}
+function resolveArrowValue(stepValue, globalValue) {
+  var _ref2, _raw$pointAtCenter;
+  var raw = (_ref2 = stepValue !== null && stepValue !== void 0 ? stepValue : globalValue) !== null && _ref2 !== void 0 ? _ref2 : true;
+  if (raw === false) return {
+    visible: false,
+    pointAtCenter: false
+  };
+  if (raw === true) return {
+    visible: true,
+    pointAtCenter: false
+  };
+  return {
+    visible: true,
+    pointAtCenter: (_raw$pointAtCenter = raw.pointAtCenter) !== null && _raw$pointAtCenter !== void 0 ? _raw$pointAtCenter : false
+  };
+}
+var Tour = /*#__PURE__*/forwardRef(function (_ref3, ref) {
+  var _step$type, _step$placement, _step$closeIcon, _gap$offset, _gap$radius, _maskConfig$color, _getPopupContainer, _step$prevButtonProps3, _step$prevButtonProps4, _step$nextButtonProps3, _step$nextButtonProps4;
+  var _ref3$data = _ref3.data,
+    data = _ref3$data === void 0 ? [] : _ref3$data,
+    _ref3$open = _ref3.open,
+    open = _ref3$open === void 0 ? false : _ref3$open,
+    controlledCurrent = _ref3.current,
+    _ref3$type = _ref3.type,
+    globalType = _ref3$type === void 0 ? 'default' : _ref3$type,
+    _ref3$mask = _ref3.mask,
+    globalMask = _ref3$mask === void 0 ? true : _ref3$mask,
+    _ref3$arrow = _ref3.arrow,
+    globalArrow = _ref3$arrow === void 0 ? true : _ref3$arrow,
+    globalCloseIcon = _ref3.closeIcon,
+    indicatorsRender = _ref3.indicatorsRender,
+    actionsRender = _ref3.actionsRender,
+    _ref3$scrollIntoViewO = _ref3.scrollIntoViewOptions,
+    scrollIntoViewOptions = _ref3$scrollIntoViewO === void 0 ? true : _ref3$scrollIntoViewO,
+    _ref3$disabledInterac = _ref3.disabledInteraction,
+    disabledInteraction = _ref3$disabledInterac === void 0 ? false : _ref3$disabledInterac,
+    _ref3$keyboard = _ref3.keyboard,
+    keyboard = _ref3$keyboard === void 0 ? true : _ref3$keyboard,
+    _ref3$gap = _ref3.gap,
+    gap = _ref3$gap === void 0 ? {
+      offset: 6,
+      radius: 2
+    } : _ref3$gap,
+    _ref3$zIndex = _ref3.zIndex,
+    zIndex = _ref3$zIndex === void 0 ? 1001 : _ref3$zIndex,
+    getPopupContainer = _ref3.getPopupContainer,
+    onClose = _ref3.onClose,
+    onFinish = _ref3.onFinish,
+    onChange = _ref3.onChange,
+    classNamesProp = _ref3.classNames,
+    stylesProp = _ref3.styles,
+    className = _ref3.className,
+    style = _ref3.style;
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    internalCurrent = _useState2[0],
+    setInternalCurrent = _useState2[1];
+  var isControlled = controlledCurrent !== undefined;
+  var currentStep = isControlled ? controlledCurrent : internalCurrent;
+  var popupRef = useRef(null);
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    popupStyle = _useState4[0],
+    setPopupStyle = _useState4[1];
+  var _useState5 = useState({}),
+    _useState6 = _slicedToArray(_useState5, 2),
+    highlightStyle = _useState6[0],
+    setHighlightStyle = _useState6[1];
+  var _useState7 = useState('bottom'),
+    _useState8 = _slicedToArray(_useState7, 2),
+    resolvedPlacement = _useState8[0],
+    setResolvedPlacement = _useState8[1];
+  var step = data[currentStep];
+  var total = data.length;
+  var stepType = (_step$type = step === null || step === void 0 ? void 0 : step.type) !== null && _step$type !== void 0 ? _step$type : globalType;
+  var stepPlacement = (_step$placement = step === null || step === void 0 ? void 0 : step.placement) !== null && _step$placement !== void 0 ? _step$placement : 'bottom';
+  var maskConfig = resolveMaskValue(step === null || step === void 0 ? void 0 : step.mask, globalMask);
+  var arrowConfig = resolveArrowValue(step === null || step === void 0 ? void 0 : step.arrow, globalArrow);
+  var stepCloseIcon = (_step$closeIcon = step === null || step === void 0 ? void 0 : step.closeIcon) !== null && _step$closeIcon !== void 0 ? _step$closeIcon : globalCloseIcon;
+  var gapOffset = (_gap$offset = gap.offset) !== null && _gap$offset !== void 0 ? _gap$offset : 6;
+  var gapRadius = (_gap$radius = gap.radius) !== null && _gap$radius !== void 0 ? _gap$radius : 2;
+  var gapX = Array.isArray(gapOffset) ? gapOffset[0] : gapOffset;
+  var gapY = Array.isArray(gapOffset) ? gapOffset[1] : gapOffset;
+  var setCurrent = useCallback(function (val) {
+    if (!isControlled) setInternalCurrent(val);
+    onChange === null || onChange === void 0 || onChange(val);
+  }, [isControlled, onChange]);
+  var goNext = useCallback(function () {
+    if (currentStep < total - 1) {
+      setCurrent(currentStep + 1);
+    } else {
+      onFinish === null || onFinish === void 0 || onFinish();
+      onClose === null || onClose === void 0 || onClose();
+    }
+  }, [currentStep, total, setCurrent, onFinish, onClose]);
+  var goPrev = useCallback(function () {
+    if (currentStep > 0) {
+      setCurrent(currentStep - 1);
+    }
+  }, [currentStep, setCurrent]);
+  var handleClose = useCallback(function () {
+    onClose === null || onClose === void 0 || onClose();
+  }, [onClose]);
+  var updatePosition = useCallback(function () {
+    var targetEl = resolveTarget(step === null || step === void 0 ? void 0 : step.target);
+    if (!targetEl) {
+      var vw = window.innerWidth;
+      var vh = window.innerHeight;
+      setPopupStyle({
+        position: 'fixed',
+        top: vh / 2 - 100,
+        left: vw / 2 - 150
+      });
+      setHighlightStyle({});
+      setResolvedPlacement('bottom');
+      return;
+    }
+    if (scrollIntoViewOptions) {
+      var opts = scrollIntoViewOptions === true ? {
+        behavior: 'smooth',
+        block: 'center'
+      } : scrollIntoViewOptions;
+      targetEl.scrollIntoView(opts);
+    }
+    var targetRect = targetEl.getBoundingClientRect();
+    setHighlightStyle({
+      top: targetRect.top - gapY,
+      left: targetRect.left - gapX,
+      width: targetRect.width + gapX * 2,
+      height: targetRect.height + gapY * 2,
+      borderRadius: gapRadius
+    });
+    if (!popupRef.current) {
+      setPopupStyle({
+        position: 'fixed',
+        top: targetRect.bottom + GAP,
+        left: targetRect.left
+      });
+      setResolvedPlacement(stepPlacement);
+      return;
+    }
+    var popupRect = popupRef.current.getBoundingClientRect();
+    var getPosition = PLACEMENT_POSITION_MAP[stepPlacement];
+    if (!getPosition) return;
+    var pos = getPosition(targetRect, popupRect);
+    setPopupStyle({
+      position: 'fixed',
+      top: pos.top,
+      left: pos.left
+    });
+    setResolvedPlacement(stepPlacement);
+  }, [step === null || step === void 0 ? void 0 : step.target, stepPlacement, scrollIntoViewOptions, gapX, gapY, gapRadius]);
+  useLayoutEffect(function () {
+    if (open) updatePosition();
+  }, [open, updatePosition, currentStep]);
+  useScrollListener({
+    onScroll: updatePosition,
+    onResize: updatePosition,
+    enabled: open
+  });
+  useEscapeKey(handleClose, open && keyboard);
+  useEffect(function () {
+    if (!open || !keyboard) return;
+    var onArrowKey = function onArrowKey(e) {
+      if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+        goNext();
+      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+        goPrev();
+      }
+    };
+    document.addEventListener('keydown', onArrowKey);
+    return function () {
+      return document.removeEventListener('keydown', onArrowKey);
+    };
+  }, [open, keyboard, goNext, goPrev]);
+  var rootSemantic = getSemantic('root', styles.root, classNamesProp, stylesProp);
+  var maskSemantic = getSemantic('mask', styles.mask, classNamesProp, stylesProp);
+  var sectionSemantic = getSemantic('section', styles.section, classNamesProp, stylesProp);
+  var coverSemantic = getSemantic('cover', styles.cover, classNamesProp, stylesProp);
+  var headerSemantic = getSemantic('header', styles.header, classNamesProp, stylesProp);
+  var titleSemantic = getSemantic('title', styles.title, classNamesProp, stylesProp);
+  var descriptionSemantic = getSemantic('description', styles.description, classNamesProp, stylesProp);
+  var footerSemantic = getSemantic('footer', styles.footer, classNamesProp, stylesProp);
+  var actionsSemantic = getSemantic('actions', styles.actions, classNamesProp, stylesProp);
+  var indicatorsSemantic = getSemantic('indicators', styles.indicators, classNamesProp, stylesProp);
+  var indicatorSemantic = getSemantic('indicator', styles.indicator, classNamesProp, stylesProp);
+  var rootCls = [rootSemantic.className, className].filter(Boolean).join(' ');
+  var rootStyle = _objectSpread(_objectSpread({}, rootSemantic.style), style);
+  var maskColor = (_maskConfig$color = maskConfig.color) !== null && _maskConfig$color !== void 0 ? _maskConfig$color : 'rgba(0, 0, 0, 0.45)';
+  var maskStyle = _objectSpread(_objectSpread({
+    background: maskColor
+  }, maskSemantic.style), maskConfig.style);
+  if (!open || total === 0 || !step) return null;
+  var portalContainer = (_getPopupContainer = getPopupContainer === null || getPopupContainer === void 0 ? void 0 : getPopupContainer(document.body)) !== null && _getPopupContainer !== void 0 ? _getPopupContainer : document.body;
+  var defaultIndicators = /*#__PURE__*/_jsx("div", {
+    className: indicatorsSemantic.className,
+    style: indicatorsSemantic.style,
+    "data-tour-indicators": true,
+    children: data.map(function (_, i) {
+      return /*#__PURE__*/_jsx("span", {
+        className: indicatorSemantic.className,
+        style: indicatorSemantic.style,
+        "data-active": i === currentStep || undefined,
+        "data-tour-indicator": true
+      }, i);
+    })
+  });
+  var indicatorsContent = indicatorsRender ? indicatorsRender(currentStep, total) : defaultIndicators;
+  var defaultActions = /*#__PURE__*/_jsxs("div", {
+    className: actionsSemantic.className,
+    style: actionsSemantic.style,
+    "data-tour-actions": true,
+    children: [currentStep > 0 && /*#__PURE__*/_jsx("button", {
+      className: styles.prevBtn,
+      onClick: function onClick() {
+        var _step$prevButtonProps, _step$prevButtonProps2;
+        (_step$prevButtonProps = step.prevButtonProps) === null || _step$prevButtonProps === void 0 || (_step$prevButtonProps2 = _step$prevButtonProps.onClick) === null || _step$prevButtonProps2 === void 0 || _step$prevButtonProps2.call(_step$prevButtonProps);
+        goPrev();
+      },
+      "data-tour-prev": true,
+      children: (_step$prevButtonProps3 = (_step$prevButtonProps4 = step.prevButtonProps) === null || _step$prevButtonProps4 === void 0 ? void 0 : _step$prevButtonProps4.children) !== null && _step$prevButtonProps3 !== void 0 ? _step$prevButtonProps3 : 'Previous'
+    }), currentStep < total - 1 ? /*#__PURE__*/_jsx("button", {
+      className: styles.nextBtn,
+      onClick: function onClick() {
+        var _step$nextButtonProps, _step$nextButtonProps2;
+        (_step$nextButtonProps = step.nextButtonProps) === null || _step$nextButtonProps === void 0 || (_step$nextButtonProps2 = _step$nextButtonProps.onClick) === null || _step$nextButtonProps2 === void 0 || _step$nextButtonProps2.call(_step$nextButtonProps);
+        goNext();
+      },
+      "data-tour-next": true,
+      children: (_step$nextButtonProps3 = (_step$nextButtonProps4 = step.nextButtonProps) === null || _step$nextButtonProps4 === void 0 ? void 0 : _step$nextButtonProps4.children) !== null && _step$nextButtonProps3 !== void 0 ? _step$nextButtonProps3 : 'Next'
+    }) : /*#__PURE__*/_jsx("button", {
+      className: styles.finishBtn,
+      onClick: goNext,
+      "data-tour-finish": true,
+      children: "Finish"
+    })]
+  });
+  var actionsContent = actionsRender ? actionsRender(defaultActions, {
+    current: currentStep,
+    total: total
+  }) : defaultActions;
+  var targetEl = resolveTarget(step.target);
+  var hasHighlight = !!targetEl;
+  return /*#__PURE__*/createPortal( /*#__PURE__*/_jsxs("div", {
+    ref: ref,
+    className: rootCls,
+    style: rootStyle,
+    "data-tour": true,
+    children: [maskConfig.visible && /*#__PURE__*/_jsx("div", {
+      className: maskSemantic.className,
+      style: maskStyle,
+      "data-tour-mask": true,
+      children: /*#__PURE__*/_jsx("div", {
+        className: styles.maskLayer
+      })
+    }), maskConfig.visible && hasHighlight && /*#__PURE__*/_jsx("div", {
+      className: styles.highlight,
+      style: _objectSpread(_objectSpread({}, highlightStyle), {}, {
+        zIndex: zIndex + 1,
+        pointerEvents: disabledInteraction ? 'none' : 'auto'
+      }),
+      "data-tour-highlight": true
+    }), /*#__PURE__*/_jsxs("div", {
+      ref: popupRef,
+      className: styles.root,
+      style: _objectSpread(_objectSpread({}, popupStyle), {}, {
+        zIndex: zIndex + 2
+      }),
+      "data-tour-popup": true,
+      "data-placement": resolvedPlacement,
+      children: [/*#__PURE__*/_jsxs("div", {
+        className: sectionSemantic.className,
+        style: sectionSemantic.style,
+        "data-type": stepType !== 'default' ? stepType : undefined,
+        "data-tour-section": true,
+        children: [/*#__PURE__*/_jsx("button", {
+          className: styles.closeBtn,
+          onClick: handleClose,
+          "data-tour-close": true,
+          children: stepCloseIcon !== null && stepCloseIcon !== void 0 ? stepCloseIcon : '✕'
+        }), step.cover && /*#__PURE__*/_jsx("div", {
+          className: coverSemantic.className,
+          style: coverSemantic.style,
+          "data-tour-cover": true,
+          children: step.cover
+        }), step.title && /*#__PURE__*/_jsx("div", {
+          className: headerSemantic.className,
+          style: headerSemantic.style,
+          "data-tour-header": true,
+          children: /*#__PURE__*/_jsx("div", {
+            className: titleSemantic.className,
+            style: titleSemantic.style,
+            "data-tour-title": true,
+            children: step.title
+          })
+        }), step.description && /*#__PURE__*/_jsx("div", {
+          className: descriptionSemantic.className,
+          style: descriptionSemantic.style,
+          "data-tour-description": true,
+          children: step.description
+        }), /*#__PURE__*/_jsxs("div", {
+          className: footerSemantic.className,
+          style: footerSemantic.style,
+          "data-tour-footer": true,
+          children: [indicatorsContent, actionsContent]
+        })]
+      }), arrowConfig.visible && /*#__PURE__*/_jsx("div", {
+        className: styles.arrow,
+        "data-tour-arrow": true,
+        "data-placement": resolvedPlacement
+      })]
+    })]
+  }), portalContainer);
+});
+Tour.displayName = 'Tour';
+export { Tour };
+export default Tour;