@rc-component/tour - npm Package Compare versions

Comparing version 1.8.0 to 1.8.1

es/hooks/useTarget.js

@@ -11,16 +11,15 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
   var _useState = useState(undefined),
-      _useState2 = _slicedToArray(_useState, 2),
-      targetElement = _useState2[0],
-      setTargetElement = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    targetElement = _useState2[0],
+    setTargetElement = _useState2[1];
   useLayoutEffect(function () {
     var nextElement = typeof target === 'function' ? target() : target;
     setTargetElement(nextElement || null);
-  }); // ========================= Align ==========================
+  });
 
+  // ========================= Align ==========================
   var _useState3 = useState(null),
-      _useState4 = _slicedToArray(_useState3, 2),
-      posInfo = _useState4[0],
-      setPosInfo = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    posInfo = _useState4[0],
+    setPosInfo = _useState4[1];
   var updatePos = useEvent(function () {
@@ -32,9 +31,7 @@ if (targetElement) {
       }
-
       var _targetElement$getBou = targetElement.getBoundingClientRect(),
-          left = _targetElement$getBou.left,
-          top = _targetElement$getBou.top,
-          width = _targetElement$getBou.width,
-          height = _targetElement$getBou.height;
-
+        left = _targetElement$getBou.left,
+        top = _targetElement$getBou.top,
+        width = _targetElement$getBou.width,
+        height = _targetElement$getBou.height;
       var nextPosInfo = {
@@ -51,3 +48,2 @@ left: left,
         }
-
         return origin;
@@ -61,4 +57,4 @@ });
   useLayoutEffect(function () {
-    updatePos(); // update when window resize
-
+    updatePos();
+    // update when window resize
     window.addEventListener('resize', updatePos);
@@ -68,4 +64,5 @@ return function () {
     };
-  }, [targetElement, open, updatePos]); // ======================== PosInfo =========================
+  }, [targetElement, open, updatePos]);
 
+  // ======================== PosInfo =========================
   var mergedPosInfo = useMemo(function () {
@@ -75,3 +72,2 @@ if (!posInfo) {
     }
-
     var gapOffset = (gap === null || gap === void 0 ? void 0 : gap.offset) || 6;
@@ -78,0 +74,0 @@ var gapRadius = (gap === null || gap === void 0 ? void 0 : gap.radius) || 2;

es/Mask.d.ts

@@ -16,3 +16,3 @@ import React from 'react';
 }
-declare const Mask: (props: MaskProps) => JSX.Element;
+declare const Mask: (props: MaskProps) => React.JSX.Element;
 export default Mask;

es/Mask.js

@@ -12,15 +12,14 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 };
-
 var Mask = function Mask(props) {
   var prefixCls = props.prefixCls,
-      rootClassName = props.rootClassName,
-      pos = props.pos,
-      showMask = props.showMask,
-      _props$style = props.style,
-      style = _props$style === void 0 ? {} : _props$style,
-      _props$fill = props.fill,
-      fill = _props$fill === void 0 ? "rgba(0,0,0,0.5)" : _props$fill,
-      open = props.open,
-      animated = props.animated,
-      zIndex = props.zIndex;
+    rootClassName = props.rootClassName,
+    pos = props.pos,
+    showMask = props.showMask,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
+    _props$fill = props.fill,
+    fill = _props$fill === void 0 ? "rgba(0,0,0,0.5)" : _props$fill,
+    open = props.open,
+    animated = props.animated,
+    zIndex = props.zIndex;
   var id = useId();
@@ -93,3 +92,2 @@ var maskId = "".concat(prefixCls, "-mask-").concat(id);
 };
-
 export default Mask;

es/placements.d.ts

 import type { BuildInPlacements } from '@rc-component/trigger';
-export declare type PlacementType = 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'center';
+export type PlacementType = 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'center';
 export declare function getPlacements(arrowPointAtCenter?: boolean): BuildInPlacements;
 export declare const placements: BuildInPlacements;

es/Tour.d.ts

@@ -0,8 +1,7 @@
+import type { ReactNode } from 'react';
 import * as React from 'react';
-import type { ReactNode } from 'react';
 import type { TriggerProps } from '@rc-component/trigger';
 import type { Gap } from './hooks/useTarget';
-import type { TourStepInfo } from './TourStep';
-import type { TourStepProps } from './TourStep';
 import type { PlacementType } from './placements';
+import type { TourStepInfo, TourStepProps } from './TourStep';
 export interface TourProps extends Pick<TriggerProps, 'onPopupAlign' | 'builtinPlacements'> {
@@ -34,3 +33,3 @@ steps?: TourStepInfo[];
 }
-declare const Tour: (props: TourProps) => JSX.Element;
+declare const Tour: (props: TourProps) => React.JSX.Element;
 export default Tour;

es/Tour.js

@@ -8,11 +8,12 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import * as React from 'react';
+import Portal from '@rc-component/portal';
 import Trigger from '@rc-component/trigger';
-import Portal from '@rc-component/portal';
 import classNames from 'classnames';
+import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
 import useMergedState from "rc-util/es/hooks/useMergedState";
 import useTarget from "./hooks/useTarget";
-import TourStep from "./TourStep";
 import Mask from "./Mask";
 import { getPlacements } from "./placements";
-import useLayoutEffect from "rc-util/es/hooks/useLayoutEffect";
+import TourStep from "./TourStep";
+import { getPlacement } from "./util";
 var CENTER_PLACEHOLDER = {
@@ -24,50 +25,44 @@ left: '50%',
 };
-
 var Tour = function Tour(props) {
   var _props$prefixCls = props.prefixCls,
-      prefixCls = _props$prefixCls === void 0 ? 'rc-tour' : _props$prefixCls,
-      _props$steps = props.steps,
-      steps = _props$steps === void 0 ? [] : _props$steps,
-      defaultCurrent = props.defaultCurrent,
-      current = props.current,
-      onChange = props.onChange,
-      onClose = props.onClose,
-      _onFinish = props.onFinish,
-      open = props.open,
-      _props$mask = props.mask,
-      mask = _props$mask === void 0 ? true : _props$mask,
-      _props$arrow = props.arrow,
-      arrow = _props$arrow === void 0 ? true : _props$arrow,
-      rootClassName = props.rootClassName,
-      _props$placement = props.placement,
-      placement = _props$placement === void 0 ? 'bottom' : _props$placement,
-      renderPanel = props.renderPanel,
-      gap = props.gap,
-      animated = props.animated,
-      _props$scrollIntoView = props.scrollIntoViewOptions,
-      scrollIntoViewOptions = _props$scrollIntoView === void 0 ? true : _props$scrollIntoView,
-      _props$zIndex = props.zIndex,
-      zIndex = _props$zIndex === void 0 ? 1001 : _props$zIndex,
-      restProps = _objectWithoutProperties(props, _excluded);
-
+    prefixCls = _props$prefixCls === void 0 ? 'rc-tour' : _props$prefixCls,
+    _props$steps = props.steps,
+    steps = _props$steps === void 0 ? [] : _props$steps,
+    defaultCurrent = props.defaultCurrent,
+    current = props.current,
+    onChange = props.onChange,
+    onClose = props.onClose,
+    _onFinish = props.onFinish,
+    open = props.open,
+    _props$mask = props.mask,
+    mask = _props$mask === void 0 ? true : _props$mask,
+    _props$arrow = props.arrow,
+    arrow = _props$arrow === void 0 ? true : _props$arrow,
+    rootClassName = props.rootClassName,
+    placement = props.placement,
+    renderPanel = props.renderPanel,
+    gap = props.gap,
+    animated = props.animated,
+    _props$scrollIntoView = props.scrollIntoViewOptions,
+    scrollIntoViewOptions = _props$scrollIntoView === void 0 ? true : _props$scrollIntoView,
+    _props$zIndex = props.zIndex,
+    zIndex = _props$zIndex === void 0 ? 1001 : _props$zIndex,
+    restProps = _objectWithoutProperties(props, _excluded);
   var triggerRef = React.useRef();
-
   var _useMergedState = useMergedState(0, {
-    value: current,
-    defaultValue: defaultCurrent
-  }),
-      _useMergedState2 = _slicedToArray(_useMergedState, 2),
-      mergedCurrent = _useMergedState2[0],
-      setMergedCurrent = _useMergedState2[1];
-
+      value: current,
+      defaultValue: defaultCurrent
+    }),
+    _useMergedState2 = _slicedToArray(_useMergedState, 2),
+    mergedCurrent = _useMergedState2[0],
+    setMergedCurrent = _useMergedState2[1];
   var _useMergedState3 = useMergedState(undefined, {
-    value: open,
-    postState: function postState(origin) {
-      return mergedCurrent < 0 || mergedCurrent >= steps.length ? false : origin !== null && origin !== void 0 ? origin : true;
-    }
-  }),
-      _useMergedState4 = _slicedToArray(_useMergedState3, 2),
-      mergedOpen = _useMergedState4[0],
-      setMergedOpen = _useMergedState4[1];
-
+      value: open,
+      postState: function postState(origin) {
+        return mergedCurrent < 0 || mergedCurrent >= steps.length ? false : origin !== null && origin !== void 0 ? origin : true;
+      }
+    }),
+    _useMergedState4 = _slicedToArray(_useMergedState3, 2),
+    mergedOpen = _useMergedState4[0],
+    setMergedOpen = _useMergedState4[1];
   var openRef = React.useRef(mergedOpen);
@@ -78,25 +73,21 @@ useLayoutEffect(function () {
     }
-
     openRef.current = mergedOpen;
   }, [mergedOpen]);
-
   var _ref = steps[mergedCurrent] || {},
-      target = _ref.target,
-      stepPlacement = _ref.placement,
-      stepStyle = _ref.style,
-      stepArrow = _ref.arrow,
-      stepClassName = _ref.className,
-      stepMask = _ref.mask,
-      stepScrollIntoViewOptions = _ref.scrollIntoViewOptions;
-
-  var mergedPlacement = stepPlacement !== null && stepPlacement !== void 0 ? stepPlacement : placement;
+    target = _ref.target,
+    stepPlacement = _ref.placement,
+    stepStyle = _ref.style,
+    stepArrow = _ref.arrow,
+    stepClassName = _ref.className,
+    stepMask = _ref.mask,
+    stepScrollIntoViewOptions = _ref.scrollIntoViewOptions;
   var mergedMask = mergedOpen && (stepMask !== null && stepMask !== void 0 ? stepMask : mask);
   var mergedScrollIntoViewOptions = stepScrollIntoViewOptions !== null && stepScrollIntoViewOptions !== void 0 ? stepScrollIntoViewOptions : scrollIntoViewOptions;
-
   var _useTarget = useTarget(target, open, gap, mergedScrollIntoViewOptions),
-      _useTarget2 = _slicedToArray(_useTarget, 2),
-      posInfo = _useTarget2[0],
-      targetElement = _useTarget2[1]; // ========================= arrow =========================
+    _useTarget2 = _slicedToArray(_useTarget, 2),
+    posInfo = _useTarget2[0],
+    targetElement = _useTarget2[1];
+  var mergedPlacement = getPlacement(targetElement, placement, stepPlacement);
 
-
+  // ========================= arrow =========================
   var mergedArrow = targetElement ? typeof stepArrow === 'undefined' ? arrow : stepArrow : false;
@@ -106,17 +97,16 @@ var arrowPointAtCenter = _typeof(mergedArrow) === 'object' ? mergedArrow.pointAtCenter : false;
     var _triggerRef$current;
-
     (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.forceAlign();
-  }, [arrowPointAtCenter, mergedCurrent]); // ========================= Change =========================
+  }, [arrowPointAtCenter, mergedCurrent]);
 
+  // ========================= Change =========================
   var onInternalChange = function onInternalChange(nextCurrent) {
     setMergedCurrent(nextCurrent);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextCurrent);
-  }; // ========================= Render =========================
+  };
+
+  // ========================= Render =========================
   // Skip if not init yet
-
-
   if (targetElement === undefined) {
     return null;
   }
-
   var handleClose = function handleClose() {
@@ -126,3 +116,2 @@ setMergedOpen(false);
   };
-
   var getPopupElement = function getPopupElement() {
@@ -149,10 +138,9 @@ return /*#__PURE__*/React.createElement(TourStep, _extends({
   };
-
   var mergedShowMask = typeof mergedMask === 'boolean' ? mergedMask : !!mergedMask;
-  var mergedMaskStyle = typeof mergedMask === 'boolean' ? undefined : mergedMask; // when targetElement is not exist, use body as triggerDOMNode
+  var mergedMaskStyle = typeof mergedMask === 'boolean' ? undefined : mergedMask;
 
+  // when targetElement is not exist, use body as triggerDOMNode
   var getTriggerDOMNode = function getTriggerDOMNode(node) {
     return node || targetElement || document.body;
   };
-
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Mask, {
@@ -194,3 +182,2 @@ zIndex: zIndex,
 };
-
 export default Tour;

es/TourStep/DefaultPanel.d.ts

@@ -1,3 +0,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import type { TourStepProps } from '.';
-export default function DefaultPanel(props: TourStepProps): JSX.Element;
+export default function DefaultPanel(props: TourStepProps): React.JSX.Element;

es/TourStep/DefaultPanel.js

@@ -6,11 +6,11 @@ import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
   var prefixCls = props.prefixCls,
-      current = props.current,
-      total = props.total,
-      title = props.title,
-      description = props.description,
-      onClose = props.onClose,
-      onPrev = props.onPrev,
-      onNext = props.onNext,
-      onFinish = props.onFinish,
-      className = props.className;
+    current = props.current,
+    total = props.total,
+    title = props.title,
+    description = props.description,
+    onClose = props.onClose,
+    onPrev = props.onPrev,
+    onNext = props.onNext,
+    onFinish = props.onFinish,
+    className = props.className;
   return /*#__PURE__*/React.createElement("div", {
@@ -17,0 +17,0 @@ className: classNames("".concat(prefixCls, "-content"), className)

es/TourStep/index.d.ts

@@ -30,3 +30,3 @@ import * as React from 'react';
 }
-declare const TourStep: (props: TourStepProps) => JSX.Element;
+declare const TourStep: (props: TourStepProps) => React.JSX.Element;
 export default TourStep;

es/TourStep/index.js

 import * as React from 'react';
 import DefaultPanel from "./DefaultPanel";
-
 var TourStep = function TourStep(props) {
   var current = props.current,
-      renderPanel = props.renderPanel;
+    renderPanel = props.renderPanel;
   return /*#__PURE__*/React.createElement(React.Fragment, null, typeof renderPanel === 'function' ? renderPanel(props, current) : /*#__PURE__*/React.createElement(DefaultPanel, props));
 };
-
 export default TourStep;

es/util.d.ts

@@ -0,1 +1,3 @@
+import type { PlacementType } from './placements';
 export declare function isInViewPort(element: HTMLElement): boolean;
+export declare function getPlacement(targetElement?: HTMLElement | null, placement?: PlacementType, stepPlacement?: PlacementType): PlacementType;

es/util.js

 export function isInViewPort(element) {
   var viewWidth = window.innerWidth || document.documentElement.clientWidth;
   var viewHeight = window.innerHeight || document.documentElement.clientHeight;
-
   var _element$getBoundingC = element.getBoundingClientRect(),
-      top = _element$getBoundingC.top,
-      right = _element$getBoundingC.right,
-      bottom = _element$getBoundingC.bottom,
-      left = _element$getBoundingC.left;
-
+    top = _element$getBoundingC.top,
+    right = _element$getBoundingC.right,
+    bottom = _element$getBoundingC.bottom,
+    left = _element$getBoundingC.left;
   return top >= 0 && left >= 0 && right <= viewWidth && bottom <= viewHeight;
+}
+export function getPlacement(targetElement, placement, stepPlacement) {
+  var _ref;
+  return (_ref = stepPlacement !== null && stepPlacement !== void 0 ? stepPlacement : placement) !== null && _ref !== void 0 ? _ref : targetElement === null ? 'center' : 'bottom';
 }

lib/hooks/useTarget.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
@@ -9,13 +8,7 @@ value: true
 exports.default = useTarget;
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = require("react");
-
 var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
-
 var _util = require("../util");
-
 var _useEvent = _interopRequireDefault(require("rc-util/lib/hooks/useEvent"));
-
 function useTarget(target, open, gap, scrollIntoViewOptions) {
@@ -26,16 +19,15 @@ // ========================= Target =========================
   var _useState = (0, _react.useState)(undefined),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      targetElement = _useState2[0],
-      setTargetElement = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    targetElement = _useState2[0],
+    setTargetElement = _useState2[1];
   (0, _useLayoutEffect.default)(function () {
     var nextElement = typeof target === 'function' ? target() : target;
     setTargetElement(nextElement || null);
-  }); // ========================= Align ==========================
+  });
 
+  // ========================= Align ==========================
   var _useState3 = (0, _react.useState)(null),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      posInfo = _useState4[0],
-      setPosInfo = _useState4[1];
-
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    posInfo = _useState4[0],
+    setPosInfo = _useState4[1];
   var updatePos = (0, _useEvent.default)(function () {
@@ -47,9 +39,7 @@ if (targetElement) {
       }
-
       var _targetElement$getBou = targetElement.getBoundingClientRect(),
-          left = _targetElement$getBou.left,
-          top = _targetElement$getBou.top,
-          width = _targetElement$getBou.width,
-          height = _targetElement$getBou.height;
-
+        left = _targetElement$getBou.left,
+        top = _targetElement$getBou.top,
+        width = _targetElement$getBou.width,
+        height = _targetElement$getBou.height;
       var nextPosInfo = {
@@ -66,3 +56,2 @@ left: left,
         }
-
         return origin;
@@ -76,4 +65,4 @@ });
   (0, _useLayoutEffect.default)(function () {
-    updatePos(); // update when window resize
-
+    updatePos();
+    // update when window resize
     window.addEventListener('resize', updatePos);
@@ -83,4 +72,5 @@ return function () {
     };
-  }, [targetElement, open, updatePos]); // ======================== PosInfo =========================
+  }, [targetElement, open, updatePos]);
 
+  // ======================== PosInfo =========================
   var mergedPosInfo = (0, _react.useMemo)(function () {
@@ -90,3 +80,2 @@ if (!posInfo) {
     }
-
     var gapOffset = (gap === null || gap === void 0 ? void 0 : gap.offset) || 6;
@@ -93,0 +82,0 @@ var gapRadius = (gap === null || gap === void 0 ? void 0 : gap.radius) || 2;

lib/index.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
@@ -9,6 +8,4 @@ value: true
 exports.default = void 0;
-
 var _Tour = _interopRequireDefault(require("./Tour"));
-
 var _default = _Tour.default;
 exports.default = _default;

lib/Mask.d.ts

@@ -16,3 +16,3 @@ import React from 'react';
 }
-declare const Mask: (props: MaskProps) => JSX.Element;
+declare const Mask: (props: MaskProps) => React.JSX.Element;
 export default Mask;

lib/Mask.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
@@ -9,17 +8,9 @@ value: true
 exports.default = void 0;
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _portal = _interopRequireDefault(require("@rc-component/portal"));
-
 var _useId = _interopRequireDefault(require("rc-util/lib/hooks/useId"));
-
 var COVER_PROPS = {
@@ -29,15 +20,14 @@ fill: 'transparent',
 };
-
 var Mask = function Mask(props) {
   var prefixCls = props.prefixCls,
-      rootClassName = props.rootClassName,
-      pos = props.pos,
-      showMask = props.showMask,
-      _props$style = props.style,
-      style = _props$style === void 0 ? {} : _props$style,
-      _props$fill = props.fill,
-      fill = _props$fill === void 0 ? "rgba(0,0,0,0.5)" : _props$fill,
-      open = props.open,
-      animated = props.animated,
-      zIndex = props.zIndex;
+    rootClassName = props.rootClassName,
+    pos = props.pos,
+    showMask = props.showMask,
+    _props$style = props.style,
+    style = _props$style === void 0 ? {} : _props$style,
+    _props$fill = props.fill,
+    fill = _props$fill === void 0 ? "rgba(0,0,0,0.5)" : _props$fill,
+    open = props.open,
+    animated = props.animated,
+    zIndex = props.zIndex;
   var id = (0, _useId.default)();
@@ -110,4 +100,3 @@ var maskId = "".concat(prefixCls, "-mask-").concat(id);
 };
-
 var _default = Mask;
 exports.default = _default;

lib/placements.d.ts

 import type { BuildInPlacements } from '@rc-component/trigger';
-export declare type PlacementType = 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'center';
+export type PlacementType = 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | 'top' | 'topLeft' | 'topRight' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'center';
 export declare function getPlacements(arrowPointAtCenter?: boolean): BuildInPlacements;
 export declare const placements: BuildInPlacements;

lib/placements.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
@@ -10,5 +9,3 @@ value: true
 exports.placements = void 0;
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var autoAdjustOverflow = {
@@ -69,3 +66,2 @@ adjustX: 1,
 };
-
 function getPlacements() {
@@ -82,4 +78,3 @@ var arrowPointAtCenter = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
 }
-
 var placements = getPlacements();
 exports.placements = placements;

lib/Tour.d.ts

@@ -0,8 +1,7 @@
+import type { ReactNode } from 'react';
 import * as React from 'react';
-import type { ReactNode } from 'react';
 import type { TriggerProps } from '@rc-component/trigger';
 import type { Gap } from './hooks/useTarget';
-import type { TourStepInfo } from './TourStep';
-import type { TourStepProps } from './TourStep';
 import type { PlacementType } from './placements';
+import type { TourStepInfo, TourStepProps } from './TourStep';
 export interface TourProps extends Pick<TriggerProps, 'onPopupAlign' | 'builtinPlacements'> {
@@ -34,3 +33,3 @@ steps?: TourStepInfo[];
 }
-declare const Tour: (props: TourProps) => JSX.Element;
+declare const Tour: (props: TourProps) => React.JSX.Element;
 export default Tour;

lib/Tour.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
@@ -11,33 +9,18 @@ value: true
 exports.default = void 0;
-
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
-
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-
 var React = _interopRequireWildcard(require("react"));
-
+var _portal = _interopRequireDefault(require("@rc-component/portal"));
 var _trigger = _interopRequireDefault(require("@rc-component/trigger"));
-
-var _portal = _interopRequireDefault(require("@rc-component/portal"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
+var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
 var _useMergedState5 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
-
 var _useTarget3 = _interopRequireDefault(require("./hooks/useTarget"));
-
-var _TourStep = _interopRequireDefault(require("./TourStep"));
-
 var _Mask = _interopRequireDefault(require("./Mask"));
-
 var _placements = require("./placements");
-
-var _useLayoutEffect = _interopRequireDefault(require("rc-util/lib/hooks/useLayoutEffect"));
-
+var _TourStep = _interopRequireDefault(require("./TourStep"));
+var _util = require("./util");
 var _excluded = ["prefixCls", "steps", "defaultCurrent", "current", "onChange", "onClose", "onFinish", "open", "mask", "arrow", "rootClassName", "placement", "renderPanel", "gap", "animated", "scrollIntoViewOptions", "zIndex"];
@@ -50,49 +33,44 @@ var CENTER_PLACEHOLDER = {
 };
-
 var Tour = function Tour(props) {
   var _props$prefixCls = props.prefixCls,
-      prefixCls = _props$prefixCls === void 0 ? 'rc-tour' : _props$prefixCls,
-      _props$steps = props.steps,
-      steps = _props$steps === void 0 ? [] : _props$steps,
-      defaultCurrent = props.defaultCurrent,
-      current = props.current,
-      onChange = props.onChange,
-      onClose = props.onClose,
-      _onFinish = props.onFinish,
-      open = props.open,
-      _props$mask = props.mask,
-      mask = _props$mask === void 0 ? true : _props$mask,
-      _props$arrow = props.arrow,
-      arrow = _props$arrow === void 0 ? true : _props$arrow,
-      rootClassName = props.rootClassName,
-      _props$placement = props.placement,
-      placement = _props$placement === void 0 ? 'bottom' : _props$placement,
-      renderPanel = props.renderPanel,
-      gap = props.gap,
-      animated = props.animated,
-      _props$scrollIntoView = props.scrollIntoViewOptions,
-      scrollIntoViewOptions = _props$scrollIntoView === void 0 ? true : _props$scrollIntoView,
-      _props$zIndex = props.zIndex,
-      zIndex = _props$zIndex === void 0 ? 1001 : _props$zIndex,
-      restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+    prefixCls = _props$prefixCls === void 0 ? 'rc-tour' : _props$prefixCls,
+    _props$steps = props.steps,
+    steps = _props$steps === void 0 ? [] : _props$steps,
+    defaultCurrent = props.defaultCurrent,
+    current = props.current,
+    onChange = props.onChange,
+    onClose = props.onClose,
+    _onFinish = props.onFinish,
+    open = props.open,
+    _props$mask = props.mask,
+    mask = _props$mask === void 0 ? true : _props$mask,
+    _props$arrow = props.arrow,
+    arrow = _props$arrow === void 0 ? true : _props$arrow,
+    rootClassName = props.rootClassName,
+    placement = props.placement,
+    renderPanel = props.renderPanel,
+    gap = props.gap,
+    animated = props.animated,
+    _props$scrollIntoView = props.scrollIntoViewOptions,
+    scrollIntoViewOptions = _props$scrollIntoView === void 0 ? true : _props$scrollIntoView,
+    _props$zIndex = props.zIndex,
+    zIndex = _props$zIndex === void 0 ? 1001 : _props$zIndex,
+    restProps = (0, _objectWithoutProperties2.default)(props, _excluded);
   var triggerRef = React.useRef();
-
   var _useMergedState = (0, _useMergedState5.default)(0, {
-    value: current,
-    defaultValue: defaultCurrent
-  }),
-      _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
-      mergedCurrent = _useMergedState2[0],
-      setMergedCurrent = _useMergedState2[1];
-
+      value: current,
+      defaultValue: defaultCurrent
+    }),
+    _useMergedState2 = (0, _slicedToArray2.default)(_useMergedState, 2),
+    mergedCurrent = _useMergedState2[0],
+    setMergedCurrent = _useMergedState2[1];
   var _useMergedState3 = (0, _useMergedState5.default)(undefined, {
-    value: open,
-    postState: function postState(origin) {
-      return mergedCurrent < 0 || mergedCurrent >= steps.length ? false : origin !== null && origin !== void 0 ? origin : true;
-    }
-  }),
-      _useMergedState4 = (0, _slicedToArray2.default)(_useMergedState3, 2),
-      mergedOpen = _useMergedState4[0],
-      setMergedOpen = _useMergedState4[1];
-
+      value: open,
+      postState: function postState(origin) {
+        return mergedCurrent < 0 || mergedCurrent >= steps.length ? false : origin !== null && origin !== void 0 ? origin : true;
+      }
+    }),
+    _useMergedState4 = (0, _slicedToArray2.default)(_useMergedState3, 2),
+    mergedOpen = _useMergedState4[0],
+    setMergedOpen = _useMergedState4[1];
   var openRef = React.useRef(mergedOpen);
@@ -103,25 +81,21 @@ (0, _useLayoutEffect.default)(function () {
     }
-
     openRef.current = mergedOpen;
   }, [mergedOpen]);
-
   var _ref = steps[mergedCurrent] || {},
-      target = _ref.target,
-      stepPlacement = _ref.placement,
-      stepStyle = _ref.style,
-      stepArrow = _ref.arrow,
-      stepClassName = _ref.className,
-      stepMask = _ref.mask,
-      stepScrollIntoViewOptions = _ref.scrollIntoViewOptions;
-
-  var mergedPlacement = stepPlacement !== null && stepPlacement !== void 0 ? stepPlacement : placement;
+    target = _ref.target,
+    stepPlacement = _ref.placement,
+    stepStyle = _ref.style,
+    stepArrow = _ref.arrow,
+    stepClassName = _ref.className,
+    stepMask = _ref.mask,
+    stepScrollIntoViewOptions = _ref.scrollIntoViewOptions;
   var mergedMask = mergedOpen && (stepMask !== null && stepMask !== void 0 ? stepMask : mask);
   var mergedScrollIntoViewOptions = stepScrollIntoViewOptions !== null && stepScrollIntoViewOptions !== void 0 ? stepScrollIntoViewOptions : scrollIntoViewOptions;
-
   var _useTarget = (0, _useTarget3.default)(target, open, gap, mergedScrollIntoViewOptions),
-      _useTarget2 = (0, _slicedToArray2.default)(_useTarget, 2),
-      posInfo = _useTarget2[0],
-      targetElement = _useTarget2[1]; // ========================= arrow =========================
+    _useTarget2 = (0, _slicedToArray2.default)(_useTarget, 2),
+    posInfo = _useTarget2[0],
+    targetElement = _useTarget2[1];
+  var mergedPlacement = (0, _util.getPlacement)(targetElement, placement, stepPlacement);
 
-
+  // ========================= arrow =========================
   var mergedArrow = targetElement ? typeof stepArrow === 'undefined' ? arrow : stepArrow : false;
@@ -131,17 +105,16 @@ var arrowPointAtCenter = (0, _typeof2.default)(mergedArrow) === 'object' ? mergedArrow.pointAtCenter : false;
     var _triggerRef$current;
-
     (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.forceAlign();
-  }, [arrowPointAtCenter, mergedCurrent]); // ========================= Change =========================
+  }, [arrowPointAtCenter, mergedCurrent]);
 
+  // ========================= Change =========================
   var onInternalChange = function onInternalChange(nextCurrent) {
     setMergedCurrent(nextCurrent);
     onChange === null || onChange === void 0 ? void 0 : onChange(nextCurrent);
-  }; // ========================= Render =========================
+  };
+
+  // ========================= Render =========================
   // Skip if not init yet
-
-
   if (targetElement === undefined) {
     return null;
   }
-
   var handleClose = function handleClose() {
@@ -151,3 +124,2 @@ setMergedOpen(false);
   };
-
   var getPopupElement = function getPopupElement() {
@@ -174,10 +146,9 @@ return /*#__PURE__*/React.createElement(_TourStep.default, (0, _extends2.default)({
   };
-
   var mergedShowMask = typeof mergedMask === 'boolean' ? mergedMask : !!mergedMask;
-  var mergedMaskStyle = typeof mergedMask === 'boolean' ? undefined : mergedMask; // when targetElement is not exist, use body as triggerDOMNode
+  var mergedMaskStyle = typeof mergedMask === 'boolean' ? undefined : mergedMask;
 
+  // when targetElement is not exist, use body as triggerDOMNode
   var getTriggerDOMNode = function getTriggerDOMNode(node) {
     return node || targetElement || document.body;
   };
-
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Mask.default, {
@@ -219,4 +190,3 @@ zIndex: zIndex,
 };
-
 var _default = Tour;
 exports.default = _default;

lib/TourStep/DefaultPanel.d.ts

@@ -1,3 +0,3 @@
-/// <reference types="react" />
+import * as React from 'react';
 import type { TourStepProps } from '.';
-export default function DefaultPanel(props: TourStepProps): JSX.Element;
+export default function DefaultPanel(props: TourStepProps): React.JSX.Element;

lib/TourStep/DefaultPanel.js

 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
@@ -11,20 +9,16 @@ value: true
 exports.default = DefaultPanel;
-
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
 var React = _interopRequireWildcard(require("react"));
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 function DefaultPanel(props) {
   var prefixCls = props.prefixCls,
-      current = props.current,
-      total = props.total,
-      title = props.title,
-      description = props.description,
-      onClose = props.onClose,
-      onPrev = props.onPrev,
-      onNext = props.onNext,
-      onFinish = props.onFinish,
-      className = props.className;
+    current = props.current,
+    total = props.total,
+    title = props.title,
+    description = props.description,
+    onClose = props.onClose,
+    onPrev = props.onPrev,
+    onNext = props.onNext,
+    onFinish = props.onFinish,
+    className = props.className;
   return /*#__PURE__*/React.createElement("div", {
@@ -31,0 +25,0 @@ className: (0, _classnames.default)("".concat(prefixCls, "-content"), className)

lib/TourStep/index.d.ts

@@ -30,3 +30,3 @@ import * as React from 'react';
 }
-declare const TourStep: (props: TourStepProps) => JSX.Element;
+declare const TourStep: (props: TourStepProps) => React.JSX.Element;
 export default TourStep;

lib/TourStep/index.js

 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 Object.defineProperty(exports, "__esModule", {
@@ -11,14 +9,10 @@ value: true
 exports.default = void 0;
-
 var React = _interopRequireWildcard(require("react"));
-
 var _DefaultPanel = _interopRequireDefault(require("./DefaultPanel"));
-
 var TourStep = function TourStep(props) {
   var current = props.current,
-      renderPanel = props.renderPanel;
+    renderPanel = props.renderPanel;
   return /*#__PURE__*/React.createElement(React.Fragment, null, typeof renderPanel === 'function' ? renderPanel(props, current) : /*#__PURE__*/React.createElement(_DefaultPanel.default, props));
 };
-
 var _default = TourStep;
 exports.default = _default;

lib/util.d.ts

@@ -0,1 +1,3 @@
+import type { PlacementType } from './placements';
 export declare function isInViewPort(element: HTMLElement): boolean;
+export declare function getPlacement(targetElement?: HTMLElement | null, placement?: PlacementType, stepPlacement?: PlacementType): PlacementType;

lib/util.js

@@ -6,15 +6,17 @@ "use strict";
 });
+exports.getPlacement = getPlacement;
 exports.isInViewPort = isInViewPort;
-
 function isInViewPort(element) {
   var viewWidth = window.innerWidth || document.documentElement.clientWidth;
   var viewHeight = window.innerHeight || document.documentElement.clientHeight;
-
   var _element$getBoundingC = element.getBoundingClientRect(),
-      top = _element$getBoundingC.top,
-      right = _element$getBoundingC.right,
-      bottom = _element$getBoundingC.bottom,
-      left = _element$getBoundingC.left;
-
+    top = _element$getBoundingC.top,
+    right = _element$getBoundingC.right,
+    bottom = _element$getBoundingC.bottom,
+    left = _element$getBoundingC.left;
   return top >= 0 && left >= 0 && right <= viewWidth && bottom <= viewHeight;
+}
+function getPlacement(targetElement, placement, stepPlacement) {
+  var _ref;
+  return (_ref = stepPlacement !== null && stepPlacement !== void 0 ? stepPlacement : placement) !== null && _ref !== void 0 ? _ref : targetElement === null ? 'center' : 'bottom';
 }

package.json

 {
   "name": "@rc-component/tour",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "description": "React tour Component",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

56634

increased by0.79%

Lines of code

1231

increased by2.07%

No dependency changes