@qsxy/element-plus-react 1.0.2 → 2.0.0

package/dist/Tour/Step.js

@@ -0,0 +1,119 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import classNames from 'classnames';
+import omit from 'lodash/omit';
+import React, { useEffect } from 'react';
+import { Button } from "../Button";
+import { Icon } from "../Icon";
+import { useClassNames } from "../hooks";
+import { useTourContext } from "./context";
+function Step(props) {
+  var _props$showClose, _ref, _props$prevButtonProp2, _ref2, _props$nextButtonProp2;
+  var ns = useClassNames('tour');
+  var _useTourContext = useTourContext(),
+    current = _useTourContext.current,
+    total = _useTourContext.total,
+    tourShowClose = _useTourContext.showClose,
+    closeIcon = _useTourContext.closeIcon,
+    mergedType = _useTourContext.mergedType,
+    indicators = _useTourContext.indicators,
+    onPrev = _useTourContext.onPrev,
+    onNext = _useTourContext.onNext,
+    onClose = _useTourContext.onClose;
+  var mergedShowClose = (_props$showClose = props.showClose) !== null && _props$showClose !== void 0 ? _props$showClose : tourShowClose;
+  var filterButtonProps = function filterButtonProps(btnProps) {
+    if (!btnProps) {
+      return undefined;
+    }
+    return omit(btnProps, ['children', 'onClick']);
+  };
+  var handlePrev = function handlePrev() {
+    var _props$prevButtonProp;
+    if ((_props$prevButtonProp = props.prevButtonProps) !== null && _props$prevButtonProp !== void 0 && _props$prevButtonProp.onClick) {
+      props.prevButtonProps.onClick();
+    }
+    onPrev();
+  };
+  var handleNext = function handleNext() {
+    var _props$nextButtonProp;
+    if ((_props$nextButtonProp = props.nextButtonProps) !== null && _props$nextButtonProp !== void 0 && _props$nextButtonProp.onClick) {
+      props.nextButtonProps.onClick();
+    }
+    onNext();
+  };
+  var handleClose = function handleClose() {
+    onClose();
+    if (props.onClose) {
+      props.onClose();
+    }
+  };
+  useEffect(function () {
+    var handleKeyDown = function handleKeyDown(e) {
+      var target = e.target;
+      if (target !== null && target !== void 0 && target.isContentEditable) {
+        return;
+      }
+      switch (e.key) {
+        case 'ArrowLeft':
+          e.preventDefault();
+          if (current > 0) {
+            onPrev();
+          }
+          break;
+        case 'ArrowRight':
+          e.preventDefault();
+          onNext();
+          break;
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return function () {
+      return window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [current, onPrev, onNext]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, mergedShowClose && /*#__PURE__*/React.createElement("button", {
+    "aria-label": "Close tour",
+    className: ns.e('closebtn'),
+    type: "button",
+    onClick: handleClose
+  }, /*#__PURE__*/React.createElement(Icon, {
+    className: ns.e('close'),
+    name: closeIcon
+  })), /*#__PURE__*/React.createElement("header", {
+    className: classNames(ns.e('header'), {
+      'show-close': mergedShowClose
+    })
+  }, props.header || /*#__PURE__*/React.createElement("span", {
+    role: "heading",
+    className: ns.e('title')
+  }, props.title)), /*#__PURE__*/React.createElement("div", {
+    className: ns.e('body')
+  }, props.children || /*#__PURE__*/React.createElement("span", null, props.description)), /*#__PURE__*/React.createElement("footer", {
+    className: ns.e('footer')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ns.b('indicators')
+  }, indicators ? indicators({
+    current: current,
+    total: total
+  }) : Array.from({
+    length: total
+  }).map(function (_, index) {
+    return /*#__PURE__*/React.createElement("span", {
+      key: index,
+      className: classNames(ns.b('indicator'), ns.is('active', index === current))
+    });
+  })), /*#__PURE__*/React.createElement("div", {
+    className: ns.b('buttons')
+  }, current > 0 && /*#__PURE__*/React.createElement(Button, _extends({
+    size: "small",
+    type: mergedType
+  }, filterButtonProps(props.prevButtonProps), {
+    onClick: handlePrev
+  }), (_ref = (_props$prevButtonProp2 = props.prevButtonProps) === null || _props$prevButtonProp2 === void 0 ? void 0 : _props$prevButtonProp2.children) !== null && _ref !== void 0 ? _ref : 'Previous'), current <= total - 1 && /*#__PURE__*/React.createElement(Button, _extends({
+    size: "small",
+    type: mergedType === 'primary' ? 'default' : 'primary'
+  }, filterButtonProps(props.nextButtonProps), {
+    onClick: handleNext
+  }), (_ref2 = (_props$nextButtonProp2 = props.nextButtonProps) === null || _props$nextButtonProp2 === void 0 ? void 0 : _props$nextButtonProp2.children) !== null && _ref2 !== void 0 ? _ref2 : current === total - 1 ? 'Finish' : 'Next'))));
+}
+Step.displayName = 'ElTourStep';
+export default Step;

package/dist/Tour/Tour.d.ts

@@ -0,0 +1,6 @@
+import type { TourProps } from './typings';
+declare function Tour(props: TourProps): any;
+declare namespace Tour {
+    var displayName: string;
+}
+export default Tour;

package/dist/Tour/Tour.js

@@ -0,0 +1,237 @@
+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 classNames from 'classnames';
+import { addClass, removeClass } from 'dom-lib';
+import isBoolean from 'lodash/isBoolean';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import * as ReactDOM from 'react-dom';
+import { useClassNames, useControlled } from "../hooks";
+import { mergeDefaultProps } from "../Util";
+import PopupManager from "../Util/PopupManager";
+import Content from "./Content";
+import { TourContext } from "./context";
+import { useTarget } from "./helper";
+import Mask from "./Mask";
+import Step from "./Step";
+function resolveAppendTo(appendTo) {
+  if (typeof appendTo === 'string') {
+    return document.querySelector(appendTo) || document.body;
+  }
+  return appendTo;
+}
+function Tour(props) {
+  props = mergeDefaultProps({
+    defaultCurrent: 0,
+    showArrow: true,
+    showClose: true,
+    placement: 'bottom',
+    mask: true,
+    gap: {
+      offset: 6,
+      radius: 2
+    },
+    scrollIntoViewOptions: {
+      block: 'center'
+    },
+    appendTo: 'body',
+    closeOnPressEscape: true,
+    targetAreaClickable: true,
+    closeIcon: 'xmark'
+  }, props);
+  var _props = props,
+    showArrow = _props.showArrow,
+    showClose = _props.showClose,
+    closeIcon = _props.closeIcon,
+    placementProp = _props.placement,
+    contentStyle = _props.contentStyle,
+    maskProp = _props.mask,
+    gapProp = _props.gap,
+    zIndexProp = _props.zIndex,
+    scrollIntoViewOptionsProp = _props.scrollIntoViewOptions,
+    typeProp = _props.type,
+    appendTo = _props.appendTo,
+    closeOnPressEscape = _props.closeOnPressEscape,
+    targetAreaClickable = _props.targetAreaClickable,
+    onChange = _props.onChange,
+    onClose = _props.onClose,
+    onFinish = _props.onFinish,
+    children = _props.children,
+    indicators = _props.indicators,
+    className = _props.className,
+    style = _props.style;
+  var ns = useClassNames('tour');
+  var _useControlled = useControlled(props.visible, props.defaultVisible),
+    _useControlled2 = _slicedToArray(_useControlled, 2),
+    visible = _useControlled2[0],
+    setVisible = _useControlled2[1];
+  var _useControlled3 = useControlled(props.current, props.defaultCurrent),
+    _useControlled4 = _slicedToArray(_useControlled3, 2),
+    current = _useControlled4[0],
+    setCurrent = _useControlled4[1];
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    total = _useState2[0],
+    setTotal = _useState2[1];
+  var childrenArray = useMemo(function () {
+    return React.Children.toArray(children);
+  }, [children]);
+  var stepChildren = useMemo(function () {
+    return childrenArray.filter(function (child) {
+      return /*#__PURE__*/React.isValidElement(child) && child.type === Step;
+    });
+  }, [childrenArray]);
+  var currentChild = useMemo(function () {
+    return stepChildren[current] || null;
+  }, [stepChildren, current]);
+  var currentStep = useMemo(function () {
+    return /*#__PURE__*/React.isValidElement(currentChild) ? currentChild.props : undefined;
+  }, [currentChild]);
+  var currentTarget = useMemo(function () {
+    return currentStep === null || currentStep === void 0 ? void 0 : currentStep.target;
+  }, [currentStep === null || currentStep === void 0 ? void 0 : currentStep.target]);
+  var mergedPlacement = useMemo(function () {
+    return (currentStep === null || currentStep === void 0 ? void 0 : currentStep.placement) || placementProp;
+  }, [currentStep === null || currentStep === void 0 ? void 0 : currentStep.placement, placementProp]);
+  var mergedContentStyle = useMemo(function () {
+    var _currentStep$contentS;
+    return (_currentStep$contentS = currentStep === null || currentStep === void 0 ? void 0 : currentStep.contentStyle) !== null && _currentStep$contentS !== void 0 ? _currentStep$contentS : contentStyle;
+  }, [currentStep === null || currentStep === void 0 ? void 0 : currentStep.contentStyle, contentStyle]);
+  var mergedMask = useMemo(function () {
+    var _currentStep$mask;
+    return (_currentStep$mask = currentStep === null || currentStep === void 0 ? void 0 : currentStep.mask) !== null && _currentStep$mask !== void 0 ? _currentStep$mask : maskProp;
+  }, [currentStep === null || currentStep === void 0 ? void 0 : currentStep.mask, maskProp]);
+  var mergedShowMask = useMemo(function () {
+    return !!mergedMask && visible;
+  }, [mergedMask, visible]);
+  var mergedMaskStyle = useMemo(function () {
+    return isBoolean(mergedMask) ? undefined : mergedMask;
+  }, [mergedMask]);
+  var mergedShowArrow = useMemo(function () {
+    var _currentStep$showArro;
+    return !!(currentTarget && ((_currentStep$showArro = currentStep === null || currentStep === void 0 ? void 0 : currentStep.showArrow) !== null && _currentStep$showArro !== void 0 ? _currentStep$showArro : showArrow));
+  }, [currentTarget, currentStep === null || currentStep === void 0 ? void 0 : currentStep.showArrow, showArrow]);
+  var mergedScrollIntoViewOptions = useMemo(function () {
+    var _currentStep$scrollIn;
+    return (_currentStep$scrollIn = currentStep === null || currentStep === void 0 ? void 0 : currentStep.scrollIntoViewOptions) !== null && _currentStep$scrollIn !== void 0 ? _currentStep$scrollIn : scrollIntoViewOptionsProp;
+  }, [currentStep === null || currentStep === void 0 ? void 0 : currentStep.scrollIntoViewOptions, scrollIntoViewOptionsProp]);
+  var mergedType = useMemo(function () {
+    var _currentStep$type;
+    return (_currentStep$type = currentStep === null || currentStep === void 0 ? void 0 : currentStep.type) !== null && _currentStep$type !== void 0 ? _currentStep$type : typeProp;
+  }, [currentStep === null || currentStep === void 0 ? void 0 : currentStep.type, typeProp]);
+  var mergedZIndex = useMemo(function () {
+    return zIndexProp !== null && zIndexProp !== void 0 ? zIndexProp : PopupManager.nextZIndex();
+  }, [zIndexProp]);
+  var _useTarget = useTarget(currentTarget, visible, gapProp, mergedMask, mergedScrollIntoViewOptions),
+    mergedPosInfo = _useTarget.mergedPosInfo,
+    triggerTarget = _useTarget.triggerTarget;
+  var handlePrev = useCallback(function () {
+    var _currentStep$prevButt;
+    var prev = current - 1;
+    setCurrent(prev);
+    currentStep === null || currentStep === void 0 || (_currentStep$prevButt = currentStep.prevButtonProps) === null || _currentStep$prevButt === void 0 || _currentStep$prevButt.onClick();
+    onChange === null || onChange === void 0 || onChange(prev, visible);
+  }, [current, setCurrent, currentStep === null || currentStep === void 0 ? void 0 : currentStep.prevButtonProps, onChange, visible]);
+  var handleFinish = useCallback(function () {
+    setVisible === null || setVisible === void 0 || setVisible(false);
+    onClose === null || onClose === void 0 || onClose(current);
+    onFinish === null || onFinish === void 0 || onFinish();
+    onChange === null || onChange === void 0 || onChange(current, false);
+  }, [current, onClose, onFinish, setVisible, onChange]);
+  var handleNext = useCallback(function () {
+    if (current >= total - 1) {
+      handleFinish();
+    } else {
+      var _currentStep$nextButt;
+      var next = current + 1;
+      setCurrent(next);
+      currentStep === null || currentStep === void 0 || (_currentStep$nextButt = currentStep.nextButtonProps) === null || _currentStep$nextButt === void 0 || _currentStep$nextButt.onClick();
+      onChange === null || onChange === void 0 || onChange(next, visible);
+    }
+  }, [current, total, handleFinish, setCurrent, currentStep === null || currentStep === void 0 ? void 0 : currentStep.nextButtonProps, onChange, visible]);
+  var handleClose = useCallback(function () {
+    setVisible === null || setVisible === void 0 || setVisible(false);
+    onClose === null || onClose === void 0 || onClose(current);
+    onChange === null || onChange === void 0 || onChange(current, false);
+  }, [setVisible, onClose, current, onChange]);
+  var handleEscClose = useCallback(function () {
+    if (closeOnPressEscape) {
+      handleClose();
+    }
+  }, [closeOnPressEscape, handleClose]);
+  var handleKeyDown = function handleKeyDown(e) {
+    if (e.key === 'Escape' && visible) {
+      handleEscClose();
+    }
+  };
+  useEffect(function () {
+    window.addEventListener('keydown', handleKeyDown);
+    return function () {
+      return window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, []);
+  useEffect(function () {
+    setTotal(stepChildren.length);
+  }, [stepChildren.length]);
+
+  // useEffect(() => {
+  //     setCurrent(currentProp);
+  // }, [currentProp]);
+
+  useEffect(function () {
+    if (!visible) {
+      setCurrent(0);
+      if (portalContainer) {
+        removeClass(portalContainer, ns.b('parent--hidden'));
+      }
+    } else {
+      if (portalContainer && maskProp) {
+        addClass(portalContainer, ns.b('parent--hidden'));
+      }
+    }
+  }, [visible]);
+  var contextValue = useMemo(function () {
+    return {
+      current: current,
+      total: total,
+      showClose: showClose,
+      closeIcon: closeIcon,
+      mergedType: mergedType,
+      ns: ns,
+      indicators: indicators,
+      onPrev: handlePrev,
+      onNext: handleNext,
+      onFinish: handleFinish,
+      onClose: handleClose
+    };
+  }, [current, total, showClose, closeIcon, mergedType, ns, indicators, handlePrev, handleNext, handleFinish, handleClose]);
+  var kls = classNames(ns.b(), mergedType === 'primary' ? ns.m('primary') : '', className);
+  var portalContainer = useMemo(function () {
+    return resolveAppendTo(appendTo);
+  }, [appendTo]);
+  return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React.createElement("div", {
+    className: kls,
+    style: style
+  }, /*#__PURE__*/React.createElement(Mask, {
+    visible: mergedShowMask,
+    fill: mergedMaskStyle === null || mergedMaskStyle === void 0 ? void 0 : mergedMaskStyle.color,
+    style: mergedMaskStyle === null || mergedMaskStyle === void 0 ? void 0 : mergedMaskStyle.style,
+    pos: mergedPosInfo,
+    zIndex: mergedZIndex,
+    targetAreaClickable: targetAreaClickable
+  }), visible && currentChild ? /*#__PURE__*/React.createElement(TourContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(Content, {
+    reference: triggerTarget || undefined,
+    placement: mergedPlacement,
+    showArrow: mergedShowArrow,
+    zIndex: mergedZIndex,
+    style: mergedContentStyle,
+    onClose: handleEscClose
+  }, currentChild)) : null), portalContainer);
+}
+Tour.displayName = 'ElTour';
+export default Tour;

package/dist/Tour/context.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TourContextType } from './typings';
+export declare const TourContext: import("react").Context<TourContextType>;
+export declare const useTourContext: () => TourContextType;

package/dist/Tour/context.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react';
+export var TourContext = /*#__PURE__*/createContext(null);
+export var useTourContext = function useTourContext() {
+  var context = useContext(TourContext);
+  if (!context) {
+    throw new Error('useTourContext must be used within a Tour');
+  }
+  return context;
+};

package/dist/Tour/helper.d.ts

@@ -0,0 +1,39 @@
+import { Middleware, Strategy } from '@floating-ui/dom';
+import { Placement, VirtualElement } from '@popperjs/core';
+import { CSSProperties } from 'react';
+export declare function isInViewPort(element: HTMLElement): boolean;
+export declare function getTargetEl(target: string | HTMLElement | (() => HTMLElement | null) | null | undefined): HTMLElement | null | undefined;
+export declare function getGapOffset(gap: {
+    offset?: number | [number, number];
+}, index: number): number;
+export declare function useTarget(target: string | HTMLElement | (() => HTMLElement | null) | null | undefined, open: boolean, gap: {
+    offset?: number | [number, number];
+    radius?: number;
+}, mergedMask: boolean | {
+    style?: any;
+    color?: string;
+}, scrollIntoViewOptions: boolean | ScrollIntoViewOptions): {
+    mergedPosInfo: {
+        left: number;
+        top: number;
+        width: number;
+        height: number;
+        radius: number;
+    } | null;
+    triggerTarget: HTMLElement | {
+        getBoundingClientRect(): DOMRect;
+    } | undefined;
+};
+export declare const useFloating: (referenceRef: VirtualElement, contentRef: HTMLElement, arrowRef: HTMLElement, placement: Placement, strategy: Strategy, offset: number, zIndex: number, showArrow: boolean) => {
+    update: () => Promise<void>;
+    contentStyle: CSSProperties;
+    arrowStyle: CSSProperties;
+    states: {
+        x: any;
+        y: any;
+        placement: Placement;
+        strategy: Strategy;
+        middlewareData: import("@floating-ui/dom").MiddlewareData;
+    };
+};
+export declare const overflowMiddleware: () => Middleware;