@ucloud-fe/react-components 1.4.3 → 1.4.6

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,15 +250,21 @@ var Range = function Range(_ref2) {
     var rangeDateValidResult = (0, _utils.isRangeDateValid)(newValue, rules, precision);
     setRangeError(undefined);
 
-    if (rangeDateValidResult !== true) {
+    if (isClear) {
+      var _actionRefS$current, _actionRefE$current;
+
+      onChange(newValue);
+      (_actionRefS$current = actionRefS.current) === null || _actionRefS$current === void 0 ? void 0 : _actionRefS$current.hide();
+      (_actionRefE$current = actionRefE.current) === null || _actionRefE$current === void 0 ? void 0 : _actionRefE$current.hide();
+    } else if (rangeDateValidResult !== true) {
       var _inputRefE$current;
 
       (_inputRefE$current = inputRefE.current) === null || _inputRefE$current === void 0 ? void 0 : _inputRefE$current.focus();
 
       if (rangeDateValidResult === 'startGreaterThanEnd') {
-        var _actionRefE$current;
+        var _actionRefE$current2;
 
-        (_actionRefE$current = actionRefE.current) === null || _actionRefE$current === void 0 ? void 0 : _actionRefE$current.clear();
+        (_actionRefE$current2 = actionRefE.current) === null || _actionRefE$current2 === void 0 ? void 0 : _actionRefE$current2.clear();
       } else {
         setRangeError(locale[rangeDateValidResult + 'Tip']);
       }
@@ -274,7 +280,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,15 +290,21 @@ var Range = function Range(_ref2) {
     var rangeDateValidResult = (0, _utils.isRangeDateValid)(newValue, rules, precision);
     setRangeError(undefined);
 
-    if (rangeDateValidResult !== true) {
+    if (isClear) {
+      var _actionRefS$current2, _actionRefE$current3;
+
+      onChange(newValue);
+      (_actionRefS$current2 = actionRefS.current) === null || _actionRefS$current2 === void 0 ? void 0 : _actionRefS$current2.hide();
+      (_actionRefE$current3 = actionRefE.current) === null || _actionRefE$current3 === void 0 ? void 0 : _actionRefE$current3.hide();
+    } else if (rangeDateValidResult !== true) {
       var _inputRefS$current;
 
       (_inputRefS$current = inputRefS.current) === null || _inputRefS$current === void 0 ? void 0 : _inputRefS$current.focus();
 
       if (rangeDateValidResult === 'startGreaterThanEnd') {
-        var _actionRefS$current;
+        var _actionRefS$current3;
 
-        (_actionRefS$current = actionRefS.current) === null || _actionRefS$current === void 0 ? void 0 : _actionRefS$current.clear();
+        (_actionRefS$current3 = actionRefS.current) === null || _actionRefS$current3 === void 0 ? void 0 : _actionRefS$current3.clear();
       } else {
         setRangeError(locale[rangeDateValidResult + 'Tip']);
       }
@@ -308,6 +320,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 +366,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 +395,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

@@ -49,7 +49,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-var formatInput = function formatInput(v, allFormat) {
+var formatInput = function formatInput(v, allFormat, precision) {
   (0, _newArrowCheck2.default)(this, _this);
   if (v == '') return null;
   var l = allFormat.length;
@@ -62,7 +62,7 @@ var formatInput = function formatInput(v, allFormat) {
     var d = (0, _moment.default)(v, format, true);
 
     if (d.isValid()) {
-      return d;
+      return precision ? d.startOf(precision) : d;
     }
   }
 
@@ -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);
@@ -154,6 +154,15 @@ var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode) {
       allFormat = _useMemo4[1],
       timeMode = _useMemo4[2];
 
+  var precision = (0, _react.useMemo)(function () {
+    (0, _newArrowCheck2.default)(this, _this2);
+    if (mode === 'month') return 'month';
+    if (!(timeMode !== null && timeMode !== void 0 && timeMode.length)) return 'date';
+    if (timeMode.indexOf('ss') >= 0) return 'second';
+    if (timeMode.indexOf('mm') >= 0) return 'minute';
+    if (timeMode.indexOf('HH') >= 0) return 'hour';
+    return 'date';
+  }.bind(this), [mode, timeMode]);
   var d = (0, _react.useMemo)(function () {
     (0, _newArrowCheck2.default)(this, _this2);
     return new Date();
@@ -223,7 +232,7 @@ var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode) {
     var currentValue;
 
     if (useInputValue) {
-      var inputDValue = formatInput(inputValue, allFormat);
+      var inputDValue = formatInput(inputValue, allFormat, precision);
       if (inputDValue === false) return locale.inputErrorTip;
       currentValue = inputDValue;
     } else {
@@ -237,13 +246,13 @@ var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode) {
     }
 
     return true;
-  }.bind(this), [allFormat, calValue, inputValue, locale.dateErrorTip, locale.inputErrorTip, locale.nullableErrorTip, nullable, rules, useInputValue, value]);
+  }.bind(this), [allFormat, calValue, inputValue, locale.dateErrorTip, locale.inputErrorTip, locale.nullableErrorTip, nullable, precision, rules, useInputValue, value]);
   var handleInputChange = (0, _react.useCallback)(function (e) {
     (0, _newArrowCheck2.default)(this, _this2);
     if (!visible) setVisible(true);
     var v = e.target.value;
     setInputValue(v);
-    var d = formatInput(v, allFormat);
+    var d = formatInput(v, allFormat, precision);
 
     if (d) {
       setCalValue(d);
@@ -253,12 +262,16 @@ var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode) {
     }
 
     setUseInputValue(true);
-  }.bind(this), [allFormat, calValue, visible]);
+  }.bind(this), [allFormat, calValue, precision, visible]);
   var clear = (0, _react.useCallback)(function () {
     (0, _newArrowCheck2.default)(this, _this2);
     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;
@@ -274,12 +287,18 @@ var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode) {
   }.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，区分两种操作
+
+    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);
+    v = (0, _utils.setPrecision)(v, precision);
     setCalValue((0, _moment.default)(+v));
     setInputValue(formatDate((0, _moment.default)(+v), format));
     setUseInputValue(false);
@@ -288,7 +307,7 @@ var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode) {
       onChange && onChange((0, _moment.default)(+v));
       setVisible(false);
     }
-  }.bind(this), [clickConfirm, format, onChange, rules]);
+  }.bind(this), [clickConfirm, format, onChange, precision, rules]);
   var handleInputFocus = (0, _react.useCallback)(function () {
     var _this3 = this;
 
@@ -396,7 +415,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/DatePicker/utils.d.ts

@@ -2,12 +2,13 @@ import { Moment } from 'moment';
 import { TDate } from '@z-r/calendar';
 import { isDateDisabled, getValidDate } from '../../components/Calendar/utils';
 declare type Range = [TDate | void | null, TDate | void | null];
-declare type Precision = 'second' | 'minute' | 'hour' | 'date' | 'month' | 'year';
+export declare type Precision = 'second' | 'minute' | 'hour' | 'date' | 'month' | 'year';
 export interface Rules {
     range?: Range;
     custom?: (date: Moment, value?: Moment | null) => boolean;
 }
 export declare const formatToShort: (format: string) => string;
+export declare const setPrecision: (v: TDate, precision?: Precision | undefined) => TDate;
 declare const isRangeDateValid: (value: [TDate | null, TDate | null], rules: {
     range?: Range | undefined;
     maxRange?: any;

package/lib/components/DatePicker/utils.js

@@ -17,7 +17,7 @@ Object.defineProperty(exports, "getValidDate", {
     return _utils.getValidDate;
   }
 });
-exports.isRangeDateValid = exports.isDateValid = exports.formatToShort = void 0;
+exports.isRangeDateValid = exports.isDateValid = exports.setPrecision = exports.formatToShort = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
@@ -36,6 +36,18 @@ var formatToShort = function formatToShort(format) {
 
 exports.formatToShort = formatToShort;
 
+var setPrecision = function setPrecision(v, precision) {
+  (0, _newArrowCheck2.default)(this, _this);
+
+  if (precision) {
+    v = (0, _moment.default)(+v).startOf(precision);
+  }
+
+  return v;
+}.bind(void 0);
+
+exports.setPrecision = setPrecision;
+
 var isRangeDateValid = function isRangeDateValid(value, rules, precision) {
   (0, _newArrowCheck2.default)(this, _this);
 

package/package.json

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