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

package/es/DateRanger/EditableDateTimeInput.js

@@ -7,7 +7,9 @@ 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,
@@ -84,6 +86,14 @@ var EditableDateTimeInput = /*#__PURE__*/forwardRef(function (props, ref) {
     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 () {
@@ -92,11 +102,18 @@ var EditableDateTimeInput = /*#__PURE__*/forwardRef(function (props, ref) {
       confirmPastedValue: confirmPastedValue
     };
   });
-  return /*#__PURE__*/_jsx("div", {
+  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(Input, {
+    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,
@@ -105,7 +122,7 @@ var EditableDateTimeInput = /*#__PURE__*/forwardRef(function (props, ref) {
       onDoubleClick: handleDoubleClick,
       onBlur: handleBlur,
       onKeyDown: handleKeyDown
-    })
+    })]
   });
 });
 EditableDateTimeInput.displayName = 'EditableDateTimeInput';

package/es/DateRanger/PickerPanel.js

@@ -211,7 +211,7 @@ var InternalPickerPanel = function InternalPickerPanel(props) {
               }],
               children: /*#__PURE__*/_jsx(DatePicker, {
                 format: {
-                  format: 'YYYY-MM-DD',
+                  format: DATE_FORMAT,
                   type: 'mask'
                 },
                 style: {
@@ -287,7 +287,7 @@ var InternalPickerPanel = function InternalPickerPanel(props) {
               }],
               children: /*#__PURE__*/_jsx(DatePicker, {
                 format: {
-                  format: 'YYYY-MM-DD',
+                  format: DATE_FORMAT,
                   type: 'mask'
                 },
                 style: {

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

@@ -1,2 +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

@@ -1 +1,2 @@
-export { useSegmentedInput } from "./useSegmentedInput";
+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/style/index.js

@@ -128,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',
@@ -135,10 +136,21 @@ export var genDateRangerStyle = function genDateRangerStyle(token) {
       cursor: 'not-allowed',
       opacity: 0.6
     }
-  }), _defineProperty(_ref, "".concat(componentCls, "-range-editable-input"), {
-    width: 310,
+  }), _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"), {
+    minWidth: 80,
+    maxWidth: '100%',
     cursor: 'text',
     caretColor: 'transparent',
+    fontVariantNumeric: 'tabular-nums',
     '&:focus, &:focus-within': _defineProperty({}, "".concat(antCls, "-input"), {
       caretColor: token.colorPrimary
     })

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: ("css" | "json" | "jsx" | "tsx" | "ruby" | "javascript" | "typescript" | "groovy" | "java" | "python" | "bash" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "go" | "yaml" | "solidity")[];
+declare const supportedLanguages: ("ruby" | "css" | "json" | "jsx" | "tsx" | "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.js

@@ -8,6 +8,7 @@ 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); }
@@ -85,20 +86,36 @@ const EditableDateTimeInput = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
     onClick,
     open
   });
+  const {
+    sizerRef,
+    inputWidth
+  } = (0, _useAutoWidthInput.useAutoWidthInput)({
+    inputRef,
+    value: displayValue,
+    minWidth: 80,
+    extraWidth: isCn ? 26 : 0
+  });
 
   // 暴露方法给父组件
   (0, _react.useImperativeHandle)(ref, () => ({
     hasPastedValue,
     confirmPastedValue
   }));
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+  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,
@@ -107,7 +124,7 @@ const EditableDateTimeInput = /*#__PURE__*/(0, _react.forwardRef)((props, ref) =
       onDoubleClick: handleDoubleClick,
       onBlur: handleBlur,
       onKeyDown: handleKeyDown
-    })
+    })]
   });
 });
 EditableDateTimeInput.displayName = '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/hooks/index.d.ts

@@ -1,2 +1,4 @@
 export { useSegmentedInput } 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/style/index.js

@@ -181,6 +181,7 @@ const genDateRangerStyle = token => {
       alignItems: 'center'
     },
     [`${componentCls}-range-editable`]: {
+      position: 'relative',
       display: 'inline-flex',
       alignItems: 'center',
       cursor: 'text',
@@ -189,10 +190,22 @@ const genDateRangerStyle = token => {
         opacity: 0.6
       }
     },
+    [`${componentCls}-range-editable-sizer`]: {
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      height: 0,
+      overflow: 'hidden',
+      whiteSpace: 'pre',
+      visibility: 'hidden',
+      pointerEvents: 'none'
+    },
     [`${componentCls}-range-editable-input`]: {
-      width: 310,
+      minWidth: 80,
+      maxWidth: '100%',
       cursor: 'text',
       caretColor: 'transparent',
+      fontVariantNumeric: 'tabular-nums',
       '&:focus, &:focus-within': {
         [`${antCls}-input`]: {
           caretColor: token.colorPrimary

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: ("css" | "json" | "jsx" | "tsx" | "ruby" | "javascript" | "typescript" | "groovy" | "java" | "python" | "bash" | "cpp" | "http" | "markdown" | "nginx" | "sql" | "xml" | "dockerfile" | "go" | "yaml" | "solidity")[];
+declare const supportedLanguages: ("ruby" | "css" | "json" | "jsx" | "tsx" | "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.18",
+  "version": "1.0.0-alpha.19",
   "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.18",
+    "@oceanbase/design": "^1.0.0-alpha.19",
     "@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": "fc43201ca1a59d2d8d54d0fece7fbb9dba9f7eb9"
+  "gitHead": "cd07946b96147dadd8dd0604a2bcac1a3a9464b3"
 }