Skip to content

Commit c0bc1b3

Browse files
JarvisArtJarvisArt
authored
chore: Component to FC (#275)
1 parent e021a01 commit c0bc1b3

File tree

2 files changed

+164
-187
lines changed

2 files changed

+164
-187
lines changed

‎src/Step.tsx‎

Lines changed: 73 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -32,29 +32,41 @@ export interface StepProps {
3232
render?: (stepItem: React.ReactNode) => React.ReactNode;
3333
}
3434

35-
export default class Step extends React.Component<StepProps> {
36-
onClick: React.MouseEventHandler<HTMLDivElement> = (...args) => {
37-
const { onClick, onStepClick, stepIndex } = this.props;
35+
function Step(props: StepProps) {
36+
const {
37+
className,
38+
prefixCls,
39+
style,
40+
active,
41+
status,
42+
iconPrefix,
43+
icon,
44+
wrapperStyle,
45+
stepNumber,
46+
disabled,
47+
description,
48+
title,
49+
subTitle,
50+
progressDot,
51+
stepIcon,
52+
tailContent,
53+
icons,
54+
stepIndex,
55+
onStepClick,
56+
onClick,
57+
render,
58+
...restProps
59+
} = props;
60+
61+
const onInternalClick: React.MouseEventHandler<HTMLDivElement> = (...args) => {
3862
if (onClick) {
3963
onClick(...args);
4064
}
4165

4266
onStepClick(stepIndex);
4367
};
4468

45-
renderIconNode() {
46-
const {
47-
prefixCls,
48-
progressDot,
49-
stepIcon,
50-
stepNumber,
51-
status,
52-
title,
53-
description,
54-
icon,
55-
iconPrefix,
56-
icons,
57-
} = this.props;
69+
const renderIconNode = () => {
5870
let iconNode;
5971
const iconClassName = classNames(`${prefixCls}-icon`, `${iconPrefix}icon`, {
6072
[`${iconPrefix}icon-${icon}`]: icon && isString(icon),
@@ -103,79 +115,57 @@ export default class Step extends React.Component<StepProps> {
103115
}
104116

105117
return iconNode;
106-
}
118+
};
107119

108-
render() {
109-
const {
110-
className,
111-
prefixCls,
112-
style,
113-
active,
114-
status = 'wait',
115-
iconPrefix,
116-
icon,
117-
wrapperStyle,
118-
stepNumber,
119-
disabled,
120-
description,
121-
title,
122-
subTitle,
123-
progressDot,
124-
stepIcon,
125-
tailContent,
126-
icons,
127-
stepIndex,
128-
onStepClick,
129-
onClick,
130-
render,
131-
...restProps
132-
} = this.props;
133-
134-
const classString = classNames(`${prefixCls}-item`, `${prefixCls}-item-${status}`, className, {
135-
[`${prefixCls}-item-custom`]: icon,
136-
[`${prefixCls}-item-active`]: active,
137-
[`${prefixCls}-item-disabled`]: disabled === true,
138-
});
139-
const stepItemStyle = { ...style };
140-
141-
const accessibilityProps: {
142-
role?: string;
143-
tabIndex?: number;
144-
onClick?: React.MouseEventHandler<HTMLDivElement>;
145-
} = {};
146-
if (onStepClick && !disabled) {
147-
accessibilityProps.role = 'button';
148-
accessibilityProps.tabIndex = 0;
149-
accessibilityProps.onClick = this.onClick;
150-
}
120+
const mergedStatus = status || 'wait';
121+
122+
const classString = classNames(`${prefixCls}-item`, `${prefixCls}-item-${mergedStatus}`, className, {
123+
[`${prefixCls}-item-custom`]: icon,
124+
[`${prefixCls}-item-active`]: active,
125+
[`${prefixCls}-item-disabled`]: disabled === true,
126+
});
127+
const stepItemStyle = { ...style };
151128

152-
let stepNode: React.ReactNode = (
153-
<div {...restProps} className={classString} style={stepItemStyle}>
154-
<div onClick={onClick} {...accessibilityProps} className={`${prefixCls}-item-container`}>
155-
<div className={`${prefixCls}-item-tail`}>{tailContent}</div>
156-
<div className={`${prefixCls}-item-icon`}>{this.renderIconNode()}</div>
157-
<div className={`${prefixCls}-item-content`}>
158-
<div className={`${prefixCls}-item-title`}>
159-
{title}
160-
{subTitle && (
161-
<div
162-
title={typeof subTitle === 'string' ? subTitle : undefined}
163-
className={`${prefixCls}-item-subtitle`}
164-
>
165-
{subTitle}
166-
</div>
167-
)}
168-
</div>
169-
{description && <div className={`${prefixCls}-item-description`}>{description}</div>}
129+
const accessibilityProps: {
130+
role?: string;
131+
tabIndex?: number;
132+
onClick?: React.MouseEventHandler<HTMLDivElement>;
133+
} = {};
134+
if (onStepClick && !disabled) {
135+
accessibilityProps.role = 'button';
136+
accessibilityProps.tabIndex = 0;
137+
accessibilityProps.onClick = onInternalClick;
138+
}
139+
140+
let stepNode: React.ReactNode = (
141+
<div {...restProps} className={classString} style={stepItemStyle}>
142+
<div onClick={onClick} {...accessibilityProps} className={`${prefixCls}-item-container`}>
143+
<div className={`${prefixCls}-item-tail`}>{tailContent}</div>
144+
<div className={`${prefixCls}-item-icon`}>{renderIconNode()}</div>
145+
<div className={`${prefixCls}-item-content`}>
146+
<div className={`${prefixCls}-item-title`}>
147+
{title}
148+
{subTitle && (
149+
<div
150+
title={typeof subTitle === 'string' ? subTitle : undefined}
151+
className={`${prefixCls}-item-subtitle`}
152+
>
153+
{subTitle}
154+
</div>
155+
)}
170156
</div>
157+
{description && <div className={`${prefixCls}-item-description`}>{description}</div>}
171158
</div>
172159
</div>
173-
);
160+
</div>
161+
);
174162

175-
if (render) {
176-
stepNode = render(stepNode) || null;
177-
}
178163

179-
return stepNode as React.ReactElement;
164+
if (render) {
165+
stepNode = render(stepNode) || null;
180166
}
167+
168+
return stepNode as React.ReactElement;
181169
}
170+
171+
export default Step;

‎src/Steps.tsx‎

Lines changed: 91 additions & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -44,117 +44,104 @@ export interface StepsProps {
4444
onChange?: (current: number) => void;
4545
}
4646

47-
export default class Steps extends React.Component<StepsProps> {
48-
static Step = Step;
49-
50-
static defaultProps = {
51-
type: 'default',
52-
prefixCls: 'rc-steps',
53-
iconPrefix: 'rc',
54-
direction: 'horizontal',
55-
labelPlacement: 'horizontal',
56-
initial: 0,
57-
current: 0,
58-
status: 'process',
59-
size: '',
60-
progressDot: false,
61-
};
47+
function Steps(props: StepsProps) {
48+
const {
49+
prefixCls = 'rc-steps',
50+
style = {},
51+
className,
52+
children,
53+
direction = 'horizontal',
54+
type = 'default',
55+
labelPlacement = 'horizontal',
56+
iconPrefix = 'rc',
57+
status = 'process',
58+
size,
59+
current = 0,
60+
progressDot = false,
61+
stepIcon,
62+
initial = 0,
63+
icons,
64+
onChange,
65+
itemRender,
66+
items = [],
67+
...restProps
68+
} = props;
69+
70+
const isNav = type === 'navigation';
71+
const isInline = type === 'inline';
72+
73+
// inline type requires fixed progressDot direction size.
74+
const mergedProgressDot = isInline || progressDot;
75+
const mergedDirection = isInline ? 'horizontal' : direction;
76+
const mergedSize = isInline ? undefined : size;
77+
78+
const adjustedLabelPlacement = mergedProgressDot ? 'vertical' : labelPlacement;
79+
const classString = classNames(prefixCls, `${prefixCls}-${mergedDirection}`, className, {
80+
[`${prefixCls}-${mergedSize}`]: mergedSize,
81+
[`${prefixCls}-label-${adjustedLabelPlacement}`]: mergedDirection === 'horizontal',
82+
[`${prefixCls}-dot`]: !!mergedProgressDot,
83+
[`${prefixCls}-navigation`]: isNav,
84+
[`${prefixCls}-inline`]: isInline,
85+
});
6286

63-
onStepClick = (next: number) => {
64-
const { onChange, current } = this.props;
87+
const onStepClick = (next: number) => {
6588
if (onChange && current !== next) {
6689
onChange(next);
6790
}
6891
};
6992

70-
render() {
71-
const {
72-
prefixCls,
73-
style = {},
74-
className,
75-
children,
76-
direction,
77-
type,
78-
labelPlacement,
79-
iconPrefix,
80-
status,
81-
size,
82-
current,
83-
progressDot,
84-
stepIcon,
85-
initial,
86-
icons,
87-
onChange,
88-
itemRender,
89-
items = [],
90-
...restProps
91-
} = this.props;
92-
const isNav = type === 'navigation';
93-
const isInline = type === 'inline';
94-
95-
// inline type requires fixed progressDot direction size.
96-
const mergedProgressDot = isInline || progressDot;
97-
const mergedDirection = isInline ? 'horizontal' : direction;
98-
const mergedSize = isInline ? undefined : size;
99-
100-
const adjustedLabelPlacement = mergedProgressDot ? 'vertical' : labelPlacement;
101-
const classString = classNames(prefixCls, `${prefixCls}-${mergedDirection}`, className, {
102-
[`${prefixCls}-${mergedSize}`]: mergedSize,
103-
[`${prefixCls}-label-${adjustedLabelPlacement}`]: mergedDirection === 'horizontal',
104-
[`${prefixCls}-dot`]: !!mergedProgressDot,
105-
[`${prefixCls}-navigation`]: isNav,
106-
[`${prefixCls}-inline`]: isInline,
107-
});
93+
const renderStep = (item: StepProps, index: number) => {
94+
const mergedItem = { ...item };
95+
const stepNumber = initial + index;
96+
// fix tail color
97+
if (status === 'error' && index === current - 1) {
98+
mergedItem.className = `${prefixCls}-next-error`;
99+
}
100+
101+
if (!mergedItem.status) {
102+
if (stepNumber === current) {
103+
mergedItem.status = status;
104+
} else if (stepNumber < current) {
105+
mergedItem.status = 'finish';
106+
} else {
107+
mergedItem.status = 'wait';
108+
}
109+
}
110+
111+
if (isInline) {
112+
mergedItem.icon = undefined;
113+
mergedItem.subTitle = undefined;
114+
}
115+
116+
if (!mergedItem.render && itemRender) {
117+
mergedItem.render = (stepItem) => itemRender(mergedItem, stepItem);
118+
}
108119

109120
return (
110-
<div className={classString} style={style} {...restProps}>
111-
{items
112-
.filter((item) => item)
113-
.map((item, index) => {
114-
const mergedItem = { ...item };
115-
const stepNumber = initial + index;
116-
// fix tail color
117-
if (status === 'error' && index === current - 1) {
118-
mergedItem.className = `${prefixCls}-next-error`;
119-
}
120-
121-
if (!mergedItem.status) {
122-
if (stepNumber === current) {
123-
mergedItem.status = status;
124-
} else if (stepNumber < current) {
125-
mergedItem.status = 'finish';
126-
} else {
127-
mergedItem.status = 'wait';
128-
}
129-
}
130-
131-
if (isInline) {
132-
mergedItem.icon = undefined;
133-
mergedItem.subTitle = undefined;
134-
}
135-
136-
if (!mergedItem.render && itemRender) {
137-
mergedItem.render = (stepItem) => itemRender(mergedItem, stepItem);
138-
}
139-
140-
return (
141-
<Step
142-
{...mergedItem}
143-
active={stepNumber === current}
144-
stepNumber={stepNumber + 1}
145-
stepIndex={stepNumber}
146-
key={stepNumber}
147-
prefixCls={prefixCls}
148-
iconPrefix={iconPrefix}
149-
wrapperStyle={style}
150-
progressDot={mergedProgressDot}
151-
stepIcon={stepIcon}
152-
icons={icons}
153-
onStepClick={onChange && this.onStepClick}
154-
/>
155-
);
156-
})}
157-
</div>
121+
<Step
122+
{...mergedItem}
123+
active={stepNumber === current}
124+
stepNumber={stepNumber + 1}
125+
stepIndex={stepNumber}
126+
key={stepNumber}
127+
prefixCls={prefixCls}
128+
iconPrefix={iconPrefix}
129+
wrapperStyle={style}
130+
progressDot={mergedProgressDot}
131+
stepIcon={stepIcon}
132+
icons={icons}
133+
onStepClick={onChange && onStepClick}
134+
/>
158135
);
159-
}
136+
};
137+
138+
return (
139+
<div className={classString} style={style} {...restProps}>
140+
{items.filter((item) => item).map(renderStep)}
141+
</div>
142+
);
160143
}
144+
145+
Steps.Step = Step;
146+
147+
export default Steps;

0 commit comments

Comments
 (0)