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

package/lib/DateRanger/hooks/useSegmentedInput.js

@@ -6,114 +6,49 @@ Object.defineProperty(exports, "__esModule", {
 exports.useSegmentedInput = exports.default = void 0;
 var _react = require("react");
 var _dayjs = _interopRequireDefault(require("dayjs"));
+require("dayjs/locale/en");
+require("dayjs/locale/zh-cn");
 var _moment = _interopRequireDefault(require("moment"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-// 日期时间段的类型定义
-
-// 分隔符
-const RANGE_SEPARATOR = ' ~ ';
-
-// 段落配置表
-const SEGMENT_CONFIG = {
-  YYYY: {
-    type: 'year',
-    length: 4,
-    min: 1900,
-    max: 2100
-  },
-  MM: {
-    type: 'month',
-    length: 2,
-    min: 1,
-    max: 12
-  },
-  DD: {
-    type: 'day',
-    length: 2,
-    min: 1,
-    max: 31
-  },
-  HH: {
-    type: 'hour',
-    length: 2,
-    min: 0,
-    max: 23
-  },
-  mm: {
-    type: 'minute',
-    length: 2,
-    min: 0,
-    max: 59
-  },
-  ss: {
-    type: 'second',
-    length: 2,
-    min: 0,
-    max: 59
+// 常量
+const RANGE_SEPARATORS = [' ~ ', '~', ' - ', ' – ', ' — '];
+const TIMEZONE_PATTERN = /(\s*\(?(?:UTC|GMT)[+-]?\d*\)?)\s*$/i;
+
+// 格式化日期值，确保使用正确的 locale
+const formatDateValue = (date, formatStr, isMoment, isCn) => {
+  if (!date) return '';
+  const locale = isCn ? 'zh-cn' : 'en';
+  if (isMoment || _moment.default.isMoment(date)) {
+    return date.locale(locale).format(formatStr);
+  } else {
+    const dayjsInstance = _dayjs.default.isDayjs(date) ? date : (0, _dayjs.default)(date);
+    return dayjsInstance.locale(locale).format(formatStr);
   }
 };
 
-// 解析单个日期时间字符串的段落 - 根据 format 动态计算
-const parseDateTimeSegments = (format, dateValue, rangeType, offset) => {
-  if (!dateValue) return [];
-  const segments = [];
-  const patterns = ['YYYY', 'MM', 'DD', 'HH', 'mm', 'ss'];
-  for (const pattern of patterns) {
-    const formatIndex = format.indexOf(pattern);
-    if (formatIndex === -1) continue;
-    const config = SEGMENT_CONFIG[pattern];
-    const valueStart = formatIndex;
-    const valueEnd = formatIndex + config.length;
-    segments.push({
-      type: config.type,
-      range: rangeType,
-      start: offset + valueStart,
-      end: offset + valueEnd,
-      value: dateValue.substring(valueStart, valueEnd),
-      min: config.min,
-      max: config.max,
-      padLength: config.length
-    });
-  }
-  segments.sort((a, b) => a.start - b.start);
-  return segments;
-};
-
-// 根据光标位置找到当前段落
-const findSegmentByPosition = (segments, position) => {
-  for (const segment of segments) {
-    if (position >= segment.start && position <= segment.end) {
-      return segment;
-    }
-  }
-  let minDistance = Infinity;
-  let closestSegment = null;
-  for (const segment of segments) {
-    const distance = Math.min(Math.abs(position - segment.start), Math.abs(position - segment.end));
-    if (distance < minDistance) {
-      minDistance = distance;
-      closestSegment = segment;
+// 解析粘贴文本，提取开始和结束时间字符串
+const parsePastedText = text => {
+  for (const sep of RANGE_SEPARATORS) {
+    if (text.includes(sep)) {
+      const parts = text.split(sep);
+      if (parts.length === 2) {
+        return [parts[0].trim(), parts[1].trim()];
+      }
     }
   }
-  return closestSegment;
+  // 如果没有找到分隔符，使用整个文本作为开始和结束时间
+  return [text, text];
 };
 
-// 获取下一个段落
-const getNextSegment = (segments, currentSegment) => {
-  const currentIndex = segments.findIndex(s => s.range === currentSegment.range && s.type === currentSegment.type);
-  if (currentIndex < segments.length - 1) {
-    return segments[currentIndex + 1];
-  }
-  return null;
-};
+// 解析日期字符串
+const parseDateString = (dateStr, formatStr, isMoment) => {
+  const strictParsed = isMoment ? (0, _moment.default)(dateStr, formatStr, true) : (0, _dayjs.default)(dateStr, formatStr, true);
 
-// 获取上一个段落
-const getPrevSegment = (segments, currentSegment) => {
-  const currentIndex = segments.findIndex(s => s.range === currentSegment.range && s.type === currentSegment.type);
-  if (currentIndex > 0) {
-    return segments[currentIndex - 1];
+  // 如果严格解析失败，尝试宽松解析
+  if (strictParsed.isValid()) {
+    return strictParsed;
   }
-  return null;
+  return isMoment ? (0, _moment.default)(dateStr) : (0, _dayjs.default)(dateStr);
 };
 const useSegmentedInput = options => {
   const {
@@ -123,250 +58,175 @@ const useSegmentedInput = options => {
     baseFormat,
     isMoment = false,
     isCn = true,
-    onClick
+    onClick,
+    open = false
   } = options;
   const inputRef = (0, _react.useRef)(null);
   const [isEditing, setIsEditing] = (0, _react.useState)(false);
-  const [inputBuffer, setInputBuffer] = (0, _react.useState)('');
-  const [currentSegmentKey, setCurrentSegmentKey] = (0, _react.useState)(null);
-
-  // 格式化日期值为字符串
-  const formatValue = (0, _react.useCallback)((v, includeTimezone = true) => {
-    if (!v) return '';
-    const formatToUse = includeTimezone ? format : baseFormat;
-    return v.format(formatToUse);
-  }, [format, baseFormat]);
-
-  // 开始时间不包含时区后缀，结束时间包含
-  const startValue = (0, _react.useMemo)(() => formatValue(value?.[0] || null, false), [value, formatValue]);
-  const endValue = (0, _react.useMemo)(() => formatValue(value?.[1] || null, true), [value, formatValue]);
-
-  // 合并后的显示值
-  const displayValue = (0, _react.useMemo)(() => {
-    if (!startValue && !endValue) return '';
-    return `${startValue}${RANGE_SEPARATOR}${endValue}`;
-  }, [startValue, endValue]);
-
-  // 解析所有段落
-  const allSegments = (0, _react.useMemo)(() => {
-    const startSegments = parseDateTimeSegments(baseFormat, startValue, 'start', 0);
-    const endOffset = startValue.length + RANGE_SEPARATOR.length;
-    const endSegments = parseDateTimeSegments(format, endValue, 'end', endOffset);
-    return [...startSegments, ...endSegments];
-  }, [baseFormat, format, startValue, endValue]);
-
-  // 动态获取当前段落
-  const currentSegment = (0, _react.useMemo)(() => {
-    if (!currentSegmentKey) return null;
-    return allSegments.find(s => `${s.range}-${s.type}` === currentSegmentKey) || null;
-  }, [currentSegmentKey, allSegments]);
-
-  // 创建新的日期对象
-  const createDate = (0, _react.useCallback)((dateStr, rangeType) => {
-    const formatToUse = rangeType === 'start' ? baseFormat : format;
-    if (isMoment) {
-      return (0, _moment.default)(dateStr, formatToUse);
+  // 粘贴值：仅作为预览，只有确认后才触发 onChange
+  const [pastedValue, setPastedValue] = (0, _react.useState)(null);
+
+  // 根据语言环境设置分隔符
+  const rangeSeparator = (0, _react.useMemo)(() => isCn ? ' ~ ' : ' - ', [isCn]);
+
+  // 显示值：有粘贴值时显示粘贴值（预览），否则显示原始 value
+  const [displayValue, setDisplayValue] = (0, _react.useState)('');
+
+  // 同步更新显示值
+  (0, _react.useEffect)(() => {
+    const displayDate = pastedValue || value;
+    const startDate = displayDate?.[0];
+    const endDate = displayDate?.[1];
+    const startValue = formatDateValue(startDate, baseFormat, isMoment, isCn);
+    const endValue = formatDateValue(endDate, format, isMoment, isCn);
+    if (!startValue && !endValue) {
+      setDisplayValue('');
+    } else {
+      setDisplayValue(`${startValue}${rangeSeparator}${endValue}`);
+    }
+  }, [pastedValue, value, baseFormat, format, rangeSeparator, isMoment, isCn]);
+
+  // 当 value 更新为 pastedValue 时，清除 pastedValue（说明确定按钮已生效）
+  (0, _react.useEffect)(() => {
+    if (pastedValue && value) {
+      const isSameAsPasted = pastedValue[0]?.valueOf() === value[0]?.valueOf() && pastedValue[1]?.valueOf() === value[1]?.valueOf();
+      if (isSameAsPasted) {
+        setPastedValue(null);
+        setIsEditing(false);
+      }
     }
-    return (0, _dayjs.default)(dateStr, formatToUse);
-  }, [isMoment, format, baseFormat]);
+  }, [value, pastedValue]);
 
-  // 更新日期值
-  const updateValue = (0, _react.useCallback)((segment, newSegmentValue) => {
-    const which = segment.range;
-    const currentDateValue = which === 'start' ? startValue : endValue;
-    const paddedValue = newSegmentValue.padStart(segment.padLength, '0');
-    const baseOffset = which === 'start' ? 0 : startValue.length + RANGE_SEPARATOR.length;
-    const localStart = segment.start - baseOffset;
-    const localEnd = segment.end - baseOffset;
-    const newDateValue = currentDateValue.substring(0, localStart) + paddedValue + currentDateValue.substring(localEnd);
-    const newDate = createDate(newDateValue, which);
-    if (newDate.isValid()) {
-      const newRange = which === 'start' ? [newDate, value?.[1] || newDate] : [value?.[0] || newDate, newDate];
-      onChange?.(newRange);
+  // 确认粘贴：触发 onChange，清除粘贴状态
+  const confirmPastedValue = (0, _react.useCallback)(() => {
+    if (pastedValue) {
+      onChange?.(pastedValue);
+      setPastedValue(null);
+      setIsEditing(false);
     }
-  }, [startValue, endValue, value, onChange, createDate]);
+  }, [pastedValue, onChange]);
 
-  // 选中指定段落
-  const selectSegment = (0, _react.useCallback)(segment => {
-    if (inputRef.current) {
-      inputRef.current.focus();
-      inputRef.current?.input?.setSelectionRange(segment.start, segment.end);
-      setCurrentSegmentKey(`${segment.range}-${segment.type}`);
-      setInputBuffer('');
-    }
+  // 取消粘贴：清除粘贴值，回到初始值
+  const cancelPastedValue = (0, _react.useCallback)(() => {
+    setPastedValue(null);
+    setIsEditing(false);
+    inputRef.current?.input?.blur();
   }, []);
 
-  // 处理单击事件
+  // 单击获取焦点
   const handleClick = (0, _react.useCallback)(e => {
     e.stopPropagation();
     setIsEditing(true);
+    // 让 input 获得焦点
+    setTimeout(() => {
+      inputRef.current?.input?.focus();
+    }, 0);
     onClick?.();
-    const cursorPos = inputRef.current?.input?.selectionStart || 0;
-    const segment = findSegmentByPosition(allSegments, cursorPos);
-    if (segment) {
-      selectSegment(segment);
-    }
-  }, [allSegments, selectSegment, onClick]);
+  }, [onClick]);
 
-  // 处理双击事件
+  // 双击获取焦点并全选
   const handleDoubleClick = (0, _react.useCallback)(e => {
     e.stopPropagation();
-    e.preventDefault();
     setIsEditing(true);
-    setCurrentSegmentKey(null);
     inputRef.current?.input?.select();
   }, []);
 
-  // 处理键盘输入
-  const handleKeyDown = (0, _react.useCallback)(e => {
-    if (!currentSegment) return;
-    const key = e.key;
+  // 面板打开时，让 input 获得焦点
+  (0, _react.useEffect)(() => {
+    if (open) {
+      // 延迟获取焦点，确保面板已渲染
+      const timer = setTimeout(() => {
+        inputRef.current?.input?.focus();
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [open]);
+
+  // 检查焦点是否在面板内（参考 ant-design 的实现）
+  const isFocusInPanel = (0, _react.useCallback)(relatedTarget => {
+    if (!relatedTarget) return false;
+    const panelElement = document.querySelector('.ant-picker-dropdown, .ant-dropdown, [class*="ranger-picker-panel"]');
+    return panelElement ? panelElement.contains(relatedTarget) : false;
+  }, []);
 
-    // 处理数字输入
-    if (/^\d$/.test(key)) {
-      e.preventDefault();
-      const newBuffer = inputBuffer + key;
-      setInputBuffer(newBuffer);
-      const numValue = parseInt(newBuffer, 10);
-      const shouldJump = newBuffer.length >= currentSegment.padLength || numValue * 10 > currentSegment.max;
-      if (shouldJump) {
-        const clampedValue = Math.max(currentSegment.min, Math.min(currentSegment.max, numValue));
-        updateValue(currentSegment, String(clampedValue));
-        const nextSegment = getNextSegment(allSegments, currentSegment);
-        if (nextSegment) {
-          setTimeout(() => selectSegment(nextSegment), 0);
-        }
-      } else {
-        updateValue(currentSegment, newBuffer);
-      }
-      return;
-    }
+  // 失去焦点处理（如果焦点在面板内，直接返回，不处理）
+  const handleBlur = (0, _react.useCallback)(e => {
+    const relatedTarget = e.relatedTarget;
 
-    // 处理左右箭头
-    if (key === 'ArrowLeft') {
-      e.preventDefault();
-      const prevSegment = getPrevSegment(allSegments, currentSegment);
-      if (prevSegment) {
-        selectSegment(prevSegment);
-      }
-      return;
-    }
-    if (key === 'ArrowRight') {
-      e.preventDefault();
-      const nextSegment = getNextSegment(allSegments, currentSegment);
-      if (nextSegment) {
-        selectSegment(nextSegment);
-      }
+    // 不强制重新获取焦点，允许用户在面板中的 input 正常编辑
+    if (isFocusInPanel(relatedTarget)) {
       return;
     }
 
-    // 处理上下箭头调整数值
-    if (key === 'ArrowUp' || key === 'ArrowDown') {
-      e.preventDefault();
-      const currentNum = parseInt(currentSegment.value, 10);
-      const delta = key === 'ArrowUp' ? 1 : -1;
-      let newNum = currentNum + delta;
-      if (newNum > currentSegment.max) {
-        newNum = currentSegment.min;
-      } else if (newNum < currentSegment.min) {
-        newNum = currentSegment.max;
+    // 焦点不在面板内，清除粘贴值
+    // 但是，如果 value 已经更新为 pastedValue，说明确定按钮已经生效，不应该清除
+    if (pastedValue) {
+      // 检查 value 是否已经更新为 pastedValue
+      const isValueUpdated = value && pastedValue[0]?.valueOf() === value[0]?.valueOf() && pastedValue[1]?.valueOf() === value[1]?.valueOf();
+
+      // 只有当 value 还没有更新为 pastedValue 时，才清除 pastedValue
+      // 这样可以避免在确定按钮点击后，失去焦点时清除已确认的值
+      if (!isValueUpdated) {
+        setPastedValue(null);
+        setIsEditing(false);
       }
-      updateValue(currentSegment, String(newNum));
-      setTimeout(() => {
-        if (inputRef.current?.input && currentSegment) {
-          inputRef.current.input.setSelectionRange(currentSegment.start, currentSegment.end);
-        }
-      }, 0);
-      return;
     }
+  }, [isFocusInPanel, pastedValue, value]);
 
-    // 处理 Tab 键
-    if (key === 'Tab') {
-      const nextSegment = e.shiftKey ? getPrevSegment(allSegments, currentSegment) : getNextSegment(allSegments, currentSegment);
-      if (nextSegment) {
-        e.preventDefault();
-        selectSegment(nextSegment);
-      }
-      return;
+  // 解析粘贴文本并设置预览值
+  const processPaste = (0, _react.useCallback)(async pastedText => {
+    if (!pastedText.trim()) return;
+    const [startStr, endStr] = parsePastedText(pastedText.trim());
+    const formatWithoutTimezone = format.replace(TIMEZONE_PATTERN, '');
+    const parsedStart = parseDateString(startStr, baseFormat, isMoment);
+    const parsedEnd = parseDateString(endStr, formatWithoutTimezone, isMoment);
+    if (parsedStart.isValid() && parsedEnd.isValid()) {
+      setPastedValue([parsedStart, parsedEnd]);
+      setIsEditing(true);
     }
+  }, [isMoment, format, baseFormat]);
 
-    // 阻止删除和其他非法输入
-    if (key === 'Backspace' || key === 'Delete' || !e.ctrlKey && !e.metaKey && key.length === 1 && !/\d/.test(key)) {
+  // 键盘事件：Ctrl+V 粘贴，Enter 确认，Escape 取消
+  const handleKeyDown = (0, _react.useCallback)(async e => {
+    // Ctrl+V / Cmd+V 粘贴
+    if ((e.ctrlKey || e.metaKey) && e.key === 'v') {
       e.preventDefault();
+      try {
+        const text = await navigator.clipboard.readText();
+        await processPaste(text);
+      } catch (error) {
+        console.warn('Failed to read clipboard:', error);
+      }
       return;
     }
-  }, [currentSegment, inputBuffer, allSegments, selectSegment, updateValue]);
+    if (!pastedValue) return;
 
-  // 处理失焦事件
-  const handleBlur = (0, _react.useCallback)(e => {
-    if (currentSegment && inputBuffer) {
-      const numValue = parseInt(inputBuffer, 10);
-      const clampedValue = Math.max(currentSegment.min, Math.min(currentSegment.max, numValue));
-      updateValue(currentSegment, String(clampedValue));
-    }
-    setIsEditing(false);
-    setCurrentSegmentKey(null);
-    setInputBuffer('');
-  }, [currentSegment, inputBuffer, updateValue]);
-
-  // 处理粘贴事件
-  const handlePaste = (0, _react.useCallback)(e => {
-    e.preventDefault();
-    const pastedText = e.clipboardData.getData('text').trim();
-    if (!pastedText) return;
-    const separators = [' ~ ', '~', ' - ', ' – ', ' — '];
-    let startStr = '';
-    let endStr = '';
-    for (const sep of separators) {
-      if (pastedText.includes(sep)) {
-        const parts = pastedText.split(sep);
-        if (parts.length === 2) {
-          startStr = parts[0].trim();
-          endStr = parts[1].trim();
-          break;
-        }
-      }
-    }
-    if (!startStr && !endStr) {
-      startStr = pastedText;
-      endStr = pastedText;
-    }
-    const formats = ['YYYY-MM-DD HH:mm:ss', 'YYYY-MM-DD HH:mm', 'YYYY/MM/DD HH:mm:ss', 'YYYY/MM/DD HH:mm', 'MM/DD/YYYY HH:mm:ss', 'MM/DD/YYYY HH:mm', 'YYYY-MM-DD', 'YYYY/MM/DD', 'MM/DD/YYYY'];
-    let parsedStart = null;
-    let parsedEnd = null;
-    for (const fmt of formats) {
-      const tryStart = isMoment ? (0, _moment.default)(startStr, fmt, true) : (0, _dayjs.default)(startStr, fmt, true);
-      if (tryStart.isValid()) {
-        parsedStart = tryStart;
-        break;
-      }
-    }
-    for (const fmt of formats) {
-      const tryEnd = isMoment ? (0, _moment.default)(endStr, fmt, true) : (0, _dayjs.default)(endStr, fmt, true);
-      if (tryEnd.isValid()) {
-        parsedEnd = tryEnd;
-        break;
-      }
+    // Enter 确认粘贴
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      confirmPastedValue();
     }
-    if (parsedStart && parsedEnd) {
-      onChange?.([parsedStart, parsedEnd]);
-    } else if (parsedStart) {
-      onChange?.([parsedStart, value?.[1] || parsedStart]);
-    } else if (parsedEnd) {
-      onChange?.([value?.[0] || parsedEnd, parsedEnd]);
+    // Escape 取消粘贴
+    else if (e.key === 'Escape') {
+      e.preventDefault();
+      cancelPastedValue();
     }
-  }, [isMoment, onChange, value]);
+  }, [pastedValue, confirmPastedValue, cancelPastedValue, processPaste]);
+  // 获取粘贴值
+  const getPastedValue = (0, _react.useCallback)(() => {
+    return pastedValue;
+  }, [pastedValue]);
   return {
     inputRef,
     isEditing,
     displayValue,
-    currentSegment,
-    allSegments,
     handleClick,
     handleDoubleClick,
-    handleKeyDown,
     handleBlur,
-    handlePaste
+    handleKeyDown,
+    confirmPastedValue,
+    hasPastedValue: !!pastedValue,
+    getPastedValue
   };
 };
 exports.useSegmentedInput = useSegmentedInput;

package/lib/DateRanger/style/index.js

@@ -130,6 +130,19 @@ const genDateRangerStyle = token => {
       borderRadius: token.borderRadiusSM,
       textAlign: 'center'
     },
+    [`${componentCls}-dashed`]: {
+      [`${componentCls}-wrapper`]: {
+        borderStyle: 'dashed'
+      },
+      [`${componentCls}-playback-control`]: {
+        [`${antCls}-radio-button-wrapper`]: {
+          borderStyle: 'dashed',
+          '&::before': {
+            borderStyle: 'dashed'
+          }
+        }
+      }
+    },
     [`${componentCls}-back-radio-focused`]: {
       [`${componentCls}-wrapper`]: {
         borderRightColor: token.gray7
@@ -177,7 +190,7 @@ const genDateRangerStyle = token => {
       }
     },
     [`${componentCls}-range-editable-input`]: {
-      width: 290,
+      width: 310,
       cursor: 'text',
       caretColor: 'transparent',
       '&:focus, &:focus-within': {

package/lib/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oceanbase/ui",
-  "version": "1.0.0-alpha.16",
+  "version": "1.0.0-alpha.18",
   "description": "The UI library based on OceanBase Design",
   "keywords": [
     "oceanbase",
@@ -38,7 +38,7 @@
     "@ant-design/cssinjs": "^1.24.0",
     "@ant-design/pro-components": "^2.8.10",
     "@inline-svg-unique-id/react": "^1.2.3",
-    "@oceanbase/design": "^1.0.0-alpha.16",
+    "@oceanbase/design": "^1.0.0-alpha.18",
     "@oceanbase/icons": "^1.0.0-alpha.1",
     "@oceanbase/util": "^1.0.0-alpha.2",
     "ahooks": "^2.10.14",
@@ -67,5 +67,5 @@
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "gitHead": "3ffc6229a727be838d48ffe8179518090d0c5620"
+  "gitHead": "fc43201ca1a59d2d8d54d0fece7fbb9dba9f7eb9"
 }