From 5097f3a8cd2795adf9bcba5ca195b4a7626e74ee Mon Sep 17 00:00:00 2001 From: Cat-XHS <1349021570@qq.com> Date: Thu, 24 Nov 2022 15:38:42 +0800 Subject: [PATCH] feat(tour): TourStepProps ButtonProps ts definition update (#38939) * feat: tour ts define update * test: add more unit test --- .../__snapshots__/index.test.tsx.snap | 79 +++++++++++++++++++ components/tour/__tests__/index.test.tsx | 40 ++++++++++ components/tour/interface.ts | 14 +++- components/tour/panelRender.tsx | 4 +- 4 files changed, 133 insertions(+), 4 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 0831e51e8b1d..fd682d759a65 100644 --- a/components/tour/interface.ts +++ b/components/tour/interface.ts @@ -15,8 +15,18 @@ 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; + 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)}