@oceanbase/ui 1.0.0-alpha.17 → 1.0.0-alpha.19

package/es/DateRanger/style/index.js

@@ -4,6 +4,7 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 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 { genComponentStyleHook } from "../../_util/genComponentStyleHook";
 export var genDateRangerStyle = function genDateRangerStyle(token) {
+  var _ref;
   var componentCls = token.componentCls,
     antCls = token.antCls,
     colorBgContainer = token.colorBgContainer,
@@ -12,7 +13,7 @@ export var genDateRangerStyle = function genDateRangerStyle(token) {
     colorTextSecondary = token.colorTextSecondary,
     colorFillSecondary = token.colorFillSecondary,
     colorFill = token.colorFill;
-  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(componentCls), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+  return _ref = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref, "".concat(componentCls), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     cursor: 'pointer'
   }, "".concat(componentCls, "-wrapper"), _defineProperty(_defineProperty({
     backgroundColor: colorBgContainer,
@@ -99,7 +100,14 @@ export var genDateRangerStyle = function genDateRangerStyle(token) {
     width: 52,
     borderRadius: token.borderRadiusSM,
     textAlign: 'center'
-  }), "".concat(componentCls, "-back-radio-focused"), _defineProperty(_defineProperty({}, "".concat(componentCls, "-wrapper"), {
+  }), "".concat(componentCls, "-dashed"), _defineProperty(_defineProperty({}, "".concat(componentCls, "-wrapper"), {
+    borderStyle: 'dashed'
+  }), "".concat(componentCls, "-playback-control"), _defineProperty({}, "".concat(antCls, "-radio-button-wrapper"), {
+    borderStyle: 'dashed',
+    '&::before': {
+      borderStyle: 'dashed'
+    }
+  }))), "".concat(componentCls, "-back-radio-focused"), _defineProperty(_defineProperty({}, "".concat(componentCls, "-wrapper"), {
     borderRightColor: token.gray7
   }), "".concat(componentCls, "-playback-control"), _defineProperty({}, "".concat(antCls, "-radio-button-wrapper:first-child"), _defineProperty({}, "+ ".concat(antCls, "-radio-button-wrapper::before"), {
     backgroundColor: token.gray7
@@ -120,6 +128,7 @@ export var genDateRangerStyle = function genDateRangerStyle(token) {
     display: 'inline-flex',
     alignItems: 'center'
   }), "".concat(componentCls, "-range-editable"), {
+    position: 'relative',
     display: 'inline-flex',
     alignItems: 'center',
     cursor: 'text',
@@ -127,10 +136,21 @@ export var genDateRangerStyle = function genDateRangerStyle(token) {
       cursor: 'not-allowed',
       opacity: 0.6
     }
+  }), _defineProperty(_defineProperty(_ref, "".concat(componentCls, "-range-editable-sizer"), {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    height: 0,
+    overflow: 'hidden',
+    whiteSpace: 'pre',
+    visibility: 'hidden',
+    pointerEvents: 'none'
   }), "".concat(componentCls, "-range-editable-input"), {
-    width: 290,
+    minWidth: 80,
+    maxWidth: '100%',
     cursor: 'text',
     caretColor: 'transparent',
+    fontVariantNumeric: 'tabular-nums',
     '&:focus, &:focus-within': _defineProperty({}, "".concat(antCls, "-input"), {
       caretColor: token.colorPrimary
     })

package/lib/DateRanger/EditableDateTimeInput.d.ts

@@ -13,6 +13,11 @@ export interface EditableDateTimeInputProps {
     prefixCls?: string;
     disabled?: boolean;
     onClick?: () => void;
+    open?: boolean;
 }
-declare const EditableDateTimeInput: React.FC<EditableDateTimeInputProps>;
+export interface EditableDateTimeInputRef {
+    hasPastedValue: boolean;
+    confirmPastedValue: () => void;
+}
+declare const EditableDateTimeInput: React.ForwardRefExoticComponent<EditableDateTimeInputProps & React.RefAttributes<EditableDateTimeInputRef>>;
 export default EditableDateTimeInput;

package/lib/DateRanger/EditableDateTimeInput.js

@@ -8,11 +8,12 @@ var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _design = require("@oceanbase/design");
 var _useSegmentedInput = require("./hooks/useSegmentedInput");
+var _useAutoWidthInput = require("./hooks/useAutoWidthInput");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const EditableDateTimeInput = props => {
+const EditableDateTimeInput = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
   const {
     value,
     onChange,
@@ -24,7 +25,8 @@ const EditableDateTimeInput = props => {
     className,
     prefixCls = 'ant-picker',
     disabled = false,
-    onClick
+    onClick,
+    open = false
   } = props;
 
   // 根据配置生成格式，优先使用外部传入的 format
@@ -70,9 +72,10 @@ const EditableDateTimeInput = props => {
     displayValue,
     handleClick,
     handleDoubleClick,
-    handleKeyDown,
     handleBlur,
-    handlePaste
+    handleKeyDown,
+    hasPastedValue,
+    confirmPastedValue
   } = (0, _useSegmentedInput.useSegmentedInput)({
     value,
     onChange,
@@ -80,28 +83,49 @@ const EditableDateTimeInput = props => {
     baseFormat,
     isMoment,
     isCn,
-    onClick
+    onClick,
+    open
+  });
+  const {
+    sizerRef,
+    inputWidth
+  } = (0, _useAutoWidthInput.useAutoWidthInput)({
+    inputRef,
+    value: displayValue,
+    minWidth: 80,
+    extraWidth: isCn ? 26 : 0
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+
+  // 暴露方法给父组件
+  (0, _react.useImperativeHandle)(ref, () => ({
+    hasPastedValue,
+    confirmPastedValue
+  }));
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
     className: (0, _classnames.default)(`${prefixCls}-range-editable`, className, {
       [`${prefixCls}-range-editable-focused`]: isEditing,
       [`${prefixCls}-range-editable-disabled`]: disabled
     }),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Input, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      ref: sizerRef,
+      className: `${prefixCls}-range-editable-sizer`,
+      "aria-hidden": true
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.Input, {
       ref: inputRef,
       className: `${prefixCls}-range-editable-input`,
+      style: {
+        width: inputWidth
+      },
       value: displayValue,
       readOnly: true,
       disabled: disabled,
       variant: "borderless",
       onClick: handleClick,
       onDoubleClick: handleDoubleClick,
-      onKeyDown: handleKeyDown
-      // onFocus={handleFocus}
-      ,
       onBlur: handleBlur,
-      onPaste: handlePaste
-    })
+      onKeyDown: handleKeyDown
+    })]
   });
-};
+});
+EditableDateTimeInput.displayName = 'EditableDateTimeInput';
 var _default = exports.default = EditableDateTimeInput;

package/lib/DateRanger/PickerPanel.js

@@ -171,7 +171,7 @@ const InternalPickerPanel = props => {
               }],
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.DatePicker, {
                 format: {
-                  format: 'YYYY-MM-DD',
+                  format: DATE_FORMAT,
                   type: 'mask'
                 },
                 style: {
@@ -243,7 +243,7 @@ const InternalPickerPanel = props => {
               }],
               children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_design.DatePicker, {
                 format: {
-                  format: 'YYYY-MM-DD',
+                  format: DATE_FORMAT,
                   type: 'mask'
                 },
                 style: {

package/lib/DateRanger/Ranger.d.ts

@@ -2,6 +2,7 @@ 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';
@@ -12,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;
@@ -37,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/lib/DateRanger/Ranger.js

@@ -8,6 +8,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _design = require("@oceanbase/design");
 var _icons = require("@oceanbase/icons");
 var _dayjs = _interopRequireDefault(require("dayjs"));
+require("dayjs/locale/zh-cn");
 var _lodash = require("lodash");
 var _moment = _interopRequireDefault(require("moment"));
 var _classnames = _interopRequireDefault(require("classnames"));
@@ -56,6 +57,7 @@ const Ranger = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     size,
     //固定 rangeName
     stickRangeName = false,
+    variant,
     tooltipProps,
     isMoment: isMomentProps,
     rules,
@@ -90,6 +92,7 @@ const Ranger = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const rangeRef = (0, _react.useRef)(null);
   const popRef = (0, _react.useRef)(null);
   const labelRef = (0, _react.useRef)(null);
+  const editableInputRef = (0, _react.useRef)(null);
 
   // 没有 selects 时，回退到普通 RangePicker, 当前时间选项为自定义时，应该显示 RangePicker
   const [isPlay, setIsPlay] = (0, _react.useState)(rangeName !== _constant.CUSTOMIZE);
@@ -258,6 +261,7 @@ const Ranger = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
     className: (0, _classnames.default)(rest.className, {
       [prefix]: true,
       [`${prefix}-show-range`]: true,
+      [`${prefix}-dashed`]: variant === 'dashed',
       [`${prefix}-back-radio-focused`]: backRadioFocused
     }),
     style: rest.style,
@@ -393,12 +397,21 @@ const Ranger = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
                 rules: rules,
                 hideSecond: hideSecond,
                 onOk: vList => {
-                  setIsPlay(false);
-                  handleNameChange(_constant.CUSTOMIZE);
-                  rangeChange(vList.map(v => {
-                    return isMoment ? (0, _moment.default)(v) : (0, _dayjs.default)(v);
-                  }));
-                  closeTooltip();
+                  // 如果有粘贴值，优先使用粘贴值
+                  if (editableInputRef.current?.hasPastedValue) {
+                    editableInputRef.current.confirmPastedValue();
+                    setIsPlay(false);
+                    handleNameChange(_constant.CUSTOMIZE);
+                    closeTooltip();
+                  } else {
+                    // 否则使用面板中的值
+                    setIsPlay(false);
+                    handleNameChange(_constant.CUSTOMIZE);
+                    rangeChange(vList.map(v => {
+                      return isMoment ? (0, _moment.default)(v) : (0, _dayjs.default)(v);
+                    }));
+                    closeTooltip();
+                  }
                 },
                 onCancel: () => {
                   closeTooltip();
@@ -461,6 +474,7 @@ const Ranger = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
           ref: rangeRef,
           className: `${prefix}-editable-wrapper`,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_EditableDateTimeInput.default, {
+            ref: editableInputRef,
             prefixCls: prefixCls,
             value: innerValue,
             onChange: newValue => {
@@ -470,11 +484,13 @@ const Ranger = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
             hideSecond: hideSecond,
             isMoment: isMoment,
             isCn: isCn,
+            format: rest?.format || _constant.YEAR_DATE_TIME_SECOND_FORMAT_CN,
+            open: open,
             onClick: () => {
               setOpen(true);
               setTooltipOpen(true);
             },
-            ...(0, _lodash.omit)(rest, 'value', 'onChange', 'style', 'className', 'onClick', 'format', 'disabled')
+            ...(0, _lodash.omit)(rest, 'value', 'onChange', 'style', 'className', 'onClick', 'disabled', 'format')
           })
         })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_design.Radio.Group, {

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

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

package/lib/DateRanger/hooks/index.js

@@ -3,10 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "useAutoWidthInput", {
+  enumerable: true,
+  get: function () {
+    return _useAutoWidthInput.useAutoWidthInput;
+  }
+});
 Object.defineProperty(exports, "useSegmentedInput", {
   enumerable: true,
   get: function () {
     return _useSegmentedInput.useSegmentedInput;
   }
 });
-var _useSegmentedInput = require("./useSegmentedInput");
+var _useSegmentedInput = require("./useSegmentedInput");
+var _useAutoWidthInput = require("./useAutoWidthInput");

package/lib/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/lib/DateRanger/hooks/useAutoWidthInput.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useAutoWidthInput = void 0;
+var _react = require("react");
+const getHorizontalSpacing = computedStyle => (parseFloat(computedStyle.paddingLeft) || 0) + (parseFloat(computedStyle.paddingRight) || 0) + (parseFloat(computedStyle.borderLeftWidth) || 0) + (parseFloat(computedStyle.borderRightWidth) || 0);
+const getSizingValue = value => value ? value.replace(/\d/g, '0') : '\u00a0';
+const useAutoWidthInput = options => {
+  const {
+    inputRef,
+    value,
+    minWidth = 80,
+    extraWidth = 0
+  } = options;
+  const sizerRef = (0, _react.useRef)(null);
+  const [inputWidth, setInputWidth] = (0, _react.useState)(minWidth);
+  (0, _react.useLayoutEffect)(() => {
+    const nativeInput = inputRef.current?.input;
+    const sizer = sizerRef.current;
+    if (!nativeInput || !sizer) {
+      return;
+    }
+    const 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,
+    sizerRef
+  };
+};
+exports.useAutoWidthInput = useAutoWidthInput;

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

@@ -1,19 +1,9 @@
 /// <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 type SegmentType = 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second';
-export type RangeType = 'start' | 'end';
-export interface Segment {
-    type: SegmentType;
-    range: RangeType;
-    start: number;
-    end: number;
-    value: string;
-    min: number;
-    max: number;
-    padLength: number;
-}
 export interface UseSegmentedInputOptions {
     value?: [Dayjs | Moment | null, Dayjs | Moment | null];
     onChange?: (value: [Dayjs | Moment, Dayjs | Moment]) => void;
@@ -22,18 +12,20 @@ export interface UseSegmentedInputOptions {
     isMoment?: boolean;
     isCn?: boolean;
     onClick?: () => void;
+    locale?: string;
+    open?: boolean;
 }
 export interface UseSegmentedInputReturn {
     inputRef: React.RefObject<InputRef>;
     isEditing: boolean;
     displayValue: string;
-    currentSegment: Segment | null;
-    allSegments: Segment[];
     handleClick: (e: React.MouseEvent<HTMLInputElement>) => void;
     handleDoubleClick: (e: React.MouseEvent<HTMLInputElement>) => void;
-    handleKeyDown: (e: React.KeyboardEvent<HTMLInputElement>) => void;
     handleBlur: (e: React.FocusEvent<HTMLInputElement>) => void;
-    handlePaste: (e: React.ClipboardEvent<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;