@ucloud-fe/react-components 1.4.3 → 1.4.4

package/lib/components/DatePicker/Range.js

@@ -240,7 +240,7 @@ var Range = function Range(_ref2) {
     onInitialChange && onInitialChange(initialValue);
     updateValueWithoutCallOnChange(initialValue);
   }.bind(this));
-  var handleStartChange = (0, _react.useCallback)(function (value) {
+  var handleStartChange = (0, _react.useCallback)(function (value, isClear) {
     (0, _newArrowCheck2.default)(this, _this3);
 
     var _cacheValue = (0, _slicedToArray2.default)(cacheValue, 2),
@@ -250,7 +250,8 @@ var Range = function Range(_ref2) {
     var rangeDateValidResult = (0, _utils.isRangeDateValid)(newValue, rules, precision);
     setRangeError(undefined);
 
-    if (rangeDateValidResult !== true) {
+    if (isClear) {// noop
+    } else if (rangeDateValidResult !== true) {
       var _inputRefE$current;
 
       (_inputRefE$current = inputRefE.current) === null || _inputRefE$current === void 0 ? void 0 : _inputRefE$current.focus();
@@ -274,7 +275,7 @@ var Range = function Range(_ref2) {
 
     setCacheValue(newValue);
   }.bind(this), [cacheValue, rules, precision, isFirstEditing, locale, onChange]);
-  var handleEndChange = (0, _react.useCallback)(function (value) {
+  var handleEndChange = (0, _react.useCallback)(function (value, isClear) {
     (0, _newArrowCheck2.default)(this, _this3);
 
     var _cacheValue2 = (0, _slicedToArray2.default)(cacheValue, 1),
@@ -284,7 +285,8 @@ var Range = function Range(_ref2) {
     var rangeDateValidResult = (0, _utils.isRangeDateValid)(newValue, rules, precision);
     setRangeError(undefined);
 
-    if (rangeDateValidResult !== true) {
+    if (isClear) {// noop
+    } else if (rangeDateValidResult !== true) {
       var _inputRefS$current;
 
       (_inputRefS$current = inputRefS.current) === null || _inputRefS$current === void 0 ? void 0 : _inputRefS$current.focus();
@@ -308,6 +310,14 @@ var Range = function Range(_ref2) {
 
     setCacheValue(newValue);
   }.bind(this), [cacheValue, rules, precision, isFirstEditing, locale, onChange]);
+  var onClearS = (0, _react.useCallback)(function () {
+    (0, _newArrowCheck2.default)(this, _this3);
+    handleStartChange(null, true);
+  }.bind(this), [handleStartChange]);
+  var onClearE = (0, _react.useCallback)(function () {
+    (0, _newArrowCheck2.default)(this, _this3);
+    handleEndChange(null, true);
+  }.bind(this), [handleEndChange]);
   var handleOptionChange = (0, _react.useCallback)(function (value) {
     (0, _newArrowCheck2.default)(this, _this3);
     if (value !== 'custom') onChange(getValueFromOption(options, value));
@@ -346,7 +356,8 @@ var Range = function Range(_ref2) {
     nullable: nullableS,
     placeholder: placeholderS,
     shortcuts: shortcutsS,
-    actionRef: actionRefS
+    actionRef: actionRefS,
+    onClear: onClearS
   }, sharedPickerProps), {}, {
     rules: isFirstEditing === 2 ? _objectSpread(_objectSpread({}, rules), {}, {
       range: [(_rules$range = rules.range) === null || _rules$range === void 0 ? void 0 : _rules$range[0], cacheValue[1]]
@@ -374,7 +385,8 @@ var Range = function Range(_ref2) {
     nullable: nullableE,
     placeholder: placeholderE,
     shortcuts: shortcutsE,
-    actionRef: actionRefE
+    actionRef: actionRefE,
+    onClear: onClearE
   }, sharedPickerProps), {}, {
     rules: isFirstEditing === 2 ? _objectSpread(_objectSpread({}, rules), {}, {
       range: [cacheValue[0], (_rules$range2 = rules.range) === null || _rules$range2 === void 0 ? void 0 : _rules$range2[1]]

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,13 +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 () {
     (0, _newArrowCheck2.default)(this, _this2);
-    clear();
-    handleConfirm(null);
-  }.bind(this), [clear, handleConfirm]);
+    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);

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ucloud-fe/react-components",
-  "version": "1.4.3",
+  "version": "1.4.4",
   "title": "UCloud react components",
   "description": "UCloud react components",
   "keywords": [