- fix tailWidth(especially for labelPlacement="vertical")

- support progressDot

assets/index.less

@@ -59,6 +59,9 @@
         background-color: #fff;
         > .@{stepsPrefixClass}-icon {
           color: @wait-icon-color;
+          .@{stepsPrefixClass}-icon-dot {
+            background: @wait-icon-color;
+          }
         }
       }
       .@{stepsPrefixClass}-title {
@@ -77,6 +80,9 @@
         background-color: @process-icon-color;
         > .@{stepsPrefixClass}-icon {
           color: #fff;
+          .@{stepsPrefixClass}-icon-dot {
+            background: @process-icon-color;
+          }
         }
       }
       .@{stepsPrefixClass}-title {
@@ -95,6 +101,9 @@
         background-color: #fff;
         > .@{stepsPrefixClass}-icon {
           color: @finish-icon-color;
+          .@{stepsPrefixClass}-icon-dot {
+            background: @finish-icon-color;
+          }
         }
       }
       .@{stepsPrefixClass}-tail > i {
@@ -114,6 +123,9 @@
         background-color: #fff;
         > .@{stepsPrefixClass}-icon {
           color: @error-icon-color;
+          .@{stepsPrefixClass}-icon-dot {
+            background: @error-icon-color;
+          }
         }
       }
       .@{stepsPrefixClass}-tail > i {
@@ -323,6 +335,7 @@
     padding: 22px 0 4px 0;
     > i {
       height: 100%;
+      width: 1px;
     }
   }
 
@@ -378,6 +391,69 @@
   }
 }
 
+.@{stepsPrefixClass}-dot {
+  .@{stepsPrefixClass}-tail {
+    padding: 0 0 0 50px;
+    width: 100%;
+    top: 1px;
+
+    & > i {
+      height: 3px;
+    }
+  }
+  .@{stepsPrefixClass}-head {
+    padding-right: 0;
+    &-inner {
+      width: 5px;
+      height: 5px;
+      line-height: 5px;
+      border: 0;
+
+      .@{stepsPrefixClass}-icon-dot {
+        float: left;
+        width: 100%;
+        height: 100%;
+        border-radius: 2.5px;
+      }
+    }
+  }
+  .@{stepsPrefixClass}-status-process {
+    .@{stepsPrefixClass}-head {
+      top: -1px;
+      &-inner {
+        width: 7px;
+        height: 7px;
+        line-height: 7px;
+
+        .@{stepsPrefixClass}-icon-dot {
+          border-radius: 3.5px;
+        }
+      }
+    }
+  }
+  &.@{stepsPrefixClass}-vertical {
+    .@{stepsPrefixClass}-tail {
+      left: 2px;
+      height: 100%;
+      padding: 0;
+      top: 15px;
+      > i {
+        height: 100%;
+        width: 3px;
+      }
+    }
+    .@{stepsPrefixClass}-head {
+      top: 12px;
+      left: 1px;
+    }
+    .@{stepsPrefixClass}-status-process {
+      .@{stepsPrefixClass}-head {
+        left: 0;
+      }
+    }
+  }
+}
+
 .hidden {
   display: none;
 }

examples/progressDot.html

@@ -0,0 +1 @@
+placeholder

examples/progressDot.js

@@ -0,0 +1,40 @@
+require('rc-steps/assets/index.less');
+require('rc-steps/assets/iconfont.less');
+
+const React = require('react');
+const ReactDOM = require('react-dom');
+const Steps = require('rc-steps');
+
+const container = document.getElementById('__react-content');
+
+const steps = [{
+  title: '已完成',
+  description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶',
+}, {
+  title: '进行中',
+  description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶',
+}, {
+  title: '待运行',
+  description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶',
+}, {
+  title: '待运行',
+  description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶',
+}, {
+  title: '待运行',
+  description: '这里是多信息的描述啊描述啊描述啊描述啊哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶哦耶',
+}].map((s, i) => {
+  return (
+    <Steps.Step
+      key={i}
+      status={s.status}
+      title={s.title}
+      description={s.description}
+    />
+  );
+});
+
+ReactDOM.render(
+  <Steps progressDot current={1}>
+    {steps}
+  </Steps>
+, container);

src/Step.jsx

@@ -8,10 +8,10 @@ function isString(str) {
 export default class Step extends React.Component {
   render() {
     const {
-      className, prefixCls, style, tailWidth,
+      className, prefixCls, style, tailWidth, itemWidth,
       status = 'wait', iconPrefix, icon, wrapperStyle,
       adjustMarginRight, stepLast, stepNumber,
-      description, title, ...restProps } = this.props;
+      description, title, progressDot, ...restProps } = this.props;
     const iconClassName = classNames({
       [`${prefixCls}-icon`]: true,
       [`${iconPrefix}icon`]: true,
@@ -21,14 +21,25 @@ export default class Step extends React.Component {
     });
 
     let iconNode;
-    if (icon && !isString(icon)) {
+    const iconDot = <span className={`${prefixCls}-icon-dot`}></span>;
+    // `progressDot` enjoy the highest priority
+    if (!!progressDot) {
+      if (typeof progressDot === 'function') {
+        iconNode = (
+          <span className={`${prefixCls}-icon`}>
+            {progressDot(iconDot, stepNumber - 1)}
+          </span>
+        );
+      } else {
+        iconNode = <span className={`${prefixCls}-icon`}>{iconDot}</span>;
+      }
+    } else if (icon && !isString(icon)) {
       iconNode = <span className={`${prefixCls}-icon`}>{icon}</span>;
     } else if (icon || status === 'finish' || status === 'error') {
       iconNode = <span className={iconClassName} />;
     } else {
       iconNode = <span className={`${prefixCls}-icon`}>{stepNumber}</span>;
     }
-
     const classString = classNames({
       [`${prefixCls}-item`]: true,
       [`${prefixCls}-item-last`]: stepLast,
@@ -39,9 +50,18 @@ export default class Step extends React.Component {
     return (
       <div {...restProps}
         className={classString}
-        style={{ width: tailWidth, marginRight: adjustMarginRight, ...style }}
+        style={{ width: itemWidth, marginRight: adjustMarginRight, ...style }}
       >
-        {stepLast ? '' : <div ref="tail" className={`${prefixCls}-tail`}><i /></div>}
+        {
+          stepLast ? ''
+          : <div
+            ref="tail"
+            style={ tailWidth ? { width: tailWidth } : {}}
+            className={`${prefixCls}-tail`}
+          >
+            <i />
+          </div>
+        }
         <div className={`${prefixCls}-step`}>
           <div
             className={`${prefixCls}-head`}
@@ -71,6 +91,10 @@ Step.propTypes = {
     PropTypes.number,
     PropTypes.string,
   ]),
+  itemWidth: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.string,
+  ]),
   status: PropTypes.string,
   iconPrefix: PropTypes.string,
   icon: PropTypes.node,
@@ -82,6 +106,7 @@ Step.propTypes = {
   stepNumber: PropTypes.string,
   description: PropTypes.any,
   title: PropTypes.any,
+  progressDot: PropTypes.any,
 };
 
 module.exports = Step;

src/Steps.jsx

@@ -7,20 +7,21 @@ export default class Steps extends React.Component {
     super(props);
     this.state = {
       lastStepOffsetWidth: 0,
+      firstStepOffsetWidth: 0,
     };
   }
   componentDidMount() {
-    this.calcLastStepOffsetWidth();
+    this.calcStepOffsetWidth();
   }
   componentDidUpdate() {
-    this.calcLastStepOffsetWidth();
+    this.calcStepOffsetWidth();
   }
   componentWillUnmount() {
     if (this.calcTimeout) {
       clearTimeout(this.calcTimeout);
     }
   }
-  calcLastStepOffsetWidth = () => {
+  calcStepOffsetWidth = () => {
     const domNode = ReactDOM.findDOMNode(this);
     if (domNode.children.length > 0) {
       if (this.calcTimeout) {
@@ -29,44 +30,54 @@ export default class Steps extends React.Component {
       this.calcTimeout = setTimeout(() => {
         // +1 for fit edge bug of digit width, like 35.4px
         const lastStepOffsetWidth = (domNode.lastChild.offsetWidth || 0) + 1;
-        if (this.state.lastStepOffsetWidth === lastStepOffsetWidth) {
+        const firstStepOffsetWidth = (domNode.firstChild.offsetWidth || 0) + 1;
+        if (this.state.lastStepOffsetWidth === lastStepOffsetWidth &&
+          this.state.firstStepOffsetWidth === firstStepOffsetWidth) {
           return;
         }
-        this.setState({ lastStepOffsetWidth });
+        this.setState({ lastStepOffsetWidth, firstStepOffsetWidth });
       });
     }
   }
   render() {
     const props = this.props;
     const { prefixCls, style = {}, className, children, direction,
-            labelPlacement, iconPrefix, status, size, current, ...restProps } = props;
+            labelPlacement, iconPrefix, status, size, current, progressDot, ...restProps } = props;
     const lastIndex = children.length - 1;
     const reLayouted = this.state.lastStepOffsetWidth > 0;
+    const adjustedlabelPlacement = !!progressDot ? 'vertical' : labelPlacement;
     const classString = classNames({
       [prefixCls]: true,
       [`${prefixCls}-${size}`]: size,
       [`${prefixCls}-${direction}`]: true,
-      [`${prefixCls}-label-${labelPlacement}`]: direction === 'horizontal',
+      [`${prefixCls}-label-${adjustedlabelPlacement}`]: direction === 'horizontal',
       [`${prefixCls}-hidden`]: !reLayouted,
+      [`${prefixCls}-dot`]: !!progressDot,
       [className]: className,
     });
 
     return (
       <div className={classString} style={style} {...restProps}>
         {
           React.Children.map(children, (ele, idx) => {
-            const tailWidth = (direction === 'vertical' || idx === lastIndex || !reLayouted)
+            const itemWidth = (direction === 'vertical' || idx === lastIndex || !reLayouted)
               ? null : `${100 / lastIndex}%`;
             const adjustMarginRight = (direction === 'vertical' || idx === lastIndex)
               ? null : -Math.round(this.state.lastStepOffsetWidth / lastIndex + 1);
+            const tailWidth = direction === 'vertical' ? ''
+              : (this.state.firstStepOffsetWidth +
+                Math.round(this.state.lastStepOffsetWidth / 2 + 1) -
+                Math.round(this.state.lastStepOffsetWidth / lastIndex + 1));
             const np = {
               stepNumber: (idx + 1).toString(),
               stepLast: idx === lastIndex,
+              itemWidth,
               tailWidth,
               adjustMarginRight,
               prefixCls,
               iconPrefix,
               wrapperStyle: style,
+              progressDot,
             };
 
             // fix tail color
@@ -99,6 +110,7 @@ Steps.propTypes = {
   children: PropTypes.any,
   status: PropTypes.string,
   size: PropTypes.string,
+  progressDot: PropTypes.any,
 };
 
 Steps.defaultProps = {
@@ -109,4 +121,5 @@ Steps.defaultProps = {
   current: 0,
   status: 'process',
   size: '',
+  progressDot: false,
 };