diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx
index 16ad39a273..f4277c8b5d 100644
--- a/components/config-provider/__tests__/style.test.tsx
+++ b/components/config-provider/__tests__/style.test.tsx
@@ -50,6 +50,7 @@ import Tabs from '../../tabs';
import Tag from '../../tag';
import TimePicker from '../../time-picker';
import Timeline from '../../timeline';
+import Tour from '../../tour';
import Transfer from '../../transfer';
import Tree from '../../tree';
import Typography from '../../typography';
@@ -1327,4 +1328,17 @@ describe('ConfigProvider support style and className props', () => {
expect(element).toHaveClass('cp-dropdown');
expect(element).toHaveStyle({ backgroundColor: 'red' });
});
+
+ it('Should Tour closeIcon works', () => {
+ const { container } = render(
+ cp-test-closeIcon }}
+ >
+
+ ,
+ );
+ const selectors = '.ant-tour .ant-tour-inner .ant-tour-close .cp-test-closeIcon';
+ const element = container.querySelector(selectors);
+ expect(element).toBeTruthy();
+ });
});
diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts
index df2e406832..188b030b20 100644
--- a/components/config-provider/context.ts
+++ b/components/config-provider/context.ts
@@ -15,6 +15,7 @@ import type { SelectProps } from '../select';
import type { SpaceProps } from '../space';
import type { TabsProps } from '../tabs';
import type { AliasToken, MappingAlgorithm, OverrideToken } from '../theme/interface';
+import type { TourProps } from '../tour/interface';
import type { RenderEmptyHandler } from './defaultRenderEmpty';
export const defaultIconPrefixCls = 'anticon';
@@ -65,6 +66,8 @@ export interface ComponentStyleConfig {
style?: React.CSSProperties;
}
+export type TourConfig = Pick;
+
export type ModalConfig = ComponentStyleConfig & Pick;
export type BadgeConfig = ComponentStyleConfig & Pick;
@@ -145,6 +148,7 @@ export interface ConfigConsumerProps {
tabs?: ComponentStyleConfig & Pick;
timeline?: ComponentStyleConfig;
timePicker?: ComponentStyleConfig;
+ tour?: TourConfig;
upload?: ComponentStyleConfig;
notification?: ComponentStyleConfig;
tree?: ComponentStyleConfig;
diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
index 769d86a9ad..fa15071cbd 100644
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@@ -151,6 +151,7 @@ const {
| tag | Set Tag common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| timeline | Set Timeline common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| timePicker | Set TimePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| tour | Set Tour common props | { closeIcon?: React.ReactNode } | - | 5.14.0 |
| transfer | Set Transfer common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| tree | Set Tree common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| typography | Set Typography common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx
index fe489abae9..a234be134d 100644
--- a/components/config-provider/index.tsx
+++ b/components/config-provider/index.tsx
@@ -33,6 +33,7 @@ import type {
PopupOverflow,
Theme,
ThemeConfig,
+ TourConfig,
WaveConfig,
} from './context';
import { ConfigConsumer, ConfigContext, defaultIconPrefixCls } from './context';
@@ -181,6 +182,7 @@ export interface ConfigProviderProps {
* Wave is special component which only patch on the effect of component interaction.
*/
wave?: WaveConfig;
+ tour?: TourConfig;
}
interface ProviderChildrenProps extends ConfigProviderProps {
@@ -191,6 +193,7 @@ interface ProviderChildrenProps extends ConfigProviderProps {
type holderRenderType = (children: React.ReactNode) => React.ReactNode;
export const defaultPrefixCls = 'ant';
+
let globalPrefixCls: string;
let globalIconPrefixCls: string;
let globalTheme: ThemeConfig;
@@ -333,6 +336,7 @@ const ProviderChildren: React.FC = (props) => {
wave,
dropdown,
warning: warningConfig,
+ tour,
} = props;
// =================================== Context ===================================
@@ -426,6 +430,7 @@ const ProviderChildren: React.FC = (props) => {
wave,
dropdown,
warning: warningConfig,
+ tour,
};
const config: ConfigConsumerProps = {
diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
index 0f12cb177e..05203513d0 100644
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@@ -153,6 +153,7 @@ const {
| tag | 设置 Tag 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| timeline | 设置 Timeline 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| timePicker | 设置 TimePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
+| tour | 设置 Tour 组件的通用属性 | { closeIcon?: React.ReactNode } | - | 5.14.0 |
| transfer | 设置 Transfer 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| tree | 设置 Tree 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| typography | 设置 Typography 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
diff --git a/components/tour/demo/basic.tsx b/components/tour/demo/basic.tsx
index b3c53537df..340130c6a0 100644
--- a/components/tour/demo/basic.tsx
+++ b/components/tour/demo/basic.tsx
@@ -33,15 +33,12 @@ const App: React.FC = () => {
target: () => ref3.current,
},
];
-
return (
<>
-
-
} />
-
setOpen(false)} steps={steps} />
>
);
diff --git a/components/tour/index.tsx b/components/tour/index.tsx
index 6785ee3745..3a0b7f9384 100644
--- a/components/tour/index.tsx
+++ b/components/tour/index.tsx
@@ -1,4 +1,4 @@
-import React, { useContext, useMemo } from 'react';
+import React, { useContext } from 'react';
import RCTour from '@rc-component/tour';
import classNames from 'classnames';
@@ -24,12 +24,12 @@ const Tour: React.FC & { _InternalPanelDoNotUseOrYouWillBeFired: type
steps,
...restProps
} = props;
- const { getPrefixCls, direction } = useContext(ConfigContext);
+ const { getPrefixCls, direction, tour } = useContext(ConfigContext);
const prefixCls = getPrefixCls('tour', customizePrefixCls);
const [wrapCSSVar, hashId, cssVarCls] = useStyle(prefixCls);
const [, token] = useToken();
- const mergedSteps = useMemo(
+ const mergedSteps = React.useMemo(
() =>
steps?.map((step) => ({
...step,
@@ -63,6 +63,7 @@ const Tour: React.FC & { _InternalPanelDoNotUseOrYouWillBeFired: type
type={type}
stepProps={stepProps}
current={stepCurrent}
+ closeIcon={tour?.closeIcon}
indicatorsRender={indicatorsRender}
/>
);
diff --git a/components/tour/panelRender.tsx b/components/tour/panelRender.tsx
index dc30437f0d..46df7a93dd 100644
--- a/components/tour/panelRender.tsx
+++ b/components/tour/panelRender.tsx
@@ -1,13 +1,14 @@
-import CloseOutlined from '@ant-design/icons/CloseOutlined';
-import classNames from 'classnames';
import type { ReactNode } from 'react';
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';
import defaultLocale from '../locale/en_US';
import type { TourStepProps } from './interface';
-import useClosable from '../_util/hooks/useClosable';
function isValidNode(node: ReactNode): boolean {
return node !== undefined && node !== null;
@@ -23,13 +24,8 @@ interface TourPanelProps {
// 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 = ({
- stepProps,
- current,
- type,
- indicatorsRender,
- closeIcon,
-}) => {
+const TourPanel: React.FC = (props) => {
+ const { stepProps, current, type, closeIcon, indicatorsRender } = props;
const {
prefixCls,
total = 1,
@@ -49,6 +45,7 @@ const TourPanel: React.FC = ({
const mergedType = stepType ?? type;
const mergedCloseIcon = stepCloseIcon ?? closeIcon;
+
const mergedClosable = mergedCloseIcon !== false && mergedCloseIcon !== null;
const [closable, mergedDisplayCloseIcon] = useClosable(