@ucloud-fe/react-components 1.3.25 → 1.4.0

package/lib/components/DatePicker/usePicker.js

@@ -29,10 +29,14 @@ var _useUncontrolled3 = _interopRequireDefault(require("../../hooks/useUncontrol
 
 var _usePopoverConfig = _interopRequireDefault(require("../../hooks/usePopoverConfig"));
 
+var _KeyCode = _interopRequireDefault(require("../../utils/KeyCode"));
+
 var _zh_CN = _interopRequireDefault(require("./locale/zh_CN"));
 
 var _utils = require("./utils");
 
+var _style = require("./style");
+
 var _excluded = ["value", "defaultValue", "onChange", "rules", "disabled", "nullable", "display", "size", "popoverProps", "getCalendarContainer", "zIndex", "format", "locale", "status", "placeholder", "shortcuts", "type"];
 
 var _this = void 0;
@@ -91,6 +95,17 @@ var getValidCurrentDate = function getValidCurrentDate(value, d, currentValue) {
   });
 }.bind(void 0);
 
+var trigger = [];
+var align = {
+  points: ['tl', 'bl'],
+  overflow: {
+    adjustX: 0,
+    adjustY: 1
+  },
+  offset: [0, 10],
+  targetOffset: [0, 0]
+};
+
 var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode) {
   var _this2 = this;
 
@@ -143,6 +158,7 @@ var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode) {
     (0, _newArrowCheck2.default)(this, _this2);
     return new Date();
   }.bind(this), []);
+  var clickConfirm = !(timeMode !== null && timeMode !== void 0 && timeMode.length);
 
   var _useUncontrolled = (0, _useUncontrolled3.default)(_value, defaultValue, _onChange),
       _useUncontrolled2 = (0, _slicedToArray2.default)(_useUncontrolled, 2),
@@ -187,15 +203,10 @@ var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode) {
       visible = _useState12[0],
       setVisible = _useState12[1];
 
-  var _useState13 = (0, _react.useState)(false),
-      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
-      active = _useState14[0],
-      setActive = _useState14[1];
-
   var locale = (0, _useLocale.default)(_zh_CN.default, 'DatePicker', _locale);
   (0, _react.useEffect)(function () {
     (0, _newArrowCheck2.default)(this, _this2);
-    if (active) return;
+    if (visible) return;
 
     if (!value) {
       if (nullable) {
@@ -206,7 +217,7 @@ var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode) {
     } else {
       setInputValue(formatDate((0, _moment.default)(+value), format));
     }
-  }.bind(this), [active, d, format, nullable, value]);
+  }.bind(this), [visible, d, format, nullable, value]);
   var error = (0, _react.useMemo)(function () {
     (0, _newArrowCheck2.default)(this, _this2);
     var currentValue;
@@ -243,42 +254,79 @@ var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode) {
 
     setUseInputValue(true);
   }.bind(this), [allFormat, calValue, visible]);
+  var clear = (0, _react.useCallback)(function () {
+    (0, _newArrowCheck2.default)(this, _this2);
+    setInputValue('');
+    setCalValue(null);
+  }.bind(this), []);
+  var handleConfirm = (0, _react.useCallback)(function (v) {
+    (0, _newArrowCheck2.default)(this, _this2);
+    var currentValue = v !== undefined ? v : calValue;
+
+    if (!currentValue) {
+      if (!nullable) return;
+    } else if ((0, _utils.isDateDisabled)(+currentValue, value, rules)) {
+      return;
+    }
+
+    onChange && onChange(currentValue ? (0, _moment.default)(+currentValue) : null);
+    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]);
   var handleCalendarChange = (0, _react.useCallback)(function (v) {
     (0, _newArrowCheck2.default)(this, _this2);
     v = (0, _utils.getValidDate)(v, rules);
     setCalValue((0, _moment.default)(+v));
     setInputValue(formatDate((0, _moment.default)(+v), format));
     setUseInputValue(false);
-  }.bind(this), [format, rules]);
+
+    if (clickConfirm) {
+      onChange && onChange((0, _moment.default)(+v));
+      setVisible(false);
+    }
+  }.bind(this), [clickConfirm, format, onChange, rules]);
   var handleInputFocus = (0, _react.useCallback)(function () {
-    var _this3 = this;
+    var _this4 = this;
 
     (0, _newArrowCheck2.default)(this, _this2);
     setCalValue(value == null ? null : value);
     setCalCurrentValue(function (currentValue) {
-      (0, _newArrowCheck2.default)(this, _this3);
+      (0, _newArrowCheck2.default)(this, _this4);
       return getValidCurrentDate(value, d, currentValue);
     }.bind(this));
     setUseInputValue(true);
-    setActive(true);
+    setVisible(true);
   }.bind(this), [d, value]);
   var handleInputBlur = (0, _react.useCallback)(function () {
     (0, _newArrowCheck2.default)(this, _this2);
-    return setActive(false);
+    setVisible(false);
   }.bind(this), []);
-  var handleConfirm = (0, _react.useCallback)(function (v) {
+  var handleInputClick = (0, _react.useCallback)(function () {
+    (0, _newArrowCheck2.default)(this, _this2);
+    setVisible(true);
+  }.bind(this), []);
+  var handleInputMouseDown = handleInputClick;
+  var handleInputDown = (0, _react.useCallback)(function (e) {
     (0, _newArrowCheck2.default)(this, _this2);
-    var currentValue = v != null ? v : calValue;
 
-    if (!currentValue) {
-      if (!nullable) return;
-    } else if ((0, _utils.isDateDisabled)(+currentValue, value, rules)) {
-      return;
+    if (e.keyCode === _KeyCode.default.ENTER) {
+      handleConfirm();
+      e.preventDefault();
+      e.stopPropagation();
     }
-
-    onChange && onChange(currentValue ? (0, _moment.default)(+currentValue) : null);
-    setVisible(false);
-  }.bind(this), [calValue, nullable, onChange, rules, value]);
+  }.bind(this), [handleConfirm]);
   var handleShortcut = (0, _react.useCallback)(function (v) {
     (0, _newArrowCheck2.default)(this, _this2);
     handleCalendarChange(v);
@@ -292,14 +340,23 @@ var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode) {
   var inputProps = {
     value: inputValue,
     onChange: handleInputChange,
-    onBlur: handleInputBlur,
     onFocus: handleInputFocus,
+    onBlur: handleInputBlur,
+    onKeyDown: handleInputDown,
+    onClick: handleInputClick,
+    onMouseDown: handleInputMouseDown,
     disabled: disabled,
     size: size,
     status: status,
-    placeholder: placeholder === undefined ? locale.placeholder : placeholder
+    placeholder: placeholder === undefined ? locale.placeholder : placeholder,
+    clearable: nullable,
+    onClear: handleInputClear
   };
-  var containerProps = rest;
+
+  var containerProps = _objectSpread(_objectSpread({}, rest), {}, {
+    disabled: disabled,
+    status: status
+  });
 
   var _popoverProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
     zIndex: zIndex,
@@ -307,11 +364,10 @@ var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode) {
   }, popoverConfigProps), popoverProps), getCalendarContainer ? {
     getPopupContainer: getCalendarContainer
   } : {}), {}, {
-    trigger: [],
-    showAction: ['click', 'focus'],
-    hideAction: ['blur'],
+    popupClassName: _style.datePickerPopupCls,
+    trigger: trigger,
     visible: visible,
-    onVisibleChange: setVisible
+    align: align
   });
 
   var popupProps = {
@@ -338,11 +394,14 @@ var usePicker = function usePicker(props, displayToFormatAndTimeMode, mode) {
     confirmAble: error === true,
     onConfirm: handleConfirm,
     locale: _locale,
-    shortcuts: shortcuts
+    shortcuts: shortcuts,
+    showConfirm: !clickConfirm
   };
   return [inputProps, containerProps, _popoverProps, popupProps, calendarProps, timeProps, footerProps, {
     error: typeof error === 'string' ? error : null,
-    active: active
+    active: visible
+  }, {
+    clear: clear
   }];
 }.bind(void 0);
 

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

@@ -0,0 +1,16 @@
+import { ReactNode, MutableRefObject } from 'react';
+import { DatePickerProps } from './DatePicker';
+export declare type RangeActionRef = {
+    clear: () => void;
+};
+export declare type RangePickerRef = {
+    focus: () => void;
+    clear: () => void;
+} | undefined;
+declare const useRangePicker: ({ prefix, type, suffix, actionRef, ...pickProps }: DatePickerProps & {
+    prefix?: boolean | undefined;
+    type?: "date" | "month" | undefined;
+    suffix?: ReactNode;
+    actionRef: MutableRefObject<RangeActionRef | undefined>;
+}) => any[];
+export default useRangePicker;

package/lib/components/DatePicker/{RangePicker.js → useRangePicker.js}

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -21,31 +19,17 @@ var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/new
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Popover = _interopRequireDefault(require("../../components/Popover"));
-
-var _Input = _interopRequireDefault(require("../../components/Input"));
-
-var _Calendar = _interopRequireDefault(require("../../components/Calendar"));
-
-var _Notice = _interopRequireDefault(require("../../components/Notice"));
-
-var _Time = _interopRequireDefault(require("../../components/TimePicker/Time"));
-
 var _SvgIcon = _interopRequireDefault(require("../../components/SvgIcon"));
 
-var _usePopoverConfig = _interopRequireDefault(require("../../hooks/usePopoverConfig"));
+var _Time = _interopRequireDefault(require("../../components/TimePicker/Time"));
 
 var _DatePicker = require("./DatePicker");
 
 var _Month = require("./Month");
 
-var _style = require("./style");
-
 var _usePicker3 = _interopRequireDefault(require("./usePicker"));
 
-var _Footer = _interopRequireDefault(require("./Footer"));
-
-var _excluded = ["prefix", "onActiveChange", "type", "readonly", "tip", "error", "footerTip"];
+var _excluded = ["prefix", "type", "suffix", "actionRef"];
 
 var _this = void 0;
 
@@ -57,89 +41,69 @@ 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 RangePickerWithoutMemo = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var _this2 = this,
-      _timeProps$mode;
+var inputCustomStyle = {
+  border: 'none',
+  boxShadow: 'none',
+  background: 'none'
+};
+
+var useRangePicker = function useRangePicker(_ref) {
+  var _timeProps$mode,
+      _this2 = this;
 
   (0, _newArrowCheck2.default)(this, _this);
   var prefix = _ref.prefix,
-      onActiveChange = _ref.onActiveChange,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'date' : _ref$type,
-      readonly = _ref.readonly,
-      tip = _ref.tip,
-      error = _ref.error,
-      footerTip = _ref.footerTip,
+      suffix = _ref.suffix,
+      actionRef = _ref.actionRef,
       pickProps = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var isMonth = type === 'month';
 
   var _usePicker = (0, _usePicker3.default)(_objectSpread({}, pickProps), isMonth ? _Month.displayToFormatAndTimeMode : _DatePicker.displayToFormatAndTimeMode, type),
-      _usePicker2 = (0, _slicedToArray2.default)(_usePicker, 8),
+      _usePicker2 = (0, _slicedToArray2.default)(_usePicker, 9),
       inputProps = _usePicker2[0],
       popoverProps = _usePicker2[2],
       popupProps = _usePicker2[3],
       calendarProps = _usePicker2[4],
       timeProps = _usePicker2[5],
       footerProps = _usePicker2[6],
-      _usePicker2$ = _usePicker2[7],
-      pickerError = _usePicker2$.error,
-      active = _usePicker2$.active;
-
-  var inputRef = /*#__PURE__*/(0, _react.createRef)();
-  (0, _react.useImperativeHandle)(ref, function () {
-    var _this3 = this;
+      status = _usePicker2[7],
+      actions = _usePicker2[8];
 
+  var hasTime = !!((_timeProps$mode = timeProps.mode) !== null && _timeProps$mode !== void 0 && _timeProps$mode.length);
+  (0, _react.useImperativeHandle)(actionRef, function () {
     (0, _newArrowCheck2.default)(this, _this2);
     return {
-      focus: function focus() {
-        var _inputRef$current;
-
-        (0, _newArrowCheck2.default)(this, _this3);
-        return inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
-      }.bind(this)
+      clear: actions.clear
     };
-  }.bind(this), [inputRef]);
-  (0, _react.useEffect)(function () {
-    (0, _newArrowCheck2.default)(this, _this2);
-    onActiveChange(active);
-  }.bind(this), [active, onActiveChange]);
-  var popoverConfigProps = (0, _usePopoverConfig.default)();
-  var hasTime = !!((_timeProps$mode = timeProps.mode) !== null && _timeProps$mode !== void 0 && _timeProps$mode.length);
-  var CalendarComp = isMonth ? _Calendar.default.Month : _Calendar.default;
-  return readonly ? /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.readonlyInputCls
-  }, inputProps.value) : /*#__PURE__*/_react.default.createElement(_style.RangeInputWrap, {
-    isMonth: isMonth,
-    hasTime: hasTime,
-    hasPrefix: prefix
-  }, /*#__PURE__*/_react.default.createElement(_Popover.default, (0, _extends2.default)({
-    popup: /*#__PURE__*/_react.default.createElement(_style.SPopup, popupProps, /*#__PURE__*/_react.default.createElement(CalendarComp, (0, _extends2.default)({}, calendarProps, {
-      sidebar: isMonth ? null : hasTime ? /*#__PURE__*/_react.default.createElement(_Time.default, timeProps) : null
-    })), pickerError && /*#__PURE__*/_react.default.createElement(_Notice.default, {
-      styleType: "error",
-      closable: false
-    }, pickerError), error && /*#__PURE__*/_react.default.createElement(_Notice.default, {
-      styleType: "error",
-      closable: false
-    }, error), tip && /*#__PURE__*/_react.default.createElement(_Notice.default, {
-      closable: false
-    }, tip), /*#__PURE__*/_react.default.createElement(_Footer.default, (0, _extends2.default)({}, footerProps, {
-      tip: footerTip
-    })))
-  }, popoverConfigProps, popoverProps), /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, inputProps, {
-    customStyle: {
-      border: 'none',
-      boxShadow: 'none',
-      background: 'none'
-    },
-    ref: inputRef,
+  }.bind(this), [actions.clear]);
+  return [// inputProps
+  _objectSpread(_objectSpread({}, inputProps), {}, {
+    customStyle: inputCustomStyle,
     block: true,
     prefix: prefix ? /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
       type: "calendar"
-    }) : null
-  }))));
-}.bind(void 0));
-
-var _default = /*#__PURE__*/(0, _react.memo)(RangePickerWithoutMemo);
+    }) : null,
+    suffix: suffix
+  }), // inputWrapProps
+  {
+    isMonth: isMonth,
+    hasTime: hasTime,
+    hasPrefix: prefix,
+    hasSuffix: !!suffix,
+    disabled: inputProps.disabled,
+    status: inputProps.status,
+    clearable: inputProps.clearable
+  }, // calendarProps
+  _objectSpread(_objectSpread({}, calendarProps), {}, {
+    sidebar: isMonth ? null : hasTime ? /*#__PURE__*/_react.default.createElement(_Time.default, timeProps) : null
+  }), footerProps, status, popoverProps, // popupProps
+  popupProps, {
+    hasTime: hasTime,
+    isMonth: isMonth
+  }];
+}.bind(void 0);
 
+var _default = useRangePicker;
 exports.default = _default;

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

@@ -1,5 +1,5 @@
 import { Moment } from 'moment';
-import { TDate } from '@z-r/calendar/types/interface';
+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';

package/lib/components/Form/ControllerContext.d.ts

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

package/lib/components/Input/Input.js

@@ -198,14 +198,16 @@ var Input = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onMouseDown: handleWrapMouseDown
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: _style.inputWrapCls
-  }, renderPrefix, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, rest, {
+  }, renderPrefix, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.inputBlockWrapCls
+  }, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({}, rest, {
     value: value,
     onChange: onChange,
     ref: inputRef,
     onFocus: handleFocus,
     onBlur: handleBlur,
     disabled: disabled
-  })), renderClear, renderSuffix));
+  })), renderClear), renderSuffix));
 }.bind(void 0));
 
 var _default = /*#__PURE__*/_react.default.memo(Input);

package/lib/components/Input/Search.js

@@ -17,7 +17,7 @@ var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/new
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _KeyCode = _interopRequireDefault(require("../../interfaces/KeyCode"));
+var _KeyCode = _interopRequireDefault(require("../../utils/KeyCode"));
 
 var _noop = _interopRequireDefault(require("../../utils/noop"));
 

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

@@ -9,8 +9,9 @@ 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, "disabled" | "customStyle" | "status"> & Required<Pick<InputProps, "size">> & {
+export declare const SWrap: import("react").ForwardRefExoticComponent<Pick<InputProps, "customStyle" | "disabled" | "status"> & Required<Pick<InputProps, "size">> & {
     focused: boolean;
     empty: boolean;
 } & import("react").HTMLAttributes<HTMLSpanElement> & {