Skip to content

Commit 3911fe1

Browse files
zombieJzombieJ
committed
chore: next status
1 parent 107634a commit 3911fe1

File tree

4 files changed

+56
-85
lines changed

4 files changed

+56
-85
lines changed

‎src/Rail.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import * as React from 'react';
2+
import cls from 'classnames';
3+
import type { Status, StepsProps } from './Steps';
4+
5+
export interface RailProps {
6+
prefixCls: string;
7+
classNames: StepsProps['classNames'];
8+
styles: StepsProps['styles'];
9+
status: Status;
10+
}
11+
12+
export default function Rail(props: RailProps) {
13+
const { prefixCls, classNames, styles, status } = props;
14+
const railCls = `${prefixCls}-rail`;
15+
16+
// ============================= render =============================
17+
return (
18+
<div
19+
className={cls(railCls, `${railCls}-${status}`, classNames.itemRail)}
20+
style={styles.itemRail}
21+
/>
22+
);
23+
}

‎src/Step.tsx‎

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,7 @@
22
import * as React from 'react';
33
import cls from 'classnames';
44
import KeyCode from '@rc-component/util/lib/KeyCode';
5-
import type { Status, Icons } from './interface';
6-
import type { ProgressDotRender, StepItem, StepsProps } from './Steps';
7-
8-
function isString(str: any): str is string {
9-
return typeof str === 'string';
10-
}
5+
import type { StepItem, StepsProps } from './Steps';
116

127
export interface StepProps {
138
// style
@@ -17,7 +12,6 @@ export interface StepProps {
1712

1813
// data
1914
data: StepItem;
20-
nextStatus?: Status;
2115

2216
active?: boolean;
2317
index: number;
@@ -31,7 +25,6 @@ export interface StepProps {
3125
// render
3226
iconRender?: StepsProps['iconRender'];
3327
icon?: React.ReactNode;
34-
progressDot?: ProgressDotRender | boolean;
3528
itemRender?: StepsProps['itemRender'];
3629

3730
// Event
@@ -47,13 +40,11 @@ export default function Step(props: StepProps) {
4740

4841
// data
4942
data,
50-
nextStatus,
5143

5244
active,
5345
index,
5446

5547
// render
56-
progressDot,
5748
itemRender,
5849
iconRender,
5950

@@ -139,22 +130,20 @@ export default function Step(props: StepProps) {
139130
>
140131
<div {...accessibilityProps} className={`${itemCls}-container`}>
141132
<div className={`${itemCls}-tail`} />
142-
<div className={cls(`{itemCls}-icon`, progressDot && `{itemCls}-icon-dot`)}>
143-
{iconRender(renderInfo)}
144-
</div>
145-
<div className={`{itemCls}-content`}>
146-
<div className={`{itemCls}-title`}>
133+
<div className={`${itemCls}-icon`}>{iconRender?.(renderInfo)}</div>
134+
<div className={`${itemCls}-content`}>
135+
<div className={`${itemCls}-title`}>
147136
{title}
148137
{subTitle && (
149138
<div
150139
title={typeof subTitle === 'string' ? subTitle : undefined}
151-
className={`{itemCls}-subtitle`}
140+
className={`${itemCls}-subtitle`}
152141
>
153142
{subTitle}
154143
</div>
155144
)}
156145
</div>
157-
{mergedContent && <div className={`{itemCls}-description`}>{mergedContent}</div>}
146+
{mergedContent && <div className={`${itemCls}-description`}>{mergedContent}</div>}
158147
</div>
159148
</div>
160149
</div>

‎src/Steps.tsx‎

Lines changed: 27 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,10 @@
11
/* eslint react/no-did-mount-set-state: 0, react/prop-types: 0 */
22
import cls from 'classnames';
33
import React from 'react';
4-
import type { Icons, Status } from './interface';
5-
import type { StepProps } from './Step';
64
import Step from './Step';
5+
import Rail from './Rail';
6+
7+
export type Status = 'error' | 'process' | 'finish' | 'wait';
78

89
export type SemanticName = 'root' | 'item' | 'itemTitle' | 'itemContent' | 'itemIcon' | 'itemRail';
910

@@ -28,18 +29,6 @@ export type StepIconRender = (info: {
2829
node: React.ReactNode;
2930
}) => React.ReactNode;
3031

31-
export type ProgressDotRender = (
32-
iconDot: React.ReactNode,
33-
info: {
34-
index: number;
35-
status: Status;
36-
title: React.ReactNode;
37-
// @deprecated Please use `content` instead.
38-
description: React.ReactNode;
39-
content: React.ReactNode;
40-
},
41-
) => React.ReactNode;
42-
4332
export type RenderInfo = {
4433
index: number;
4534
active: boolean;
@@ -58,7 +47,6 @@ export interface StepsProps {
5847
// layout
5948
orientation?: 'horizontal' | 'vertical';
6049
labelPlacement?: 'horizontal' | 'vertical';
61-
progressDot?: ProgressDotRender | boolean;
6250

6351
// data
6452
status?: Status;
@@ -78,14 +66,13 @@ export default function Steps(props: StepsProps) {
7866
prefixCls = 'rc-steps',
7967
style,
8068
className,
81-
classNames,
82-
styles,
69+
classNames = {},
70+
styles = {},
8371
rootClassName,
8472

8573
// layout
8674
orientation = 'horizontal',
8775
labelPlacement = 'horizontal',
88-
progressDot,
8976

9077
// data
9178
status = 'process',
@@ -102,21 +89,14 @@ export default function Steps(props: StepsProps) {
10289
} = props;
10390

10491
// ============================= layout =============================
105-
const [mergedOrientation, mergeLabelPlacement] = React.useMemo(() => {
106-
const nextOrientation = orientation === 'vertical' ? 'vertical' : 'horizontal';
107-
const nextLabelPlacement = progressDot ? 'vertical' : labelPlacement;
108-
109-
return [nextOrientation, nextLabelPlacement] as const;
110-
}, [orientation, progressDot, labelPlacement]);
92+
const mergedOrientation = orientation === 'vertical' ? 'vertical' : 'horizontal';
93+
const mergeLabelPlacement = labelPlacement === 'vertical' ? 'vertical' : 'horizontal';
11194

11295
// ============================= styles =============================
11396
const classString = cls(
11497
prefixCls,
11598
`${prefixCls}-${mergedOrientation}`,
116-
{
117-
[`${prefixCls}-label-${mergeLabelPlacement}`]: mergedOrientation === 'horizontal',
118-
[`${prefixCls}-dot`]: !!progressDot,
119-
},
99+
`${prefixCls}-label-${mergeLabelPlacement}`,
120100
rootClassName,
121101
className,
122102
classNames.root,
@@ -159,49 +139,33 @@ export default function Steps(props: StepsProps) {
159139
// data.className = `${prefixCls}-next-error`;
160140
// }
161141

162-
// const { status: currentStatus = status } = item;
163-
// const { status: prevStatus = currentStatus } = prevItem || {};
164-
165-
// if (!data.status) {
166-
// if (stepNumber === current) {
167-
// data.status = status;
168-
// } else if (stepNumber < current) {
169-
// data.status = 'finish';
170-
// } else {
171-
// data.status = 'wait';
172-
// }
173-
// }
174-
175142
const itemStatus = statuses[index];
176-
const nextStatus = statuses[index + 1];
177143

178144
const data = {
179145
...item,
180146
status: itemStatus,
181147
};
182148

183-
// if (!data.render && itemRender) {
184-
// data.render = (stepItem) => itemRender(data, stepItem);
185-
// }
186-
187149
return (
188-
<Step
189-
// Style
190-
prefixCls={prefixCls}
191-
classNames={classNames}
192-
styles={styles}
193-
// Data
194-
data={data}
195-
nextStatus={nextStatus}
196-
active={stepIndex === current}
197-
index={stepIndex}
198-
// Render
199-
key={stepIndex}
200-
progressDot={progressDot}
201-
iconRender={iconRender}
202-
itemRender={itemRender}
203-
onClick={onChange && onStepClick}
204-
/>
150+
<React.Fragment key={stepIndex}>
151+
{index !== 0 && (
152+
<Rail prefixCls={prefixCls} classNames={classNames} styles={styles} status={itemStatus} />
153+
)}
154+
<Step
155+
// Style
156+
prefixCls={prefixCls}
157+
classNames={classNames}
158+
styles={styles}
159+
// Data
160+
data={data}
161+
active={stepIndex === current}
162+
index={stepIndex}
163+
// Render
164+
iconRender={iconRender}
165+
itemRender={itemRender}
166+
onClick={onChange && onStepClick}
167+
/>
168+
</React.Fragment>
205169
);
206170
};
207171

‎src/interface.ts‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1 @@
1-
export type Status = 'error' | 'process' | 'finish' | 'wait';
21

3-
export interface Icons {
4-
finish: React.ReactNode;
5-
error: React.ReactNode;
6-
}

0 commit comments

Comments
 (0)