@ucloud-fe/react-components 1.4.2 → 1.4.5

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,6 +259,10 @@ var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode) {
     setInputValue('');
     setCalValue(null);
   }.bind(this), []);
+  var hide = (0, _react.useCallback)(function () {
+    (0, _newArrowCheck2.default)(this, _this2);
+    setVisible(false);
+  }.bind(this), []);
   var handleConfirm = (0, _react.useCallback)(function (v) {
     (0, _newArrowCheck2.default)(this, _this2);
     var currentValue = v !== undefined ? v : calValue;
@@ -273,18 +277,15 @@ var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode) {
     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，区分两种操作
+
+    if (onClear) {
+      onClear();
+    } else {
+      handleConfirm(null);
+    }
+  }.bind(this), [clear, handleConfirm, onClear]);
   var handleCalendarChange = (0, _react.useCallback)(function (v) {
     (0, _newArrowCheck2.default)(this, _this2);
     v = (0, _utils.getValidDate)(v, rules);
@@ -298,12 +299,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 +350,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
   };
 
@@ -401,7 +405,8 @@ var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode) {
     error: typeof error === 'string' ? error : null,
     active: visible
   }, {
-    clear: clear
+    clear: clear,
+    hide: hide
   }];
 }.bind(void 0);
 

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

@@ -2,15 +2,17 @@ import { ReactNode, MutableRefObject } from 'react';
 import { DatePickerProps } from './DatePicker';
 export declare type RangeActionRef = {
     clear: () => void;
+    hide: () => void;
 };
 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],
@@ -75,9 +76,10 @@ var useRangePicker = function useRangePicker(_ref) {
   (0, _react.useImperativeHandle)(actionRef, function () {
     (0, _newArrowCheck2.default)(this, _this2);
     return {
-      clear: actions.clear
+      clear: actions.clear,
+      hide: actions.hide
     };
-  }.bind(this), [actions.clear]);
+  }.bind(this), [actions.clear, actions.hide]);
   return [// inputProps
   _objectSpread(_objectSpread({}, inputProps), {}, {
     customStyle: inputCustomStyle,

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;