feat: support onChange (#71)

* support onChange

* update node version

* add test case

* update style

Author: zombieJ

.gitignore

@@ -25,3 +25,4 @@ assets/**/*.css
 build
 lib
 es
+coverage

.travis.yml

@@ -8,7 +8,7 @@ notifications:
   - yesmeck@gmail.com
 
 node_js:
-- node
+- 10
 
 before_install:
 - |

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>
 

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;
   }

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,
+);

now.json

@@ -0,0 +1,11 @@
+{
+  "version": 2,
+  "name": "rc-steps",
+  "builds": [
+    {
+      "src": "package.json",
+      "use": "@now/static-build",
+      "config": { "distDir": "build" }
+    }
+  ]
+}

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": [

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}

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) {

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);
+  });
 });