Skip to content

Commit

Permalink
fix: Fix tour step type (#39382)
Browse files Browse the repository at this point in the history 
* feat: fix-step-type

* feat: fix-step-type

* feat: add test

* feat: update test

* feat: update test snapshots

* feat: update test snapshots

* feat: update test snapshots

* fix: PurePanel style

* test: update snapshot

* feat: update package

* feat: fix-step-type

* feat: fix-step-type

* feat: add test

* feat: update test

* feat: update test snapshots

* feat: update test snapshots

* feat: update test snapshots

* feat: update package

* fix: PurePanel style

* test: update snapshot

* feat: update for checks

Co-authored-by: 二货机器人 <smith3816@gmail.com>
  • Loading branch information
@heiyu4585 @zombieJ
heiyu4585 and zombieJ committed Dec 19, 2022
1 parent a0b713c commit 1eaf125
Show file tree
Hide file tree
Showing 8 changed files with 1,203 additions and 516 deletions.
446 changes: 235 additions & 211 deletions components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap
View file

Large diffs are not rendered by default.

446 changes: 235 additions & 211 deletions components/tour/__tests__/__snapshots__/demo.test.ts.snap
View file

Large diffs are not rendered by default.

672 changes: 629 additions & 43 deletions components/tour/__tests__/__snapshots__/index.test.tsx.snap
View file

Large diffs are not rendered by default.

70 changes: 54 additions & 16 deletions components/tour/__tests__/index.test.tsx
View file
Expand Up @@ -29,10 +29,10 @@ describe('Tour', () => {
</>
);
};
const { getByText, container } = render(<App />);
const { getByText, baseElement } = render(<App />);
expect(getByText('cover title')).toBeTruthy();
expect(getByText('cover description.')).toBeTruthy();
expect(container.firstChild).toMatchSnapshot();
expect(baseElement).toMatchSnapshot();
});

it('steps is empty', () => {
Expand All @@ -48,8 +48,8 @@ describe('Tour', () => {
</>
);
};
const { container } = render(<App />);
expect(container.firstChild).toMatchSnapshot();
const { baseElement } = render(<App />);
expect(baseElement).toMatchSnapshot();
});

it('steps props stepRender', () => {
Expand Down Expand Up @@ -95,14 +95,14 @@ describe('Tour', () => {
</>
);
};
const { container } = render(<App />);
const { baseElement } = render(<App />);
fireEvent.click(screen.getByRole('button', { name: 'Next' }));
fireEvent.click(screen.getByRole('button', { name: 'Previous' }));
fireEvent.click(screen.getByRole('button', { name: 'Next' }));
fireEvent.click(screen.getByRole('button', { name: 'Next' }));
fireEvent.click(screen.getByRole('button', { name: 'Finish' }));
expect(onClickMock).toHaveBeenCalledTimes(5);
expect(container.firstChild).toMatchSnapshot();
expect(baseElement).toMatchSnapshot();
});

it('button props onClick', () => {
Expand Down Expand Up @@ -141,15 +141,16 @@ describe('Tour', () => {
</>
);
};
const { container } = render(<App />);
expect(container.querySelector('#btnName')).toHaveTextContent('defaultBtn');
const { baseElement } = render(<App />);
expect(baseElement.querySelector('#btnName')).toHaveTextContent('defaultBtn');
fireEvent.click(screen.getByRole('button', { name: 'Next' }));
expect(container.querySelector('#btnName')).toHaveTextContent('nextButton');
expect(baseElement.querySelector('#btnName')).toHaveTextContent('nextButton');
fireEvent.click(screen.getByRole('button', { name: 'Previous' }));
expect(container.querySelector('#btnName')).toHaveTextContent('prevButton');
expect(baseElement.querySelector('#btnName')).toHaveTextContent('prevButton');
fireEvent.click(screen.getByRole('button', { name: 'Next' }));
fireEvent.click(screen.getByRole('button', { name: 'Finish' }));
expect(container.querySelector('#btnName')).toHaveTextContent('finishButton');
expect(baseElement.querySelector('#btnName')).toHaveTextContent('finishButton');
expect(baseElement).toMatchSnapshot();
});

it('Primary', () => {
Expand All @@ -174,10 +175,47 @@ describe('Tour', () => {
</>
);
};
const { getByText, container } = render(<App />);
const { getByText, baseElement } = render(<App />);
expect(getByText('primary description.')).toBeTruthy();
expect(container.querySelector('.ant-tour')).toHaveClass('ant-tour-primary');
expect(container.firstChild).toMatchSnapshot();
expect(baseElement.querySelector('.ant-tour-content')).toHaveClass('ant-tour-primary');
expect(baseElement).toMatchSnapshot();
});

it('step support Primary', () => {
const App: React.FC = () => {
const coverBtnRef = useRef<HTMLButtonElement>(null);
return (
<>
<button disabled ref={coverBtnRef} type="button">
Cover
</button>

<Tour
type="default"
steps={[
{
title: 'cover title',
description: 'cover description.',
target: () => coverBtnRef.current!,
},
{
title: 'primary title',
description: 'primary description.',
target: () => coverBtnRef.current!,
type: 'primary',
},
]}
/>
</>
);
};
const { getByText, container, baseElement } = render(<App />);
expect(getByText('cover description.')).toBeTruthy();
expect(container.querySelector('.ant-tour-content.ant-tour-primary')).toBeFalsy();
fireEvent.click(screen.getByRole('button', { name: 'Next' }));
expect(getByText('primary description.')).toBeTruthy();
expect(container.querySelector('.ant-tour-content.ant-tour-primary')).toBeTruthy();
expect(baseElement).toMatchSnapshot();
});

it('basic', () => {
Expand Down Expand Up @@ -243,7 +281,7 @@ describe('Tour', () => {
</>
);
};
const { getByText, container } = render(<App />);
const { getByText, container, baseElement } = render(<App />);
fireEvent.click(screen.getByRole('button', { name: 'Show' }));
expect(getByText('Show in Center')).toBeTruthy();
fireEvent.click(screen.getByRole('button', { name: 'Next' }));
Expand All @@ -252,7 +290,7 @@ describe('Tour', () => {
expect(getByText('Adjust Placement')).toBeTruthy();
fireEvent.click(screen.getByRole('button', { name: 'Finish' }));
expect(container.querySelector('.ant-tour')).toBeFalsy();
expect(container.firstChild).toMatchSnapshot();
expect(baseElement).toMatchSnapshot();
});
it('panelRender should correct render when total is undefined', () => {
expect(() => {
Expand Down
3 changes: 0 additions & 3 deletions components/tour/index.tsx
View file
Expand Up @@ -27,9 +27,6 @@ const Tour: React.ForwardRefRenderFunction<HTMLDivElement, TourProps> & {
{
[`${prefixCls}-rtl`]: direction === 'rtl',
},
{
[`${prefixCls}-primary`]: type === 'primary',
},
hashId,
rootClassName,
);
Expand Down
69 changes: 41 additions & 28 deletions components/tour/panelRender.tsx
View file
Expand Up @@ -26,8 +26,12 @@ const panelRender = (
nextButtonProps,
prevButtonProps,
stepRender,
type: stepType,
arrow,
className,
} = props;

const mergedType = typeof stepType !== 'undefined' ? stepType : type;
const isLastStep = current === total - 1;

const prevBtnClick = () => {
Expand Down Expand Up @@ -80,47 +84,56 @@ const panelRender = (
));
const slickNode: ReactNode = total > 1 ? mergedSlickNode : null;

const mainBtnType = type === 'primary' ? 'default' : 'primary';
const mainBtnType = mergedType === 'primary' ? 'default' : 'primary';
const secondaryBtnProps: ButtonProps = {
type: 'default',
ghost: type === 'primary',
ghost: mergedType === 'primary',
};

return (
<LocaleReceiver componentName="Tour" defaultLocale={defaultLocale.Tour}>
{(contextLocale) => (
<>
<CloseOutlined className={`${prefixCls}-close`} onClick={onClose} />
{coverNode}
{headerNode}
{descriptionNode}
<div className={`${prefixCls}-footer`}>
<div className={`${prefixCls}-sliders`}>{slickNode}</div>
<div className={`${prefixCls}-buttons`}>
{current !== 0 ? (
<div
className={classNames(
mergedType === 'primary' ? `${prefixCls}-primary` : '',
className,
`${prefixCls}-content`,
)}
>
{arrow && <div className={`${prefixCls}-arrow`} key="arrow" />}
<div className={`${prefixCls}-inner`}>
<CloseOutlined className={`${prefixCls}-close`} onClick={onClose} />
{coverNode}
{headerNode}
{descriptionNode}
<div className={`${prefixCls}-footer`}>
<div className={`${prefixCls}-sliders`}>{slickNode}</div>
<div className={`${prefixCls}-buttons`}>
{current !== 0 ? (
<Button
{...secondaryBtnProps}
{...prevButtonProps}
onClick={prevBtnClick}
size="small"
className={`${prefixCls}-prev-btn`}
>
{prevButtonProps?.children ?? contextLocale.Previous}
</Button>
) : null}
<Button
{...secondaryBtnProps}
{...prevButtonProps}
onClick={prevBtnClick}
type={mainBtnType}
{...nextButtonProps}
onClick={nextBtnClick}
size="small"
className={`${prefixCls}-prev-btn`}
className={`${prefixCls}-next-btn`}
>
{prevButtonProps?.children ?? contextLocale.Previous}
{nextButtonProps?.children ??
(isLastStep ? contextLocale.Finish : contextLocale.Next)}
</Button>
) : null}
<Button
type={mainBtnType}
{...nextButtonProps}
onClick={nextBtnClick}
size="small"
className={`${prefixCls}-next-btn`}
>
{nextButtonProps?.children ??
(isLastStep ? contextLocale.Finish : contextLocale.Next)}
</Button>
</div>
</div>
</div>
</>
</div>
)}
</LocaleReceiver>
);
Expand Down
11 changes: 8 additions & 3 deletions components/tour/style/index.tsx
View file
Expand Up @@ -66,7 +66,7 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
display: 'none',
},

// ============================= panel content ===========================
// ============================= panel content ============================
[`${componentCls}-content`]: {
position: 'relative',
},
Expand Down Expand Up @@ -152,9 +152,13 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
},
},

// ============================= primary type ===========================
[`&${componentCls}-primary`]: {
// ============================= primary type ===========================
// `$` for panel, `&$` for pure panel
[`${componentCls}-primary, &${componentCls}-primary`]: {
'--antd-arrow-background-color': colorPrimary,
},

[`${componentCls}-primary`]: {
[`${componentCls}-inner`]: {
color: colorTextLightSolid,
textAlign: 'start',
Expand All @@ -180,6 +184,7 @@ const genBaseStyle: GenerateStyle<TourToken> = (token) => {
[`${componentCls}-prev-btn`]: {
color: colorTextLightSolid,
borderColor: new TinyColor(colorTextLightSolid).setAlpha(0.15).toRgbString(),
backgroundColor: colorPrimary,

'&:hover': {
backgroundColor: new TinyColor(colorTextLightSolid).setAlpha(0.15).toRgbString(),
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Expand Up @@ -115,7 +115,7 @@
"@ant-design/react-slick": "~1.0.0",
"@babel/runtime": "^7.18.3",
"@ctrl/tinycolor": "^3.4.0",
"@rc-component/tour": "~1.0.1-2",
"@rc-component/tour": "~1.1.0",
"classnames": "^2.2.6",
"copy-to-clipboard": "^3.2.0",
"dayjs": "^1.11.1",
Expand Down

0 comments on commit 1eaf125

Please sign in to comment.