rc-steps - npm Package Compare versions

Comparing version 3.0.1 to 3.1.0

es/Step.js

 import _extends from 'babel-runtime/helpers/extends';
 import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+import _defineProperty from 'babel-runtime/helpers/defineProperty';
 import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
+import _createClass from 'babel-runtime/helpers/createClass';
 import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
@@ -20,29 +22,46 @@ import _inherits from 'babel-runtime/helpers/inherits';
 
-    return _possibleConstructorReturn(this, _React$Component.apply(this, arguments));
+    return _possibleConstructorReturn(this, (Step.__proto__ || Object.getPrototypeOf(Step)).apply(this, arguments));
   }
 
-  Step.prototype.renderIconNode = function renderIconNode() {
-    var _classNames;
+  _createClass(Step, [{
+    key: 'renderIconNode',
+    value: function renderIconNode() {
+      var _classNames;
 
-    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 _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 iconNode = void 0;
-    var iconClassName = classNames(prefixCls + '-icon', iconPrefix + 'icon', (_classNames = {}, _classNames[iconPrefix + 'icon-' + icon] = icon && isString(icon), _classNames[iconPrefix + 'icon-check'] = !icon && status === 'finish', _classNames[iconPrefix + 'icon-cross'] = !icon && status === 'error', _classNames));
-    var iconDot = React.createElement('span', { className: prefixCls + '-icon-dot' });
-    // `progressDot` enjoy the highest priority
-    if (progressDot) {
-      if (typeof progressDot === 'function') {
+      var iconNode = void 0;
+      var iconClassName = classNames(prefixCls + '-icon', iconPrefix + 'icon', (_classNames = {}, _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 iconDot = React.createElement('span', { className: prefixCls + '-icon-dot' });
+      // `progressDot` enjoy the highest priority
+      if (progressDot) {
+        if (typeof progressDot === 'function') {
+          iconNode = React.createElement(
+            'span',
+            { className: prefixCls + '-icon' },
+            progressDot(iconDot, { index: stepNumber - 1, status: status, title: title, description: description })
+          );
+        } else {
+          iconNode = React.createElement(
+            'span',
+            { className: prefixCls + '-icon' },
+            iconDot
+          );
+        }
+      } else if (icon && !isString(icon)) {
         iconNode = React.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 = React.createElement('span', { className: iconClassName });
       } else {
@@ -52,79 +71,69 @@ iconNode = React.createElement(
           { className: prefixCls + '-icon' },
-          iconDot
+          stepNumber
         );
       }
-    } else if (icon && !isString(icon)) {
-      iconNode = React.createElement(
-        'span',
-        { className: prefixCls + '-icon' },
-        icon
-      );
-    } else if (icon || status === 'finish' || status === 'error') {
-      iconNode = React.createElement('span', { className: iconClassName });
-    } else {
-      iconNode = React.createElement(
-        'span',
-        { className: prefixCls + '-icon' },
-        stepNumber
-      );
+      return iconNode;
     }
-    return iconNode;
-  };
+  }, {
+    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,
+          tailContent = _props2.tailContent,
+          restProps = _objectWithoutProperties(_props2, ['className', 'prefixCls', 'style', 'itemWidth', 'status', 'iconPrefix', 'icon', 'wrapperStyle', 'adjustMarginRight', 'stepNumber', 'description', 'title', 'progressDot', 'tailContent']);
 
-  Step.prototype.render = function render() {
-    var _classNames2;
-
-    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 = _objectWithoutProperties(_props2, ['className', 'prefixCls', 'style', 'itemWidth', 'status', 'iconPrefix', 'icon', 'wrapperStyle', 'adjustMarginRight', 'stepNumber', 'description', 'title', 'progressDot']);
-
-    var classString = classNames(prefixCls + '-item', prefixCls + '-item-' + status, className, (_classNames2 = {}, _classNames2[prefixCls + '-item-custom'] = icon, _classNames2));
-    var stepItemStyle = _extends({}, style);
-    if (itemWidth) {
-      stepItemStyle.width = itemWidth;
-    }
-    if (adjustMarginRight) {
-      stepItemStyle.marginRight = adjustMarginRight;
-    }
-    return React.createElement(
-      'div',
-      _extends({}, restProps, {
-        className: classString,
-        style: stepItemStyle
-      }),
-      React.createElement('div', { className: prefixCls + '-item-tail' }),
-      React.createElement(
+      var classString = classNames(prefixCls + '-item', prefixCls + '-item-' + status, className, _defineProperty({}, prefixCls + '-item-custom', icon));
+      var stepItemStyle = _extends({}, style);
+      if (itemWidth) {
+        stepItemStyle.width = itemWidth;
+      }
+      if (adjustMarginRight) {
+        stepItemStyle.marginRight = adjustMarginRight;
+      }
+      return React.createElement(
         'div',
-        { className: prefixCls + '-item-icon' },
-        this.renderIconNode()
-      ),
-      React.createElement(
-        'div',
-        { className: prefixCls + '-item-content' },
+        _extends({}, restProps, {
+          className: classString,
+          style: stepItemStyle
+        }),
         React.createElement(
           'div',
-          { className: prefixCls + '-item-title' },
-          title
+          { className: prefixCls + '-item-tail' },
+          tailContent
         ),
-        description && React.createElement(
+        React.createElement(
           'div',
-          { className: prefixCls + '-item-description' },
-          description
+          { className: prefixCls + '-item-icon' },
+          this.renderIconNode()
+        ),
+        React.createElement(
+          'div',
+          { className: prefixCls + '-item-content' },
+          React.createElement(
+            'div',
+            { className: prefixCls + '-item-title' },
+            title
+          ),
+          description && React.createElement(
+            'div',
+            { className: prefixCls + '-item-description' },
+            description
+          )
         )
-      )
-    );
-  };
+      );
+    }
+  }]);
 
@@ -147,4 +156,5 @@ return Step;
   title: PropTypes.any,
-  progressDot: PropTypes.oneOfType([PropTypes.bool, PropTypes.func])
+  progressDot: PropTypes.oneOfType([PropTypes.bool, PropTypes.func]),
+  tailContent: PropTypes.any
 };
 export default Step;

es/Steps.js

 import _extends from 'babel-runtime/helpers/extends';
+import _defineProperty from 'babel-runtime/helpers/defineProperty';
 import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
 import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
+import _createClass from 'babel-runtime/helpers/createClass';
 import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
@@ -20,3 +22,3 @@ import _inherits from 'babel-runtime/helpers/inherits';
 
-    var _this = _possibleConstructorReturn(this, _Component.call(this, props));
+    var _this = _possibleConstructorReturn(this, (Steps.__proto__ || Object.getPrototypeOf(Steps)).call(this, props));
 
@@ -53,88 +55,94 @@ _this.calcStepOffsetWidth = function () {
 
-  Steps.prototype.componentDidMount = function componentDidMount() {
-    this.calcStepOffsetWidth();
-    if (!isFlexSupported()) {
-      this.setState({
-        flexSupported: false
-      });
+  _createClass(Steps, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.calcStepOffsetWidth();
+      if (!isFlexSupported()) {
+        this.setState({
+          flexSupported: false
+        });
+      }
     }
-  };
-
-  Steps.prototype.componentDidUpdate = function componentDidUpdate() {
-    this.calcStepOffsetWidth();
-  };
-
-  Steps.prototype.componentWillUnmount = function componentWillUnmount() {
-    if (this.calcTimeout) {
-      clearTimeout(this.calcTimeout);
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      this.calcStepOffsetWidth();
     }
-    if (this.calcStepOffsetWidth && this.calcStepOffsetWidth.cancel) {
-      this.calcStepOffsetWidth.cancel();
+  }, {
+    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;
+      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 = _objectWithoutProperties(_props, ['prefixCls', 'style', 'className', 'children', 'direction', 'labelPlacement', 'iconPrefix', 'status', 'size', 'current', 'progressDot']);
 
-    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 = _objectWithoutProperties(_props, ['prefixCls', 'style', 'className', 'children', 'direction', 'labelPlacement', 'iconPrefix', 'status', 'size', 'current', 'progressDot']);
+      var _state = this.state,
+          lastStepOffsetWidth = _state.lastStepOffsetWidth,
+          flexSupported = _state.flexSupported;
 
-    var _state = this.state,
-        lastStepOffsetWidth = _state.lastStepOffsetWidth,
-        flexSupported = _state.flexSupported;
+      var filteredChildren = React.Children.toArray(children).filter(function (c) {
+        return !!c;
+      });
+      var lastIndex = filteredChildren.length - 1;
+      var adjustedlabelPlacement = !!progressDot ? 'vertical' : labelPlacement;
+      var classString = classNames(prefixCls, prefixCls + '-' + direction, className, (_classNames = {}, _defineProperty(_classNames, prefixCls + '-' + size, size), _defineProperty(_classNames, prefixCls + '-label-' + adjustedlabelPlacement, direction === 'horizontal'), _defineProperty(_classNames, prefixCls + '-dot', !!progressDot), _classNames));
 
-    var filteredChildren = React.Children.toArray(children).filter(function (c) {
-      return !!c;
-    });
-    var lastIndex = filteredChildren.length - 1;
-    var adjustedlabelPlacement = !!progressDot ? 'vertical' : labelPlacement;
-    var classString = classNames(prefixCls, prefixCls + '-' + direction, className, (_classNames = {}, _classNames[prefixCls + '-' + size] = size, _classNames[prefixCls + '-label-' + adjustedlabelPlacement] = direction === 'horizontal', _classNames[prefixCls + '-dot'] = !!progressDot, _classNames));
-
-    return React.createElement(
-      'div',
-      _extends({ className: classString, style: style }, restProps),
-      Children.map(filteredChildren, function (child, index) {
-        if (!child) {
-          return null;
-        }
-        var childProps = _extends({
-          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 React.createElement(
+        'div',
+        _extends({ className: classString, style: style }, restProps),
+        Children.map(filteredChildren, function (child, index) {
+          if (!child) {
+            return null;
           }
-        }
-        return cloneElement(child, childProps);
-      })
-    );
-  };
+          var childProps = _extends({
+            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 cloneElement(child, childProps);
+        })
+      );
+    }
+  }]);
 
@@ -141,0 +149,0 @@ return Steps;

HISTORY.md

 # History
 ----
 
+## 3.1.0
+
+- Add `tailContent`.
+
 ## 3.0.0
@@ -5,0 +9,0 @@

lib/index.js

 'use strict';
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.Step = undefined;
@@ -5,0 +7,0 @@

lib/Step.js

 'use strict';
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
@@ -13,2 +15,6 @@ var _extends2 = require('babel-runtime/helpers/extends');
 
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
 var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
@@ -18,2 +24,6 @@
 
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
 var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
@@ -50,29 +60,46 @@
     (0, _classCallCheck3['default'])(this, Step);
-    return (0, _possibleConstructorReturn3['default'])(this, _React$Component.apply(this, arguments));
+    return (0, _possibleConstructorReturn3['default'])(this, (Step.__proto__ || Object.getPrototypeOf(Step)).apply(this, arguments));
   }
 
-  Step.prototype.renderIconNode = function renderIconNode() {
-    var _classNames;
+  (0, _createClass3['default'])(Step, [{
+    key: 'renderIconNode',
+    value: function renderIconNode() {
+      var _classNames;
 
-    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 _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 iconNode = void 0;
-    var iconClassName = (0, _classnames2['default'])(prefixCls + '-icon', iconPrefix + 'icon', (_classNames = {}, _classNames[iconPrefix + 'icon-' + icon] = icon && isString(icon), _classNames[iconPrefix + 'icon-check'] = !icon && status === 'finish', _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') {
+      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 {
@@ -82,81 +109,70 @@ iconNode = _react2['default'].createElement(
           { 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;
     }
-    return iconNode;
-  };
+  }, {
+    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,
+          tailContent = _props2.tailContent,
+          restProps = (0, _objectWithoutProperties3['default'])(_props2, ['className', 'prefixCls', 'style', 'itemWidth', 'status', 'iconPrefix', 'icon', 'wrapperStyle', 'adjustMarginRight', 'stepNumber', 'description', 'title', 'progressDot', 'tailContent']);
 
-  Step.prototype.render = function render() {
-    var _classNames2;
 
-    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, (_classNames2 = {}, _classNames2[prefixCls + '-item-custom'] = icon, _classNames2));
-    var stepItemStyle = (0, _extends3['default'])({}, style);
-    if (itemWidth) {
-      stepItemStyle.width = itemWidth;
-    }
-    if (adjustMarginRight) {
-      stepItemStyle.marginRight = adjustMarginRight;
-    }
-    return _react2['default'].createElement(
-      'div',
-      (0, _extends3['default'])({}, restProps, {
-        className: classString,
-        style: stepItemStyle
-      }),
-      _react2['default'].createElement('div', { className: prefixCls + '-item-tail' }),
-      _react2['default'].createElement(
+      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',
-        { className: prefixCls + '-item-icon' },
-        this.renderIconNode()
-      ),
-      _react2['default'].createElement(
-        'div',
-        { className: prefixCls + '-item-content' },
+        (0, _extends3['default'])({}, restProps, {
+          className: classString,
+          style: stepItemStyle
+        }),
         _react2['default'].createElement(
           'div',
-          { className: prefixCls + '-item-title' },
-          title
+          { className: prefixCls + '-item-tail' },
+          tailContent
         ),
-        description && _react2['default'].createElement(
+        _react2['default'].createElement(
           'div',
-          { className: prefixCls + '-item-description' },
-          description
+          { className: prefixCls + '-item-icon' },
+          this.renderIconNode()
+        ),
+        _react2['default'].createElement(
+          'div',
+          { className: prefixCls + '-item-content' },
+          _react2['default'].createElement(
+            'div',
+            { className: prefixCls + '-item-title' },
+            title
+          ),
+          description && _react2['default'].createElement(
+            'div',
+            { className: prefixCls + '-item-description' },
+            description
+          )
         )
-      )
-    );
-  };
-
+      );
+    }
+  }]);
   return Step;
@@ -178,5 +194,6 @@ }(_react2['default'].Component);
   title: _propTypes2['default'].any,
-  progressDot: _propTypes2['default'].oneOfType([_propTypes2['default'].bool, _propTypes2['default'].func])
+  progressDot: _propTypes2['default'].oneOfType([_propTypes2['default'].bool, _propTypes2['default'].func]),
+  tailContent: _propTypes2['default'].any
 };
 exports['default'] = Step;
 module.exports = exports['default'];

lib/Steps.js

 'use strict';
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 
@@ -9,2 +11,6 @@ var _extends2 = require('babel-runtime/helpers/extends');
 
+var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
+
+var _defineProperty3 = _interopRequireDefault(_defineProperty2);
+
 var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProperties');
@@ -18,2 +24,6 @@
 
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
 var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
@@ -56,3 +66,3 @@
 
-    var _this = (0, _possibleConstructorReturn3['default'])(this, _Component.call(this, props));
+    var _this = (0, _possibleConstructorReturn3['default'])(this, (Steps.__proto__ || Object.getPrototypeOf(Steps)).call(this, props));
 
@@ -89,88 +99,93 @@ _this.calcStepOffsetWidth = function () {
 
-  Steps.prototype.componentDidMount = function componentDidMount() {
-    this.calcStepOffsetWidth();
-    if (!(0, _utils.isFlexSupported)()) {
-      this.setState({
-        flexSupported: false
-      });
+  (0, _createClass3['default'])(Steps, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.calcStepOffsetWidth();
+      if (!(0, _utils.isFlexSupported)()) {
+        this.setState({
+          flexSupported: false
+        });
+      }
     }
-  };
-
-  Steps.prototype.componentDidUpdate = function componentDidUpdate() {
-    this.calcStepOffsetWidth();
-  };
-
-  Steps.prototype.componentWillUnmount = function componentWillUnmount() {
-    if (this.calcTimeout) {
-      clearTimeout(this.calcTimeout);
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      this.calcStepOffsetWidth();
     }
-    if (this.calcStepOffsetWidth && this.calcStepOffsetWidth.cancel) {
-      this.calcStepOffsetWidth.cancel();
+  }, {
+    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;
+      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,
-        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 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 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 = {}, _classNames[prefixCls + '-' + size] = size, _classNames[prefixCls + '-label-' + adjustedlabelPlacement] = direction === 'horizontal', _classNames[prefixCls + '-dot'] = !!progressDot, _classNames));
-
-    return _react2['default'].createElement(
-      'div',
-      (0, _extends3['default'])({ className: classString, style: style }, restProps),
-      _react.Children.map(filteredChildren, function (child, index) {
-        if (!child) {
-          return null;
-        }
-        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 _react2['default'].createElement(
+        'div',
+        (0, _extends3['default'])({ className: classString, style: style }, restProps),
+        _react.Children.map(filteredChildren, function (child, index) {
+          if (!child) {
+            return null;
           }
-        }
-        return (0, _react.cloneElement)(child, childProps);
-      })
-    );
-  };
-
+          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;
@@ -177,0 +192,0 @@ }(_react.Component);

lib/utils.js

 'use strict';
 
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.isFlexSupported = isFlexSupported;
@@ -5,0 +7,0 @@ function isFlexSupported() {

package.json

 {
   "name": "rc-steps",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "steps ui component for react",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -112,3 +112,3 @@ # rc-steps
       <td>icon</td>
-      <td>ReactNode or string</td>
+      <td>ReactNode</td>
       <td></td>
@@ -123,2 +123,8 @@ <td>set icon of step item</td>
     </tr>
+    <tr>
+      <td>tailContent</td>
+      <td>ReactNode</td>
+      <td></td>
+      <td>content above tail</td>
+    </tr>
   </tbody>
@@ -125,0 +131,0 @@ </table>

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

54267

increased by5.14%

Lines of code

1556

increased by3.87%

Number of lines in readme file

141

increased by4.44%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes