Skip to content

show finish/error stepNumber optional #108

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

show finish/error stepNumber optional #108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ba8797f
show finish/error stepNumber optional
yoyo837 May 11, 2020
92886f6
fix
yoyo837 May 11, 2020
4c8b565
test case
yoyo837 May 11, 2020
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
12 changes: 12 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,12 @@ online example: http://react-component.github.io/steps/examples/
<td>{ finish: ReactNode, error: ReactNode }</td>
<td></td>
<td>specify the default finish icon and error icon</td>
</tr>
<tr>
<td>showNumber</td>
<td>boolean</td>
<td></td>
<td>display step number, It will be ignored if icons is provided</td>
</tr>
<tr>
<td>onChange</td>
Expand Down Expand Up @@ -151,6 +157,12 @@ online example: http://react-component.github.io/steps/examples/
<td>ReactNode</td>
<td></td>
<td>set icon of step item</td>
</tr>
<tr>
<td>showNumber</td>
<td>boolean</td>
<td></td>
<td>display step number, It will be ignored if icon/icons is provided</td>
</tr>
<tr>
<td>status</td>
Expand Down
9 changes: 6 additions & 3 deletions src/Step.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,15 @@ export default class Step extends React.Component {
icon,
iconPrefix,
icons,
showNumber,
} = this.props;
let iconNode;
const iconClassName = classNames(`${prefixCls}-icon`, `${iconPrefix}icon`, {
[`${iconPrefix}icon-${icon}`]: icon && isString(icon),
[`${iconPrefix}icon-check`]: !icon && status === 'finish' && ((icons && !icons.finish) || !icons),
[`${iconPrefix}icon-cross`]: !icon && status === 'error' && ((icons && !icons.error) || !icons),
[`${iconPrefix}icon-check`]:
!icon && status === 'finish' && ((icons && !icons.finish) || !icons),
[`${iconPrefix}icon-cross`]:
!icon && status === 'error' && ((icons && !icons.error) || !icons),
});
const iconDot = <span className={`${prefixCls}-icon-dot`} />;
// `progressDot` enjoy the highest priority
Expand All @@ -59,7 +62,7 @@ export default class Step extends React.Component {
} else if (icons && icons.error && status === 'error') {
iconNode = <span className={`${prefixCls}-icon`}>{icons.error}</span>;
} else if (icon || status === 'finish' || status === 'error') {
iconNode = <span className={iconClassName} />;
iconNode = <span className={iconClassName}>{showNumber ? stepNumber : ''}</span>;
} else {
iconNode = <span className={`${prefixCls}-icon`}>{stepNumber}</span>;
}
Expand Down
2 changes: 2 additions & 0 deletions src/Steps.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@ export default class Steps extends Component {
initial,
icons,
onChange,
showNumber,
...restProps
} = this.props;
const isNav = type === 'navigation';
Expand Down Expand Up @@ -130,6 +131,7 @@ export default class Steps extends Component {
wrapperStyle: style,
progressDot,
icons,
showNumber,
onStepClick: onChange && this.onStepClick,
...child.props,
};
Expand Down
148 changes: 148 additions & 0 deletions tests/__snapshots__/index.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,6 +242,154 @@ exports[`Steps render renders current correctly 1`] = `
</div>
`;

exports[`Steps render renders final correctly 1`] = `
<Steps
current={2}
direction="horizontal"
iconPrefix="rc"
initial={0}
labelPlacement="horizontal"
prefixCls="rc-steps"
progressDot={false}
showNumber={true}
size=""
status="process"
type="default"
>
<div
className="rc-steps rc-steps-horizontal rc-steps-label-horizontal"
style={Object {}}
>
<Step
active={false}
iconPrefix="rc"
key=".$.0"
prefixCls="rc-steps"
progressDot={false}
showNumber={true}
status="finish"
stepIndex={0}
stepNumber="1"
wrapperStyle={Object {}}
>
<div
className="rc-steps-item rc-steps-item-finish"
showNumber={true}
style={Object {}}
>
<div
className="rc-steps-item-container"
>
<div
className="rc-steps-item-tail"
/>
<div
className="rc-steps-item-icon"
>
<span
className="rc-steps-icon rcicon rcicon-check"
>
1
</span>
</div>
<div
className="rc-steps-item-content"
>
<div
className="rc-steps-item-title"
/>
</div>
</div>
</div>
</Step>
<Step
active={false}
iconPrefix="rc"
key=".$.1"
prefixCls="rc-steps"
progressDot={false}
showNumber={true}
status="finish"
stepIndex={1}
stepNumber="2"
wrapperStyle={Object {}}
>
<div
className="rc-steps-item rc-steps-item-finish"
showNumber={true}
style={Object {}}
>
<div
className="rc-steps-item-container"
>
<div
className="rc-steps-item-tail"
/>
<div
className="rc-steps-item-icon"
>
<span
className="rc-steps-icon rcicon rcicon-check"
>
2
</span>
</div>
<div
className="rc-steps-item-content"
>
<div
className="rc-steps-item-title"
/>
</div>
</div>
</div>
</Step>
<Step
active={true}
iconPrefix="rc"
key=".$.2"
prefixCls="rc-steps"
progressDot={false}
showNumber={true}
status="process"
stepIndex={2}
stepNumber="3"
wrapperStyle={Object {}}
>
<div
className="rc-steps-item rc-steps-item-process rc-steps-item-active"
showNumber={true}
style={Object {}}
>
<div
className="rc-steps-item-container"
>
<div
className="rc-steps-item-tail"
/>
<div
className="rc-steps-item-icon"
>
<span
className="rc-steps-icon"
>
3
</span>
</div>
<div
className="rc-steps-item-content"
>
<div
className="rc-steps-item-title"
/>
</div>
</div>
</div>
</Step>
</div>
</Steps>
`;

exports[`Steps render renders labelPlacement correctly 1`] = `
<div
class="rc-steps rc-steps-horizontal rc-steps-label-vertical"
Expand Down
62 changes: 46 additions & 16 deletions tests/index.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,24 @@ describe('Steps', () => {
expect(wrapper).toMatchSnapshot();
});

it('renders final correctly', () => {
const wrapper = mount(
<Steps current={2} showNumber>
<Step />
<Step />
<Step />
</Steps>,
);

expect(
wrapper
.find('.rc-steps-icon')
.at(2)
.text(),
).toBe('3');
expect(wrapper).toMatchSnapshot();
});

it('renders vertical correctly', () => {
const wrapper = render(React.cloneElement(steps, { direction: 'vertical' }));
expect(wrapper).toMatchSnapshot();
Expand Down Expand Up @@ -55,7 +73,7 @@ describe('Steps', () => {
<Step title="进行中" description="xx" />
<Step title="待运行" description="xx" />
<Step title="待运行" description="xx" />
</Steps>
</Steps>,
);
expect(wrapper).toMatchSnapshot();
});
Expand All @@ -67,7 +85,7 @@ describe('Steps', () => {
<Step title="进行中" description="xx" status="wait" />
<Step title="待运行" description="xx" status="process" />
<Step title="待运行" description="xx" status="finish" />
</Steps>
</Steps>,
);
expect(wrapper).toMatchSnapshot();
});
Expand All @@ -82,7 +100,7 @@ describe('Steps', () => {
{false}
<Step title="待运行" disabled description="xx" status="finish" />
{null}
</Steps>
</Steps>,
);
expect(wrapper).toMatchSnapshot();
});
Expand All @@ -94,25 +112,29 @@ describe('Steps', () => {
<Step title="进行中" description="xx" tailContent={<div>content</div>} />
<Step title="待运行" description="xx" tailContent={3} />
<Step title="待运行" description="xx" tailContent="text" />
</Steps>
</Steps>,
);
expect(wrapper).toMatchSnapshot();
});


it('renders step with type navigation', () => {
const wrapper = render(
<Steps type="navigation" current={1} onChange={() => {}}>
<Step title="Step 1" subTitle="剩余 00:00:05 超长隐藏" description="This is a description." />
<Step
title="Step 1"
subTitle="剩余 00:00:05 超长隐藏"
description="This is a description."
/>
<Step title="Step 2" description="This is a description." />
<Step title="Step 3" disabled description="This is a description." />
</Steps>
</Steps>,
);
expect(wrapper).toMatchSnapshot();
});

function getFinishIcon() {
const path = 'M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.' +
const path =
'M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.' +
'5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139' +
'.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5' +
'-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 ' +
Expand All @@ -136,7 +158,8 @@ describe('Steps', () => {
}

function getErrorIcon() {
const path1 = 'M512 0C229.2 0 0 229.2 0 512s229.2 512 512 512 512-229' +
const path1 =
'M512 0C229.2 0 0 229.2 0 512s229.2 512 512 512 512-229' +
'.2 512-512S794.8 0 512 0zm311.1 823.1c-40.4 40.4-87.5 72.2-139.9 9' +
'4.3C629 940.4 571.4 952 512 952s-117-11.6-171.2-34.5c-52.4-22.2-99' +
'.4-53.9-139.9-94.3-40.4-40.4-72.2-87.5-94.3-139.9C83.6 629 72 571.' +
Expand All @@ -145,7 +168,8 @@ describe('Steps', () => {
'4.5c52.4 22.2 99.4 53.9 139.9 94.3 40.4 40.4 72.2 87.5 94.3 139.9C' +
'940.4 395 952 452.6 952 512s-11.6 117-34.5 171.2c-22.2 52.4-53.9 9' +
'9.5-94.4 139.9z';
const path2 = 'M640.3 765.5c-19.9 0-36-16.1-36-36 0-50.9-41.4-92.3-92' +
const path2 =
'M640.3 765.5c-19.9 0-36-16.1-36-36 0-50.9-41.4-92.3-92' +
'.3-92.3s-92.3 41.4-92.3 92.3c0 19.9-16.1 36-36 36s-36-16.1-36-36c0' +
'-90.6 73.7-164.3 164.3-164.3s164.3 73.7 164.3 164.3c0 19.9-16.1 36' +
'-36 36zM194.2 382.4a60 60 0 1 0 120 0 60 60 0 1 0-120 0zM709.5 382' +
Expand Down Expand Up @@ -173,7 +197,7 @@ describe('Steps', () => {
<Step title="Finished" description="This is a description" />
<Step title="In Process" description="This is a description" />
<Step title="Waiting" description="This is a description" />
</Steps>
</Steps>,
);
expect(wrapper).toMatchSnapshot();
});
Expand All @@ -186,10 +210,13 @@ describe('Steps', () => {
<Step />
<Step />
<Step />
</Steps>
</Steps>,
);

wrapper.find('.rc-steps-item-container').at(1).simulate('click');
wrapper
.find('.rc-steps-item-container')
.at(1)
.simulate('click');
expect(onChange).toBeCalledWith(1);
});

Expand All @@ -199,11 +226,14 @@ describe('Steps', () => {
<Steps onChange={onChange}>
<Step />
<Step />
<Step disabled/>
</Steps>
<Step disabled />
</Steps>,
);

wrapper.find('.rc-steps-item-container').at(2).simulate('click');
wrapper
.find('.rc-steps-item-container')
.at(2)
.simulate('click');
expect(onChange).not.toBeCalled();
});
});