From e2383cca68dd133a9451aa41f84280a3e9ca36d8 Mon Sep 17 00:00:00 2001 From: ONLY-yours <1349021570@qq.com> Date: Wed, 23 Nov 2022 17:34:03 +0800 Subject: [PATCH 1/2] feat: tour ts define update --- components/tour/interface.ts | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/components/tour/interface.ts b/components/tour/interface.ts index 0831e51e8b1d..2c70c7adcbd7 100644 --- a/components/tour/interface.ts +++ b/components/tour/interface.ts @@ -3,6 +3,7 @@ import type { TourProps as RCTourProps, TourStepProps as RCTourStepProps, } from '@rc-component/tour'; +import type { ButtonProps } from '../button'; export type TourProps = Omit & { steps?: TourStepProps[]; @@ -15,8 +16,8 @@ export type TourProps = Omit & { export interface TourStepProps extends RCTourStepProps { cover?: ReactNode; // 展示的图片或者视频 - nextButtonProps?: { children?: ReactNode; onClick?: () => void }; - prevButtonProps?: { children?: ReactNode; onClick?: () => void }; + nextButtonProps?: { children?: ReactNode; onClick?: () => void } & ButtonProps; + prevButtonProps?: { children?: ReactNode; onClick?: () => void } & ButtonProps; stepRender?: (current: number, total: number) => ReactNode; type?: 'default' | 'primary'; // default 类型，影响底色与文字颜色 } From ad2ce589fe1a355bf776dbfe5706684549f955b7 Mon Sep 17 00:00:00 2001 From: ONLY-yours <1349021570@qq.com> Date: Wed, 23 Nov 2022 18:27:12 +0800 Subject: [PATCH 2/2] test: add more unit test --- .../__snapshots__/index.test.tsx.snap | 79 +++++++++++++++++++ components/tour/__tests__/index.test.tsx | 40 ++++++++++ components/tour/interface.ts | 15 +++- components/tour/panelRender.tsx | 4 +- 4 files changed, 133 insertions(+), 5 deletions(-) diff --git a/components/tour/__tests__/__snapshots__/index.test.tsx.snap b/components/tour/__tests__/__snapshots__/index.test.tsx.snap index 00d7865d661d..af0dcd11c725 100644 --- a/components/tour/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/tour/__tests__/__snapshots__/index.test.tsx.snap @@ -31,6 +31,85 @@ exports[`Tour basic 1`] = ` `; +exports[`Tour custom step pre btn & next btn className & style 1`] = ` +
+
+
+
+ + + +
+
+ Show in Center +
+
+
+ Here is the content of Tour. +
+
+
+ + +
+
+ +
+
+
+
+
+
+`; + exports[`Tour rtl render component should be rendered correctly in RTL direction 1`] = `null`; exports[`Tour single 1`] = ` diff --git a/components/tour/__tests__/index.test.tsx b/components/tour/__tests__/index.test.tsx index 5dcc54b5d6b8..f55b0fad0528 100644 --- a/components/tour/__tests__/index.test.tsx +++ b/components/tour/__tests__/index.test.tsx @@ -259,4 +259,44 @@ describe('Tour', () => { panelRender({ total: undefined, title:
test
}, 0, 'default'); }).not.toThrow(); }); + + it('custom step pre btn & next btn className & style', () => { + const App: React.FC = () => ( + + ), + }, + ]} + /> + ); + + const { container } = render(); + // className + expect( + screen.getByRole('button', { name: 'Next' }).className.includes('customClassName'), + ).toEqual(true); + // style + expect(screen.getByRole('button', { name: 'Next' }).style.backgroundColor).toEqual( + 'rgb(69, 69, 255)', + ); + expect(container.firstChild).toMatchSnapshot(); + }); }); diff --git a/components/tour/interface.ts b/components/tour/interface.ts index 2c70c7adcbd7..fd682d759a65 100644 --- a/components/tour/interface.ts +++ b/components/tour/interface.ts @@ -3,7 +3,6 @@ import type { TourProps as RCTourProps, TourStepProps as RCTourStepProps, } from '@rc-component/tour'; -import type { ButtonProps } from '../button'; export type TourProps = Omit & { steps?: TourStepProps[]; @@ -16,8 +15,18 @@ export type TourProps = Omit & { export interface TourStepProps extends RCTourStepProps { cover?: ReactNode; // 展示的图片或者视频 - nextButtonProps?: { children?: ReactNode; onClick?: () => void } & ButtonProps; - prevButtonProps?: { children?: ReactNode; onClick?: () => void } & ButtonProps; + nextButtonProps?: { + children?: ReactNode; + onClick?: () => void; + className?: string; + style?: React.CSSProperties; + }; + prevButtonProps?: { + children?: ReactNode; + onClick?: () => void; + className?: string; + style?: React.CSSProperties; + }; stepRender?: (current: number, total: number) => ReactNode; type?: 'default' | 'primary'; // default 类型，影响底色与文字颜色 } diff --git a/components/tour/panelRender.tsx b/components/tour/panelRender.tsx index 867780f99717..cb9d777fdf95 100644 --- a/components/tour/panelRender.tsx +++ b/components/tour/panelRender.tsx @@ -103,7 +103,7 @@ const panelRender = ( {...prevButtonProps} onClick={prevBtnClick} size="small" - className={`${prefixCls}-prev-btn`} + className={classNames(`${prefixCls}-prev-btn`, prevButtonProps?.className)} > {prevButtonProps?.children ?? contextLocale.Previous} @@ -113,7 +113,7 @@ const panelRender = ( {...nextButtonProps} onClick={nextBtnClick} size="small" - className={`${prefixCls}-next-btn`} + className={classNames(`${prefixCls}-next-btn`, nextButtonProps?.className)} > {nextButtonProps?.children ?? (isLastStep ? contextLocale.Finish : contextLocale.Next)}