@ucloud-fe/react-components 1.4.4 → 1.5.0

package/lib/components/DatePicker/Range.js

@@ -250,16 +250,21 @@ var Range = function Range(_ref2) {
     var rangeDateValidResult = (0, _utils.isRangeDateValid)(newValue, rules, precision);
     setRangeError(undefined);
 
-    if (isClear) {// noop
+    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']);
       }
@@ -285,16 +290,21 @@ var Range = function Range(_ref2) {
     var rangeDateValidResult = (0, _utils.isRangeDateValid)(newValue, rules, precision);
     setRangeError(undefined);
 
-    if (isClear) {// noop
+    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']);
       }

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;
     }
   }
 
@@ -154,6 +154,15 @@ var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode, onCl
       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, onCl
     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, onCl
     }
 
     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,13 +262,17 @@ var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode, onCl
     }
 
     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 handleConfirm = (0, _react.useCallback)(function (v, dontChangeVisible) {
+  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;
 
@@ -270,20 +283,22 @@ var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode, onCl
     }
 
     onChange && onChange(currentValue ? (0, _moment.default)(+currentValue) : null);
-
-    if (!dontChangeVisible) {
-      setVisible(false);
-    }
+    setVisible(false);
   }.bind(this), [calValue, nullable, onChange, rules, value]);
   var handleInputClear = (0, _react.useCallback)(function () {
     (0, _newArrowCheck2.default)(this, _this2);
     clear(); // 不走 onChange，区分两种操作
 
-    onClear === null || onClear === void 0 ? void 0 : onClear();
-  }.bind(this), [clear, onClear]);
+    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);
@@ -292,7 +307,7 @@ var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode, onCl
       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;
 
@@ -400,7 +415,8 @@ var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode, onCl
     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,6 +2,7 @@ import { ReactNode, MutableRefObject } from 'react';
 import { DatePickerProps } from './DatePicker';
 export declare type RangeActionRef = {
     clear: () => void;
+    hide: () => void;
 };
 export declare type RangePickerRef = {
     focus: () => void;

package/lib/components/DatePicker/useRangePicker.js

@@ -76,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/lib/components/Form/ControllerContext.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
 declare const ControllerContext: React.Context<{
-    status?: "loading" | "default" | "success" | "warning" | "error" | undefined;
+    status?: "loading" | "default" | "error" | "success" | "warning" | undefined;
 }>;
 export default ControllerContext;

package/lib/components/Input/.recodo/interaction.js

@@ -24,8 +24,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 var config = {
-  size: _interactionDemo.USE_DEFINE,
-  clearable: _interactionDemo.USE_DEFINE,
+  size: ['sm', 'md', 'lg'],
+  clearable: 'boolean',
   disabled: 'boolean',
   block: _interactionDemo.USE_DEFINE,
   status: _interactionDemo.USE_DEFINE,

package/lib/components/Input/Input.js

@@ -19,16 +19,8 @@ var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/new
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _Icon = _interopRequireDefault(require("../../components/Icon"));
-
-var _SvgIcon = _interopRequireDefault(require("../../components/SvgIcon"));
-
 var _ControllerContext = _interopRequireDefault(require("../../components/Form/ControllerContext"));
 
-var _deprecatedLog = _interopRequireDefault(require("../../utils/deprecatedLog"));
-
 var _noop = _interopRequireDefault(require("../../utils/noop"));
 
 var _useUncontrolled3 = _interopRequireDefault(require("../../hooks/useUncontrolled"));
@@ -43,7 +35,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var deprecatedLogForIcon = (0, _deprecatedLog.default)('Input icon', 'suffix');
 var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var _this2 = this;
 
@@ -76,7 +67,7 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }.bind(this), []);
 
   var _useUncontrolled = (0, _useUncontrolled3.default)(_value, defaultValue || '', _onChange, {
-    setter: valueGetter
+    getter: valueGetter
   }),
       _useUncontrolled2 = (0, _slicedToArray2.default)(_useUncontrolled, 2),
       value = _useUncontrolled2[0],
@@ -144,67 +135,22 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     e.preventDefault();
     (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
   }.bind(this), []);
-  var renderClear = (0, _react.useMemo)(function () {
-    (0, _newArrowCheck2.default)(this, _this2);
-
-    if (clearable) {
-      return /*#__PURE__*/_react.default.createElement("span", {
-        className: _style.clearCls,
-        onClick: handleClear,
-        onMouseDown: handleClearMouseDown
-      }, /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
-        type: "cross-circle-filled"
-      }));
-    }
-  }.bind(this), [clearable, handleClear, handleClearMouseDown]);
-  var renderPrefix = (0, _react.useMemo)(function () {
-    (0, _newArrowCheck2.default)(this, _this2);
-    return prefix && /*#__PURE__*/_react.default.createElement("span", {
-      className: _style.inputPrefixCls
-    }, prefix);
-  }.bind(this), [prefix]);
-  var renderSuffix = (0, _react.useMemo)(function () {
-    (0, _newArrowCheck2.default)(this, _this2);
-
-    if (icon) {
-      deprecatedLogForIcon();
-    }
-
-    var renderSuffix = null;
-
-    if (suffix) {
-      renderSuffix = suffix;
-    } else if (typeof icon === 'string') {
-      renderSuffix = /*#__PURE__*/_react.default.createElement(_Icon.default, {
-        type: icon
-      });
-    } else if ( /*#__PURE__*/_react.default.isValidElement(icon)) {
-      renderSuffix = icon;
-    }
-
-    if (renderSuffix) {
-      return /*#__PURE__*/_react.default.createElement("span", {
-        className: _style.inputSuffixCls
-      }, renderSuffix);
-    }
-  }.bind(this), [icon, suffix]);
 
   var _useContext = (0, _react.useContext)(_ControllerContext.default),
       status = _useContext.status;
 
-  return /*#__PURE__*/_react.default.createElement(_style.SWrap, {
-    className: (0, _classnames.default)(block && _style.blockCls, className),
+  return /*#__PURE__*/_react.default.createElement(_style.InputWrap, {
     size: size,
     focused: focused,
     style: style,
     disabled: disabled,
     status: _status || status,
     customStyle: customStyle,
+    block: block,
+    className: className,
     empty: !value,
     onMouseDown: handleWrapMouseDown
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.inputWrapCls
-  }, renderPrefix, /*#__PURE__*/_react.default.createElement("span", {
+  }, /*#__PURE__*/_react.default.createElement(_style.Prefix, null, prefix), /*#__PURE__*/_react.default.createElement("span", {
     className: _style.inputBlockWrapCls
   }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, rest, {
     value: value,
@@ -213,7 +159,13 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onFocus: handleFocus,
     onBlur: handleBlur,
     disabled: disabled
-  })), renderClear), renderSuffix));
+  })), /*#__PURE__*/_react.default.createElement(_style.Clear, {
+    clearable: clearable,
+    onMouseDown: handleClearMouseDown,
+    onClick: handleClear
+  })), /*#__PURE__*/_react.default.createElement(_style.Suffix, {
+    icon: icon
+  }, suffix));
 }.bind(void 0));
 
 var _default = /*#__PURE__*/_react.default.memo(Input);

package/lib/components/Input/Search.js

@@ -71,6 +71,7 @@ var Search = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     ref: inputRef,
     suffix: /*#__PURE__*/_react.default.createElement(_style.SearchIcon, {
       type: "search",
+      disabled: disabled,
       onClick: onSearch
     })
   }));

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

@@ -1,19 +1,34 @@
-/// <reference types="react" />
+import React, { CSSProperties, ReactNode } from 'react';
 import SvgIcon from '../../../components/SvgIcon';
 import { InputProps } from '../Input';
 export declare const prefixCls: string;
 export declare const focusedCls: string;
 export declare const disabledCls: string;
 export declare const blockCls: string;
-export declare const inputWrapCls: string;
 export declare const inputPrefixCls: string;
 export declare const inputSuffixCls: string;
 export declare const clearCls: string;
 export declare const inputBlockWrapCls: string;
-export declare const SearchIcon: import("@emotion/styled-base").StyledComponent<Pick<any, string | number | symbol> & import("react").RefAttributes<SvgIcon>, Pick<Pick<any, string | number | symbol> & import("react").RefAttributes<SvgIcon>, string | number | symbol>, object>;
-export declare const SWrap: import("react").ForwardRefExoticComponent<Pick<InputProps, "customStyle" | "disabled" | "status"> & Required<Pick<InputProps, "size">> & {
-    focused: boolean;
-    empty: boolean;
-} & import("react").HTMLAttributes<HTMLSpanElement> & {
+export declare const SearchIcon: import("@emotion/styled-base").StyledComponent<Pick<any, string | number | symbol> & React.RefAttributes<SvgIcon>, Pick<Pick<any, string | number | symbol> & React.RefAttributes<SvgIcon>, string | number | symbol>, object>;
+export declare const Prefix: React.NamedExoticComponent<object>;
+export declare const Suffix: React.NamedExoticComponent<{
+    icon?: string | ReactNode;
+    children?: ReactNode;
+}>;
+export declare const Clear: React.NamedExoticComponent<Pick<InputProps, "clearable"> & React.HTMLAttributes<HTMLSpanElement>>;
+export declare const InputPart: import("@emotion/styled-base").StyledComponent<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    stretch?: boolean | undefined;
+    visible?: boolean | undefined;
+}, object>;
+export declare type InputWrapProps = Pick<InputProps, 'block' | 'disabled' | 'status' | 'customStyle'> & Required<Pick<InputProps, 'size'>> & {
+    focused?: boolean;
+    empty?: boolean;
+    cursor?: CSSProperties['cursor'];
+};
+export declare const InputWrap: React.ForwardRefExoticComponent<Pick<InputProps, "block" | "customStyle" | "disabled" | "status"> & Required<Pick<InputProps, "size">> & {
+    focused?: boolean | undefined;
+    empty?: boolean | undefined;
+    cursor?: CSSProperties['cursor'];
+} & React.HTMLAttributes<HTMLSpanElement> & {
     theme?: import("../../../style").Theme | undefined;
-} & import("react").RefAttributes<HTMLSpanElement>>;
+} & React.RefAttributes<HTMLSpanElement>>;