From a38fe5d91cea4c73d5140b5139ff15707d265247 Mon Sep 17 00:00:00 2001 From: yoyo837 Date: Wed, 19 Jun 2019 12:05:01 +0800 Subject: [PATCH 1/2] show finish/error stepNumber optional --- README.md | 12 ++++++++++++ src/Step.jsx | 5 +++-- src/Steps.jsx | 4 +++- 3 files changed, 18 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index b00d30c..e810cd9 100644 --- a/README.md +++ b/README.md @@ -92,6 +92,12 @@ online example: http://react-component.github.io/steps/examples/ spicify the default finish icon and error icon + + showStepNum + boolean + + display step number, It will be ignored if icons is provided + onChange (current: number) => void @@ -131,6 +137,12 @@ online example: http://react-component.github.io/steps/examples/ set icon of step item + + showStepNum + boolean + + display step number, It will be ignored if icon/icons is provided + status string diff --git a/src/Step.jsx b/src/Step.jsx index fef8484..26b638f 100644 --- a/src/Step.jsx +++ b/src/Step.jsx @@ -36,6 +36,7 @@ export default class Step extends React.Component { finish: PropTypes.node, error: PropTypes.node, }), + showStepNum: PropTypes.bool, onClick: PropTypes.func, onStepClick: PropTypes.func, }; @@ -53,7 +54,7 @@ export default class Step extends React.Component { renderIconNode() { const { prefixCls, progressDot, stepNumber, status, title, description, icon, - iconPrefix, icons, + iconPrefix, icons, showStepNum, } = this.props; let iconNode; const iconClassName = classNames(`${prefixCls}-icon`, `${iconPrefix}icon`, { @@ -80,7 +81,7 @@ 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 = {showStepNum ? stepNumber : ''}; } else { iconNode = {stepNumber}; } diff --git a/src/Steps.jsx b/src/Steps.jsx index 126c3e4..ea0bec2 100644 --- a/src/Steps.jsx +++ b/src/Steps.jsx @@ -27,6 +27,7 @@ export default class Steps extends Component { finish: PropTypes.node, error: PropTypes.node, }), + showStepNum: PropTypes.bool, onChange: PropTypes.func, }; static defaultProps = { @@ -101,7 +102,7 @@ export default class Steps extends Component { const { prefixCls, style = {}, className, children, direction, labelPlacement, iconPrefix, status, size, current, progressDot, initial, - icons, onChange, + icons, onChange, showStepNum, ...restProps, } = this.props; const { lastStepOffsetWidth, flexSupported } = this.state; @@ -131,6 +132,7 @@ export default class Steps extends Component { wrapperStyle: style, progressDot, icons, + showStepNum, onStepClick: onChange && this.onStepClick, ...child.props, }; From 0c72db0bc800744b98756c8144d2f1c52c80e5e4 Mon Sep 17 00:00:00 2001 From: yoyo837 Date: Wed, 19 Jun 2019 12:10:54 +0800 Subject: [PATCH 2/2] rename --- README.md | 4 ++-- src/Step.jsx | 6 +++--- src/Steps.jsx | 6 +++--- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index e810cd9..e4b2986 100644 --- a/README.md +++ b/README.md @@ -93,7 +93,7 @@ online example: http://react-component.github.io/steps/examples/ spicify the default finish icon and error icon - showStepNum + showNumber boolean display step number, It will be ignored if icons is provided @@ -138,7 +138,7 @@ online example: http://react-component.github.io/steps/examples/ set icon of step item - showStepNum + showNumber boolean display step number, It will be ignored if icon/icons is provided diff --git a/src/Step.jsx b/src/Step.jsx index 26b638f..41f013c 100644 --- a/src/Step.jsx +++ b/src/Step.jsx @@ -36,7 +36,7 @@ export default class Step extends React.Component { finish: PropTypes.node, error: PropTypes.node, }), - showStepNum: PropTypes.bool, + showNumber: PropTypes.bool, onClick: PropTypes.func, onStepClick: PropTypes.func, }; @@ -54,7 +54,7 @@ export default class Step extends React.Component { renderIconNode() { const { prefixCls, progressDot, stepNumber, status, title, description, icon, - iconPrefix, icons, showStepNum, + iconPrefix, icons, showNumber, } = this.props; let iconNode; const iconClassName = classNames(`${prefixCls}-icon`, `${iconPrefix}icon`, { @@ -81,7 +81,7 @@ 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 = {showStepNum ? stepNumber : ''}; + iconNode = {showNumber ? stepNumber : ''}; } else { iconNode = {stepNumber}; } diff --git a/src/Steps.jsx b/src/Steps.jsx index ea0bec2..02b3ad0 100644 --- a/src/Steps.jsx +++ b/src/Steps.jsx @@ -27,7 +27,7 @@ export default class Steps extends Component { finish: PropTypes.node, error: PropTypes.node, }), - showStepNum: PropTypes.bool, + showNumber: PropTypes.bool, onChange: PropTypes.func, }; static defaultProps = { @@ -102,7 +102,7 @@ export default class Steps extends Component { const { prefixCls, style = {}, className, children, direction, labelPlacement, iconPrefix, status, size, current, progressDot, initial, - icons, onChange, showStepNum, + icons, onChange, showNumber, ...restProps, } = this.props; const { lastStepOffsetWidth, flexSupported } = this.state; @@ -132,7 +132,7 @@ export default class Steps extends Component { wrapperStyle: style, progressDot, icons, - showStepNum, + showNumber, onStepClick: onChange && this.onStepClick, ...child.props, };