Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
19 changes: 14 additions & 5 deletions packages/components/steps/Steps.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -90,21 +90,30 @@ const Steps = forwardRefWithStatics(

const stepItemList = useMemo<React.ReactNode[]>(() => {
if (options) {
const optionsDisplayList = sequence === 'reverse' ? options.reverse() : options;
const optionsLength = options.length;
return options.map<React.ReactNode>((item, index) => {
const stepIndex = sequence === 'reverse' ? optionsDisplayList.length - index - 1 : index;
return <StepItem key={index} {...item} index={stepIndex} status={handleStatus(item, index)} />;
const stepIndex = sequence === 'reverse' ? optionsLength - index - 1 : index;
return (
<StepItem
key={index}
{...item}
index={stepIndex}
value={item.value ?? index}
status={handleStatus(item, index)}
/>
);
});
}

const childrenList = React.Children.toArray(children);
const childrenDisplayList = sequence === 'reverse' ? childrenList.reverse() : childrenList;
const childrenLength = childrenList.length;

return childrenList.map((child: React.ReactElement<StepItemProps>, index: number) => {
const stepIndex = sequence === 'reverse' ? childrenDisplayList.length - index - 1 : index;
const stepIndex = sequence === 'reverse' ? childrenLength - index - 1 : index;
return React.cloneElement(child, {
...child.props,
index: stepIndex,
value: child.props.value ?? index,
status: handleStatus(child.props, index),
});
});
Expand Down
18 changes: 18 additions & 0 deletions packages/components/steps/__tests__/steps.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,24 @@ describe('Steps 组件测试', () => {
expect(stepsItems.length).toBe(1);
});

test('sequence reverse 点击应返回逻辑下标', async () => {
const handleChange = vi.fn();

const { container } = render(
<Steps sequence="reverse" defaultCurrent={1} onChange={handleChange}>
<StepItem title="步骤1" content="这里是提示文字" />
<StepItem title="步骤2" content="这里是提示文字" />
<StepItem title="步骤3" content="这里是提示文字" />
<StepItem title="步骤4" content="这里是提示文字" />
</Steps>,
);

const stepItems = container.querySelectorAll('.t-steps-item');
// 点击逻辑下标为 3 的步骤(DOM 中第 4 项)
fireEvent.click(stepItems[3].querySelector('.t-steps-item__inner'));
expect(handleChange).toHaveBeenCalledWith(3, 1, expect.any(Object));
});

test('layout readonly 测试', async () => {
const testId = 'step readonly test';

Expand Down
Loading