From ba8797f80729e456eca32026e338bcdbe7187dba Mon Sep 17 00:00:00 2001 From: yoyo837 Date: Mon, 11 May 2020 15:35:33 +0800 Subject: [PATCH 1/3] show finish/error stepNumber optional --- README.md | 12 ++++++++++++ src/Step.jsx | 9 ++++++--- src/Steps.jsx | 2 ++ 3 files changed, 20 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 769b205..84a0677 100644 --- a/README.md +++ b/README.md @@ -106,6 +106,12 @@ online example: http://react-component.github.io/steps/examples/ { finish: ReactNode, error: ReactNode } specify the default finish icon and error icon + + + showNumber + boolean + + display step number, It will be ignored if icons is provided onChange @@ -151,6 +157,12 @@ online example: http://react-component.github.io/steps/examples/ ReactNode set icon of step item + + + showNumber + boolean + + display step number, It will be ignored if icon/icons is provided status diff --git a/src/Step.jsx b/src/Step.jsx index cdeae61..0100ea3 100644 --- a/src/Step.jsx +++ b/src/Step.jsx @@ -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 = ; // `progressDot` enjoy the highest priority @@ -61,7 +64,7 @@ export default class Step extends React.Component { } else if (icon || status === 'finish' || status === 'error') { iconNode = ; } else { - iconNode = {stepNumber}; + iconNode = {showNumber ? stepNumber : ''}; } return iconNode; diff --git a/src/Steps.jsx b/src/Steps.jsx index f52fac4..5cfbb98 100644 --- a/src/Steps.jsx +++ b/src/Steps.jsx @@ -100,6 +100,7 @@ export default class Steps extends Component { initial, icons, onChange, + showNumber, ...restProps } = this.props; const isNav = type === 'navigation'; @@ -130,6 +131,7 @@ export default class Steps extends Component { wrapperStyle: style, progressDot, icons, + showNumber, onStepClick: onChange && this.onStepClick, ...child.props, }; From 92886f60d2e016951e628d499f27ed09c3165993 Mon Sep 17 00:00:00 2001 From: yoyo837 Date: Mon, 11 May 2020 16:41:48 +0800 Subject: [PATCH 2/3] fix --- src/Step.jsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Step.jsx b/src/Step.jsx index 0100ea3..1a71b5f 100644 --- a/src/Step.jsx +++ b/src/Step.jsx @@ -62,9 +62,9 @@ export default class Step extends React.Component { } else if (icons && icons.error && status === 'error') { iconNode = {icons.error}; } else if (icon || status === 'finish' || status === 'error') { - iconNode = ; + iconNode = {showNumber ? stepNumber : ''}; } else { - iconNode = {showNumber ? stepNumber : ''}; + iconNode = {stepNumber}; } return iconNode; From 4c8b5655c1c04509115088ffd954160035f48b0f Mon Sep 17 00:00:00 2001 From: yoyo837 Date: Mon, 11 May 2020 17:15:28 +0800 Subject: [PATCH 3/3] test case --- tests/__snapshots__/index.test.js.snap | 148 +++++++++++++++++++++++++ tests/index.test.js | 62 ++++++++--- 2 files changed, 194 insertions(+), 16 deletions(-) diff --git a/tests/__snapshots__/index.test.js.snap b/tests/__snapshots__/index.test.js.snap index c022c81..9e4bccd 100644 --- a/tests/__snapshots__/index.test.js.snap +++ b/tests/__snapshots__/index.test.js.snap @@ -242,6 +242,154 @@ exports[`Steps render renders current correctly 1`] = ` `; +exports[`Steps render renders final correctly 1`] = ` + +
+ +
+
+
+
+ + 1 + +
+
+
+
+
+
+ + +
+
+
+
+ + 2 + +
+
+
+
+
+
+ + +
+
+
+
+ + 3 + +
+
+
+
+
+
+ +
+ +`; + exports[`Steps render renders labelPlacement correctly 1`] = `
{ expect(wrapper).toMatchSnapshot(); }); + it('renders final correctly', () => { + const wrapper = mount( + + + + + , + ); + + 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(); @@ -55,7 +73,7 @@ describe('Steps', () => { - + , ); expect(wrapper).toMatchSnapshot(); }); @@ -67,7 +85,7 @@ describe('Steps', () => { - + , ); expect(wrapper).toMatchSnapshot(); }); @@ -82,7 +100,7 @@ describe('Steps', () => { {false} {null} - + , ); expect(wrapper).toMatchSnapshot(); }); @@ -94,25 +112,29 @@ describe('Steps', () => { content
} /> - + , ); expect(wrapper).toMatchSnapshot(); }); - it('renders step with type navigation', () => { const wrapper = render( {}}> - + - + , ); 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 ' + @@ -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.' + @@ -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' + @@ -173,7 +197,7 @@ describe('Steps', () => { - + , ); expect(wrapper).toMatchSnapshot(); }); @@ -186,10 +210,13 @@ describe('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); }); @@ -199,11 +226,14 @@ describe('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(); }); });