From c6b9cdd7aafbb107894f9ccb6d49e0f647c7568f Mon Sep 17 00:00:00 2001
From: Amumu <yoyo837@hotmail.com>
Date: Fri, 28 Sep 2018 14:15:43 +0800
Subject: [PATCH 1/7] show finish stepNumber
---
src/Step.jsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/Step.jsx b/src/Step.jsx
index 12e80df..119d518 100644
--- a/src/Step.jsx
+++ b/src/Step.jsx
@@ -66,7 +66,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}>{stepNumber}</span>;
} else {
iconNode = <span className={`${prefixCls}-icon`}>{stepNumber}</span>;
}
From 7b3d706dab8543d30448c427d538b82c91f6f939 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 2 Jan 2019 17:58:20 +0800
Subject: [PATCH 2/7] Add className for flex-not-supported environment
ant-design/ant-design#14001
---
package.json | 2 +-
src/Steps.jsx | 1 +
2 files changed, 2 insertions(+), 1 deletion(-)
diff --git a/package.json b/package.json
index 44347b5..2e09b26 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "rc-steps",
- "version": "3.3.0",
+ "version": "3.3.1",
"description": "steps ui component for react",
"keywords": [
"react",
diff --git a/src/Steps.jsx b/src/Steps.jsx
index 0fc048a..6cc37b3 100644
--- a/src/Steps.jsx
+++ b/src/Steps.jsx
@@ -103,6 +103,7 @@ export default class Steps extends Component {
[`${prefixCls}-${size}`]: size,
[`${prefixCls}-label-${adjustedlabelPlacement}`]: direction === 'horizontal',
[`${prefixCls}-dot`]: !!progressDot,
+ [`${prefixCls}-flex-not-supported`]: !flexSupported,
});
return (
From c27ab88c581f4e395807301cc6335a6a055f4c3c Mon Sep 17 00:00:00 2001
From: zombieJ <smith3816@gmail.com>
Date: Fri, 24 May 2019 13:50:25 +0800
Subject: [PATCH 3/7] feat: support onChange (#71)
* support onChange
* update node version
* add test case
* update style
---
.gitignore | 1 +
.travis.yml | 2 +-
README.md | 6 ++++++
assets/index.less | 9 +++++++++
examples/simple.js | 23 +++++++++++++++++++++--
now.json | 11 +++++++++++
package.json | 3 ++-
src/Step.jsx | 26 +++++++++++++++++++++++++-
src/Steps.jsx | 13 ++++++++++++-
tests/index.test.js | 16 +++++++++++++++-
10 files changed, 103 insertions(+), 7 deletions(-)
create mode 100644 now.json
diff --git a/.gitignore b/.gitignore
index 5918e42..50eb572 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,3 +25,4 @@ assets/**/*.css
build
lib
es
+coverage
diff --git a/.travis.yml b/.travis.yml
index 9f73cf1..c269d26 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -8,7 +8,7 @@ notifications:
- yesmeck@gmail.com
node_js:
-- node
+- 10
before_install:
- |
diff --git a/README.md b/README.md
index f42a03a..b00d30c 100644
--- a/README.md
+++ b/README.md
@@ -92,6 +92,12 @@ online example: http://react-component.github.io/steps/examples/
<td></td>
<td>spicify the default finish icon and error icon</td>
</tr>
+ <tr>
+ <td>onChange</td>
+ <td>(current: number) => void</td>
+ <td></td>
+ <td>Trigger when Step changed</td>
+ </tr>
</tbody>
</table>
diff --git a/assets/index.less b/assets/index.less
index 0c4052a..984ddd5 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -19,6 +19,15 @@
flex: 1;
overflow: hidden;
+ &[role='button'] {
+ cursor: pointer;
+ transition: all .3s;
+
+ &:hover {
+ opacity: 0.7;
+ }
+ }
+
&:last-child {
flex: none;
}
diff --git a/examples/simple.js b/examples/simple.js
index abc76c3..ca534dc 100644
--- a/examples/simple.js
+++ b/examples/simple.js
@@ -7,6 +7,23 @@ import Steps, { Step } from 'rc-steps';
const container = document.getElementById('__react-content');
const description = '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶';
+const ControlSteps = () => {
+ const [current, setCurrent] = React.useState(0);
+ return (
+ <Steps
+ current={current}
+ onChange={(val) => {
+ setCurrent(val);
+ }}
+ >
+ <Step title="已完成" />
+ <Step title="进行中" />
+ <Step title="待运行" description="Hello World!" />
+ <Step title="待运行" />
+ </Steps>
+ );
+};
+
ReactDOM.render(
<div>
<Steps current={1}>
@@ -27,5 +44,7 @@ ReactDOM.render(
<Step title="待运行" description={description} />
<Step title="待运行" description={description} />
</Steps>
- </div>
-, container);
+ <ControlSteps />
+ </div>,
+ container,
+);
diff --git a/now.json b/now.json
new file mode 100644
index 0000000..67a2ef2
--- /dev/null
+++ b/now.json
@@ -0,0 +1,11 @@
+{
+ "version": 2,
+ "name": "rc-steps",
+ "builds": [
+ {
+ "src": "package.json",
+ "use": "@now/static-build",
+ "config": { "distDir": "build" }
+ }
+ ]
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 2e09b26..8a90ad3 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,8 @@
"lint:fix": "rc-tools run lint --fix",
"test": "jest",
"prepublish": "rc-tools run guard",
- "coverage": "jest --coverage && cat ./coverage/lcov.info | coveralls"
+ "coverage": "jest --coverage && cat ./coverage/lcov.info | coveralls",
+ "now-build": "npm run build"
},
"jest": {
"setupFiles": [
diff --git a/src/Step.jsx b/src/Step.jsx
index 12e80df..fef8484 100644
--- a/src/Step.jsx
+++ b/src/Step.jsx
@@ -24,6 +24,7 @@ export default class Step extends React.Component {
PropTypes.string,
]),
stepNumber: PropTypes.string,
+ stepIndex: PropTypes.number,
description: PropTypes.any,
title: PropTypes.any,
progressDot: PropTypes.oneOfType([
@@ -35,7 +36,20 @@ export default class Step extends React.Component {
finish: PropTypes.node,
error: PropTypes.node,
}),
+ onClick: PropTypes.func,
+ onStepClick: PropTypes.func,
};
+
+ onClick = (...args) => {
+ const { onClick, onStepClick, stepIndex } = this.props;
+
+ if (onClick) {
+ onClick(...args);
+ }
+
+ onStepClick(stepIndex);
+ };
+
renderIconNode() {
const {
prefixCls, progressDot, stepNumber, status, title, description, icon,
@@ -79,7 +93,7 @@ export default class Step extends React.Component {
status = 'wait', iconPrefix, icon, wrapperStyle,
adjustMarginRight, stepNumber,
description, title, progressDot, tailContent,
- icons,
+ icons, stepIndex, onStepClick, onClick,
...restProps,
} = this.props;
@@ -96,8 +110,18 @@ export default class Step extends React.Component {
if (adjustMarginRight) {
stepItemStyle.marginRight = adjustMarginRight;
}
+
+ const accessibilityProps = {};
+ if (onStepClick) {
+ accessibilityProps.role = 'button';
+ accessibilityProps.tabIndex = 0;
+ accessibilityProps.onClick = this.onClick;
+ }
+
return (
<div
+ onClick={onClick}
+ {...accessibilityProps}
{...restProps}
className={classString}
style={stepItemStyle}
diff --git a/src/Steps.jsx b/src/Steps.jsx
index 6cc37b3..b12d2b0 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,
}),
+ onChange: PropTypes.func,
};
static defaultProps = {
prefixCls: 'rc-steps',
@@ -66,6 +67,14 @@ export default class Steps extends Component {
this.calcStepOffsetWidth.cancel();
}
}
+
+ onStepClick = (current) => {
+ const { onChange } = this.props;
+ if (onChange) {
+ onChange(current);
+ }
+ };
+
calcStepOffsetWidth = () => {
if (isFlexSupported()) {
return;
@@ -92,7 +101,7 @@ export default class Steps extends Component {
const {
prefixCls, style = {}, className, children, direction,
labelPlacement, iconPrefix, status, size, current, progressDot, initial,
- icons,
+ icons, onChange,
...restProps,
} = this.props;
const { lastStepOffsetWidth, flexSupported } = this.state;
@@ -116,11 +125,13 @@ export default class Steps extends Component {
const stepNumber = initial + index;
const childProps = {
stepNumber: `${stepNumber + 1}`,
+ stepIndex: stepNumber,
prefixCls,
iconPrefix,
wrapperStyle: style,
progressDot,
icons,
+ onStepClick: onChange && this.onStepClick,
...child.props,
};
if (!flexSupported && direction !== 'vertical' && index !== lastIndex) {
diff --git a/tests/index.test.js b/tests/index.test.js
index 6af0a23..4e8e107 100644
--- a/tests/index.test.js
+++ b/tests/index.test.js
@@ -1,5 +1,5 @@
import React from 'react';
-import { render } from 'enzyme';
+import { mount, render } from 'enzyme';
import Steps, { Step } from '../src';
describe('Steps', () => {
@@ -166,4 +166,18 @@ describe('Steps', () => {
expect(wrapper).toMatchSnapshot();
});
});
+
+ it('onChange', () => {
+ const onChange = jest.fn();
+ const wrapper = mount(
+ <Steps onChange={onChange}>
+ <Step />
+ <Step />
+ <Step />
+ </Steps>
+ );
+
+ wrapper.find(Step).at(1).simulate('click');
+ expect(onChange).toBeCalledWith(1);
+ });
});
From 6e2174865d62fd8f16b5c7055ecd60004e9ac0e1 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Fri, 24 May 2019 13:52:16 +0800
Subject: [PATCH 4/7] bump 3.4.0
---
HISTORY.md | 6 +++++-
package.json | 2 +-
2 files changed, 6 insertions(+), 2 deletions(-)
diff --git a/HISTORY.md b/HISTORY.md
index 5f4ae97..3a90521 100644
--- a/HISTORY.md
+++ b/HISTORY.md
@@ -1,7 +1,11 @@
# History
----
-## 3.230
+## 3.4.0
+
+- Support `onChange` event.
+
+## 3.3.0
- Add `icons` prop for change preset icon.
diff --git a/package.json b/package.json
index 8a90ad3..9c2b139 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "rc-steps",
- "version": "3.3.1",
+ "version": "3.4.0",
"description": "steps ui component for react",
"keywords": [
"react",
From 4abc8ea050a3c152f408fb1d03d6eae9c99f4409 Mon Sep 17 00:00:00 2001
From: zombiej <smith3816@gmail.com>
Date: Fri, 24 May 2019 14:22:43 +0800
Subject: [PATCH 5/7] onChange only trigger when current not same
---
examples/simple.js | 1 +
package.json | 2 +-
src/Steps.jsx | 8 ++++----
3 files changed, 6 insertions(+), 5 deletions(-)
diff --git a/examples/simple.js b/examples/simple.js
index ca534dc..bced147 100644
--- a/examples/simple.js
+++ b/examples/simple.js
@@ -13,6 +13,7 @@ const ControlSteps = () => {
<Steps
current={current}
onChange={(val) => {
+ console.log('Change:', val);
setCurrent(val);
}}
>
diff --git a/package.json b/package.json
index 9c2b139..f3ce670 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "rc-steps",
- "version": "3.4.0",
+ "version": "3.4.1",
"description": "steps ui component for react",
"keywords": [
"react",
diff --git a/src/Steps.jsx b/src/Steps.jsx
index b12d2b0..126c3e4 100644
--- a/src/Steps.jsx
+++ b/src/Steps.jsx
@@ -68,10 +68,10 @@ export default class Steps extends Component {
}
}
- onStepClick = (current) => {
- const { onChange } = this.props;
- if (onChange) {
- onChange(current);
+ onStepClick = (next) => {
+ const { onChange, current } = this.props;
+ if (onChange && current !== next) {
+ onChange(next);
}
};
From b263bcf6f247f9295e0fff314f7938d3d47d8537 Mon Sep 17 00:00:00 2001
From: "dependabot-preview[bot]"
<dependabot-preview[bot]@users.noreply.github.com>
Date: Thu, 6 Jun 2019 21:17:10 +0000
Subject: [PATCH 6/7] Update coveralls requirement from ^2.11.15 to ^3.0.4
Updates the requirements on [coveralls](https://github.com/nickmerwin/node-coveralls) to permit the latest version.
- [Release notes](https://github.com/nickmerwin/node-coveralls/releases)
- [Commits](https://github.com/nickmerwin/node-coveralls/compare/2.12.0...3.0.4)
Signed-off-by: dependabot-preview[bot] <support@dependabot.com>
---
package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/package.json b/package.json
index f3ce670..e381f93 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,7 @@
}
},
"devDependencies": {
- "coveralls": "^2.11.15",
+ "coveralls": "^3.0.4",
"enzyme": "^3.0.0",
"enzyme-adapter-react-16": "^1.0.1",
"enzyme-to-json": "^3.0.0",
From 5330a471c6ac3cec72c74aafa2d3dd51c38f03d4 Mon Sep 17 00:00:00 2001
From: Amumu <yoyo837@hotmail.com>
Date: Fri, 28 Sep 2018 14:15:43 +0800
Subject: [PATCH 7/7] show finish stepNumber
---
src/Step.jsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/Step.jsx b/src/Step.jsx
index fef8484..1ca5601 100644
--- a/src/Step.jsx
+++ b/src/Step.jsx
@@ -80,7 +80,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}>{stepNumber}</span>;
} else {
iconNode = <span className={`${prefixCls}-icon`}>{stepNumber}</span>;
}