Skip to content

Commit 38a9fb9

Browse files
afc163afc163
authored
Merge pull request #46 from emersonlaurentino/prop-initial
add prop initial to Steps
2 parents fd76264 + 311bd41 commit 38a9fb9

File tree

3 files changed

+30
-21
lines changed

3 files changed

+30
-21
lines changed

‎README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,12 @@ online example: http://react-component.github.io/steps/examples/
6262
<td>0</td>
6363
<td>index of current step</td>
6464
</tr>
65+
<tr>
66+
<td>initial</td>
67+
<td>number</td>
68+
<td>0</td>
69+
<td>index initial</td>
70+
</tr>
6571
<tr>
6672
<td>size</td>
6773
<td>string</td>

‎src/Steps.jsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,15 @@ export default class Steps extends Component {
2121
PropTypes.func,
2222
]),
2323
style: PropTypes.object,
24+
initial: PropTypes.number,
2425
current: PropTypes.number,
2526
};
2627
static defaultProps = {
2728
prefixCls: 'rc-steps',
2829
iconPrefix: 'rc',
2930
direction: 'horizontal',
3031
labelPlacement: 'horizontal',
32+
initial: 0,
3133
current: 0,
3234
status: 'process',
3335
size: '',
@@ -75,7 +77,7 @@ export default class Steps extends Component {
7577
const lastStepOffsetWidth = (domNode.lastChild.offsetWidth || 0) + 1;
7678
// Reduce shake bug
7779
if (this.state.lastStepOffsetWidth === lastStepOffsetWidth ||
78-
Math.abs(this.state.lastStepOffsetWidth - lastStepOffsetWidth) <= 3) {
80+
Math.abs(this.state.lastStepOffsetWidth - lastStepOffsetWidth) <= 3) {
7981
return;
8082
}
8183
this.setState({ lastStepOffsetWidth });
@@ -85,7 +87,7 @@ export default class Steps extends Component {
8587
render() {
8688
const {
8789
prefixCls, style = {}, className, children, direction,
88-
labelPlacement, iconPrefix, status, size, current, progressDot,
90+
labelPlacement, iconPrefix, status, size, current, progressDot, initial,
8991
...restProps,
9092
} = this.props;
9193
const { lastStepOffsetWidth, flexSupported } = this.state;
@@ -105,8 +107,9 @@ export default class Steps extends Component {
105107
if (!child) {
106108
return null;
107109
}
110+
const stepNumber = initial ? initial + index : index + 1;
108111
const childProps = {
109-
stepNumber: `${index + 1}`,
112+
stepNumber: `${stepNumber}`,
110113
prefixCls,
111114
iconPrefix,
112115
wrapperStyle: style,
@@ -122,9 +125,9 @@ export default class Steps extends Component {
122125
childProps.className = `${prefixCls}-next-error`;
123126
}
124127
if (!child.props.status) {
125-
if (index === current) {
128+
if (stepNumber === current) {
126129
childProps.status = status;
127-
} else if (index < current) {
130+
} else if (stepNumber < current) {
128131
childProps.status = 'finish';
129132
} else {
130133
childProps.status = 'wait';

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

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ exports[`Steps render renders correctly 1`] = `
55
class="rc-steps rc-steps-horizontal rc-steps-label-horizontal"
66
>
77
<div
8-
class="rc-steps-item rc-steps-item-process"
8+
class="rc-steps-item rc-steps-item-wait"
99
>
1010
<div
1111
class="rc-steps-item-tail"
@@ -147,7 +147,7 @@ exports[`Steps render renders current correctly 1`] = `
147147
</div>
148148
</div>
149149
<div
150-
class="rc-steps-item rc-steps-item-finish"
150+
class="rc-steps-item rc-steps-item-process"
151151
>
152152
<div
153153
class="rc-steps-item-tail"
@@ -158,9 +158,9 @@ exports[`Steps render renders current correctly 1`] = `
158158
class="rc-steps-item-icon"
159159
>
160160
<span
161-
class="rc-steps-icon rcicon rcicon-check"
161+
class="rc-steps-icon"
162162
>
163-
163+
2
164164
</span>
165165
</div>
166166
<div
@@ -174,7 +174,7 @@ exports[`Steps render renders current correctly 1`] = `
174174
</div>
175175
</div>
176176
<div
177-
class="rc-steps-item rc-steps-item-process"
177+
class="rc-steps-item rc-steps-item-wait"
178178
>
179179
<div
180180
class="rc-steps-item-tail"
@@ -235,7 +235,7 @@ exports[`Steps render renders labelPlacement correctly 1`] = `
235235
class="rc-steps rc-steps-horizontal rc-steps-label-vertical"
236236
>
237237
<div
238-
class="rc-steps-item rc-steps-item-process"
238+
class="rc-steps-item rc-steps-item-wait"
239239
>
240240
<div
241241
class="rc-steps-item-tail"
@@ -350,7 +350,7 @@ exports[`Steps render renders progressDot correctly 1`] = `
350350
class="rc-steps rc-steps-horizontal rc-steps-label-vertical rc-steps-dot"
351351
>
352352
<div
353-
class="rc-steps-item rc-steps-item-process"
353+
class="rc-steps-item rc-steps-item-wait"
354354
>
355355
<div
356356
class="rc-steps-item-tail"
@@ -481,7 +481,7 @@ exports[`Steps render renders progressDot function correctly 1`] = `
481481
class="rc-steps rc-steps-horizontal rc-steps-label-vertical rc-steps-dot"
482482
>
483483
<div
484-
class="rc-steps-item rc-steps-item-process"
484+
class="rc-steps-item rc-steps-item-wait"
485485
>
486486
<div
487487
class="rc-steps-item-tail"
@@ -631,7 +631,7 @@ exports[`Steps render renders status correctly 1`] = `
631631
</div>
632632
</div>
633633
<div
634-
class="rc-steps-item rc-steps-item-finish rc-steps-next-error"
634+
class="rc-steps-item rc-steps-item-error rc-steps-next-error"
635635
>
636636
<div
637637
class="rc-steps-item-tail"
@@ -642,7 +642,7 @@ exports[`Steps render renders status correctly 1`] = `
642642
class="rc-steps-item-icon"
643643
>
644644
<span
645-
class="rc-steps-icon rcicon rcicon-check"
645+
class="rc-steps-icon rcicon rcicon-cross"
646646
>
647647
648648
</span>
@@ -658,7 +658,7 @@ exports[`Steps render renders status correctly 1`] = `
658658
</div>
659659
</div>
660660
<div
661-
class="rc-steps-item rc-steps-item-error"
661+
class="rc-steps-item rc-steps-item-wait"
662662
>
663663
<div
664664
class="rc-steps-item-tail"
@@ -669,9 +669,9 @@ exports[`Steps render renders status correctly 1`] = `
669669
class="rc-steps-item-icon"
670670
>
671671
<span
672-
class="rc-steps-icon rcicon rcicon-cross"
672+
class="rc-steps-icon"
673673
>
674-
674+
3
675675
</span>
676676
</div>
677677
<div
@@ -719,7 +719,7 @@ exports[`Steps render renders step with description 1`] = `
719719
class="rc-steps rc-steps-horizontal rc-steps-label-horizontal"
720720
>
721721
<div
722-
class="rc-steps-item rc-steps-item-process"
722+
class="rc-steps-item rc-steps-item-wait"
723723
>
724724
<div
725725
class="rc-steps-item-tail"
@@ -989,7 +989,7 @@ exports[`Steps render renders step with tailContent 1`] = `
989989
class="rc-steps rc-steps-horizontal rc-steps-label-horizontal"
990990
>
991991
<div
992-
class="rc-steps-item rc-steps-item-process"
992+
class="rc-steps-item rc-steps-item-wait"
993993
>
994994
<div
995995
class="rc-steps-item-tail"
@@ -1126,7 +1126,7 @@ exports[`Steps render renders vertical correctly 1`] = `
11261126
class="rc-steps rc-steps-vertical"
11271127
>
11281128
<div
1129-
class="rc-steps-item rc-steps-item-process"
1129+
class="rc-steps-item rc-steps-item-wait"
11301130
>
11311131
<div
11321132
class="rc-steps-item-tail"

0 commit comments

Comments
 (0)