chore: fix logic

ant-design · Mar 8, 2024 · 839af5a · 839af5a
1 parent 017f5b9
commit 839af5a
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 28 deletions.
diff --git a/components/tour/PurePanel.tsx b/components/tour/PurePanel.tsx
@@ -1,11 +1,15 @@
-import classNames from 'classnames';
 import * as React from 'react';
+import CloseOutlined from '@ant-design/icons/CloseOutlined';
+import classNames from 'classnames';
+
+import useClosable from '../_util/hooks/useClosable';
+import { withPureRenderTheme } from '../_util/PurePanel';
+import { cloneElement } from '../_util/reactNode';
 import { ConfigContext } from '../config-provider';
 import { RawPurePanel as PopoverRawPurePanel } from '../popover/PurePanel';
 import type { TourStepProps } from './interface';
 import TourPanel from './panelRender';
 import useStyle from './style';
-import { withPureRenderTheme } from '../_util/PurePanel';
 
 export interface PurePanelProps extends TourStepProps {}
 
@@ -17,6 +21,8 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
     className,
     style,
     type,
+    closable,
+    closeIcon,
     ...restProps
   } = props;
 
@@ -25,6 +31,19 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
 
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
 
+  const [mergedClosable, mergedCloseIcon] = useClosable({
+    closable,
+    closeIcon,
+    customCloseIconRender: (icon) =>
+      React.isValidElement(icon)
+        ? cloneElement(icon, {
+            className: classNames(icon.props.className, `${prefixCls}-close-icon`),
+          })
+        : icon,
+    defaultCloseIcon: <CloseOutlined />,
+    defaultClosable: true,
+  });
+
   return wrapCSSVar(
     <PopoverRawPurePanel
       prefixCls={prefixCls}
@@ -37,7 +56,16 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
       )}
       style={style}
     >
-      <TourPanel stepProps={{ ...restProps, prefixCls, total }} current={current} type={type} />
+      <TourPanel
+        stepProps={{
+          ...restProps,
+          prefixCls,
+          total,
+          closable: mergedClosable ? { closeIcon: mergedCloseIcon } : undefined,
+        }}
+        current={current}
+        type={type}
+      />
     </PopoverRawPurePanel>,
   );
 };

diff --git a/components/tour/index.tsx b/components/tour/index.tsx
@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import RCTour from '@rc-component/tour';
+import RCTour, { type TourProps as RcTourProps } from '@rc-component/tour';
 import classNames from 'classnames';
 
 import { useZIndex } from '../_util/hooks/useZIndex';
@@ -8,7 +8,7 @@ import zIndexContext from '../_util/zindexContext';
 import type { ConfigConsumerProps } from '../config-provider';
 import { ConfigContext } from '../config-provider';
 import { useToken } from '../theme/internal';
-import type { TourProps, TourStepProps } from './interface';
+import type { TourProps } from './interface';
 import TourPanel from './panelRender';
 import PurePanel from './PurePanel';
 import useStyle from './style';
@@ -24,7 +24,7 @@ const Tour: React.FC<TourProps> & { _InternalPanelDoNotUseOrYouWillBeFired: type
     steps,
     ...restProps
   } = props;
-  const { getPrefixCls, direction, tour } = useContext<ConfigConsumerProps>(ConfigContext);
+  const { getPrefixCls, direction } = useContext<ConfigConsumerProps>(ConfigContext);
   const prefixCls = getPrefixCls('tour', customizePrefixCls);
   const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
   const [, token] = useToken();
@@ -58,12 +58,11 @@ const Tour: React.FC<TourProps> & { _InternalPanelDoNotUseOrYouWillBeFired: type
     rootClassName,
   );
 
-  const mergedRenderPanel = (stepProps: TourStepProps, stepCurrent: number): React.ReactNode => (
+  const mergedRenderPanel: RcTourProps['renderPanel'] = (stepProps, stepCurrent) => (
     <TourPanel
       type={type}
       stepProps={stepProps}
       current={stepCurrent}
-      closeIcon={tour?.closeIcon}
       indicatorsRender={indicatorsRender}
     />
   );

diff --git a/components/tour/interface.ts b/components/tour/interface.ts
@@ -1,8 +1,8 @@
+import type { ReactNode } from 'react';
 import type {
   TourProps as RCTourProps,
   TourStepProps as RCTourStepProps,
 } from '@rc-component/tour';
-import type { ReactNode } from 'react';
 
 export interface TourProps extends Omit<RCTourProps, 'renderPanel'> {
   steps?: TourStepProps[];

diff --git a/components/tour/panelRender.tsx b/components/tour/panelRender.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import classNames from 'classnames';
 
-import useClosable from '../_util/hooks/useClosable';
 import type { ButtonProps } from '../button';
 import Button from '../button';
 import { useLocale } from '../locale';
@@ -15,17 +14,18 @@ function isValidNode(node: ReactNode): boolean {
 }
 
 interface TourPanelProps {
-  stepProps: TourStepProps;
+  stepProps: Omit<TourStepProps, 'closable'> & {
+    closable?: Exclude<TourStepProps['closable'], boolean>;
+  };
   current: number;
   type: TourStepProps['type'];
   indicatorsRender?: TourStepProps['indicatorsRender'];
-  closeIcon?: ReactNode;
 }
 
 // Due to the independent design of Panel, it will be too coupled to put in rc-tour,
 // so a set of Panel logic is implemented separately in antd.
 const TourPanel: React.FC<TourPanelProps> = (props) => {
-  const { stepProps, current, type, closeIcon, indicatorsRender } = props;
+  const { stepProps, current, type, indicatorsRender } = props;
   const {
     prefixCls,
     total = 1,
@@ -39,27 +39,24 @@ const TourPanel: React.FC<TourPanelProps> = (props) => {
     nextButtonProps,
     prevButtonProps,
     type: stepType,
-    closeIcon: stepCloseIcon,
+    closable,
   } = stepProps;
 
   const mergedType = stepType ?? type;
 
-  const mergedCloseIcon = stepCloseIcon ?? closeIcon;
+  const mergedCloseIcon = React.useMemo(() => {
+    let defaultCloseIcon: React.ReactNode = <CloseOutlined className={`${prefixCls}-close-icon`} />;
 
-  const mergedClosable = mergedCloseIcon !== false && mergedCloseIcon !== null;
+    if (closable && closable.closeIcon) {
+      defaultCloseIcon = closable.closeIcon;
+    }
 
-  const [closable, mergedDisplayCloseIcon] = useClosable({
-    closable: mergedClosable,
-    closeIcon: mergedCloseIcon,
-    // eslint-disable-next-line react/no-unstable-nested-components
-    customCloseIconRender: (icon) => (
+    return (
       <span onClick={onClose} aria-label="Close" className={`${prefixCls}-close`}>
-        {icon}
+        {defaultCloseIcon}
       </span>
-    ),
-    defaultCloseIcon: <CloseOutlined className={`${prefixCls}-close-icon`} />,
-    defaultClosable: true,
-  });
+    );
+  }, [closable]);
 
   const isLastStep = current === total - 1;
 
@@ -119,7 +116,7 @@ const TourPanel: React.FC<TourPanelProps> = (props) => {
   return (
     <div className={`${prefixCls}-content`}>
       <div className={`${prefixCls}-inner`}>
-        {closable && mergedDisplayCloseIcon}
+        {closable && mergedCloseIcon}
         {coverNode}
         {headerNode}
         {descriptionNode}

diff --git a/package.json b/package.json
@@ -123,7 +123,7 @@
     "@ctrl/tinycolor": "^3.6.1",
     "@rc-component/color-picker": "~1.5.2",
     "@rc-component/mutate-observer": "^1.1.0",
-    "@rc-component/tour": "~1.14.0",
+    "@rc-component/tour": "~1.14.2",
     "@rc-component/trigger": "^2.0.0",
     "classnames": "^2.5.1",
     "copy-to-clipboard": "^3.3.3",