mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-18 19:39:51 +08:00
feat(tour): TourStepProps ButtonProps ts definition update (#38939)
* feat: tour ts define update * test: add more unit test
This commit is contained in:
parent
e8875f1969
commit
ce5d71d66f
components/tour
@ -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`] = `
|
||||
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
@ -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 类型,影响底色与文字颜色
|
||||
}
|
||||
|
@ -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)}
|
||||
|
Loading…
Reference in New Issue
Block a user