@oceanbase/ui 1.0.0-alpha.16 → 1.0.0-alpha.18

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
@@ -127,8 +135,8 @@ export var genDateRangerStyle = function genDateRangerStyle(token) {
       cursor: 'not-allowed',
       opacity: 0.6
     }
-  }), "".concat(componentCls, "-range-editable-input"), {
-    width: 290,
+  }), _defineProperty(_ref, "".concat(componentCls, "-range-editable-input"), {
+    width: 310,
     cursor: 'text',
     caretColor: 'transparent',
     '&:focus, &:focus-within': _defineProperty({}, "".concat(antCls, "-input"), {

package/es/Highlight/index.d.ts

@@ -28,7 +28,7 @@ export declare const THEME_DARK = "dark";
 export declare const THEME_LIGHT = "light";
 declare const ThemeTypes: ["dark", "light"];
 export type ThemeType = (typeof ThemeTypes)[number];
-declare const supportedLanguages: ("ruby" | "css" | "json" | "jsx" | "tsx" | "javascript" | "typescript" | "groovy" | "java" | "python" | "bash" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "go" | "yaml" | "solidity")[];
+declare const supportedLanguages: ("css" | "json" | "jsx" | "tsx" | "ruby" | "javascript" | "typescript" | "groovy" | "java" | "python" | "bash" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "go" | "yaml" | "solidity")[];
 export type LanguageType = (typeof supportedLanguages)[number] | 'html';
 export interface HighlightProps extends LocaleWrapperProps {
     /**

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

@@ -12,7 +12,7 @@ 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 +24,8 @@ const EditableDateTimeInput = props => {
     className,
     prefixCls = 'ant-picker',
     disabled = false,
-    onClick
+    onClick,
+    open = false
   } = props;
 
   // 根据配置生成格式，优先使用外部传入的 format
@@ -70,9 +71,10 @@ const EditableDateTimeInput = props => {
     displayValue,
     handleClick,
     handleDoubleClick,
-    handleKeyDown,
     handleBlur,
-    handlePaste
+    handleKeyDown,
+    hasPastedValue,
+    confirmPastedValue
   } = (0, _useSegmentedInput.useSegmentedInput)({
     value,
     onChange,
@@ -80,8 +82,15 @@ const EditableDateTimeInput = props => {
     baseFormat,
     isMoment,
     isCn,
-    onClick
+    onClick,
+    open
   });
+
+  // 暴露方法给父组件
+  (0, _react.useImperativeHandle)(ref, () => ({
+    hasPastedValue,
+    confirmPastedValue
+  }));
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: (0, _classnames.default)(`${prefixCls}-range-editable`, className, {
       [`${prefixCls}-range-editable-focused`]: isEditing,
@@ -96,12 +105,10 @@ const EditableDateTimeInput = props => {
       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/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,2 @@
 export { useSegmentedInput } from './useSegmentedInput';
-export type { Segment, SegmentType, RangeType, UseSegmentedInputOptions, UseSegmentedInputReturn, } from './useSegmentedInput';
+export type { UseSegmentedInputOptions, UseSegmentedInputReturn } from './useSegmentedInput';

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;