@ucloud-fe/react-components 1.4.1 → 1.4.4

package/lib/components/DatePicker/usePicker.d.ts

@@ -7,5 +7,5 @@ declare type TProps<D> = {
 interface DisplayToFormatAndTimeMode<D> {
     (display?: D): [string[]] | [string[], string[]];
 }
-declare const usePicker: <D>(props: TProps<D>, displayToFormatAndTimeMode: DisplayToFormatAndTimeMode<D>, mode: 'date' | 'month') => any[];
+declare const usePicker: <D>(props: TProps<D>, displayToFormatAndTimeMode: DisplayToFormatAndTimeMode<D>, mode: 'date' | 'month', onClear?: (() => void) | undefined) => any[];
 export default usePicker;

package/lib/components/DatePicker/usePicker.js

@@ -106,7 +106,7 @@ var align = {
   targetOffset: [0, 0]
 };
 
-var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode) {
+var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode, onClear) {
   var _this2 = this;
 
   (0, _newArrowCheck2.default)(this, _this);
@@ -259,7 +259,7 @@ var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode) {
     setInputValue('');
     setCalValue(null);
   }.bind(this), []);
-  var handleConfirm = (0, _react.useCallback)(function (v) {
+  var handleConfirm = (0, _react.useCallback)(function (v, dontChangeVisible) {
     (0, _newArrowCheck2.default)(this, _this2);
     var currentValue = v !== undefined ? v : calValue;
 
@@ -270,21 +270,17 @@ var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode) {
     }
 
     onChange && onChange(currentValue ? (0, _moment.default)(+currentValue) : null);
-    setVisible(false);
+
+    if (!dontChangeVisible) {
+      setVisible(false);
+    }
   }.bind(this), [calValue, nullable, onChange, rules, value]);
   var handleInputClear = (0, _react.useCallback)(function () {
-    var _this3 = this;
-
     (0, _newArrowCheck2.default)(this, _this2);
-    setTimeout(function () {
-      (0, _newArrowCheck2.default)(this, _this3);
-      handleInputChange({
-        target: {
-          value: ''
-        }
-      });
-    }.bind(this), 0);
-  }.bind(this), [handleInputChange]);
+    clear(); // 不走 onChange，区分两种操作
+
+    onClear === null || onClear === void 0 ? void 0 : onClear();
+  }.bind(this), [clear, onClear]);
   var handleCalendarChange = (0, _react.useCallback)(function (v) {
     (0, _newArrowCheck2.default)(this, _this2);
     v = (0, _utils.getValidDate)(v, rules);
@@ -298,12 +294,12 @@ var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode) {
     }
   }.bind(this), [clickConfirm, format, onChange, rules]);
   var handleInputFocus = (0, _react.useCallback)(function () {
-    var _this4 = this;
+    var _this3 = this;
 
     (0, _newArrowCheck2.default)(this, _this2);
     setCalValue(value == null ? null : value);
     setCalCurrentValue(function (currentValue) {
-      (0, _newArrowCheck2.default)(this, _this4);
+      (0, _newArrowCheck2.default)(this, _this3);
       return getValidCurrentDate(value, d, currentValue);
     }.bind(this));
     setUseInputValue(true);
@@ -349,7 +345,10 @@ var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode) {
     size: size,
     status: status,
     placeholder: placeholder === undefined ? locale.placeholder : placeholder,
-    clearable: nullable,
+    clearable: nullable ? {
+      autoFocus: false,
+      callOnChange: false
+    } : false,
     onClear: handleInputClear
   };
 

package/lib/components/DatePicker/useRangePicker.d.ts

@@ -7,10 +7,11 @@ export declare type RangePickerRef = {
     focus: () => void;
     clear: () => void;
 } | undefined;
-declare const useRangePicker: ({ prefix, type, suffix, actionRef, ...pickProps }: DatePickerProps & {
+declare const useRangePicker: ({ prefix, type, suffix, actionRef, onClear, ...pickProps }: DatePickerProps & {
     prefix?: boolean | undefined;
     type?: "date" | "month" | undefined;
     suffix?: ReactNode;
     actionRef: MutableRefObject<RangeActionRef | undefined>;
+    onClear?: (() => void) | undefined;
 }) => any[];
 export default useRangePicker;

package/lib/components/DatePicker/useRangePicker.js

@@ -29,7 +29,7 @@ var _Month = require("./Month");
 
 var _usePicker3 = _interopRequireDefault(require("./usePicker"));
 
-var _excluded = ["prefix", "type", "suffix", "actionRef"];
+var _excluded = ["prefix", "type", "suffix", "actionRef", "onClear"];
 
 var _this = void 0;
 
@@ -57,10 +57,11 @@ var useRangePicker = function useRangePicker(_ref) {
       type = _ref$type === void 0 ? 'date' : _ref$type,
       suffix = _ref.suffix,
       actionRef = _ref.actionRef,
+      onClear = _ref.onClear,
       pickProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var isMonth = type === 'month';
 
-  var _usePicker = (0, _usePicker3.default)(_objectSpread({}, pickProps), isMonth ? _Month.displayToFormatAndTimeMode : _DatePicker.displayToFormatAndTimeMode, type),
+  var _usePicker = (0, _usePicker3.default)(_objectSpread({}, pickProps), isMonth ? _Month.displayToFormatAndTimeMode : _DatePicker.displayToFormatAndTimeMode, type, onClear),
       _usePicker2 = (0, _slicedToArray2.default)(_usePicker, 9),
       inputProps = _usePicker2[0],
       popoverProps = _usePicker2[2],

package/lib/components/Input/Input.d.ts

@@ -11,7 +11,10 @@ export interface DefinedInputProps {
     /** 后缀 */
     suffix?: ReactNode;
     /** 是否可清空 */
-    clearable?: boolean;
+    clearable?: boolean | {
+        autoFocus?: boolean;
+        callOnChange?: boolean;
+    };
     /** 尺寸 */
     size?: Size;
     /** 状态 */

package/lib/components/Input/Input.js

@@ -124,11 +124,17 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     e.target = input;
     e.currentTarget = input;
     var cacheV = input.value;
-    input.value = '';
-    onChange(e);
-    input.value = cacheV;
-    input.focus();
-  }.bind(this), [disabled, onChange, onClear]);
+
+    if ((clearable === null || clearable === void 0 ? void 0 : clearable.callOnChange) !== false) {
+      input.value = '';
+      onChange(e);
+      input.value = cacheV;
+    }
+
+    if ((clearable === null || clearable === void 0 ? void 0 : clearable.autoFocus) !== false) {
+      input.focus();
+    }
+  }.bind(this), [clearable, disabled, onChange, onClear]);
   var handleWrapMouseDown = (0, _react.useCallback)(function (e) {
     var _inputRef$current;