Skip to content

Commit 52df916

Browse files
heiyu4585heiyu4585
authored
fix: support step type (#19)
* fix: support step type * fix: support step type * fix: 自定义className加在content上面 * fix: add test case * feat: add test case * feat: add container * feat: add PanelContainer * feat: remove PanelContainer * feat: remove PanelContainer
1 parent d375111 commit 52df916

File tree

5 files changed

+191
-145
lines changed

5 files changed

+191
-145
lines changed

‎src/Tour.tsx‎

Lines changed: 22 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -107,9 +107,6 @@ const Tour = (props: TourProps) => {
107107
: false;
108108
const arrowPointAtCenter =
109109
typeof mergedArrow === 'object' ? mergedArrow.pointAtCenter : false;
110-
const arrowClassName = classNames(`${prefixCls}-arrow`, {
111-
[`${prefixCls}-arrowPointAtCenter`]: arrowPointAtCenter,
112-
});
113110

114111
// ========================= Change =========================
115112
const onInternalChange = (nextCurrent: number) => {
@@ -135,32 +132,28 @@ const Tour = (props: TourProps) => {
135132
onClose?.(mergedCurrent);
136133
};
137134

138-
const getPopupElement = () => {
139-
return (
140-
<div className={`${prefixCls}-content`}>
141-
{mergedArrow && <div className={arrowClassName} key="arrow" />}
142-
<TourStep
143-
key="content"
144-
prefixCls={prefixCls}
145-
total={steps.length}
146-
renderPanel={renderPanel}
147-
onPrev={() => {
148-
onInternalChange(mergedCurrent - 1);
149-
}}
150-
onNext={() => {
151-
onInternalChange(mergedCurrent + 1);
152-
}}
153-
onClose={handleClose}
154-
current={mergedCurrent}
155-
onFinish={() => {
156-
handleClose();
157-
onFinish?.();
158-
}}
159-
{...steps[mergedCurrent]}
160-
/>
161-
</div>
162-
);
163-
};
135+
const getPopupElement = () => (
136+
<TourStep
137+
arrow={mergedArrow}
138+
key="content"
139+
prefixCls={prefixCls}
140+
total={steps.length}
141+
renderPanel={renderPanel}
142+
onPrev={() => {
143+
onInternalChange(mergedCurrent - 1);
144+
}}
145+
onNext={() => {
146+
onInternalChange(mergedCurrent + 1);
147+
}}
148+
onClose={handleClose}
149+
current={mergedCurrent}
150+
onFinish={() => {
151+
handleClose();
152+
onFinish?.();
153+
}}
154+
{...steps[mergedCurrent]}
155+
/>
156+
);
164157

165158
return (
166159
<>

‎src/TourStep/DefaultPanel.tsx‎

Lines changed: 47 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as React from 'react';
22
import type { TourStepProps } from '.';
3+
import classNames from 'classnames';
34

45
export default function DefaultPanel(props: TourStepProps) {
56
const {
@@ -12,52 +13,57 @@ export default function DefaultPanel(props: TourStepProps) {
1213
onPrev,
1314
onNext,
1415
onFinish,
16+
arrow,
17+
className,
1518
} = props;
1619

1720
return (
18-
<>
19-
<button
20-
type="button"
21-
onClick={onClose}
22-
aria-label="Close"
23-
className={`${prefixCls}-close`}
24-
>
25-
<span className={`${prefixCls}-close-x`}>&times;</span>
26-
</button>
27-
<div className={`${prefixCls}-header`}>
28-
<div className={`${prefixCls}-title`}>{title}</div>
29-
</div>
30-
<div className={`${prefixCls}-description`}>{description}</div>
31-
<div className={`${prefixCls}-footer`}>
32-
<div className={`${prefixCls}-sliders`}>
33-
{total > 1
34-
? [...Array.from({ length: total }).keys()].map((item, index) => {
35-
return (
36-
<span
37-
key={item}
38-
className={index === current ? 'active' : ''}
39-
/>
40-
);
41-
})
42-
: null}
21+
<div className={classNames(`${prefixCls}-content`, className)}>
22+
{arrow && <div className={`${prefixCls}-arrow`} key="arrow" />}
23+
<div className={`${prefixCls}-inner`}>
24+
<button
25+
type="button"
26+
onClick={onClose}
27+
aria-label="Close"
28+
className={`${prefixCls}-close`}
29+
>
30+
<span className={`${prefixCls}-close-x`}>&times;</span>
31+
</button>
32+
<div className={`${prefixCls}-header`}>
33+
<div className={`${prefixCls}-title`}>{title}</div>
4334
</div>
44-
<div className={`${prefixCls}-buttons`}>
45-
{current !== 0 ? (
46-
<button className={`${prefixCls}-prev-btn`} onClick={onPrev}>
47-
Prev
48-
</button>
49-
) : null}
50-
{current === total - 1 ? (
51-
<button className={`${prefixCls}-finish-btn`} onClick={onFinish}>
52-
Finish
53-
</button>
54-
) : (
55-
<button className={`${prefixCls}-next-btn`} onClick={onNext}>
56-
Next
57-
</button>
58-
)}
35+
<div className={`${prefixCls}-description`}>{description}</div>
36+
<div className={`${prefixCls}-footer`}>
37+
<div className={`${prefixCls}-sliders`}>
38+
{total > 1
39+
? [...Array.from({ length: total }).keys()].map((item, index) => {
40+
return (
41+
<span
42+
key={item}
43+
className={index === current ? 'active' : ''}
44+
/>
45+
);
46+
})
47+
: null}
48+
</div>
49+
<div className={`${prefixCls}-buttons`}>
50+
{current !== 0 ? (
51+
<button className={`${prefixCls}-prev-btn`} onClick={onPrev}>
52+
Prev
53+
</button>
54+
) : null}
55+
{current === total - 1 ? (
56+
<button className={`${prefixCls}-finish-btn`} onClick={onFinish}>
57+
Finish
58+
</button>
59+
) : (
60+
<button className={`${prefixCls}-next-btn`} onClick={onNext}>
61+
Next
62+
</button>
63+
)}
64+
</div>
5965
</div>
6066
</div>
61-
</>
67+
</div>
6268
);
6369
}

‎src/TourStep/index.tsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import * as React from 'react';
22
import type { ReactNode, CSSProperties } from 'react';
3-
import classNames from 'classnames';
43
import type { PlacementType } from '../placements';
54
import DefaultPanel from './DefaultPanel';
65

@@ -27,18 +26,16 @@ export interface TourStepProps extends TourStepInfo {
2726
}
2827

2928
const TourStep = (props: TourStepProps) => {
30-
const { className, prefixCls, current, renderPanel } = props;
31-
32-
const mergedClassName = classNames(`${prefixCls}-inner`, className);
29+
const { current, renderPanel } = props;
3330

3431
return (
35-
<div className={mergedClassName}>
32+
<>
3633
{typeof renderPanel === 'function' ? (
3734
renderPanel(props, current)
3835
) : (
3936
<DefaultPanel {...props} />
4037
)}
41-
</div>
38+
</>
4239
);
4340
};
4441

‎tests/__snapshots__/index.test.tsx.snap‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3+
exports[`Tour renderPanel 1`] = `
4+
<div
5+
style="margin: 20px;"
6+
>
7+
<button>
8+
按钮
9+
</button>
10+
</div>
11+
`;
12+
313
exports[`Tour should update position when window resize 1`] = `
414
<body>
515
<div>

0 commit comments

Comments
 (0)