diff --git a/packages/components/steps/Steps.tsx b/packages/components/steps/Steps.tsx index 6a1af98f60..7514315c72 100644 --- a/packages/components/steps/Steps.tsx +++ b/packages/components/steps/Steps.tsx @@ -90,22 +90,24 @@ const Steps = forwardRefWithStatics( const stepItemList = useMemo(() => { if (options) { - const optionsDisplayList = sequence === 'reverse' ? options.reverse() : options; - return options.map((item, index) => { - const stepIndex = sequence === 'reverse' ? optionsDisplayList.length - index - 1 : index; - return ; + const displayList = sequence === 'reverse' ? [...options].reverse() : options; + return displayList.map((item, index) => { + const originalIndex = sequence === 'reverse' ? displayList.length - index - 1 : index; + return ( + + ); }); } const childrenList = React.Children.toArray(children); - const childrenDisplayList = sequence === 'reverse' ? childrenList.reverse() : childrenList; + const displayList = sequence === 'reverse' ? [...childrenList].reverse() : childrenList; - return childrenList.map((child: React.ReactElement, index: number) => { - const stepIndex = sequence === 'reverse' ? childrenDisplayList.length - index - 1 : index; + return displayList.map((child: React.ReactElement, index: number) => { + const originalIndex = sequence === 'reverse' ? displayList.length - index - 1 : index; return React.cloneElement(child, { ...child.props, - index: stepIndex, - status: handleStatus(child.props, index), + index: originalIndex, + status: handleStatus(child.props, originalIndex), }); }); }, [options, children, sequence, handleStatus]); diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap index 318ac1f9c9..e2d34c2cec 100644 --- a/test/snap/__snapshots__/csr.test.jsx.snap +++ b/test/snap/__snapshots__/csr.test.jsx.snap @@ -98944,13 +98944,13 @@ exports[`csr snapshot test > csr test packages/components/steps/_example/vertica class="t-steps t-steps--dot-anchor t-steps--vertical t-steps--reverse t-steps--line-separator" >
csr test packages/components/steps/_example/vertica
csr test packages/components/steps/_example/vertica
csr test packages/components/steps/_example/vertica
csr test packages/components/steps/_example/vertica class="t-steps t-steps--default-anchor t-steps--vertical t-steps--reverse t-steps--line-separator" >
- 4 + + + + +
csr test packages/components/steps/_example/vertica
- 3 + + + + +
csr test packages/components/steps/_example/vertica
- - - - - + 2
csr test packages/components/steps/_example/vertica
- - - - - + 1
ssr test packages/components/steps/_example/sequenc exports[`ssr snapshot test > ssr test packages/components/steps/_example/status.tsx 1`] = `"
已完成的步骤
这里是提示文字
2
进行中的步骤
这里是提示文字
3
未进行的步骤
这里是提示文字
4
未进行的步骤
这里是提示文字
已完成的步骤
这里是提示文字
2
进行中的步骤
这里是提示文字
错误的步骤
优先展示\`t-step\`中设置的 status
4
未进行的步骤
这里是提示文字
"`; -exports[`ssr snapshot test > ssr test packages/components/steps/_example/vertical-no-sequence.tsx 1`] = `"
已完成的步骤
这里是提示文字
进行中的步骤
这里是提示文字
未进行的步骤
这里是提示文字
未进行的步骤
这里是提示文字
未进行的步骤
这里是提示文字
进行中的步骤
这里是提示文字
已完成的步骤
这里是提示文字
已完成的步骤
这里是提示文字
"`; +exports[`ssr snapshot test > ssr test packages/components/steps/_example/vertical-no-sequence.tsx 1`] = `"
已完成的步骤
这里是提示文字
进行中的步骤
这里是提示文字
未进行的步骤
这里是提示文字
未进行的步骤
这里是提示文字
未进行的步骤
这里是提示文字
进行中的步骤
这里是提示文字
已完成的步骤
这里是提示文字
已完成的步骤
这里是提示文字
"`; -exports[`ssr snapshot test > ssr test packages/components/steps/_example/vertical-sequence.tsx 1`] = `"
已完成的步骤
这里是提示文字
2
进行中的步骤
这里是提示文字
3
未进行的步骤
这里是提示文字
4
未进行的步骤
这里是提示文字
4
未进行的步骤
这里是提示文字
3
进行中的步骤
这里是提示文字
已完成的步骤
这里是提示文字
已完成的步骤
这里是提示文字
"`; +exports[`ssr snapshot test > ssr test packages/components/steps/_example/vertical-sequence.tsx 1`] = `"
已完成的步骤
这里是提示文字
2
进行中的步骤
这里是提示文字
3
未进行的步骤
这里是提示文字
4
未进行的步骤
这里是提示文字
未进行的步骤
这里是提示文字
进行中的步骤
这里是提示文字
2
已完成的步骤
这里是提示文字
1
已完成的步骤
这里是提示文字
"`; exports[`ssr snapshot test > ssr test packages/components/sticky-tool/_example/base.tsx 1`] = `"
chat
add
qrcode
"`; diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap index d35d443140..3e59518b67 100644 --- a/test/snap/__snapshots__/ssr.test.jsx.snap +++ b/test/snap/__snapshots__/ssr.test.jsx.snap @@ -948,9 +948,9 @@ exports[`ssr snapshot test > ssr test packages/components/steps/_example/sequenc exports[`ssr snapshot test > ssr test packages/components/steps/_example/status.tsx 1`] = `"
已完成的步骤
这里是提示文字
2
进行中的步骤
这里是提示文字
3
未进行的步骤
这里是提示文字
4
未进行的步骤
这里是提示文字
已完成的步骤
这里是提示文字
2
进行中的步骤
这里是提示文字
错误的步骤
优先展示\`t-step\`中设置的 status
4
未进行的步骤
这里是提示文字
"`; -exports[`ssr snapshot test > ssr test packages/components/steps/_example/vertical-no-sequence.tsx 1`] = `"
已完成的步骤
这里是提示文字
进行中的步骤
这里是提示文字
未进行的步骤
这里是提示文字
未进行的步骤
这里是提示文字
未进行的步骤
这里是提示文字
进行中的步骤
这里是提示文字
已完成的步骤
这里是提示文字
已完成的步骤
这里是提示文字
"`; +exports[`ssr snapshot test > ssr test packages/components/steps/_example/vertical-no-sequence.tsx 1`] = `"
已完成的步骤
这里是提示文字
进行中的步骤
这里是提示文字
未进行的步骤
这里是提示文字
未进行的步骤
这里是提示文字
未进行的步骤
这里是提示文字
进行中的步骤
这里是提示文字
已完成的步骤
这里是提示文字
已完成的步骤
这里是提示文字
"`; -exports[`ssr snapshot test > ssr test packages/components/steps/_example/vertical-sequence.tsx 1`] = `"
已完成的步骤
这里是提示文字
2
进行中的步骤
这里是提示文字
3
未进行的步骤
这里是提示文字
4
未进行的步骤
这里是提示文字
4
未进行的步骤
这里是提示文字
3
进行中的步骤
这里是提示文字
已完成的步骤
这里是提示文字
已完成的步骤
这里是提示文字
"`; +exports[`ssr snapshot test > ssr test packages/components/steps/_example/vertical-sequence.tsx 1`] = `"
已完成的步骤
这里是提示文字
2
进行中的步骤
这里是提示文字
3
未进行的步骤
这里是提示文字
4
未进行的步骤
这里是提示文字
未进行的步骤
这里是提示文字
进行中的步骤
这里是提示文字
2
已完成的步骤
这里是提示文字
1
已完成的步骤
这里是提示文字
"`; exports[`ssr snapshot test > ssr test packages/components/sticky-tool/_example/base.tsx 1`] = `"
chat
add
qrcode
"`;