@ucloud-fe/react-components 1.11.0 → 1.12.0

package/lib/components/AutoComplete/AutoComplete.d.ts

@@ -36,5 +36,5 @@ interface AutoCompleteProps {
     /** @ignore */
     placeholder?: InputProps['placeholder'];
 }
-declare const _default: React.MemoExoticComponent<({ value: _value, defaultValue, onChange: _onChange, options, disabled, loading, prefix, block, handleSearch, popoverProps, onFocus, onBlur, style, className, status, placeholder }: AutoCompleteProps & Omit<InputProps, keyof AutoCompleteProps>) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ value: _value, defaultValue, onChange: _onChange, options, disabled, loading, prefix, block, handleSearch, popoverProps, onFocus, onBlur, style, className, status, placeholder, size }: AutoCompleteProps & Omit<InputProps, keyof AutoCompleteProps>) => JSX.Element>;
 export default _default;

package/lib/components/AutoComplete/AutoComplete.js

@@ -62,7 +62,8 @@ var AutoComplete = function AutoComplete(_ref) {
       style = _ref.style,
       className = _ref.className,
       status = _ref.status,
-      placeholder = _ref.placeholder;
+      placeholder = _ref.placeholder,
+      size = _ref.size;
 
   var _useUncontrolled = (0, _useUncontrolled3.default)(_value, defaultValue, _onChange),
       _useUncontrolled2 = (0, _slicedToArray2.default)(_useUncontrolled, 2),
@@ -139,6 +140,7 @@ var AutoComplete = function AutoComplete(_ref) {
     stretch: ['minWidth'],
     onVisibleChange: handleVisibleChange
   }), /*#__PURE__*/_react.default.createElement(_Input.default, {
+    size: size,
     value: value,
     onChange: onInputChange,
     onFocus: onFocus,

package/lib/components/Message/method.js

@@ -49,17 +49,30 @@ var messageContainerDom = document.createElement('div');
 var mainContainerDom = config.getContainer();
 var containerRef;
 
-_reactDom.default.render( /*#__PURE__*/_react.default.createElement(_MessageContainer.default, {
-  ref: function (ref) {
-    (0, _newArrowCheck2.default)(this, _this);
-    return containerRef = ref;
-  }.bind(void 0),
-  id: "uc-fe-message-content-wrap",
-  top: config.top
-}), messageContainerDom);
+function MessageRefComponent() {
+  var _this2 = this;
+
+  var myRef = _react.default.useRef(null);
+
+  _react.default.useEffect(function () {
+    (0, _newArrowCheck2.default)(this, _this2);
+    containerRef = myRef.current;
+  }.bind(this), [myRef.current]);
+
+  return /*#__PURE__*/_react.default.createElement(_MessageContainer.default, {
+    ref: function (ref) {
+      (0, _newArrowCheck2.default)(this, _this2);
+      return myRef.current = ref;
+    }.bind(this),
+    id: "uc-fe-message-content-wrap",
+    top: config.top
+  });
+}
 
 mainContainerDom.appendChild(messageContainerDom);
 
+_reactDom.default.render( /*#__PURE__*/_react.default.createElement(MessageRefComponent, null), messageContainerDom);
+
 var ContextWrap = function ContextWrap(_ref) {
   (0, _newArrowCheck2.default)(this, _this);
   var children = _ref.children;
@@ -75,29 +88,35 @@ ContextWrap.propTypes = {
 };
 
 var popupMessage = function popupMessage(message) {
-  var _this2 = this;
+  var _this3 = this;
 
   var duration = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : config.duration;
   var onClose = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function () {
-    (0, _newArrowCheck2.default)(this, _this2);
+    (0, _newArrowCheck2.default)(this, _this3);
   }.bind(this);
+
+  if (!containerRef) {
+    console.error("Error: containerRef is not ready , please check");
+    return;
+  }
+
   var messageUid = containerRef.appendMessage( /*#__PURE__*/_react.default.createElement(ContextWrap, null, message));
 
   var destroy = function destroy() {
-    (0, _newArrowCheck2.default)(this, _this2);
+    (0, _newArrowCheck2.default)(this, _this3);
     containerRef.removeMessage(messageUid) && onClose();
   }.bind(this);
 
   if (duration) {
     setTimeout(function () {
-      (0, _newArrowCheck2.default)(this, _this2);
+      (0, _newArrowCheck2.default)(this, _this3);
       destroy();
     }.bind(this), duration);
   }
 
   return {
     destory: function destory() {
-      (0, _newArrowCheck2.default)(this, _this2);
+      (0, _newArrowCheck2.default)(this, _this3);
       console.error("Warning: wrong name of destory, please use destroy to instead");
       destroy();
     }.bind(this),
@@ -106,11 +125,11 @@ var popupMessage = function popupMessage(message) {
 };
 
 var showMessage = function showMessage(styleType, content) {
-  var _this3 = this;
+  var _this4 = this;
 
   var duration = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : config.duration;
   var onClose = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : function () {
-    (0, _newArrowCheck2.default)(this, _this3);
+    (0, _newArrowCheck2.default)(this, _this4);
   }.bind(this);
   var option = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
   var zIndex = option.zIndex,
@@ -131,7 +150,7 @@ var showMessage = function showMessage(styleType, content) {
   }
 
   var destroy = function destroy() {
-    (0, _newArrowCheck2.default)(this, _this3);
+    (0, _newArrowCheck2.default)(this, _this4);
   }.bind(this);
 
   var message = /*#__PURE__*/_react.default.createElement(_Message.default, (0, _extends2.default)({
@@ -140,7 +159,7 @@ var showMessage = function showMessage(styleType, content) {
     className: className
   }, props, {
     onClose: function () {
-      (0, _newArrowCheck2.default)(this, _this3);
+      (0, _newArrowCheck2.default)(this, _this4);
       return destroy();
     }.bind(this)
   }));

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;