@rc-component/tour - npm Package Compare versions

Comparing version 1.12.3 to 1.13.0

es/index.d.ts

 import Tour from './Tour';
-export type { TourProps } from './Tour';
-export type { TourStepInfo, TourStepProps } from './TourStep';
+export type { TourProps, TourStepInfo, TourStepProps } from './interface';
 export default Tour;

es/Tour.d.ts

@@ -1,40 +0,5 @@
-import type { ReactNode } from 'react';
 import * as React from 'react';
-import type { TriggerProps } from '@rc-component/trigger';
-import type { Gap } from './hooks/useTarget';
-import type { PlacementType } from './placements';
-import type { TourStepInfo, TourStepProps } from './TourStep';
-export interface TourProps extends Pick<TriggerProps, 'onPopupAlign'> {
-    steps?: TourStepInfo[];
-    open?: boolean;
-    defaultCurrent?: number;
-    current?: number;
-    onChange?: (current: number) => void;
-    onClose?: (current: number) => void;
-    onFinish?: () => void;
-    closeIcon?: TourStepProps['closeIcon'];
-    mask?: boolean | {
-        style?: React.CSSProperties;
-        color?: string;
-    };
-    arrow?: boolean | {
-        pointAtCenter: boolean;
-    };
-    rootClassName?: string;
-    placement?: PlacementType;
-    prefixCls?: string;
-    renderPanel?: (props: TourStepProps, current: number) => ReactNode;
-    gap?: Gap;
-    animated?: boolean | {
-        placeholder: boolean;
-    };
-    scrollIntoViewOptions?: boolean | ScrollIntoViewOptions;
-    zIndex?: number;
-    getPopupContainer?: TriggerProps['getPopupContainer'];
-    builtinPlacements?: TriggerProps['builtinPlacements'] | ((config?: {
-        arrowPointAtCenter?: boolean;
-    }) => TriggerProps['builtinPlacements']);
-    disabledInteraction?: boolean;
-}
+import type { TourProps } from './interface';
+export type { TourProps };
 declare const Tour: React.FC<TourProps>;
 export default Tour;

es/Tour.js

@@ -6,3 +6,3 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["prefixCls", "steps", "defaultCurrent", "current", "onChange", "onClose", "onFinish", "open", "mask", "arrow", "rootClassName", "placement", "renderPanel", "gap", "animated", "scrollIntoViewOptions", "zIndex", "closeIcon", "builtinPlacements", "disabledInteraction"];
+var _excluded = ["prefixCls", "steps", "defaultCurrent", "current", "onChange", "onClose", "onFinish", "open", "mask", "arrow", "rootClassName", "placement", "renderPanel", "gap", "animated", "scrollIntoViewOptions", "zIndex", "closeIcon", "closable", "builtinPlacements", "disabledInteraction"];
 import * as React from 'react';
@@ -14,2 +14,4 @@ import Portal from '@rc-component/portal';
 import useMergedState from "rc-util/es/hooks/useMergedState";
+import { useMemo } from 'react';
+import { useClosable } from "./hooks/useClosable";
 import useTarget from "./hooks/useTarget";
@@ -20,3 +22,2 @@ import Mask from "./Mask";
 import { getPlacement } from "./util";
-import { useMemo } from 'react';
 var CENTER_PLACEHOLDER = {
@@ -29,4 +30,4 @@ left: '50%',
 var defaultScrollIntoViewOptions = {
-  block: "center",
-  inline: "center"
+  block: 'center',
+  inline: 'center'
 };
@@ -58,2 +59,3 @@ var Tour = function Tour(props) {
     closeIcon = props.closeIcon,
+    closable = props.closable,
     builtinPlacements = props.builtinPlacements,
@@ -95,5 +97,6 @@ disabledInteraction = props.disabledInteraction,
     stepScrollIntoViewOptions = _ref$scrollIntoViewOp === void 0 ? defaultScrollIntoViewOptions : _ref$scrollIntoViewOp,
-    stepCloseIcon = _ref.closeIcon;
+    stepCloseIcon = _ref.closeIcon,
+    stepClosable = _ref.closable;
+  var mergedClosable = useClosable(prefixCls, stepClosable, stepCloseIcon, closable, closeIcon);
   var mergedMask = mergedOpen && (stepMask !== null && stepMask !== void 0 ? stepMask : mask);
-  var mergedCloseIcon = stepCloseIcon !== null && stepCloseIcon !== void 0 ? stepCloseIcon : closeIcon;
   var mergedScrollIntoViewOptions = stepScrollIntoViewOptions !== null && stepScrollIntoViewOptions !== void 0 ? stepScrollIntoViewOptions : scrollIntoViewOptions;
@@ -111,3 +114,3 @@ var _useTarget = useTarget(target, open, gap, mergedScrollIntoViewOptions),
     var _triggerRef$current;
-    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.forceAlign();
+    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.forceAlign();
   }, [arrowPointAtCenter, mergedCurrent]);
@@ -118,3 +121,3 @@
     setMergedCurrent(nextCurrent);
-    onChange === null || onChange === void 0 ? void 0 : onChange(nextCurrent);
+    onChange === null || onChange === void 0 || onChange(nextCurrent);
   };
@@ -137,3 +140,3 @@ var mergedBuiltinPlacements = useMemo(function () {
     setMergedOpen(false);
-    onClose === null || onClose === void 0 ? void 0 : onClose(mergedCurrent);
+    onClose === null || onClose === void 0 || onClose(mergedCurrent);
   };
@@ -157,6 +160,7 @@ var getPopupElement = function getPopupElement() {
         handleClose();
-        _onFinish === null || _onFinish === void 0 ? void 0 : _onFinish();
-      },
-      closeIcon: mergedCloseIcon
-    }, steps[mergedCurrent]));
+        _onFinish === null || _onFinish === void 0 || _onFinish();
+      }
+    }, steps[mergedCurrent], {
+      closable: mergedClosable
+    }));
   };
@@ -163,0 +167,0 @@ var mergedShowMask = typeof mergedMask === 'boolean' ? mergedMask : !!mergedMask;

es/TourStep/DefaultPanel.d.ts

 import * as React from 'react';
-import type { TourStepProps } from '.';
-export default function DefaultPanel(props: TourStepProps): React.JSX.Element;
+import type { TourStepProps } from '../interface';
+export type DefaultPanelProps = Exclude<TourStepProps, "closable"> & {
+    closable: Exclude<TourStepProps["closable"], boolean>;
+};
+export default function DefaultPanel(props: DefaultPanelProps): React.JSX.Element;

es/TourStep/DefaultPanel.js

 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import classNames from 'classnames';
+import pickAttrs from "rc-util/es/pickAttrs";
 export default function DefaultPanel(props) {
@@ -15,7 +17,6 @@ var prefixCls = props.prefixCls,
     className = props.className,
-    closeIcon = props.closeIcon;
-  var mergedClosable = closeIcon !== false && closeIcon !== null;
-  var mergedCloseIcon = closeIcon !== undefined && closeIcon !== true ? closeIcon : /*#__PURE__*/React.createElement("span", {
-    className: "".concat(prefixCls, "-close-x")
-  }, "\xD7");
+    closable = props.closable;
+  var ariaProps = pickAttrs(closable || {}, true);
+  var closeIcon = closable === null || closable === void 0 ? void 0 : closable.closeIcon;
+  var mergedClosable = !!closable;
   return /*#__PURE__*/React.createElement("div", {
@@ -25,8 +26,9 @@ className: classNames("".concat(prefixCls, "-content"), className)
     className: "".concat(prefixCls, "-inner")
-  }, mergedClosable && /*#__PURE__*/React.createElement("button", {
+  }, mergedClosable && /*#__PURE__*/React.createElement("button", _extends({
     type: "button",
     onClick: onClose,
-    "aria-label": "Close",
+    "aria-label": "Close"
+  }, ariaProps, {
     className: "".concat(prefixCls, "-close")
-  }, mergedCloseIcon), /*#__PURE__*/React.createElement("div", {
+  }), closeIcon), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-header")
@@ -33,0 +35,0 @@ }, /*#__PURE__*/React.createElement("div", {

es/TourStep/index.d.ts

 import * as React from 'react';
-import type { ReactNode, CSSProperties } from 'react';
-import type { PlacementType } from '../placements';
-export interface TourStepInfo {
-    arrow?: boolean | {
-        pointAtCenter: boolean;
-    };
-    target?: HTMLElement | (() => HTMLElement) | null | (() => null);
-    title: ReactNode;
-    description?: ReactNode;
-    placement?: PlacementType;
-    mask?: boolean | {
-        style?: React.CSSProperties;
-        color?: string;
-    };
-    className?: string;
-    style?: CSSProperties;
-    scrollIntoViewOptions?: boolean | ScrollIntoViewOptions;
-    closeIcon?: ReactNode;
-}
-export interface TourStepProps extends TourStepInfo {
-    prefixCls?: string;
-    total?: number;
-    current?: number;
-    onClose?: () => void;
-    onFinish?: () => void;
-    renderPanel?: (step: TourStepProps, current: number) => ReactNode;
-    onPrev?: () => void;
-    onNext?: () => void;
-}
-declare const TourStep: (props: TourStepProps) => React.JSX.Element;
+import { DefaultPanelProps } from './DefaultPanel';
+import type { TourStepProps, TourStepInfo } from '../interface';
+export type { TourStepProps, TourStepInfo, };
+declare const TourStep: (props: DefaultPanelProps) => React.JSX.Element;
 export default TourStep;

lib/index.d.ts

 import Tour from './Tour';
-export type { TourProps } from './Tour';
-export type { TourStepInfo, TourStepProps } from './TourStep';
+export type { TourProps, TourStepInfo, TourStepProps } from './interface';
 export default Tour;

lib/index.js

@@ -9,3 +9,2 @@ "use strict";
 var _Tour = _interopRequireDefault(require("./Tour"));
-var _default = _Tour.default;
-exports.default = _default;
+var _default = exports.default = _Tour.default;

lib/Mask.js

@@ -106,3 +106,2 @@ "use strict";
 };
-var _default = Mask;
-exports.default = _default;
+var _default = exports.default = Mask;

lib/placements.js

@@ -76,3 +76,2 @@ "use strict";
 }
-var placements = getPlacements();
-exports.placements = placements;
+var placements = exports.placements = getPlacements();

lib/Tour.d.ts

@@ -1,40 +0,5 @@
-import type { ReactNode } from 'react';
 import * as React from 'react';
-import type { TriggerProps } from '@rc-component/trigger';
-import type { Gap } from './hooks/useTarget';
-import type { PlacementType } from './placements';
-import type { TourStepInfo, TourStepProps } from './TourStep';
-export interface TourProps extends Pick<TriggerProps, 'onPopupAlign'> {
-    steps?: TourStepInfo[];
-    open?: boolean;
-    defaultCurrent?: number;
-    current?: number;
-    onChange?: (current: number) => void;
-    onClose?: (current: number) => void;
-    onFinish?: () => void;
-    closeIcon?: TourStepProps['closeIcon'];
-    mask?: boolean | {
-        style?: React.CSSProperties;
-        color?: string;
-    };
-    arrow?: boolean | {
-        pointAtCenter: boolean;
-    };
-    rootClassName?: string;
-    placement?: PlacementType;
-    prefixCls?: string;
-    renderPanel?: (props: TourStepProps, current: number) => ReactNode;
-    gap?: Gap;
-    animated?: boolean | {
-        placeholder: boolean;
-    };
-    scrollIntoViewOptions?: boolean | ScrollIntoViewOptions;
-    zIndex?: number;
-    getPopupContainer?: TriggerProps['getPopupContainer'];
-    builtinPlacements?: TriggerProps['builtinPlacements'] | ((config?: {
-        arrowPointAtCenter?: boolean;
-    }) => TriggerProps['builtinPlacements']);
-    disabledInteraction?: boolean;
-}
+import type { TourProps } from './interface';
+export type { TourProps };
 declare const Tour: React.FC<TourProps>;
 export default Tour;

lib/Tour.js

@@ -14,3 +14,4 @@ "use strict";
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var React = _interopRequireWildcard(require("react"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
 var _portal = _interopRequireDefault(require("@rc-component/portal"));
@@ -21,2 +22,3 @@ var _trigger = _interopRequireDefault(require("@rc-component/trigger"));
 var _useMergedState5 = _interopRequireDefault(require("rc-util/lib/hooks/useMergedState"));
+var _useClosable = require("./hooks/useClosable");
 var _useTarget3 = _interopRequireDefault(require("./hooks/useTarget"));
@@ -27,3 +29,3 @@ var _Mask = _interopRequireDefault(require("./Mask"));
 var _util = require("./util");
-var _excluded = ["prefixCls", "steps", "defaultCurrent", "current", "onChange", "onClose", "onFinish", "open", "mask", "arrow", "rootClassName", "placement", "renderPanel", "gap", "animated", "scrollIntoViewOptions", "zIndex", "closeIcon", "builtinPlacements", "disabledInteraction"];
+var _excluded = ["prefixCls", "steps", "defaultCurrent", "current", "onChange", "onClose", "onFinish", "open", "mask", "arrow", "rootClassName", "placement", "renderPanel", "gap", "animated", "scrollIntoViewOptions", "zIndex", "closeIcon", "closable", "builtinPlacements", "disabledInteraction"];
 var CENTER_PLACEHOLDER = {
@@ -36,4 +38,4 @@ left: '50%',
 var defaultScrollIntoViewOptions = {
-  block: "center",
-  inline: "center"
+  block: 'center',
+  inline: 'center'
 };
@@ -65,2 +67,3 @@ var Tour = function Tour(props) {
     closeIcon = props.closeIcon,
+    closable = props.closable,
     builtinPlacements = props.builtinPlacements,
@@ -102,5 +105,6 @@ disabledInteraction = props.disabledInteraction,
     stepScrollIntoViewOptions = _ref$scrollIntoViewOp === void 0 ? defaultScrollIntoViewOptions : _ref$scrollIntoViewOp,
-    stepCloseIcon = _ref.closeIcon;
+    stepCloseIcon = _ref.closeIcon,
+    stepClosable = _ref.closable;
+  var mergedClosable = (0, _useClosable.useClosable)(prefixCls, stepClosable, stepCloseIcon, closable, closeIcon);
   var mergedMask = mergedOpen && (stepMask !== null && stepMask !== void 0 ? stepMask : mask);
-  var mergedCloseIcon = stepCloseIcon !== null && stepCloseIcon !== void 0 ? stepCloseIcon : closeIcon;
   var mergedScrollIntoViewOptions = stepScrollIntoViewOptions !== null && stepScrollIntoViewOptions !== void 0 ? stepScrollIntoViewOptions : scrollIntoViewOptions;
@@ -118,3 +122,3 @@ var _useTarget = (0, _useTarget3.default)(target, open, gap, mergedScrollIntoViewOptions),
     var _triggerRef$current;
-    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 ? void 0 : _triggerRef$current.forceAlign();
+    (_triggerRef$current = triggerRef.current) === null || _triggerRef$current === void 0 || _triggerRef$current.forceAlign();
   }, [arrowPointAtCenter, mergedCurrent]);
@@ -125,5 +129,5 @@
     setMergedCurrent(nextCurrent);
-    onChange === null || onChange === void 0 ? void 0 : onChange(nextCurrent);
+    onChange === null || onChange === void 0 || onChange(nextCurrent);
   };
-  var mergedBuiltinPlacements = (0, React.useMemo)(function () {
+  var mergedBuiltinPlacements = (0, _react.useMemo)(function () {
     if (builtinPlacements) {
@@ -144,3 +148,3 @@ return typeof builtinPlacements === 'function' ? builtinPlacements({
     setMergedOpen(false);
-    onClose === null || onClose === void 0 ? void 0 : onClose(mergedCurrent);
+    onClose === null || onClose === void 0 || onClose(mergedCurrent);
   };
@@ -164,6 +168,7 @@ var getPopupElement = function getPopupElement() {
         handleClose();
-        _onFinish === null || _onFinish === void 0 ? void 0 : _onFinish();
-      },
-      closeIcon: mergedCloseIcon
-    }, steps[mergedCurrent]));
+        _onFinish === null || _onFinish === void 0 || _onFinish();
+      }
+    }, steps[mergedCurrent], {
+      closable: mergedClosable
+    }));
   };
@@ -213,3 +218,2 @@ var mergedShowMask = typeof mergedMask === 'boolean' ? mergedMask : !!mergedMask;
 };
-var _default = Tour;
-exports.default = _default;
+var _default = exports.default = Tour;

lib/TourStep/DefaultPanel.d.ts

 import * as React from 'react';
-import type { TourStepProps } from '.';
-export default function DefaultPanel(props: TourStepProps): React.JSX.Element;
+import type { TourStepProps } from '../interface';
+export type DefaultPanelProps = Exclude<TourStepProps, "closable"> & {
+    closable: Exclude<TourStepProps["closable"], boolean>;
+};
+export default function DefaultPanel(props: DefaultPanelProps): React.JSX.Element;

lib/TourStep/DefaultPanel.js

@@ -10,4 +10,6 @@ "use strict";
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _pickAttrs = _interopRequireDefault(require("rc-util/lib/pickAttrs"));
 function DefaultPanel(props) {
@@ -24,7 +26,6 @@ var prefixCls = props.prefixCls,
     className = props.className,
-    closeIcon = props.closeIcon;
-  var mergedClosable = closeIcon !== false && closeIcon !== null;
-  var mergedCloseIcon = closeIcon !== undefined && closeIcon !== true ? closeIcon : /*#__PURE__*/React.createElement("span", {
-    className: "".concat(prefixCls, "-close-x")
-  }, "\xD7");
+    closable = props.closable;
+  var ariaProps = (0, _pickAttrs.default)(closable || {}, true);
+  var closeIcon = closable === null || closable === void 0 ? void 0 : closable.closeIcon;
+  var mergedClosable = !!closable;
   return /*#__PURE__*/React.createElement("div", {
@@ -34,8 +35,9 @@ className: (0, _classnames.default)("".concat(prefixCls, "-content"), className)
     className: "".concat(prefixCls, "-inner")
-  }, mergedClosable && /*#__PURE__*/React.createElement("button", {
+  }, mergedClosable && /*#__PURE__*/React.createElement("button", (0, _extends2.default)({
     type: "button",
     onClick: onClose,
-    "aria-label": "Close",
+    "aria-label": "Close"
+  }, ariaProps, {
     className: "".concat(prefixCls, "-close")
-  }, mergedCloseIcon), /*#__PURE__*/React.createElement("div", {
+  }), closeIcon), /*#__PURE__*/React.createElement("div", {
     className: "".concat(prefixCls, "-header")
@@ -42,0 +44,0 @@ }, /*#__PURE__*/React.createElement("div", {

lib/TourStep/index.d.ts

 import * as React from 'react';
-import type { ReactNode, CSSProperties } from 'react';
-import type { PlacementType } from '../placements';
-export interface TourStepInfo {
-    arrow?: boolean | {
-        pointAtCenter: boolean;
-    };
-    target?: HTMLElement | (() => HTMLElement) | null | (() => null);
-    title: ReactNode;
-    description?: ReactNode;
-    placement?: PlacementType;
-    mask?: boolean | {
-        style?: React.CSSProperties;
-        color?: string;
-    };
-    className?: string;
-    style?: CSSProperties;
-    scrollIntoViewOptions?: boolean | ScrollIntoViewOptions;
-    closeIcon?: ReactNode;
-}
-export interface TourStepProps extends TourStepInfo {
-    prefixCls?: string;
-    total?: number;
-    current?: number;
-    onClose?: () => void;
-    onFinish?: () => void;
-    renderPanel?: (step: TourStepProps, current: number) => ReactNode;
-    onPrev?: () => void;
-    onNext?: () => void;
-}
-declare const TourStep: (props: TourStepProps) => React.JSX.Element;
+import { DefaultPanelProps } from './DefaultPanel';
+import type { TourStepProps, TourStepInfo } from '../interface';
+export type { TourStepProps, TourStepInfo, };
+declare const TourStep: (props: DefaultPanelProps) => React.JSX.Element;
 export default TourStep;

lib/TourStep/index.js

@@ -16,3 +16,2 @@ "use strict";
 };
-var _default = TourStep;
-exports.default = _default;
+var _default = exports.default = TourStep;

package.json

 {
   "name": "@rc-component/tour",
-  "version": "1.12.3",
+  "version": "1.13.0",
   "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

66691

increased by8.85%

Number of package files

43

increased by22.86%

Lines of code

1439

increased by9.02%

No dependency changes