@oceanbase/ui 1.0.0-alpha.2 → 1.0.0-alpha.20

package/es/DateRanger/EditableDateTimeInput.js

@@ -0,0 +1,129 @@
+"use client";
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import React, { useMemo, useImperativeHandle, forwardRef } from 'react';
+import classNames from 'classnames';
+import { Input } from '@oceanbase/design';
+import { useSegmentedInput } from "./hooks/useSegmentedInput";
+import { useAutoWidthInput } from "./hooks/useAutoWidthInput";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+var EditableDateTimeInput = /*#__PURE__*/forwardRef(function (props, ref) {
+  var value = props.value,
+    onChange = props.onChange,
+    formatProp = props.format,
+    _props$hideYear = props.hideYear,
+    hideYear = _props$hideYear === void 0 ? false : _props$hideYear,
+    _props$hideSecond = props.hideSecond,
+    hideSecond = _props$hideSecond === void 0 ? false : _props$hideSecond,
+    _props$isMoment = props.isMoment,
+    isMoment = _props$isMoment === void 0 ? false : _props$isMoment,
+    _props$isCn = props.isCn,
+    isCn = _props$isCn === void 0 ? true : _props$isCn,
+    className = props.className,
+    _props$prefixCls = props.prefixCls,
+    prefixCls = _props$prefixCls === void 0 ? 'ant-picker' : _props$prefixCls,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    onClick = props.onClick,
+    _props$open = props.open,
+    open = _props$open === void 0 ? false : _props$open;
+
+  // 根据配置生成格式，优先使用外部传入的 format
+  var format = useMemo(function () {
+    if (formatProp) {
+      return formatProp;
+    }
+    if (isCn) {
+      if (hideYear) {
+        return hideSecond ? 'MM-DD HH:mm' : 'MM-DD HH:mm:ss';
+      }
+      return hideSecond ? 'YYYY-MM-DD HH:mm' : 'YYYY-MM-DD HH:mm:ss';
+    } else {
+      if (hideYear) {
+        return hideSecond ? 'MM/DD HH:mm' : 'MM/DD HH:mm:ss';
+      }
+      return hideSecond ? 'MM/DD/YYYY HH:mm' : 'MM/DD/YYYY HH:mm:ss';
+    }
+  }, [formatProp, hideYear, hideSecond, isCn]);
+
+  // 提取时区后缀（如 "(UTC+8)"、" UTC+8" 等）
+  var _useMemo = useMemo(function () {
+      var timezonePattern = /(\s*\(?(?:UTC|GMT)[+-]?\d*\)?)\s*$/i;
+      var match = format.match(timezonePattern);
+      if (match) {
+        return {
+          baseFormat: format.slice(0, match.index),
+          timezoneSuffix: match[1]
+        };
+      }
+      return {
+        baseFormat: format,
+        timezoneSuffix: ''
+      };
+    }, [format]),
+    baseFormat = _useMemo.baseFormat;
+
+  // 使用分段输入 hook
+  var _useSegmentedInput = useSegmentedInput({
+      value: value,
+      onChange: onChange,
+      format: format,
+      baseFormat: baseFormat,
+      isMoment: isMoment,
+      isCn: isCn,
+      onClick: onClick,
+      open: open
+    }),
+    inputRef = _useSegmentedInput.inputRef,
+    isEditing = _useSegmentedInput.isEditing,
+    displayValue = _useSegmentedInput.displayValue,
+    handleClick = _useSegmentedInput.handleClick,
+    handleDoubleClick = _useSegmentedInput.handleDoubleClick,
+    handleBlur = _useSegmentedInput.handleBlur,
+    handleKeyDown = _useSegmentedInput.handleKeyDown,
+    hasPastedValue = _useSegmentedInput.hasPastedValue,
+    confirmPastedValue = _useSegmentedInput.confirmPastedValue;
+  var _useAutoWidthInput = useAutoWidthInput({
+      inputRef: inputRef,
+      value: displayValue,
+      minWidth: 80,
+      extraWidth: isCn ? 26 : 0
+    }),
+    sizerRef = _useAutoWidthInput.sizerRef,
+    inputWidth = _useAutoWidthInput.inputWidth;
+
+  // 暴露方法给父组件
+  useImperativeHandle(ref, function () {
+    return {
+      hasPastedValue: hasPastedValue,
+      confirmPastedValue: confirmPastedValue
+    };
+  });
+  return /*#__PURE__*/_jsxs("div", {
+    className: classNames("".concat(prefixCls, "-range-editable"), className, _defineProperty(_defineProperty({}, "".concat(prefixCls, "-range-editable-focused"), isEditing), "".concat(prefixCls, "-range-editable-disabled"), disabled)),
+    children: [/*#__PURE__*/_jsx("span", {
+      ref: sizerRef,
+      className: "".concat(prefixCls, "-range-editable-sizer"),
+      "aria-hidden": true
+    }), /*#__PURE__*/_jsx(Input, {
+      ref: inputRef,
+      className: "".concat(prefixCls, "-range-editable-input"),
+      style: {
+        width: inputWidth
+      },
+      value: displayValue,
+      readOnly: true,
+      disabled: disabled,
+      variant: "borderless",
+      onClick: handleClick,
+      onDoubleClick: handleDoubleClick,
+      onBlur: handleBlur,
+      onKeyDown: handleKeyDown
+    })]
+  });
+});
+EditableDateTimeInput.displayName = 'EditableDateTimeInput';
+export default EditableDateTimeInput;

package/es/DateRanger/PickerPanel.js

@@ -1,3 +1,4 @@
+"use client";
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
@@ -8,18 +9,17 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import dayjsGenerateConfig from 'rc-picker/es/generate/dayjs';
 import momentGenerateConfig from 'rc-picker/es/generate/moment';
 import useCSSVarCls from 'antd/es/config-provider/hooks/useCSSVarCls';
 import useStyle from 'antd/es/date-picker/style/index';
 import { PickerPanel } from 'rc-picker';
 import classNames from 'classnames';
-import { Alert, Button, Col, DatePicker, Divider, Form, Row, Space, TimePicker } from '@oceanbase/design';
+import { Alert, Button, Col, ConfigProvider, DatePicker, Divider, Form, Row, Space, TimePicker } from '@oceanbase/design';
 import { noop } from 'lodash';
 import moment from 'moment';
 import dayjs from 'dayjs';
-import { getPrefix } from "../_util";
 import { DATE_TIME_MONTH_FORMAT, DATE_TIME_MONTH_FORMAT_CN } from "./constant";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -46,10 +46,10 @@ var useClickFSA = function useClickFSA() {
   };
   return [state, next];
 };
-var prefix = getPrefix('ranger-picker-panel');
 var prefixCls = 'ant-picker';
 var TIME_FORMAT = 'HH:mm:ss';
 var InternalPickerPanel = function InternalPickerPanel(props) {
+  var _defaultValue$, _defaultValue$2, _calendarValue$, _calendarValue$2;
   var defaultValue = props.defaultValue,
     isMoment = props.isMoment,
     locale = props.locale,
@@ -63,6 +63,9 @@ var InternalPickerPanel = function InternalPickerPanel(props) {
     onCancel = _props$onCancel === void 0 ? noop : _props$onCancel,
     disabledDate = props.disabledDate,
     hideSecond = props.hideSecond;
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefix = getPrefixCls('ranger-picker-panel');
   var rootCls = useCSSVarCls(prefixCls);
   var _useStyle = useStyle(prefixCls, rootCls),
     _useStyle2 = _slicedToArray(_useStyle, 3),
@@ -90,6 +93,13 @@ var InternalPickerPanel = function InternalPickerPanel(props) {
     setActiveIndex = _React$useState6[1];
   var isEn = (locale === null || locale === void 0 ? void 0 : locale.antLocale) === 'en';
 
+  // 监听外部传入的 defaultValue 变化，同步更新 calendarValue
+  React.useEffect(function () {
+    if (defaultValue && defaultValue.length === 2) {
+      setCalendarValue(defaultValue);
+    }
+  }, [defaultValue === null || defaultValue === void 0 || (_defaultValue$ = defaultValue[0]) === null || _defaultValue$ === void 0 ? void 0 : _defaultValue$.valueOf(), defaultValue === null || defaultValue === void 0 || (_defaultValue$2 = defaultValue[1]) === null || _defaultValue$2 === void 0 ? void 0 : _defaultValue$2.valueOf()]);
+
   //
   var DATE_FORMAT = isEn ? DATE_TIME_MONTH_FORMAT : DATE_TIME_MONTH_FORMAT_CN;
   var getDateInstance = useCallback(function (v, format, strict) {
@@ -115,10 +125,8 @@ var InternalPickerPanel = function InternalPickerPanel(props) {
     setInternalHoverValues(date && clickFSA === CLICK_STATE.START ? fillCalendarValue(date, activeIndex) : null);
   };
 
-  // 对日期进行排序
-  var formatValues = _toConsumableArray(calendarValue).sort(function (a, b) {
-    return (a === null || a === void 0 ? void 0 : a.valueOf()) - (b === null || b === void 0 ? void 0 : b.valueOf());
-  }).map(function (item) {
+  // 保持原始顺序，不进行排序（只在提交时排序）
+  var formatValues = calendarValue.map(function (item) {
     return item === null || item === void 0 ? void 0 : item.format(DATE_FORMAT);
   });
   var _Form$useForm = Form.useForm(),
@@ -128,14 +136,20 @@ var InternalPickerPanel = function InternalPickerPanel(props) {
     _sDate = _formatValues[0],
     _eDate = _formatValues[1];
   var setFormatDateToForm = function setFormatDateToForm() {
+    var _calendarValue = _slicedToArray(calendarValue, 2),
+      startVal = _calendarValue[0],
+      endVal = _calendarValue[1];
     form.setFieldsValue({
       startDate: getDateInstance(_sDate),
-      endDate: getDateInstance(_eDate)
+      endDate: getDateInstance(_eDate),
+      // 同步更新时间值，保持原始顺序
+      startTime: startVal || getDateInstance(),
+      endTime: endVal || getDateInstance()
     });
   };
   useEffect(function () {
     setFormatDateToForm();
-  }, [_sDate, _eDate]);
+  }, [calendarValue === null || calendarValue === void 0 || (_calendarValue$ = calendarValue[0]) === null || _calendarValue$ === void 0 ? void 0 : _calendarValue$.valueOf(), calendarValue === null || calendarValue === void 0 || (_calendarValue$2 = calendarValue[1]) === null || _calendarValue$2 === void 0 ? void 0 : _calendarValue$2.valueOf()]);
   var defaultTime = useMemo(function () {
     return getDateInstance();
   }, []);
@@ -197,7 +211,7 @@ var InternalPickerPanel = function InternalPickerPanel(props) {
               }],
               children: /*#__PURE__*/_jsx(DatePicker, {
                 format: {
-                  format: 'YYYY-MM-DD',
+                  format: DATE_FORMAT,
                   type: 'mask'
                 },
                 style: {
@@ -273,7 +287,7 @@ var InternalPickerPanel = function InternalPickerPanel(props) {
               }],
               children: /*#__PURE__*/_jsx(DatePicker, {
                 format: {
-                  format: 'YYYY-MM-DD',
+                  format: DATE_FORMAT,
                   type: 'mask'
                 },
                 style: {
@@ -411,15 +425,18 @@ var InternalPickerPanel = function InternalPickerPanel(props) {
               startTime = values.startTime,
               endDate = values.endDate,
               endTime = values.endTime;
-            // 日期同一天时对时间进行排序，保证开始时间在结束时间之前
-            var _ref5 = startDate.isSame(endDate) ? [startTime, endTime].sort(function (a, b) {
-                return (a === null || a === void 0 ? void 0 : a.valueOf()) - (b === null || b === void 0 ? void 0 : b.valueOf());
-              }) : [startTime, endTime],
+
+            // 组合日期和时间
+            var startDateTime = "".concat(formatDate(startDate), " ").concat(startTime.format(TIME_FORMAT));
+            var endDateTime = "".concat(formatDate(endDate), " ").concat(endTime.format(TIME_FORMAT));
+
+            // 对完整的日期时间进行排序，保证开始时间在结束时间之前
+            var startMoment = getDateInstance(startDateTime, "".concat(DATE_FORMAT, " ").concat(TIME_FORMAT));
+            var endMoment = getDateInstance(endDateTime, "".concat(DATE_FORMAT, " ").concat(TIME_FORMAT));
+            var _ref5 = startMoment.valueOf() <= endMoment.valueOf() ? [startDateTime, endDateTime] : [endDateTime, startDateTime],
               _ref6 = _slicedToArray(_ref5, 2),
-              sTime = _ref6[0],
-              eTime = _ref6[1];
-            var start = "".concat(formatDate(startDate), " ").concat(sTime.format(TIME_FORMAT));
-            var end = "".concat(formatDate(endDate), " ").concat(eTime.format(TIME_FORMAT));
+              start = _ref6[0],
+              end = _ref6[1];
             var errorList = [];
             var message = '';
             rules === null || rules === void 0 || rules.some(function (item) {

package/es/DateRanger/Ranger.d.ts

@@ -2,10 +2,10 @@ import React from 'react';
 import type { TooltipProps } from '@oceanbase/design';
 import type { RangePickerProps } from '@oceanbase/design/es/date-picker';
 import type { Dayjs } from 'dayjs';
+import 'dayjs/locale/zh-cn';
 import type { Moment } from 'moment';
 import type { RangeOption } from './typing';
 import type { Rule } from './PickerPanel';
-import './index.less';
 export type RangeName = 'customize' | string;
 export type RangeValue = [Moment, Moment] | [Dayjs, Dayjs] | [] | null;
 export type RangeValueFormat = [string, string] | [] | null;
@@ -13,7 +13,7 @@ export type RangeDateValue = {
     name: RangeName;
     range: RangeValue;
 };
-export interface DateRangerProps extends Omit<RangePickerProps, 'mode' | 'picker' | 'value' | 'defaultValue'> {
+export interface DateRangerProps extends Omit<RangePickerProps, 'mode' | 'picker' | 'value' | 'defaultValue' | 'variant'> {
     selects?: RangeOption[];
     defaultQuickValue?: string;
     hasRewind?: boolean;
@@ -38,6 +38,8 @@ export interface DateRangerProps extends Omit<RangePickerProps, 'mode' | 'picker
     value?: RangeValue;
     defaultValue?: RangeValue;
     size?: 'small' | 'large' | 'middle';
+    /** 边框变体，默认实线，可配置为 dashed 虚线 */
+    variant?: 'dashed';
     tooltipProps?: TooltipProps;
     autoAdjustOverflow?: boolean;
     overlayClassName?: string;

package/es/DateRanger/Ranger.js

@@ -1,4 +1,5 @@
-var _excluded = ["selects", "value", "defaultValue", "defaultQuickValue", "hasRewind", "hasPlay", "hasSync", "hasForward", "hasZoomOut", "hasTagInPicker", "pastOnly", "simpleMode", "hideYear", "hideSecond", "autoCalcRange", "history", "onChange", "disabledDate", "locale", "size", "stickRangeName", "tooltipProps", "isMoment", "rules", "tip", "autoAdjustOverflow", "overlayClassName", "overlayStyle", "getPopupContainer"];
+"use client";
+var _excluded = ["selects", "value", "defaultValue", "defaultQuickValue", "hasRewind", "hasPlay", "hasSync", "hasForward", "hasZoomOut", "hasTagInPicker", "pastOnly", "simpleMode", "hideYear", "hideSecond", "autoCalcRange", "history", "onChange", "disabledDate", "locale", "size", "stickRangeName", "variant", "tooltipProps", "isMoment", "rules", "tip", "autoAdjustOverflow", "overlayClassName", "overlayStyle", "getPopupContainer"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -17,27 +18,33 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-import React, { useEffect, useRef, useState, useImperativeHandle, useMemo } from 'react';
-import { Button, DatePicker, Divider, Dropdown, Flex, Menu, Radio, Space, Tooltip, message, theme } from '@oceanbase/design';
+import React, { useContext, useEffect, useRef, useState, useImperativeHandle, useMemo } from 'react';
+import { Button, ConfigProvider, Divider, Dropdown, Flex, Menu, Radio, Space, Tooltip, message, theme } from '@oceanbase/design';
 import { LeftOutlined, RightOutlined, ZoomOutOutlined, SyncOutlined, ArrowLeftOutlined, CopyOutlined, DeleteOutlined } from '@oceanbase/icons';
 import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
 import { findIndex, isEqual as _isEqual, isNil, noop, omit } from 'lodash';
 import moment from 'moment';
 import classNames from 'classnames';
 import LocaleWrapper from "../locale/LocaleWrapper";
-import { getPrefix } from "../_util";
-import { CUSTOMIZE, DATE_TIME_FORMAT, NEAR_1_MINUTES, NEAR_30_MINUTES, NEAR_1_HOURS, NEAR_3_HOURS, NEAR_6_HOURS, TODAY, YEAR_DATE_TIME_FORMAT, LAST_3_DAYS, DATE_TIME_SECOND_FORMAT, YEAR_DATE_TIME_SECOND_FORMAT, DATE_TIME_FORMAT_CN, DATE_TIME_SECOND_FORMAT_CN, YEAR_DATE_TIME_FORMAT_CN, YEAR_DATE_TIME_SECOND_FORMAT_CN } from "./constant";
+import { CUSTOMIZE, NEAR_1_MINUTES, NEAR_30_MINUTES, NEAR_1_HOURS, NEAR_3_HOURS, NEAR_6_HOURS, TODAY, LAST_3_DAYS, YEAR_DATE_TIME_SECOND_FORMAT_CN } from "./constant";
+import EditableDateTimeInput from "./EditableDateTimeInput";
 import InternalPickerPanel from "./PickerPanel";
 import zhCN from "./locale/zh-CN";
-import "./index.less";
+import useStyle from "./style";
 import { useClickAway } from 'ahooks';
 import { useLocalStorageState } from '@oceanbase/util';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var DefaultMaxHistoryCapacity = 20;
-var prefix = getPrefix('date-ranger');
 var Ranger = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var _selects$;
+  var _useContext = useContext(ConfigProvider.ConfigContext),
+    getPrefixCls = _useContext.getPrefixCls;
+  var prefixCls = getPrefixCls('date-ranger');
+  var _useStyle = useStyle(prefixCls),
+    wrapSSR = _useStyle.wrapSSR;
+  var prefix = prefixCls;
   var _props$selects = props.selects,
     selects = _props$selects === void 0 ? [NEAR_1_MINUTES, NEAR_30_MINUTES, NEAR_1_HOURS, NEAR_3_HOURS, NEAR_6_HOURS, TODAY, LAST_3_DAYS] : _props$selects,
     value = props.value,
@@ -74,6 +81,7 @@ var Ranger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     size = props.size,
     _props$stickRangeName = props.stickRangeName,
     stickRangeName = _props$stickRangeName === void 0 ? false : _props$stickRangeName,
+    variant = props.variant,
     tooltipProps = props.tooltipProps,
     isMomentProps = props.isMoment,
     rules = props.rules,
@@ -127,6 +135,7 @@ var Ranger = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var rangeRef = useRef(null);
   var popRef = useRef(null);
   var labelRef = useRef(null);
+  var editableInputRef = useRef(null);
 
   // 没有 selects 时，回退到普通 RangePicker, 当前时间选项为自定义时，应该显示 RangePicker
   var _useState13 = useState(rangeName !== CUSTOMIZE),
@@ -141,7 +150,8 @@ var Ranger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
     return false;
   }, [historyProp]);
-  var _useLocalStorageState = useLocalStorageState('ob-design-date-ranger-local-storage-range-history-state', {
+  var localStorageKey = "".concat(prefixCls, "-date-ranger-history");
+  var _useLocalStorageState = useLocalStorageState(localStorageKey, {
       defaultValue: [],
       listenStorageChange: true
     }),
@@ -309,8 +319,8 @@ var Ranger = /*#__PURE__*/React.forwardRef(function (props, ref) {
     var diffMs = e.diff(s);
     return diffMs > differenceMs;
   }) : selects[rangeNameIndex + 1];
-  return /*#__PURE__*/_jsxs(Space, {
-    className: classNames(rest.className, _defineProperty(_defineProperty(_defineProperty({}, prefix, true), "".concat(prefix, "-show-range"), true), "".concat(prefix, "-back-radio-focused"), backRadioFocused)),
+  return wrapSSR( /*#__PURE__*/_jsxs(Space, {
+    className: classNames(rest.className, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, prefix, true), "".concat(prefix, "-show-range"), true), "".concat(prefix, "-dashed"), variant === 'dashed'), "".concat(prefix, "-back-radio-focused"), backRadioFocused)),
     style: rest.style,
     children: [/*#__PURE__*/_jsxs(Space, {
       size: 0,
@@ -445,12 +455,22 @@ var Ranger = /*#__PURE__*/React.forwardRef(function (props, ref) {
                 rules: rules,
                 hideSecond: hideSecond,
                 onOk: function onOk(vList) {
-                  setIsPlay(false);
-                  handleNameChange(CUSTOMIZE);
-                  rangeChange(vList.map(function (v) {
-                    return isMoment ? moment(v) : dayjs(v);
-                  }));
-                  closeTooltip();
+                  var _editableInputRef$cur;
+                  // 如果有粘贴值，优先使用粘贴值
+                  if ((_editableInputRef$cur = editableInputRef.current) !== null && _editableInputRef$cur !== void 0 && _editableInputRef$cur.hasPastedValue) {
+                    editableInputRef.current.confirmPastedValue();
+                    setIsPlay(false);
+                    handleNameChange(CUSTOMIZE);
+                    closeTooltip();
+                  } else {
+                    // 否则使用面板中的值
+                    setIsPlay(false);
+                    handleNameChange(CUSTOMIZE);
+                    rangeChange(vList.map(function (v) {
+                      return isMoment ? moment(v) : dayjs(v);
+                    }));
+                    closeTooltip();
+                  }
                 },
                 onCancel: function onCancel() {
                   closeTooltip();
@@ -512,36 +532,27 @@ var Ranger = /*#__PURE__*/React.forwardRef(function (props, ref) {
           })
         }), (!simpleMode || !isPlay) && /*#__PURE__*/_jsx("span", {
           ref: rangeRef,
-          onClick: function onClick() {
-            setOpen(true);
-            setTooltipOpen(true);
-          },
-          children: /*#__PURE__*/_jsx(DatePicker.RangePicker, _objectSpread(_objectSpread({
-            className: classNames("".concat(prefix, "-picker")),
-            style: {
-              // pointerEvents: 'none',
-              border: 0
+          className: "".concat(prefix, "-editable-wrapper"),
+          children: /*#__PURE__*/_jsx(EditableDateTimeInput, _objectSpread({
+            ref: editableInputRef,
+            prefixCls: prefixCls,
+            value: innerValue,
+            onChange: function onChange(newValue) {
+              datePickerChange(newValue);
             },
-            format: function format(v) {
-              // format 会影响布局，原先采用 v.year() === new Date().getFullYear() 进行判断，value 一共会传入三次(range0 range1 now), 会传入最新的时间导致判断异常
-              if (hideYear && isThisYear) {
-                return hideSecond ? v.format(isCn ? DATE_TIME_FORMAT_CN : DATE_TIME_FORMAT) : v.format(isCn ? DATE_TIME_SECOND_FORMAT_CN : DATE_TIME_SECOND_FORMAT);
-              }
-              return hideSecond ? v.format(isCn ? YEAR_DATE_TIME_FORMAT_CN : YEAR_DATE_TIME_FORMAT) : v.format(isCn ? YEAR_DATE_TIME_SECOND_FORMAT_CN : YEAR_DATE_TIME_SECOND_FORMAT);
+            hideYear: hideYear && isThisYear,
+            hideSecond: hideSecond,
+            isMoment: isMoment,
+            isCn: isCn,
+            format: (rest === null || rest === void 0 ? void 0 : rest.format) || YEAR_DATE_TIME_SECOND_FORMAT_CN,
+            open: open,
+            onClick: function onClick() {
+              setOpen(true);
+              setTooltipOpen(true);
             }
-            // @ts-ignore
-            ,
-            value: innerValue,
-            onChange: datePickerChange,
-            allowClear: false,
-            size: size,
-            suffixIcon: null
-            // 透传 props 到 antd Ranger
-          }, omit(rest, 'value', 'onChange', 'style', 'className')), {}, {
-            open: false
-          }))
+          }, omit(rest, 'value', 'onChange', 'style', 'className', 'onClick', 'disabled', 'format')))
         })]
-      }), /*#__PURE__*/_jsxs(Radio.Group, {
+      }), (hasRewind || hasForward) && /*#__PURE__*/_jsxs(Radio.Group, {
         value: isPlay ? 'play' : '',
         className: "".concat(prefix, "-playback-control"),
         buttonStyle: "solid",
@@ -552,6 +563,7 @@ var Ranger = /*#__PURE__*/React.forwardRef(function (props, ref) {
           },
           children: /*#__PURE__*/_jsx(Radio.Button, {
             value: "stepBack",
+            "aria-label": locale.jumpBack,
             style: {
               paddingInline: 8,
               borderInlineStart: 0,
@@ -574,7 +586,9 @@ var Ranger = /*#__PURE__*/React.forwardRef(function (props, ref) {
                 rangeChange([newStartTime, newEndTime]);
               }
             },
-            children: /*#__PURE__*/_jsx(LeftOutlined, {})
+            children: /*#__PURE__*/_jsx(LeftOutlined, {
+              "aria-hidden": true
+            })
           })
         }), hasForward && /*#__PURE__*/_jsx(Tooltip, {
           title: locale.jumpForward,
@@ -583,9 +597,9 @@ var Ranger = /*#__PURE__*/React.forwardRef(function (props, ref) {
           },
           children: /*#__PURE__*/_jsx(Radio.Button, {
             value: "stepForward",
+            "aria-label": locale.jumpForward,
             style: {
               paddingInline: 8,
-              borderInlineStart: 0,
               borderTopLeftRadius: 0,
               borderBottomLeftRadius: 0
             }
@@ -603,11 +617,14 @@ var Ranger = /*#__PURE__*/React.forwardRef(function (props, ref) {
                 }
               }
             },
-            children: /*#__PURE__*/_jsx(RightOutlined, {})
+            children: /*#__PURE__*/_jsx(RightOutlined, {
+              "aria-hidden": true
+            })
           })
         })]
       })]
     }), hasSync && rangeName !== CUSTOMIZE && /*#__PURE__*/_jsx(Button, {
+      "aria-label": locale.syncToCurrent,
       style: {
         paddingInline: 8,
         color: token.colorTextSecondary
@@ -615,8 +632,11 @@ var Ranger = /*#__PURE__*/React.forwardRef(function (props, ref) {
       onClick: function onClick() {
         setNow();
       },
-      children: /*#__PURE__*/_jsx(SyncOutlined, {})
+      children: /*#__PURE__*/_jsx(SyncOutlined, {
+        "aria-hidden": true
+      })
     }), hasZoomOut && /*#__PURE__*/_jsx(Button, {
+      "aria-label": locale.zoomOutRange,
       disabled: !nextRangeItem,
       style: {
         color: token.colorTextSecondary
@@ -629,9 +649,11 @@ var Ranger = /*#__PURE__*/React.forwardRef(function (props, ref) {
           return;
         }
       },
-      icon: /*#__PURE__*/_jsx(ZoomOutOutlined, {})
+      icon: /*#__PURE__*/_jsx(ZoomOutOutlined, {
+        "aria-hidden": true
+      })
     })]
-  });
+  }));
 });
 export default LocaleWrapper({
   componentName: 'DateRanger',

package/es/DateRanger/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export { useSegmentedInput } from './useSegmentedInput';
+export { useAutoWidthInput } from './useAutoWidthInput';
+export type { UseSegmentedInputOptions, UseSegmentedInputReturn } from './useSegmentedInput';
+export type { UseAutoWidthInputOptions, UseAutoWidthInputReturn } from './useAutoWidthInput';

package/es/DateRanger/hooks/index.js

@@ -0,0 +1,2 @@
+export { useSegmentedInput } from "./useSegmentedInput";
+export { useAutoWidthInput } from "./useAutoWidthInput";

package/es/DateRanger/hooks/useAutoWidthInput.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { InputRef } from '@oceanbase/design';
+export interface UseAutoWidthInputOptions {
+    inputRef: React.RefObject<InputRef>;
+    value: string;
+    minWidth?: number;
+    extraWidth?: number;
+}
+export interface UseAutoWidthInputReturn {
+    inputWidth: number;
+    sizerRef: React.RefObject<HTMLSpanElement>;
+}
+export declare const useAutoWidthInput: (options: UseAutoWidthInputOptions) => UseAutoWidthInputReturn;

package/es/DateRanger/hooks/useAutoWidthInput.js

@@ -0,0 +1,44 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import { useLayoutEffect, useRef, useState } from 'react';
+var getHorizontalSpacing = function getHorizontalSpacing(computedStyle) {
+  return (parseFloat(computedStyle.paddingLeft) || 0) + (parseFloat(computedStyle.paddingRight) || 0) + (parseFloat(computedStyle.borderLeftWidth) || 0) + (parseFloat(computedStyle.borderRightWidth) || 0);
+};
+var getSizingValue = function getSizingValue(value) {
+  return value ? value.replace(/\d/g, '0') : "\xA0";
+};
+export var useAutoWidthInput = function useAutoWidthInput(options) {
+  var inputRef = options.inputRef,
+    value = options.value,
+    _options$minWidth = options.minWidth,
+    minWidth = _options$minWidth === void 0 ? 80 : _options$minWidth,
+    _options$extraWidth = options.extraWidth,
+    extraWidth = _options$extraWidth === void 0 ? 0 : _options$extraWidth;
+  var sizerRef = useRef(null);
+  var _useState = useState(minWidth),
+    _useState2 = _slicedToArray(_useState, 2),
+    inputWidth = _useState2[0],
+    setInputWidth = _useState2[1];
+  useLayoutEffect(function () {
+    var _inputRef$current;
+    var nativeInput = (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.input;
+    var sizer = sizerRef.current;
+    if (!nativeInput || !sizer) {
+      return;
+    }
+    var computedStyle = window.getComputedStyle(nativeInput);
+    sizer.style.font = computedStyle.font;
+    sizer.style.letterSpacing = computedStyle.letterSpacing;
+    sizer.style.fontVariantNumeric = computedStyle.fontVariantNumeric;
+    sizer.textContent = getSizingValue(value);
+    setInputWidth(Math.max(minWidth, Math.ceil(sizer.getBoundingClientRect().width + getHorizontalSpacing(computedStyle) + extraWidth)));
+  }, [extraWidth, inputRef, minWidth, value]);
+  return {
+    inputWidth: inputWidth,
+    sizerRef: sizerRef
+  };
+};

package/es/DateRanger/hooks/useSegmentedInput.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import type { Dayjs } from 'dayjs';
+import type { Moment } from 'moment';
+import 'dayjs/locale/en';
+import 'dayjs/locale/zh-cn';
+import type { InputRef } from '@oceanbase/design';
+export interface UseSegmentedInputOptions {
+    value?: [Dayjs | Moment | null, Dayjs | Moment | null];
+    onChange?: (value: [Dayjs | Moment, Dayjs | Moment]) => void;
+    format: string;
+    baseFormat: string;
+    isMoment?: boolean;
+    isCn?: boolean;
+    onClick?: () => void;
+    locale?: string;
+    open?: boolean;
+}
+export interface UseSegmentedInputReturn {
+    inputRef: React.RefObject<InputRef>;
+    isEditing: boolean;
+    displayValue: string;
+    handleClick: (e: React.MouseEvent<HTMLInputElement>) => void;
+    handleDoubleClick: (e: React.MouseEvent<HTMLInputElement>) => void;
+    handleBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
+    handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    confirmPastedValue: () => void;
+    hasPastedValue: boolean;
+    getPastedValue: () => [Dayjs | Moment, Dayjs | Moment] | null;
+}
+export declare const useSegmentedInput: (options: UseSegmentedInputOptions) => UseSegmentedInputReturn;
+export default useSegmentedInput;