rc-steps - npm Package Compare versions

Comparing version 2.2.4 to 2.3.0

HISTORY.md

 # History
 ----
 
+## 2.3.0
+
+* Add new step style of prop `progressDot`.
+
 ## 2.2.0
@@ -5,0 +9,0 @@

lib/Step.js

@@ -52,2 +52,3 @@ 'use strict';
     var tailWidth = _props.tailWidth;
+    var itemWidth = _props.itemWidth;
     var _props$status = _props.status;
@@ -63,4 +64,5 @@ var status = _props$status === undefined ? 'wait' : _props$status;
     var title = _props.title;
+    var progressDot = _props.progressDot;
 
-    var restProps = _objectWithoutProperties(_props, ['className', 'prefixCls', 'style', 'tailWidth', 'status', 'iconPrefix', 'icon', 'wrapperStyle', 'adjustMarginRight', 'stepLast', 'stepNumber', 'description', 'title']);
+    var restProps = _objectWithoutProperties(_props, ['className', 'prefixCls', 'style', 'tailWidth', 'itemWidth', 'status', 'iconPrefix', 'icon', 'wrapperStyle', 'adjustMarginRight', 'stepLast', 'stepNumber', 'description', 'title', 'progressDot']);
 
@@ -70,3 +72,19 @@ 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;
-    if (icon && !isString(icon)) {
+    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(
@@ -86,3 +104,2 @@ 'span',
     }
-
     var classString = (0, _classnames2["default"])((_classNames2 = {}, _defineProperty(_classNames2, prefixCls + '-item', true), _defineProperty(_classNames2, prefixCls + '-item-last', stepLast), _defineProperty(_classNames2, prefixCls + '-status-' + status, true), _defineProperty(_classNames2, prefixCls + '-custom', icon), _defineProperty(_classNames2, className, !!className), _classNames2));
@@ -93,7 +110,11 @@ return _react2["default"].createElement(
         className: classString,
-        style: _extends({ width: tailWidth, marginRight: adjustMarginRight }, style)
+        style: _extends({ width: itemWidth, marginRight: adjustMarginRight }, style)
       }),
       stepLast ? '' : _react2["default"].createElement(
         'div',
-        { ref: 'tail', className: prefixCls + '-tail' },
+        {
+          ref: 'tail',
+          style: tailWidth ? { width: tailWidth } : {},
+          className: prefixCls + '-tail'
+        },
         _react2["default"].createElement('i', null)
@@ -149,2 +170,3 @@ ),
   tailWidth: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]),
+  itemWidth: _react.PropTypes.oneOfType([_react.PropTypes.number, _react.PropTypes.string]),
   status: _react.PropTypes.string,
@@ -157,3 +179,4 @@ iconPrefix: _react.PropTypes.string,
   description: _react.PropTypes.any,
-  title: _react.PropTypes.any
+  title: _react.PropTypes.any,
+  progressDot: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.func])
 };
@@ -160,0 +183,0 @@

lib/Steps.js

@@ -43,3 +43,3 @@ 'use strict';
 
-    _this.calcLastStepOffsetWidth = function () {
+    _this.calcStepOffsetWidth = function () {
       var domNode = _reactDom2["default"].findDOMNode(_this);
@@ -53,6 +53,7 @@ if (domNode.children.length > 0) {
           var lastStepOffsetWidth = (domNode.lastChild.offsetWidth || 0) + 1;
-          if (_this.state.lastStepOffsetWidth === lastStepOffsetWidth) {
+          var firstStepOffsetWidth = (domNode.firstChild.offsetWidth || 0) + 1;
+          if (_this.state.lastStepOffsetWidth === lastStepOffsetWidth && _this.state.firstStepOffsetWidth === firstStepOffsetWidth) {
             return;
           }
-          _this.setState({ lastStepOffsetWidth: lastStepOffsetWidth });
+          _this.setState({ lastStepOffsetWidth: lastStepOffsetWidth, firstStepOffsetWidth: firstStepOffsetWidth });
         });
@@ -63,3 +64,4 @@ }
     _this.state = {
-      lastStepOffsetWidth: 0
+      lastStepOffsetWidth: 0,
+      firstStepOffsetWidth: 0
     };
@@ -70,7 +72,7 @@ return _this;
   Steps.prototype.componentDidMount = function componentDidMount() {
-    this.calcLastStepOffsetWidth();
+    this.calcStepOffsetWidth();
   };
 
   Steps.prototype.componentDidUpdate = function componentDidUpdate() {
-    this.calcLastStepOffsetWidth();
+    this.calcStepOffsetWidth();
   };
@@ -100,8 +102,10 @@
     var current = props.current;
+    var progressDot = props.progressDot;
 
-    var restProps = _objectWithoutProperties(props, ['prefixCls', 'style', 'className', 'children', 'direction', 'labelPlacement', 'iconPrefix', 'status', 'size', 'current']);
+    var restProps = _objectWithoutProperties(props, ['prefixCls', 'style', 'className', 'children', 'direction', 'labelPlacement', 'iconPrefix', 'status', 'size', 'current', 'progressDot']);
 
     var lastIndex = children.length - 1;
     var reLayouted = this.state.lastStepOffsetWidth > 0;
-    var classString = (0, _classnames2["default"])((_classNames = {}, _defineProperty(_classNames, prefixCls, true), _defineProperty(_classNames, prefixCls + '-' + size, size), _defineProperty(_classNames, prefixCls + '-' + direction, true), _defineProperty(_classNames, prefixCls + '-label-' + labelPlacement, direction === 'horizontal'), _defineProperty(_classNames, prefixCls + '-hidden', !reLayouted), _defineProperty(_classNames, className, className), _classNames));
+    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));
 
@@ -112,7 +116,9 @@ return _react2["default"].createElement(
       _react2["default"].Children.map(children, function (ele, idx) {
-        var tailWidth = direction === 'vertical' || idx === lastIndex || !reLayouted ? null : 100 / lastIndex + '%';
+        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 tailWidth = direction === 'vertical' ? '' : _this2.state.firstStepOffsetWidth + Math.round(_this2.state.lastStepOffsetWidth / 2 + 1) - Math.round(_this2.state.lastStepOffsetWidth / lastIndex + 1);
         var np = {
           stepNumber: (idx + 1).toString(),
           stepLast: idx === lastIndex,
+          itemWidth: itemWidth,
           tailWidth: tailWidth,
@@ -122,3 +128,4 @@ adjustMarginRight: adjustMarginRight,
           iconPrefix: iconPrefix,
-          wrapperStyle: style
+          wrapperStyle: style,
+          progressDot: progressDot
         };
@@ -158,3 +165,4 @@
   status: _react.PropTypes.string,
-  size: _react.PropTypes.string
+  size: _react.PropTypes.string,
+  progressDot: _react.PropTypes.oneOfType([_react.PropTypes.bool, _react.PropTypes.func])
 };
@@ -169,4 +177,5 @@
   status: 'process',
-  size: ''
+  size: '',
+  progressDot: false
 };
 module.exports = exports['default'];

package.json

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

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

No License Found

License

(Experimental) License information could not be found.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

38785

increased by13.29%

Number of package files

9

increased by12.5%

Number of low license alerts

0

decreased by-100%

Lines of code

1164

increased by9.09%

No dependency changes