Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from Nov 24, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e2383cc
feat: tour ts define update
ONLY-yours Nov 23, 2022
ad2ce58
test: add more unit test
ONLY-yours Nov 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
79 changes: 79 additions & 0 deletions components/tour/__tests__/__snapshots__/index.test.tsx.snap
View file
Open in desktop
Expand Up @@ -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`] = `
Expand Down
40 changes: 40 additions & 0 deletions components/tour/__tests__/index.test.tsx
View file
Open in desktop
Expand Up @@ -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();
});
});
14 changes: 12 additions & 2 deletions components/tour/interface.ts
View file
Open in desktop
Expand Up @@ -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 类型，影响底色与文字颜色
}
Expand Down
4 changes: 2 additions & 2 deletions components/tour/panelRender.tsx
View file
Open in desktop
Expand Up @@ -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>
Expand All @@ -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)}
Expand Down