@ucloud-fe/react-components 1.11.1 → 1.12.0

package/lib/components/Steps/Step.js

@@ -31,7 +31,7 @@ var _StepIcon = _interopRequireDefault(require("./StepIcon"));
 
 var _style = require("./style");
 
-var _excluded = ["status", "step", "remark", "title"];
+var _excluded = ["status", "step", "remark", "title", "isLast"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -59,13 +59,19 @@ var Step = /*#__PURE__*/function (_PureComponent) {
           step = _this$props.step,
           remark = _this$props.remark,
           title = _this$props.title,
+          isLast = _this$props.isLast,
           rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
       return /*#__PURE__*/_react.default.createElement(_style.StepWrapper, (0, _extends2.default)({
-        status: status
-      }, rest), /*#__PURE__*/_react.default.createElement(_StepIcon.default, {
+        status: status,
+        isLast: isLast
+      }, rest, {
+        className: "".concat(_style.stepWrapperCls, " ").concat(rest.className ? rest.className : '')
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: _style.itemTailCls
+      }), /*#__PURE__*/_react.default.createElement(_StepIcon.default, {
         status: status,
         step: step || 0
-      }), (title || remark) && /*#__PURE__*/_react.default.createElement(_style.ContentWrapper, null, /*#__PURE__*/_react.default.createElement(_style.TitleWrapper, null, title), remark && /*#__PURE__*/_react.default.createElement(_style.RemarkWrapper, null, remark)));
+      }), /*#__PURE__*/_react.default.createElement(_style.ContentWrapper, null, /*#__PURE__*/_react.default.createElement(_style.TitleWrapper, null, title), remark && /*#__PURE__*/_react.default.createElement(_style.RemarkWrapper, null, remark)));
     }
   }]);
   return Step;
@@ -76,5 +82,7 @@ Step.propTypes = {
   status: _propTypes.default.string,
   step: _propTypes.default.node,
   remark: _propTypes.default.node,
-  title: _propTypes.default.node
+  title: _propTypes.default.node,
+  isLast: _propTypes.default.bool,
+  disabled: _propTypes.default.bool
 };

package/lib/components/Steps/StepIcon.js

@@ -99,7 +99,9 @@ var StepIcon = /*#__PURE__*/function (_PureComponent) {
           rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
       return /*#__PURE__*/_react.default.createElement(_style.IconWrapper, (0, _extends2.default)({
         status: status
-      }, rest), this.renderContent(status, step));
+      }, rest, {
+        className: "".concat(_style.iconCls, " ").concat(rest.className ? rest.className : '')
+      }), this.renderContent(status, step));
     }
   }]);
   return StepIcon;

package/lib/components/Steps/Steps.js

@@ -33,10 +33,8 @@ var _style = require("./style");
 
 var _Step = _interopRequireDefault(require("./Step"));
 
-var _Link = _interopRequireDefault(require("./Link"));
-
-var _excluded = ["key", "step"],
-    _excluded2 = ["steps", "current", "status"];
+var _excluded = ["key", "step", "status"],
+    _excluded2 = ["steps", "current", "status", "onChange", "direction"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -66,18 +64,26 @@ var Steps = /*#__PURE__*/function (_Component) {
 
     _this = _super.call.apply(_super, [this].concat(args));
 
-    _this.renderSteps = function (steps, current, status) {
+    _this.renderSteps = function (_ref) {
       var _this3 = this;
 
       (0, _newArrowCheck2.default)(this, _this2);
+      var steps = _ref.steps,
+          current = _ref.current,
+          status = _ref.status,
+          direction = _ref.direction,
+          onChange = _ref.onChange;
       var pos = 'before';
       var l = steps.length;
       return steps.map(function (step, i) {
+        var _this4 = this;
+
         (0, _newArrowCheck2.default)(this, _this3);
         var _step$key = step.key,
             key = _step$key === void 0 ? i : _step$key,
             _step$step = step.step,
             stepContent = _step$step === void 0 ? i + 1 : _step$step,
+            singleStatus = step.status,
             rest = (0, _objectWithoutProperties2.default)(step, _excluded);
         var isCurrent = current === key;
         var finalStatus;
@@ -86,17 +92,46 @@ var Steps = /*#__PURE__*/function (_Component) {
           pos = 'after';
           finalStatus = status;
         } else {
+          switch (singleStatus) {
+            case 'error':
+              pos = 'error';
+              break;
+
+            case 'success':
+              pos = 'before';
+              break;
+
+            case 'normal':
+              pos = 'after';
+              break;
+
+            default:
+          }
+
           finalStatus = pos;
         }
 
-        return [/*#__PURE__*/_react.default.createElement(_Step.default, (0, _extends2.default)({}, rest, {
+        var canHover = typeof onChange === 'function' && singleStatus !== 'disabled' ? true : false;
+        var showTitle = rest.title ? true : false;
+        return /*#__PURE__*/_react.default.createElement(_style.StepsItemWrapper, {
           key: key,
+          direction: direction,
           status: finalStatus,
-          step: stepContent
-        })), i < l - 1 && /*#__PURE__*/_react.default.createElement(_Link.default, {
-          key: "link-".concat(key),
-          status: pos
-        })];
+          canHover: canHover,
+          showTitle: showTitle,
+          onClick: function () {
+            (0, _newArrowCheck2.default)(this, _this4);
+
+            if (canHover) {
+              onChange(key, finalStatus);
+            }
+          }.bind(this)
+        }, /*#__PURE__*/_react.default.createElement(_Step.default, (0, _extends2.default)({}, rest, {
+          key: "step-".concat(key),
+          status: finalStatus,
+          step: stepContent,
+          isLast: i === l - 1 ? true : false
+        })));
       }.bind(this));
     }.bind(this);
 
@@ -110,8 +145,18 @@ var Steps = /*#__PURE__*/function (_Component) {
           steps = _this$props.steps,
           current = _this$props.current,
           status = _this$props.status,
+          onChange = _this$props.onChange,
+          direction = _this$props.direction,
           rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded2);
-      return /*#__PURE__*/_react.default.createElement(_style.StepsWrapper, rest, this.renderSteps(steps, current, status));
+      return /*#__PURE__*/_react.default.createElement(_style.StepsWrapper, (0, _extends2.default)({
+        direction: direction
+      }, rest), this.renderSteps({
+        steps: steps,
+        current: current,
+        status: status,
+        direction: direction,
+        onChange: onChange
+      }));
     }
   }]);
   return Steps;
@@ -130,17 +175,32 @@ Steps.propTypes = {
     title: _propTypes.default.node,
 
     /** 步骤的备注 */
-    remark: _propTypes.default.node
+    remark: _propTypes.default.node,
+
+    /** 步骤的状态 */
+    status: _propTypes.default.oneOf(['disabled', 'error', 'success', 'normal'])
   })).isRequired,
 
   /** 当前步骤的 key，不传或传 null 时为全部完成 */
   current: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
 
   /** 当前步骤的状态 */
-  status: _propTypes.default.oneOf(Status)
+  status: _propTypes.default.oneOf(Status),
+
+  /**
+   * 步骤状态改变时的回调函数
+   * @param {number} current 当前步骤的key
+   */
+  onChange: _propTypes.default.func,
+
+  /**
+   * 指定步骤条方向 , 默认是horizontal
+   */
+  direction: _propTypes.default.oneOf(['horizontal', 'vertical'])
 };
 Steps.defaultProps = {
-  status: 'current'
+  status: 'current',
+  direction: 'horizontal'
 };
 var _default = Steps;
 exports.default = _default;