rc-steps - npm Package Compare versions

Comparing version 2.5.2 to 3.0.0

HISTORY.md

 # History
 ----
 
+## 3.0.0
+
+- Rewrite from bottom.
+
 ## 2.5.1
@@ -5,0 +9,0 @@

lib/index.js

@@ -6,2 +6,3 @@ 'use strict';
 });
+exports.Step = undefined;
 
@@ -16,6 +17,7 @@ var _Steps = require('./Steps');
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-_Steps2["default"].Step = _Step2["default"];
-exports["default"] = _Steps2["default"];
-module.exports = exports['default'];
+_Steps2['default'].Step = _Step2['default'];
+
+exports.Step = _Step2['default'];
+exports['default'] = _Steps2['default'];

lib/Step.js

@@ -7,4 +7,30 @@ 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+var _extends2 = require('babel-runtime/helpers/extends');
 
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
 var _react = require('react');
@@ -22,16 +48,4 @@
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
-
 function isString(str) {
@@ -42,137 +56,136 @@ return typeof str === 'string';
 var Step = function (_React$Component) {
-  _inherits(Step, _React$Component);
+  (0, _inherits3['default'])(Step, _React$Component);
 
   function Step() {
-    _classCallCheck(this, Step);
-
-    return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
+    (0, _classCallCheck3['default'])(this, Step);
+    return (0, _possibleConstructorReturn3['default'])(this, (Step.__proto__ || Object.getPrototypeOf(Step)).apply(this, arguments));
   }
 
-  Step.prototype.render = function render() {
-    var _classNames, _classNames2;
+  (0, _createClass3['default'])(Step, [{
+    key: 'renderIconNode',
+    value: function renderIconNode() {
+      var _classNames;
 
-    var _props = this.props,
-        className = _props.className,
-        prefixCls = _props.prefixCls,
-        style = _props.style,
-        itemWidth = _props.itemWidth,
-        _props$status = _props.status,
-        status = _props$status === undefined ? 'wait' : _props$status,
-        iconPrefix = _props.iconPrefix,
-        icon = _props.icon,
-        wrapperStyle = _props.wrapperStyle,
-        adjustMarginRight = _props.adjustMarginRight,
-        stepNumber = _props.stepNumber,
-        description = _props.description,
-        title = _props.title,
-        progressDot = _props.progressDot,
-        restProps = _objectWithoutProperties(_props, ['className', 'prefixCls', 'style', 'itemWidth', 'status', 'iconPrefix', 'icon', 'wrapperStyle', 'adjustMarginRight', 'stepNumber', 'description', 'title', 'progressDot']);
+      var _props = this.props,
+          prefixCls = _props.prefixCls,
+          progressDot = _props.progressDot,
+          stepNumber = _props.stepNumber,
+          status = _props.status,
+          title = _props.title,
+          description = _props.description,
+          icon = _props.icon,
+          iconPrefix = _props.iconPrefix;
 
-    var iconClassName = (0, _classnames2["default"])((_classNames = {}, _defineProperty(_classNames, prefixCls + '-icon', true), _defineProperty(_classNames, iconPrefix + 'icon', true), _defineProperty(_classNames, iconPrefix + 'icon-' + icon, icon && isString(icon)), _defineProperty(_classNames, iconPrefix + 'icon-check', !icon && status === 'finish'), _defineProperty(_classNames, iconPrefix + 'icon-cross', !icon && status === 'error'), _classNames));
-
-    var iconNode = void 0;
-    var iconDot = _react2["default"].createElement('span', { className: prefixCls + '-icon-dot' });
-    // `progressDot` enjoy the highest priority
-    if (!!progressDot) {
-      if (typeof progressDot === 'function') {
-        iconNode = _react2["default"].createElement(
+      var iconNode = void 0;
+      var iconClassName = (0, _classnames2['default'])(prefixCls + '-icon', iconPrefix + 'icon', (_classNames = {}, (0, _defineProperty3['default'])(_classNames, iconPrefix + 'icon-' + icon, icon && isString(icon)), (0, _defineProperty3['default'])(_classNames, iconPrefix + 'icon-check', !icon && status === 'finish'), (0, _defineProperty3['default'])(_classNames, iconPrefix + 'icon-cross', !icon && status === 'error'), _classNames));
+      var iconDot = _react2['default'].createElement('span', { className: prefixCls + '-icon-dot' });
+      // `progressDot` enjoy the highest priority
+      if (progressDot) {
+        if (typeof progressDot === 'function') {
+          iconNode = _react2['default'].createElement(
+            'span',
+            { className: prefixCls + '-icon' },
+            progressDot(iconDot, { index: stepNumber - 1, status: status, title: title, description: description })
+          );
+        } else {
+          iconNode = _react2['default'].createElement(
+            'span',
+            { className: prefixCls + '-icon' },
+            iconDot
+          );
+        }
+      } else if (icon && !isString(icon)) {
+        iconNode = _react2['default'].createElement(
           'span',
           { className: prefixCls + '-icon' },
-          progressDot(iconDot, { index: stepNumber - 1, status: status, title: title, description: description })
+          icon
         );
+      } else if (icon || status === 'finish' || status === 'error') {
+        iconNode = _react2['default'].createElement('span', { className: iconClassName });
       } else {
-        iconNode = _react2["default"].createElement(
+        iconNode = _react2['default'].createElement(
           'span',
           { className: prefixCls + '-icon' },
-          iconDot
+          stepNumber
         );
       }
-    } else if (icon && !isString(icon)) {
-      iconNode = _react2["default"].createElement(
-        'span',
-        { className: prefixCls + '-icon' },
-        icon
-      );
-    } else if (icon || status === 'finish' || status === 'error') {
-      iconNode = _react2["default"].createElement('span', { className: iconClassName });
-    } else {
-      iconNode = _react2["default"].createElement(
-        'span',
-        { className: prefixCls + '-icon' },
-        stepNumber
-      );
+      return iconNode;
     }
-    var classString = (0, _classnames2["default"])((_classNames2 = {}, _defineProperty(_classNames2, prefixCls + '-item', true), _defineProperty(_classNames2, prefixCls + '-status-' + status, true), _defineProperty(_classNames2, prefixCls + '-custom', icon), _defineProperty(_classNames2, className, !!className), _classNames2));
-    return _react2["default"].createElement(
-      'div',
-      _extends({}, restProps, {
-        className: classString,
-        style: _extends({ width: itemWidth, marginRight: adjustMarginRight }, style)
-      }),
-      _react2["default"].createElement(
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props2 = this.props,
+          className = _props2.className,
+          prefixCls = _props2.prefixCls,
+          style = _props2.style,
+          itemWidth = _props2.itemWidth,
+          _props2$status = _props2.status,
+          status = _props2$status === undefined ? 'wait' : _props2$status,
+          iconPrefix = _props2.iconPrefix,
+          icon = _props2.icon,
+          wrapperStyle = _props2.wrapperStyle,
+          adjustMarginRight = _props2.adjustMarginRight,
+          stepNumber = _props2.stepNumber,
+          description = _props2.description,
+          title = _props2.title,
+          progressDot = _props2.progressDot,
+          restProps = (0, _objectWithoutProperties3['default'])(_props2, ['className', 'prefixCls', 'style', 'itemWidth', 'status', 'iconPrefix', 'icon', 'wrapperStyle', 'adjustMarginRight', 'stepNumber', 'description', 'title', 'progressDot']);
+
+
+      var classString = (0, _classnames2['default'])(prefixCls + '-item', prefixCls + '-item-' + status, className, (0, _defineProperty3['default'])({}, prefixCls + '-item-custom', icon));
+      var stepItemStyle = (0, _extends3['default'])({}, style);
+      if (itemWidth) {
+        stepItemStyle.width = itemWidth;
+      }
+      if (adjustMarginRight) {
+        stepItemStyle.marginRight = adjustMarginRight;
+      }
+      return _react2['default'].createElement(
         'div',
-        {
-          ref: 'tail',
-          className: prefixCls + '-tail',
-          style: { paddingRight: -adjustMarginRight }
-        },
-        _react2["default"].createElement('i', null)
-      ),
-      _react2["default"].createElement(
-        'div',
-        { className: prefixCls + '-step' },
-        _react2["default"].createElement(
+        (0, _extends3['default'])({}, restProps, {
+          className: classString,
+          style: stepItemStyle
+        }),
+        _react2['default'].createElement('div', { className: prefixCls + '-item-tail' }),
+        _react2['default'].createElement(
           'div',
-          {
-            className: prefixCls + '-head',
-            style: { background: wrapperStyle.background || wrapperStyle.backgroundColor }
-          },
-          _react2["default"].createElement(
-            'div',
-            { className: prefixCls + '-head-inner' },
-            iconNode
-          )
+          { className: prefixCls + '-item-icon' },
+          this.renderIconNode()
         ),
-        _react2["default"].createElement(
+        _react2['default'].createElement(
           'div',
-          { ref: 'main', className: prefixCls + '-main' },
-          _react2["default"].createElement(
+          { className: prefixCls + '-item-content' },
+          _react2['default'].createElement(
             'div',
-            {
-              className: prefixCls + '-title',
-              style: { background: wrapperStyle.background || wrapperStyle.backgroundColor }
-            },
+            { className: prefixCls + '-item-title' },
             title
           ),
-          description ? _react2["default"].createElement(
+          description && _react2['default'].createElement(
             'div',
-            { className: prefixCls + '-description' },
+            { className: prefixCls + '-item-description' },
             description
-          ) : ''
+          )
         )
-      )
-    );
-  };
-
+      );
+    }
+  }]);
   return Step;
-}(_react2["default"].Component);
+}(_react2['default'].Component);
 
-exports["default"] = Step;
-
-
 Step.propTypes = {
-  className: _propTypes2["default"].string,
-  prefixCls: _propTypes2["default"].string,
-  style: _propTypes2["default"].object,
-  wrapperStyle: _propTypes2["default"].object,
-  itemWidth: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
-  status: _propTypes2["default"].string,
-  iconPrefix: _propTypes2["default"].string,
-  icon: _propTypes2["default"].node,
-  adjustMarginRight: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
-  stepNumber: _propTypes2["default"].string,
-  description: _propTypes2["default"].any,
-  title: _propTypes2["default"].any,
-  progressDot: _propTypes2["default"].oneOfType([_propTypes2["default"].bool, _propTypes2["default"].func])
+  className: _propTypes2['default'].string,
+  prefixCls: _propTypes2['default'].string,
+  style: _propTypes2['default'].object,
+  wrapperStyle: _propTypes2['default'].object,
+  itemWidth: _propTypes2['default'].oneOfType([_propTypes2['default'].number, _propTypes2['default'].string]),
+  status: _propTypes2['default'].string,
+  iconPrefix: _propTypes2['default'].string,
+  icon: _propTypes2['default'].node,
+  adjustMarginRight: _propTypes2['default'].oneOfType([_propTypes2['default'].number, _propTypes2['default'].string]),
+  stepNumber: _propTypes2['default'].string,
+  description: _propTypes2['default'].any,
+  title: _propTypes2['default'].any,
+  progressDot: _propTypes2['default'].oneOfType([_propTypes2['default'].bool, _propTypes2['default'].func])
 };
+exports['default'] = Step;
 module.exports = exports['default'];

lib/Steps.js

@@ -7,4 +7,30 @@ 'use strict';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+var _extends2 = require('babel-runtime/helpers/extends');
 
+var _extends3 = _interopRequireDefault(_extends2);
+
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
+var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
+
+var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
 var _react = require('react');
@@ -20,4 +46,2 @@
 
-var _reactDom2 = _interopRequireDefault(_reactDom);
-
 var _classnames = require('classnames');
@@ -31,26 +55,21 @@
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+var _utils = require('./utils');
 
-function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+/* eslint react/no-did-mount-set-state: 0 */
+var Steps = function (_Component) {
+  (0, _inherits3['default'])(Steps, _Component);
 
-function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
-
-var Steps = function (_React$Component) {
-  _inherits(Steps, _React$Component);
-
   function Steps(props) {
-    _classCallCheck(this, Steps);
+    (0, _classCallCheck3['default'])(this, Steps);
 
-    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
+    var _this = (0, _possibleConstructorReturn3['default'])(this, (Steps.__proto__ || Object.getPrototypeOf(Steps)).call(this, props));
 
     _this.calcStepOffsetWidth = function () {
-      var domNode = _reactDom2["default"].findDOMNode(_this);
+      if ((0, _utils.isFlexSupported)()) {
+        return;
+      }
+      // Just for IE9
+      var domNode = (0, _reactDom.findDOMNode)(_this);
       if (domNode.children.length > 0) {
@@ -73,108 +92,116 @@ if (_this.calcTimeout) {
     _this.state = {
+      flexSupported: true,
       lastStepOffsetWidth: 0
     };
-    _this.calcStepOffsetWidth = (0, _lodash2["default"])(_this.calcStepOffsetWidth, 150);
+    _this.calcStepOffsetWidth = (0, _lodash2['default'])(_this.calcStepOffsetWidth, 150);
     return _this;
   }
 
-  Steps.prototype.componentDidMount = function componentDidMount() {
-    this.calcStepOffsetWidth();
-  };
-
-  Steps.prototype.componentDidUpdate = function componentDidUpdate() {
-    this.calcStepOffsetWidth();
-  };
-
-  Steps.prototype.componentWillUnmount = function componentWillUnmount() {
-    if (this.calcTimeout) {
-      clearTimeout(this.calcTimeout);
+  (0, _createClass3['default'])(Steps, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.calcStepOffsetWidth();
+      if (!(0, _utils.isFlexSupported)()) {
+        this.setState({
+          flexSupported: false
+        });
+      }
     }
-    if (this.calcStepOffsetWidth.cancel) {
-      this.calcStepOffsetWidth.cancel();
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      this.calcStepOffsetWidth();
     }
-  };
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      if (this.calcTimeout) {
+        clearTimeout(this.calcTimeout);
+      }
+      if (this.calcStepOffsetWidth && this.calcStepOffsetWidth.cancel) {
+        this.calcStepOffsetWidth.cancel();
+      }
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _classNames;
 
-  Steps.prototype.render = function render() {
-    var _classNames,
-        _this2 = this;
+      var _props = this.props,
+          prefixCls = _props.prefixCls,
+          _props$style = _props.style,
+          style = _props$style === undefined ? {} : _props$style,
+          className = _props.className,
+          children = _props.children,
+          direction = _props.direction,
+          labelPlacement = _props.labelPlacement,
+          iconPrefix = _props.iconPrefix,
+          status = _props.status,
+          size = _props.size,
+          current = _props.current,
+          progressDot = _props.progressDot,
+          restProps = (0, _objectWithoutProperties3['default'])(_props, ['prefixCls', 'style', 'className', 'children', 'direction', 'labelPlacement', 'iconPrefix', 'status', 'size', 'current', 'progressDot']);
+      var _state = this.state,
+          lastStepOffsetWidth = _state.lastStepOffsetWidth,
+          flexSupported = _state.flexSupported;
 
-    var props = this.props;
+      var filteredChildren = _react2['default'].Children.toArray(children).filter(function (c) {
+        return !!c;
+      });
+      var lastIndex = filteredChildren.length - 1;
+      var adjustedlabelPlacement = !!progressDot ? 'vertical' : labelPlacement;
+      var classString = (0, _classnames2['default'])(prefixCls, prefixCls + '-' + direction, className, (_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls + '-' + size, size), (0, _defineProperty3['default'])(_classNames, prefixCls + '-label-' + adjustedlabelPlacement, direction === 'horizontal'), (0, _defineProperty3['default'])(_classNames, prefixCls + '-dot', !!progressDot), _classNames));
 
-    var prefixCls = props.prefixCls,
-        _props$style = props.style,
-        style = _props$style === undefined ? {} : _props$style,
-        className = props.className,
-        children = props.children,
-        direction = props.direction,
-        labelPlacement = props.labelPlacement,
-        iconPrefix = props.iconPrefix,
-        status = props.status,
-        size = props.size,
-        current = props.current,
-        progressDot = props.progressDot,
-        restProps = _objectWithoutProperties(props, ['prefixCls', 'style', 'className', 'children', 'direction', 'labelPlacement', 'iconPrefix', 'status', 'size', 'current', 'progressDot']);
-
-    var filteredChildren = _react2["default"].Children.toArray(children).filter(function (c) {
-      return !!c;
-    });
-    var lastIndex = filteredChildren.length - 1;
-    var reLayouted = this.state.lastStepOffsetWidth > 0;
-    var adjustedlabelPlacement = !!progressDot ? 'vertical' : labelPlacement;
-    var classString = (0, _classnames2["default"])((_classNames = {}, _defineProperty(_classNames, prefixCls, true), _defineProperty(_classNames, prefixCls + '-' + size, size), _defineProperty(_classNames, prefixCls + '-' + direction, true), _defineProperty(_classNames, prefixCls + '-label-' + adjustedlabelPlacement, direction === 'horizontal'), _defineProperty(_classNames, prefixCls + '-hidden', !reLayouted), _defineProperty(_classNames, prefixCls + '-dot', !!progressDot), _defineProperty(_classNames, className, className), _classNames));
-
-    return _react2["default"].createElement(
-      'div',
-      _extends({ className: classString, style: style }, restProps),
-      _react2["default"].Children.map(filteredChildren, function (ele, idx) {
-        if (!ele) {
-          return null;
-        }
-        var itemWidth = direction === 'vertical' || idx === lastIndex || !reLayouted ? null : 100 / lastIndex + '%';
-        var adjustMarginRight = direction === 'vertical' || idx === lastIndex ? null : -Math.round(_this2.state.lastStepOffsetWidth / lastIndex + 1);
-        var np = {
-          stepNumber: (idx + 1).toString(),
-          itemWidth: itemWidth,
-          adjustMarginRight: adjustMarginRight,
-          prefixCls: prefixCls,
-          iconPrefix: iconPrefix,
-          wrapperStyle: style,
-          progressDot: progressDot
-        };
-
-        // fix tail color
-        if (status === 'error' && idx === current - 1) {
-          np.className = props.prefixCls + '-next-error';
-        }
-
-        if (!ele.props.status) {
-          if (idx === current) {
-            np.status = status;
-          } else if (idx < current) {
-            np.status = 'finish';
-          } else {
-            np.status = 'wait';
+      return _react2['default'].createElement(
+        'div',
+        (0, _extends3['default'])({ className: classString, style: style }, restProps),
+        _react.Children.map(filteredChildren, function (child, index) {
+          if (!child) {
+            return null;
           }
-        }
-        return _react2["default"].cloneElement(ele, np);
-      }, this)
-    );
-  };
-
+          var childProps = (0, _extends3['default'])({
+            stepNumber: '' + (index + 1),
+            prefixCls: prefixCls,
+            iconPrefix: iconPrefix,
+            wrapperStyle: style,
+            progressDot: progressDot
+          }, child.props);
+          if (!flexSupported && direction !== 'vertical' && index !== lastIndex) {
+            childProps.itemWidth = 100 / lastIndex + '%';
+            childProps.adjustMarginRight = -Math.round(lastStepOffsetWidth / lastIndex + 1);
+          }
+          // fix tail color
+          if (status === 'error' && index === current - 1) {
+            childProps.className = prefixCls + '-next-error';
+          }
+          if (!child.props.status) {
+            if (index === current) {
+              childProps.status = status;
+            } else if (index < current) {
+              childProps.status = 'finish';
+            } else {
+              childProps.status = 'wait';
+            }
+          }
+          return (0, _react.cloneElement)(child, childProps);
+        })
+      );
+    }
+  }]);
   return Steps;
-}(_react2["default"].Component);
+}(_react.Component);
 
-exports["default"] = Steps;
-
-
 Steps.propTypes = {
-  prefixCls: _propTypes2["default"].string,
-  iconPrefix: _propTypes2["default"].string,
-  direction: _propTypes2["default"].string,
-  labelPlacement: _propTypes2["default"].string,
-  children: _propTypes2["default"].any,
-  status: _propTypes2["default"].string,
-  size: _propTypes2["default"].string,
-  progressDot: _propTypes2["default"].oneOfType([_propTypes2["default"].bool, _propTypes2["default"].func])
+  prefixCls: _propTypes2['default'].string,
+  className: _propTypes2['default'].string,
+  iconPrefix: _propTypes2['default'].string,
+  direction: _propTypes2['default'].string,
+  labelPlacement: _propTypes2['default'].string,
+  children: _propTypes2['default'].any,
+  status: _propTypes2['default'].string,
+  size: _propTypes2['default'].string,
+  progressDot: _propTypes2['default'].oneOfType([_propTypes2['default'].bool, _propTypes2['default'].func]),
+  style: _propTypes2['default'].object,
+  current: _propTypes2['default'].number
 };
-
 Steps.defaultProps = {
@@ -190,2 +217,3 @@ prefixCls: 'rc-steps',
 };
+exports['default'] = Steps;
 module.exports = exports['default'];

package.json

 {
   "name": "rc-steps",
-  "version": "2.5.2",
+  "version": "3.0.0",
   "description": "steps ui component for react",
@@ -11,5 +11,7 @@ "keywords": [
   "main": "./lib/index",
+  "module": "./es/index",
   "files": [
     "lib",
-    "assets/*.css"
+    "assets/iconfont.css",
+    "assets/index.css"
   ],
@@ -19,4 +21,4 @@ "homepage": "http://github.com/react-component/steps",
     {
-      "name": "yuhangge",
-      "email": "[e-mail]"
+      "name": "afc163",
+      "email": "[e-mail]"
     }
@@ -37,18 +39,35 @@ ],
     "build": "rc-tools run build",
+    "compile": "rc-tools run compile --babel-runtime",
     "gh-pages": "rc-tools run gh-pages",
     "start": "rc-tools run server",
-    "pub": "rc-tools run pub",
+    "pub": "rc-tools run pub --babel-runtime",
     "lint": "rc-tools run lint",
-    "karma": "rc-tools run karma",
-    "saucelabs": "rc-tools run saucelabs",
-    "test": "rc-tools run test",
-    "chrome-test": "rc-tools run chrome-test",
-    "coverage": "rc-tools run coverage"
+    "lint:fix": "rc-tools run lint --fix",
+    "test": "jest",
+    "prepublish": "rc-tools run guard",
+    "coverage": "jest --coverage && cat ./coverage/lcov.info | coveralls"
   },
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*"
+    ],
+    "snapshotSerializers": [
+      "enzyme-to-json/serializer"
+    ],
+    "transform": {
+      "\\.jsx?$": "./node_modules/rc-tools/scripts/jestPreprocessor.js"
+    }
+  },
   "devDependencies": {
-    "expect.js": "~0.3.x",
+    "coveralls": "^2.11.15",
+    "enzyme": "^2.6.0",
+    "enzyme-to-json": "^1.5.0",
+    "jest": "^20.0.4",
     "pre-commit": "1.x",
-    "rc-tools": "^5.3.3",
-    "react": "^15.0.0",
-    "react-dom": "^15.0.0"
+    "querystring": "^0.2.0",
+    "rc-dialog": "6.x",
+    "rc-tools": "6.x",
+    "react": "15.x",
+    "react-dom": "15.x",
+    "react-test-renderer": "^15.3.2"
   },
@@ -59,2 +78,3 @@ "pre-commit": [
   "dependencies": {
+    "babel-runtime": "^6.23.0",
     "classnames": "^2.2.3",
@@ -61,0 +81,0 @@ "lodash.debounce": "^4.0.8",

README.md

@@ -5,13 +5,24 @@ # rc-steps
 
-React steps component
+React steps component.
 
-## Development
+[![NPM version][npm-image]][npm-url]
+[![build status][travis-image]][travis-url]
+[![Test coverage][coveralls-image]][coveralls-url]
+[![npm download][download-image]][download-url]
 
-```
-npm install
-npm start
-```
+[npm-image]: http://img.shields.io/npm/v/rc-steps.svg?style=flat-square
+[npm-url]: http://npmjs.org/package/rc-steps
+[download-image]: https://img.shields.io/npm/dm/rc-steps.svg?style=flat-square
+[download-url]: https://npmjs.org/package/rc-steps
+[travis-image]: https://img.shields.io/travis/react-component/steps.svg?style=flat-square
+[travis-url]: https://travis-ci.org/react-component/steps
+[coveralls-image]: https://img.shields.io/coveralls/react-component/steps.svg?style=flat-square
+[coveralls-url]: https://coveralls.io/r/react-component/steps?branch=master
 
 ## Usage
 
+```bash
+npm install rc-steps
+```
+
 ```jsx
@@ -31,4 +42,95 @@ <Steps current={1}>
 
+## API
+
+<table class="table table-bordered table-striped">
+  <thead>
+    <tr>
+      <th style="width: 100px;">name</th>
+      <th style="width: 50px;">type</th>
+      <th style="width: 50px;">default</th>
+      <th>description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>direction</td>
+      <td>string</td>
+      <td>horizontal</td>
+      <td>direction of Steps, enum: `horizontal` or `vertical`</td>
+    </tr>
+    <tr>
+      <td>current</td>
+      <td>number</td>
+      <td>0</td>
+      <td>index of current step</td>
+    </tr>
+    <tr>
+      <td>size</td>
+      <td>string</td>
+      <td></td>
+      <td>size of Steps, could be `small`</td>
+    </tr>
+    <tr>
+      <td>labelPlacement</td>
+      <td>string</td>
+      <td></td>
+      <td>placement of step title, could be `vertical`</td>
+    </tr>
+    <tr>
+      <td>status</td>
+      <td>string</td>
+      <td>wait</td>
+      <td>status of current Steps, could be `error` `process` `finish` `wait`</td>
+    </tr>
+  </tbody>
+</table>
+
+### Steps.Step
+
+<table class="table table-bordered table-striped">
+  <thead>
+    <tr>
+      <th style="width: 100px;">name</th>
+      <th style="width: 50px;">type</th>
+      <th style="width: 50px;">default</th>
+      <th>description</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td>title</td>
+      <td>ReactNode</td>
+      <td></td>
+      <td>title of step item</td>
+    </tr>
+    <tr>
+      <td>description</td>
+      <td>ReactNode</td>
+      <td></td>
+      <td>description of step item</td>
+    </tr>
+    <tr>
+      <td>icon</td>
+      <td>ReactNode or string</td>
+      <td></td>
+      <td>set icon of step item</td>
+    </tr>
+    <tr>
+      <td>status</td>
+      <td>string</td>
+      <td></td>
+      <td>status of current Steps, could be `error` `process` `finish` `wait`</td>
+    </tr>
+  </tbody>
+</table>
+
+## Development
+
+```
+npm install
+npm start
+```
+
 ## License
 
 rc-steps is released under the MIT license.

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

41516

increased by4.83%

Number of package files

10

increased by11.11%

Lines of code

1232

increased by3.97%

Number of lines in readme file

135

increased by309.09%

Worsened metrics

Dependency count

4

increased by33.33%

Dev dependency count

11

increased by120%

Dependency changes

• + Addedbabel-runtime@^6.23.0

• + Addedbabel-runtime@6.26.0(transitive)

• + Addedcore-js@2.6.12(transitive)

• + Addedregenerator-runtime@0.11.1(transitive)