@ucloud-fe/react-components 1.3.27 → 1.4.0

package/lib/components/DatePicker/Footer.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.TipIcon = void 0;
 
 var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
 
@@ -19,10 +19,10 @@ var _Button = _interopRequireDefault(require("../../components/Button"));
 
 var _Box = _interopRequireDefault(require("../../components/Box"));
 
-var _Combine = _interopRequireDefault(require("../../components/Combine"));
-
 var _useLocale = _interopRequireDefault(require("../../components/LocaleProvider/useLocale"));
 
+var _SvgIcon = _interopRequireDefault(require("../../components/SvgIcon"));
+
 var _zh_CN = _interopRequireDefault(require("./locale/zh_CN"));
 
 var _style = require("./style");
@@ -33,77 +33,51 @@ 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 ShortcutWithoutMemo = function ShortcutWithoutMemo(_ref) {
-  var _this2 = this;
-
-  (0, _newArrowCheck2.default)(this, _this);
-  var index = _ref.index,
-      shortcut = _ref.shortcut,
-      onShortcutClick = _ref.onShortcutClick,
-      _locale = _ref.locale;
-  var handleClick = (0, _react.useCallback)(function () {
-    (0, _newArrowCheck2.default)(this, _this2);
-    onShortcutClick(index);
-  }.bind(this), [index, onShortcutClick]);
-  var locale = (0, _useLocale.default)(_zh_CN.default, 'DatePicker', _locale);
-  return /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.shortcutCls,
-    onClick: handleClick
-  }, shortcut.label ? shortcut.label : shortcut.locale ? locale[shortcut.locale] : 'shortcut');
-}.bind(void 0);
+var TipIcon = /*#__PURE__*/_react.default.memo(function TipIcon() {
+  return /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
+    type: "exclamation-circle-filled",
+    className: _style.tipIconCls
+  });
+});
 
-var Shortcut = /*#__PURE__*/(0, _react.memo)(ShortcutWithoutMemo);
+exports.TipIcon = TipIcon;
 
-var Footer = function Footer(_ref2) {
-  var _this3 = this;
+// deprecated shortcuts for UX
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+var Footer = function Footer(_ref) {
+  var _this2 = this;
 
   (0, _newArrowCheck2.default)(this, _this);
-  var confirmAble = _ref2.confirmAble,
-      onConfirm = _ref2.onConfirm,
-      shortcuts = _ref2.shortcuts,
-      onShortcut = _ref2.onShortcut,
-      tip = _ref2.tip,
-      _locale = _ref2.locale;
-  if (shortcuts == null) shortcuts = [];
-  var handleShortcutClick = (0, _react.useCallback)(function (i) {
-    var _shortcuts;
-
-    (0, _newArrowCheck2.default)(this, _this3);
-    var shortcut = (_shortcuts = shortcuts) === null || _shortcuts === void 0 ? void 0 : _shortcuts[i];
-    if (!shortcut) return;
-    var d = shortcut.handle();
-    onShortcut(d);
-  }.bind(this), [onShortcut, shortcuts]);
+  var isError = _ref.isError,
+      onConfirm = _ref.onConfirm,
+      shortcuts = _ref.shortcuts,
+      onShortcut = _ref.onShortcut,
+      tip = _ref.tip,
+      showConfirm = _ref.showConfirm,
+      _locale = _ref.locale;
   var handleConfirm = (0, _react.useCallback)(function () {
-    (0, _newArrowCheck2.default)(this, _this3);
+    (0, _newArrowCheck2.default)(this, _this2);
     return onConfirm();
   }.bind(this), [onConfirm]);
   var locale = (0, _useLocale.default)(_zh_CN.default, 'DatePicker', _locale);
-  return /*#__PURE__*/_react.default.createElement(_Box.default, {
+  return !tip && !showConfirm ? null : /*#__PURE__*/_react.default.createElement(_Box.default, {
     className: _style.footerCls,
     container: true,
     justifyContent: "space-between",
     alignItems: "center"
-  }, /*#__PURE__*/_react.default.createElement(_Combine.default, null, shortcuts.map(function (shortcut, i) {
-    (0, _newArrowCheck2.default)(this, _this3);
-    return /*#__PURE__*/_react.default.createElement(Shortcut, {
-      index: i,
-      key: i,
-      shortcut: shortcut,
-      onShortcutClick: handleShortcutClick
-    });
-  }.bind(this))), /*#__PURE__*/_react.default.createElement(_Combine.default, null, tip ? /*#__PURE__*/_react.default.createElement("span", {
-    className: _style.tipCls
-  }, tip) : null, /*#__PURE__*/_react.default.createElement(_Button.default, {
+  }, tip ? /*#__PURE__*/_react.default.createElement("span", {
+    className: isError ? _style.errorTipCls : _style.tipCls,
+    title: typeof tip === 'string' ? tip : ''
+  }, /*#__PURE__*/_react.default.createElement(TipIcon, null), /*#__PURE__*/_react.default.createElement("span", null, tip)) : /*#__PURE__*/_react.default.createElement("span", null), showConfirm && /*#__PURE__*/_react.default.createElement(_Button.default, {
     styleType: "primary",
-    disabled: !confirmAble,
+    size: "sm",
+    disabled: isError,
     onClick: handleConfirm
-  }, locale.confirm)));
+  }, locale.confirm));
 }.bind(void 0);
 
 Footer.propTypes = {
   mode: _propTypes.default.oneOf(['date', 'month']).isRequired,
-  confirmAble: _propTypes.default.bool.isRequired,
   onConfirm: _propTypes.default.func.isRequired,
   shortcuts: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.shape({
     handle: _propTypes.default.func.isRequired,
@@ -111,8 +85,10 @@ Footer.propTypes = {
     label: _propTypes.default.node
   })), _propTypes.default.oneOf([null])]),
   onShortcut: _propTypes.default.func.isRequired,
+  isError: _propTypes.default.bool,
   tip: _propTypes.default.node,
-  locale: _propTypes.default.any
+  locale: _propTypes.default.any,
+  showConfirm: _propTypes.default.bool
 };
 
 var _default = /*#__PURE__*/(0, _react.memo)(Footer);

package/lib/components/DatePicker/Month.js

@@ -21,8 +21,6 @@ var _Calendar = _interopRequireDefault(require("../../components/Calendar"));
 
 var _Popover = _interopRequireDefault(require("../../components/Popover"));
 
-var _Notice = _interopRequireDefault(require("../../components/Notice"));
-
 var _SvgIcon = _interopRequireDefault(require("../../components/SvgIcon"));
 
 var _usePopoverConfig = _interopRequireDefault(require("../../hooks/usePopoverConfig"));
@@ -73,10 +71,10 @@ var Month = function Month(props) {
   return /*#__PURE__*/_react.default.createElement(_style.PickerContainer, (0, _extends2.default)({
     isMonth: true
   }, containerProps), /*#__PURE__*/_react.default.createElement(_Popover.default, (0, _extends2.default)({
-    popup: /*#__PURE__*/_react.default.createElement(_style.SPopup, popupProps, /*#__PURE__*/_react.default.createElement(_Calendar.default.Month, calendarProps), error && /*#__PURE__*/_react.default.createElement(_Notice.default, {
-      styleType: "error",
-      closable: false
-    }, error), /*#__PURE__*/_react.default.createElement(_Footer.default, footerProps))
+    popup: /*#__PURE__*/_react.default.createElement(_style.SPopup, popupProps, /*#__PURE__*/_react.default.createElement(_style.Arrow, null), /*#__PURE__*/_react.default.createElement(_Calendar.default.Month, calendarProps), /*#__PURE__*/_react.default.createElement(_Footer.default, (0, _extends2.default)({}, footerProps, {
+      tip: error,
+      isError: !!error
+    })))
   }, popoverConfigProps, popoverProps), /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, inputProps, {
     prefix: /*#__PURE__*/_react.default.createElement(_SvgIcon.default, {
       type: "calendar"

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

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react';
 import { Moment } from 'moment';
-import { TDate } from '@z-r/calendar/types/interface';
+import { TDate } from '@z-r/calendar';
 import LOCALE from './locale/zh_CN';
 import { TShortcut } from './Footer';
 interface RangeProps {
@@ -97,5 +97,5 @@ interface RangeProps {
     /** @ignore */
     locale?: typeof LOCALE;
 }
-declare const _default: React.MemoExoticComponent<({ options: _options, option: _option, defaultOption, onOptionChange: _onOptionChange, hideOptions, value: _value, defaultValue, onChange: _onChange, onInitialChange, nullable, size, display, format, rules, type, disabled, zIndex, locale: _locale, selectProps, popoverProps, rangeTip, status, placeholder, shortcuts, customRender, ...rest }: RangeProps) => JSX.Element>;
+declare const _default: React.MemoExoticComponent<({ options: _options, option: _option, defaultOption, onOptionChange: _onOptionChange, hideOptions, value: _value, defaultValue, onChange: _onChange, onInitialChange, nullable, size, display, format, rules, type, disabled, zIndex, locale: _locale, selectProps, popoverProps: _popoverProps, rangeTip, status, placeholder, shortcuts, customRender, ...rest }: RangeProps) => JSX.Element>;
 export default _default;

package/lib/components/DatePicker/Range.js

@@ -11,6 +11,8 @@ 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"));
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -35,9 +37,13 @@ var _isArray = _interopRequireDefault(require("../../utils/isArray"));
 
 var _isNumber = _interopRequireDefault(require("../../utils/isNumber"));
 
+var _Calendar = _interopRequireWildcard(require("../../components/Calendar"));
+
 var _pick = _interopRequireDefault(require("../../utils/pick"));
 
-var _RangePicker = _interopRequireDefault(require("./RangePicker"));
+var _Popover = _interopRequireDefault(require("../../components/Popover"));
+
+var _Input = _interopRequireDefault(require("../../components/Input"));
 
 var _zh_CN = _interopRequireDefault(require("./locale/zh_CN"));
 
@@ -45,6 +51,10 @@ var _utils = require("./utils");
 
 var _style = require("./style");
 
+var _Footer = _interopRequireDefault(require("./Footer"));
+
+var _useRangePicker5 = _interopRequireDefault(require("./useRangePicker"));
+
 var _excluded = ["options", "option", "defaultOption", "onOptionChange", "hideOptions", "value", "defaultValue", "onChange", "onInitialChange", "nullable", "size", "display", "format", "rules", "type", "disabled", "zIndex", "locale", "selectProps", "popoverProps", "rangeTip", "status", "placeholder", "shortcuts", "customRender"],
     _excluded2 = ["range"];
 
@@ -54,6 +64,10 @@ 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; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+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 formatValue = function formatValue(v) {
   var nullable = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
   var defaultV = arguments.length > 2 ? arguments[2] : undefined;
@@ -97,7 +111,9 @@ var getValueFromOption = function getValueFromOption() {
 };
 
 var Range = function Range(_ref2) {
-  var _this3 = this;
+  var _this3 = this,
+      _rules$range,
+      _rules$range2;
 
   (0, _newArrowCheck2.default)(this, _this);
   var _options = _ref2.options,
@@ -117,12 +133,13 @@ var Range = function Range(_ref2) {
       format = _ref2.format,
       _ref2$rules = _ref2.rules,
       rules = _ref2$rules === void 0 ? {} : _ref2$rules,
-      type = _ref2.type,
+      _ref2$type = _ref2.type,
+      type = _ref2$type === void 0 ? 'date' : _ref2$type,
       disabled = _ref2.disabled,
       zIndex = _ref2.zIndex,
       _locale = _ref2.locale,
       selectProps = _ref2.selectProps,
-      popoverProps = _ref2.popoverProps,
+      _popoverProps = _ref2.popoverProps,
       rangeTip = _ref2.rangeTip,
       status = _ref2.status,
       placeholder = _ref2.placeholder,
@@ -133,17 +150,6 @@ var Range = function Range(_ref2) {
     (0, _newArrowCheck2.default)(this, _this3);
     return new Date();
   }.bind(this), []);
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      activeS = _useState2[0],
-      setActiveS = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      activeE = _useState4[0],
-      setActiveE = _useState4[1];
-
   var locale = (0, _useLocale.default)(_zh_CN.default, 'DatePicker', _locale);
 
   var _useUncontrolled = (0, _useUncontrolled5.default)(_option, defaultOption || 'custom', _onOptionChange),
@@ -165,21 +171,28 @@ var Range = function Range(_ref2) {
       onChange = _useUncontrolled4[1],
       updateValueWithoutCallOnChange = _useUncontrolled4[2];
 
-  var _useState5 = (0, _react.useState)(function () {
+  var _useState = (0, _react.useState)(function () {
     (0, _newArrowCheck2.default)(this, _this3);
     return formatRangeValue(value, nullable, d);
   }.bind(this)),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      cacheValue = _useState6[0],
-      setCacheValue = _useState6[1];
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      cacheValue = _useState2[0],
+      setCacheValue = _useState2[1];
 
-  var _useState7 = (0, _react.useState)(),
-      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      rangeError = _useState8[0],
-      setRangeError = _useState8[1];
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      rangeError = _useState4[0],
+      setRangeError = _useState4[1];
 
   var inputRefS = (0, _react.useRef)();
   var inputRefE = (0, _react.useRef)();
+  var actionRefS = (0, _react.useRef)();
+  var actionRefE = (0, _react.useRef)(); // 0 没有编辑中 1 第一个编辑中 2 非第一个编辑中
+
+  var _useState5 = (0, _react.useState)(0),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      isFirstEditing = _useState6[0],
+      setIsFirstEditing = _useState6[1];
 
   var _useContext = (0, _react.useContext)(_ControllerContext.default),
       contextStatus = _useContext.status;
@@ -228,17 +241,32 @@ var Range = function Range(_ref2) {
 
     var newValue = [value, valueE];
     var rangeDateValidResult = (0, _utils.isRangeDateValid)(newValue, rules, precision);
+    setRangeError(undefined);
 
     if (rangeDateValidResult !== true) {
-      setRangeError(rangeDateValidResult);
-      inputRefE.current && inputRefE.current.focus();
+      var _inputRefE$current;
+
+      (_inputRefE$current = inputRefE.current) === null || _inputRefE$current === void 0 ? void 0 : _inputRefE$current.focus();
+
+      if (rangeDateValidResult === 'startGreaterThanEnd') {
+        var _actionRefE$current;
+
+        (_actionRefE$current = actionRefE.current) === null || _actionRefE$current === void 0 ? void 0 : _actionRefE$current.clear();
+      } else {
+        setRangeError(locale[rangeDateValidResult + 'Tip']);
+      }
+
+      newValue[1] = null;
+    } else if (isFirstEditing === 1) {
+      var _inputRefE$current2;
+
+      (_inputRefE$current2 = inputRefE.current) === null || _inputRefE$current2 === void 0 ? void 0 : _inputRefE$current2.focus();
     } else {
-      setRangeError(undefined);
       onChange(newValue);
     }
 
     setCacheValue(newValue);
-  }.bind(this), [onChange, precision, rules, cacheValue]);
+  }.bind(this), [cacheValue, rules, precision, isFirstEditing, locale, onChange]);
   var handleEndChange = (0, _react.useCallback)(function (value) {
     (0, _newArrowCheck2.default)(this, _this3);
 
@@ -247,52 +275,51 @@ var Range = function Range(_ref2) {
 
     var newValue = [valueS, value];
     var rangeDateValidResult = (0, _utils.isRangeDateValid)(newValue, rules, precision);
+    setRangeError(undefined);
 
     if (rangeDateValidResult !== true) {
-      setRangeError(rangeDateValidResult);
-      inputRefS.current && inputRefS.current.focus();
+      var _inputRefS$current;
+
+      (_inputRefS$current = inputRefS.current) === null || _inputRefS$current === void 0 ? void 0 : _inputRefS$current.focus();
+
+      if (rangeDateValidResult === 'startGreaterThanEnd') {
+        var _actionRefS$current;
+
+        (_actionRefS$current = actionRefS.current) === null || _actionRefS$current === void 0 ? void 0 : _actionRefS$current.clear();
+      } else {
+        setRangeError(locale[rangeDateValidResult + 'Tip']);
+      }
+
+      newValue[0] = null;
+    } else if (isFirstEditing === 1) {
+      var _inputRefS$current2;
+
+      (_inputRefS$current2 = inputRefS.current) === null || _inputRefS$current2 === void 0 ? void 0 : _inputRefS$current2.focus();
     } else {
-      setRangeError(undefined);
       onChange(newValue);
     }
 
     setCacheValue(newValue);
-  }.bind(this), [onChange, precision, rules, cacheValue]);
+  }.bind(this), [cacheValue, rules, precision, isFirstEditing, locale, onChange]);
   var handleOptionChange = (0, _react.useCallback)(function (value) {
     (0, _newArrowCheck2.default)(this, _this3);
     if (value !== 'custom') onChange(getValueFromOption(options, value));
     onOptionChange(value);
   }.bind(this), [onChange, onOptionChange, options]);
-  var handleStartActiveChange = (0, _react.useCallback)(function (active) {
-    (0, _newArrowCheck2.default)(this, _this3);
-    return setActiveS(active);
-  }.bind(this), []);
-  var handleEndActiveChange = (0, _react.useCallback)(function (active) {
-    (0, _newArrowCheck2.default)(this, _this3);
-    return setActiveE(active);
-  }.bind(this), []);
   var handleInputMouseDown = (0, _react.useCallback)(function (e) {
     (0, _newArrowCheck2.default)(this, _this3);
     if (e.target === e.currentTarget) e.preventDefault();
   }.bind(this), []);
-  (0, _react.useEffect)(function () {
-    (0, _newArrowCheck2.default)(this, _this3);
-    if (activeS || activeE) return;
-    setCacheValue(formatRangeValue(value, nullable, d));
-  }.bind(this), [activeE, activeS, d, nullable, value]);
-  var rangeErrorTip = locale["".concat(rangeError, "Tip")];
   var sharedPickerProps = {
     size: size,
     format: format,
     display: pickerDisplay,
     disabled: disabled,
-    popoverProps: popoverProps,
+    popoverProps: _popoverProps,
     zIndex: zIndex,
     type: type,
-    readonly: readonly,
-    tip: rangeTip,
-    error: rangeErrorTip,
-    rules: rules
+    rules: rules,
+    status: status
   };
 
   var _cacheValue3 = (0, _slicedToArray2.default)(cacheValue, 2),
@@ -306,6 +333,75 @@ var Range = function Range(_ref2) {
       _ref10$2 = _ref10[1],
       placeholderE = _ref10$2 === void 0 ? locale.placeholderRangeEnd : _ref10$2;
 
+  var _useRangePicker = (0, _useRangePicker5.default)(_objectSpread(_objectSpread({
+    value: valueS,
+    onChange: handleStartChange,
+    nullable: nullableS,
+    placeholder: placeholderS,
+    shortcuts: shortcutsS,
+    actionRef: actionRefS
+  }, sharedPickerProps), {}, {
+    rules: isFirstEditing === 2 ? _objectSpread(_objectSpread({}, rules), {}, {
+      range: [(_rules$range = rules.range) === null || _rules$range === void 0 ? void 0 : _rules$range[0], cacheValue[1]]
+    }) : rules,
+    prefix: true,
+    suffix: locale.to
+  })),
+      _useRangePicker2 = (0, _slicedToArray2.default)(_useRangePicker, 8),
+      inputPropsS = _useRangePicker2[0],
+      inputWrapPropsS = _useRangePicker2[1],
+      calendarPropsS = _useRangePicker2[2],
+      footerPropsS = _useRangePicker2[3],
+      _useRangePicker2$ = _useRangePicker2[4],
+      activeS = _useRangePicker2$.active,
+      errorS = _useRangePicker2$.error,
+      popoverProps = _useRangePicker2[5],
+      popupProps = _useRangePicker2[6],
+      _useRangePicker2$2 = _useRangePicker2[7],
+      hasTime = _useRangePicker2$2.hasTime,
+      isMonth = _useRangePicker2$2.isMonth;
+
+  var _useRangePicker3 = (0, _useRangePicker5.default)(_objectSpread(_objectSpread({
+    value: valueE,
+    onChange: handleEndChange,
+    nullable: nullableE,
+    placeholder: placeholderE,
+    shortcuts: shortcutsE,
+    actionRef: actionRefE
+  }, sharedPickerProps), {}, {
+    rules: isFirstEditing === 2 ? _objectSpread(_objectSpread({}, rules), {}, {
+      range: [cacheValue[0], (_rules$range2 = rules.range) === null || _rules$range2 === void 0 ? void 0 : _rules$range2[1]]
+    }) : rules
+  })),
+      _useRangePicker4 = (0, _slicedToArray2.default)(_useRangePicker3, 5),
+      inputPropsE = _useRangePicker4[0],
+      inputWrapPropsE = _useRangePicker4[1],
+      calendarPropsE = _useRangePicker4[2],
+      footerPropsE = _useRangePicker4[3],
+      _useRangePicker4$ = _useRangePicker4[4],
+      activeE = _useRangePicker4$.active,
+      errorE = _useRangePicker4$.error;
+
+  (0, _react.useEffect)(function () {
+    (0, _newArrowCheck2.default)(this, _this3);
+    if (activeS || activeE) return;
+    setCacheValue(formatRangeValue(value, nullable, d));
+  }.bind(this), [activeE, activeS, d, nullable, value]);
+  (0, _react.useEffect)(function () {
+    var _this4 = this;
+
+    (0, _newArrowCheck2.default)(this, _this3);
+
+    if (!activeS && !activeE) {
+      setIsFirstEditing(0);
+    } else {
+      setIsFirstEditing(function (v) {
+        (0, _newArrowCheck2.default)(this, _this4);
+        return v === 0 ? 1 : 2;
+      }.bind(this));
+    }
+  }.bind(this), [activeE, activeS]);
+  var CalendarComp = isMonth ? _Calendar.default.Month : hasTime ? _Calendar.default : _Calendar.TwoSide;
   return /*#__PURE__*/_react.default.createElement(_style.RangeContainer, (0, _extends2.default)({}, rest, {
     disabled: disabled
   }), !!options.length && /*#__PURE__*/_react.default.createElement(_style.RangeSelect, (0, _extends2.default)({}, selectProps, {
@@ -317,33 +413,45 @@ var Range = function Range(_ref2) {
     value: option,
     disabled: disabled,
     onChange: handleOptionChange
-  })), readonly && customRender !== null && customRender !== void 0 && customRender.readonlyDisplay ? customRender.readonlyDisplay(cacheValue) : /*#__PURE__*/_react.default.createElement(_style.SRangeInputWrap, {
+  })), readonly && customRender !== null && customRender !== void 0 && customRender.readonlyDisplay ? customRender.readonlyDisplay(cacheValue) : /*#__PURE__*/_react.default.createElement(_Popover.default, (0, _extends2.default)({}, popoverProps, {
+    visible: activeS || activeE,
+    popup: /*#__PURE__*/_react.default.createElement(_style.SPopup, (0, _extends2.default)({}, popupProps, {
+      endInputHighlight: activeE
+    }, inputWrapPropsS), /*#__PURE__*/_react.default.createElement(_style.Arrow, null), /*#__PURE__*/_react.default.createElement(_style.RangeCalendarWrap, {
+      visible: activeS
+    }, /*#__PURE__*/_react.default.createElement(CalendarComp, (0, _extends2.default)({}, calendarPropsS, {
+      rangeValue: [calendarPropsS.value, cacheValue === null || cacheValue === void 0 ? void 0 : cacheValue[1]],
+      value: null
+    })), /*#__PURE__*/_react.default.createElement(_Footer.default, (0, _extends2.default)({}, footerPropsS, {
+      tip: rangeError || errorS || rangeTip,
+      isError: !!rangeError || !!errorS
+    }))), /*#__PURE__*/_react.default.createElement(_style.RangeCalendarWrap, {
+      visible: activeE
+    }, /*#__PURE__*/_react.default.createElement(CalendarComp, (0, _extends2.default)({}, calendarPropsE, {
+      rangeValue: [cacheValue === null || cacheValue === void 0 ? void 0 : cacheValue[0], calendarPropsE.value],
+      value: null
+    })), /*#__PURE__*/_react.default.createElement(_Footer.default, (0, _extends2.default)({}, footerPropsE, {
+      tip: rangeError || errorE || rangeTip,
+      isError: !!rangeError || !!errorE
+    }))))
+  }), /*#__PURE__*/_react.default.createElement(_style.SRangeInputWrap, {
     size: size,
     disabled: disabled,
     focused: activeS || activeE,
     readonly: readonly,
     onMouseDown: handleInputMouseDown,
     status: status || contextStatus
-  }, /*#__PURE__*/_react.default.createElement(_RangePicker.default, (0, _extends2.default)({
-    value: valueS,
-    onChange: handleStartChange,
-    nullable: nullableS,
-    prefix: true,
-    ref: inputRefS,
-    onActiveChange: handleStartActiveChange,
-    placeholder: placeholderS,
-    shortcuts: shortcutsS,
-    footerTip: locale.chooseTipRangeStart
-  }, sharedPickerProps)), /*#__PURE__*/_react.default.createElement(_style.RangeDateSeparator, null), /*#__PURE__*/_react.default.createElement(_RangePicker.default, (0, _extends2.default)({
-    value: valueE,
-    onChange: handleEndChange,
-    nullable: nullableE,
-    ref: inputRefE,
-    onActiveChange: handleEndActiveChange,
-    placeholder: placeholderE,
-    shortcuts: shortcutsE,
-    footerTip: locale.chooseTipRangeEnd
-  }, sharedPickerProps))));
+  }, readonly ? /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.readonlyInputCls
+  }, inputPropsS.value) : /*#__PURE__*/_react.default.createElement(_style.RangeInputWrap, inputWrapPropsS, /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, inputPropsS, {
+    ref: inputRefS
+  }))), readonly ? /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.readonlyInputCls
+  }, inputPropsE.value) : /*#__PURE__*/_react.default.createElement(_style.RangeInputWrap, (0, _extends2.default)({}, inputWrapPropsE, {
+    isEnd: true
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, inputPropsE, {
+    ref: inputRefE
+  }))))));
 }.bind(void 0);
 
 Range.propTypes = {

package/lib/components/DatePicker/locale/en_US.js

@@ -20,6 +20,7 @@ var _default = {
   placeholderRangeStart: 'Start date',
   placeholderRangeEnd: 'End date',
   chooseTipRangeStart: 'Choose start date',
-  chooseTipRangeEnd: 'Choose end date'
+  chooseTipRangeEnd: 'Choose end date',
+  to: 'to'
 };
 exports.default = _default;

package/lib/components/DatePicker/locale/zh_CN.d.ts

@@ -15,5 +15,6 @@ declare namespace _default {
     const placeholderRangeEnd: string;
     const chooseTipRangeStart: string;
     const chooseTipRangeEnd: string;
+    const to: string;
 }
 export default _default;

package/lib/components/DatePicker/locale/zh_CN.js

@@ -20,6 +20,7 @@ var _default = {
   placeholderRangeStart: '开始时间',
   placeholderRangeEnd: '结束时间',
   chooseTipRangeStart: '选择开始时间',
-  chooseTipRangeEnd: '选择结束时间'
+  chooseTipRangeEnd: '选择结束时间',
+  to: '至'
 };
 exports.default = _default;