feat(tour): TourStepProps ButtonProps ts definition update ()

* feat: tour ts define update

* test: add more unit test
This commit is contained in:
Cat-XHS 2022-11-24 15:38:42 +08:00 committed by GitHub
parent e8875f1969
commit ce5d71d66f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 133 additions and 4 deletions

View File

@ -31,6 +31,85 @@ exports[`Tour basic 1`] = `
</div>
`;
exports[`Tour custom step pre btn & next btn className & style 1`] = `
<div>
<div
class="ant-tour"
style="z-index: 1090; opacity: 0;"
>
<div
class="ant-tour-content"
>
<div
class="ant-tour-inner"
>
<span
aria-label="close"
class="anticon anticon-close ant-tour-close"
role="img"
tabindex="-1"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
/>
</svg>
</span>
<div
class="ant-tour-header"
>
<div
class="ant-tour-title"
>
Show in Center
</div>
</div>
<div
class="ant-tour-description"
>
Here is the content of Tour.
</div>
<div
class="ant-tour-footer"
>
<div
class="ant-tour-sliders"
>
<span
class="ant-tour-slider-active ant-tour-slider"
/>
<span
class="ant-tour-slider"
/>
</div>
<div
class="ant-tour-buttons"
>
<button
class="ant-btn ant-btn-primary ant-btn-sm ant-tour-next-btn customClassName"
style="background-color: rgb(69, 69, 255);"
type="button"
>
<span>
Next
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`Tour rtl render component should be rendered correctly in RTL direction 1`] = `null`;
exports[`Tour single 1`] = `

View File

@ -259,4 +259,44 @@ describe('Tour', () => {
panelRender({ total: undefined, title: <div>test</div> }, 0, 'default');
}).not.toThrow();
});
it('custom step pre btn & next btn className & style', () => {
const App: React.FC = () => (
<Tour
steps={[
{
title: 'Show in Center',
description: 'Here is the content of Tour.',
nextButtonProps: {
className: 'customClassName',
style: {
backgroundColor: 'rgb(69,69,255)',
},
},
},
{
title: 'With Cover',
description: 'Here is the content of Tour.',
cover: (
<img
alt="tour.png"
src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"
/>
),
},
]}
/>
);
const { container } = render(<App />);
// 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();
});
});

View File

@ -15,8 +15,18 @@ export type TourProps = Omit<RCTourProps, 'renderPanel'> & {
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 类型,影响底色与文字颜色
}

View File

@ -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}
</Button>
@ -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)}