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>
|
</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 rtl render component should be rendered correctly in RTL direction 1`] = `null`;
|
||||||
|
|
||||||
exports[`Tour single 1`] = `
|
exports[`Tour single 1`] = `
|
||||||
|
@ -259,4 +259,44 @@ describe('Tour', () => {
|
|||||||
panelRender({ total: undefined, title: <div>test</div> }, 0, 'default');
|
panelRender({ total: undefined, title: <div>test</div> }, 0, 'default');
|
||||||
}).not.toThrow();
|
}).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 {
|
export interface TourStepProps extends RCTourStepProps {
|
||||||
cover?: ReactNode; // 展示的图片或者视频
|
cover?: ReactNode; // 展示的图片或者视频
|
||||||
nextButtonProps?: { children?: ReactNode; onClick?: () => void };
|
nextButtonProps?: {
|
||||||
prevButtonProps?: { children?: ReactNode; onClick?: () => void };
|
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;
|
stepRender?: (current: number, total: number) => ReactNode;
|
||||||
type?: 'default' | 'primary'; // default 类型,影响底色与文字颜色
|
type?: 'default' | 'primary'; // default 类型,影响底色与文字颜色
|
||||||
}
|
}
|
||||||
|
@ -103,7 +103,7 @@ const panelRender = (
|
|||||||
{...prevButtonProps}
|
{...prevButtonProps}
|
||||||
onClick={prevBtnClick}
|
onClick={prevBtnClick}
|
||||||
size="small"
|
size="small"
|
||||||
className={`${prefixCls}-prev-btn`}
|
className={classNames(`${prefixCls}-prev-btn`, prevButtonProps?.className)}
|
||||||
>
|
>
|
||||||
{prevButtonProps?.children ?? contextLocale.Previous}
|
{prevButtonProps?.children ?? contextLocale.Previous}
|
||||||
</Button>
|
</Button>
|
||||||
@ -113,7 +113,7 @@ const panelRender = (
|
|||||||
{...nextButtonProps}
|
{...nextButtonProps}
|
||||||
onClick={nextBtnClick}
|
onClick={nextBtnClick}
|
||||||
size="small"
|
size="small"
|
||||||
className={`${prefixCls}-next-btn`}
|
className={classNames(`${prefixCls}-next-btn`, nextButtonProps?.className)}
|
||||||
>
|
>
|
||||||
{nextButtonProps?.children ??
|
{nextButtonProps?.children ??
|
||||||
(isLastStep ? contextLocale.Finish : contextLocale.Next)}
|
(isLastStep ? contextLocale.Finish : contextLocale.Next)}
|
||||||
|
Loading…
Reference in New Issue
Block a user