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

package/lib/DateRanger/locale/zh-TW.js

@@ -1,49 +1,24 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/DateRanger/locale/zh-TW.ts
-var zh_TW_exports = {};
-__export(zh_TW_exports, {
-  default: () => zh_TW_default
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(zh_TW_exports);
-var import_zh_TW = __toESM(require("rc-picker/es/locale/zh_TW"));
-var zh_TW_default = {
-  customize: "自定義",
-  customTime: "自定義時間",
-  startDate: "開始日期",
-  startTime: "開始時間",
-  endDate: "結束日期",
-  endTime: "結束時間",
-  cancel: "取消",
-  confirm: "確定",
-  current: "當前",
-  jumpBack: "向前跳轉一個時間區間",
-  jumpForward: "向後跳轉一個時間區間",
-  ...import_zh_TW.default
-};
+exports.default = void 0;
+var _zh_TW = _interopRequireDefault(require("rc-picker/es/locale/zh_TW"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _default = exports.default = {
+  customize: '自定義',
+  customTime: '自定義時間',
+  startDate: '開始日期',
+  startTime: '開始時間',
+  endDate: '結束日期',
+  endTime: '結束時間',
+  cancel: '取消',
+  confirm: '確定',
+  current: '當前',
+  jumpBack: '向前跳轉一個時間區間',
+  jumpForward: '向後跳轉一個時間區間',
+  syncToCurrent: '同步到當前時間',
+  zoomOutRange: '放大時間範圍',
+  ..._zh_TW.default
+};

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import type { GenerateStyle } from '@oceanbase/design/es/theme';
+import type { OBToken } from '../../_util/genComponentStyleHook';
+export type DateRangerToken = OBToken;
+export declare const genDateRangerStyle: GenerateStyle<DateRangerToken>;
+declare const _default: (prefixCls: string) => {
+    wrapSSR: (node: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>) => import("react").JSX.Element;
+    hashId: string;
+};
+export default _default;

package/lib/DateRanger/style/index.js

@@ -0,0 +1,224 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.genDateRangerStyle = exports.default = void 0;
+var _genComponentStyleHook = require("../../_util/genComponentStyleHook");
+const genDateRangerStyle = token => {
+  const {
+    componentCls,
+    antCls,
+    colorBgContainer,
+    colorBorder,
+    borderRadius,
+    colorTextSecondary,
+    colorFillSecondary,
+    colorFill
+  } = token;
+  return {
+    [`${componentCls}`]: {
+      cursor: 'pointer',
+      [`${componentCls}-wrapper`]: {
+        backgroundColor: colorBgContainer,
+        border: `1px solid ${colorBorder}`,
+        boxSizing: 'border-box',
+        display: 'flex',
+        borderRadius: borderRadius,
+        transition: 'all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)',
+        [`${componentCls}-picker`]: {
+          paddingLeft: 0,
+          paddingRight: 16,
+          border: 0,
+          '&:focus, &:focus-within': {
+            boxShadow: 'none'
+          },
+          input: {
+            textAlign: 'center'
+          },
+          [`${antCls}-picker-active-bar`]: {
+            height: 0
+          },
+          [`${antCls}-picker-input > input`]: {
+            cursor: 'pointer'
+          }
+        },
+        '&:hover': {
+          borderColor: token.gray7
+        }
+      },
+      [`${componentCls}-wrapper-has-jumper`]: {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0
+      },
+      [`${componentCls}-play`]: {
+        padding: '3px 11px 3px'
+      },
+      [`${componentCls}-picker-input`]: {
+        maxWidth: 125
+      },
+      [`${componentCls}-date-picker`]: {
+        [`${antCls}-select-selector`]: {
+          borderTopLeftRadius: 0,
+          borderBottomLeftRadius: 0,
+          '&:hover': {
+            zIndex: 1
+          }
+        },
+        [`${antCls}-select-arrow`]: {
+          zIndex: 1
+        }
+      }
+    },
+    [`${componentCls}-dropdown-picker`]: {
+      display: 'flex',
+      padding: 4,
+      gap: 4,
+      backgroundColor: colorBgContainer,
+      backgroundClip: 'padding-box',
+      borderRadius: token.borderRadiusMD,
+      outline: 'none',
+      boxShadow: '0 6px 16px 0 rgba(54, 69, 99, 0.08), 0 3px 6px -4px rgba(54, 69, 99, 0.12), 0 9px 28px 8px rgba(54, 69, 99, 0.05)',
+      [`${antCls}-dropdown-menu`]: {
+        padding: 0,
+        boxShadow: 'none !important'
+      },
+      [`${antCls}-picker-time-panel-container`]: {
+        [`${antCls}-picker-content`]: {
+          height: 148
+        }
+      }
+    },
+    [`${componentCls}-show-range`]: {
+      [`${componentCls}-quick-picker.${componentCls}-quick-picker-select`]: {
+        marginRight: -1,
+        [`${antCls}-select-selector`]: {
+          borderTopRightRadius: 0,
+          borderBottomRightRadius: 0,
+          '&:hover': {
+            zIndex: 1
+          }
+        },
+        [`${antCls}-select-arrow`]: {
+          zIndex: 1
+        }
+      },
+      [`${componentCls}-playback-control`]: {
+        display: 'flex',
+        flexWrap: 'nowrap',
+        [`${antCls}-radio-button-wrapper`]: {
+          paddingInline: 8,
+          color: colorTextSecondary,
+          transition: 'all 0.2s cubic-bezier(0.645, 0.045, 0.355, 1)',
+          '&:hover': {
+            borderColor: token.gray7,
+            zIndex: 1,
+            '&::before': {
+              backgroundColor: token.gray7
+            }
+          }
+        }
+      }
+    },
+    [`${componentCls}-label`]: {
+      fontSize: token.fontSizeSM,
+      lineHeight: token.lineHeightSM,
+      backgroundColor: colorFillSecondary,
+      color: colorTextSecondary,
+      display: 'inline-block',
+      width: 52,
+      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
+      },
+      [`${componentCls}-playback-control`]: {
+        [`${antCls}-radio-button-wrapper:first-child`]: {
+          [`+ ${antCls}-radio-button-wrapper::before`]: {
+            backgroundColor: token.gray7
+          }
+        }
+      }
+    },
+    [`${componentCls}-history-menu-item`]: {
+      [`${componentCls}-menu-text-btn-wrapper`]: {
+        justifyContent: 'space-between',
+        height: 0,
+        transition: 'height 0.2s',
+        overflow: 'hidden'
+      },
+      '&:hover': {
+        [`${componentCls}-menu-text-btn-wrapper`]: {
+          height: 22
+        }
+      }
+    },
+    [`${componentCls}-menu-text-btn`]: {
+      width: 72,
+      backgroundColor: `${colorFillSecondary} !important`,
+      '&:hover': {
+        backgroundColor: `${colorFill} !important`
+      }
+    },
+    // 可编辑日期时间输入组件样式
+    [`${componentCls}-editable-wrapper`]: {
+      display: 'inline-flex',
+      alignItems: 'center'
+    },
+    [`${componentCls}-range-editable`]: {
+      position: 'relative',
+      display: 'inline-flex',
+      alignItems: 'center',
+      cursor: 'text',
+      '&-disabled': {
+        cursor: 'not-allowed',
+        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`]: {
+      minWidth: 80,
+      maxWidth: '100%',
+      cursor: 'text',
+      caretColor: 'transparent',
+      fontVariantNumeric: 'tabular-nums',
+      '&:focus, &:focus-within': {
+        [`${antCls}-input`]: {
+          caretColor: token.colorPrimary
+        }
+      }
+    }
+  };
+};
+exports.genDateRangerStyle = genDateRangerStyle;
+var _default = prefixCls => {
+  const useStyle = (0, _genComponentStyleHook.genComponentStyleHook)('DateRanger', token => {
+    return [genDateRangerStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
+exports.default = _default;

package/lib/DateRanger/typing.js

@@ -1,17 +1,5 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/DateRanger/typing.ts
-var typing_exports = {};
-module.exports = __toCommonJS(typing_exports);
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/lib/Dialog/Anchor.d.ts

@@ -6,14 +6,6 @@ export interface IAnchorProps extends HTMLAttributes<HTMLDivElement> {
     onMove?: (event: PointerEvent) => void;
     onEnd?: (event: PointerEvent) => void;
     dock?: IDockProps;
+    prefixCls?: string;
 }
-export declare class Anchor extends React.Component<IAnchorProps> {
-    isPointDown: boolean;
-    originBodyStyle: string | null;
-    clientX: number;
-    clientY: number;
-    onDragStart: (event: PointerEvent) => void;
-    onDragMove: (event: PointerEvent) => void;
-    onDragEnd: (event: PointerEvent) => void;
-    render(): import("@emotion/react/jsx-runtime").JSX.Element;
-}
+export declare const Anchor: React.FC<IAnchorProps>;

package/lib/Dialog/Anchor.js

@@ -1,107 +1,82 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/Dialog/Anchor.tsx
-var Anchor_exports = {};
-__export(Anchor_exports, {
-  Anchor: () => Anchor
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(Anchor_exports);
-var import_react = __toESM(require("react"));
-var import_util = require("../_util");
-var import_EventProxy = require("./EventProxy");
-var prefix = (0, import_util.getPrefix)("dialog");
-var Anchor = class extends import_react.default.Component {
-  constructor() {
-    super(...arguments);
-    this.isPointDown = false;
-    this.originBodyStyle = null;
-    this.clientX = 0;
-    this.clientY = 0;
-    this.onDragStart = (event) => {
-      var _a;
-      this.isPointDown = true;
-      const { onStart, dock } = this.props;
-      this.clientX = event.clientX;
-      this.clientY = event.clientY;
-      if (onStart)
-        onStart(event);
-      const cursor = (_a = dock == null ? void 0 : dock.style) == null ? void 0 : _a.cursor;
-      if (cursor) {
-        this.originBodyStyle = document.body.getAttribute("style") || "";
-        const style = `cursor:${cursor} !important; ${this.originBodyStyle}`;
-        document.body.setAttribute("style", style);
-      }
-    };
-    this.onDragMove = (event) => {
-      if (!this.isPointDown)
-        return;
-      const { onMove, dock = {} } = this.props;
-      if (dock.adjust) {
-        const { clientX, clientY } = event;
-        const moveX = clientX - this.clientX;
-        const moveY = clientY - this.clientY;
-        event.moveTop = moveY * (dock.adjust[0] || 0);
-        event.moveBottom = moveY * (dock.adjust[1] || 0);
-        event.moveLeft = moveX * (dock.adjust[2] || 0);
-        event.moveRight = moveX * (dock.adjust[3] || 0);
-      }
-      if (onMove)
-        onMove(event);
-    };
-    this.onDragEnd = (event) => {
-      if (!this.isPointDown)
-        return;
-      this.isPointDown = false;
-      const { onEnd } = this.props;
-      if (onEnd)
-        onEnd(event);
-      if (this.originBodyStyle !== null) {
-        document.body.setAttribute("style", this.originBodyStyle);
-      }
-      this.originBodyStyle = null;
-    };
-  }
-  render() {
-    const { children, style, dock } = this.props;
-    return /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        className: `${prefix}-anchor`,
-        style: { ...style, ...dock == null ? void 0 : dock.style },
-        onPointerDown: this.onDragStart
-      },
-      /* @__PURE__ */ import_react.default.createElement(import_EventProxy.EventProxy, { onPointerMove: this.onDragMove, onPointerUp: this.onDragEnd }),
-      children
-    );
-  }
+exports.Anchor = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _EventProxy = require("./EventProxy");
+var _jsxRuntime = require("react/jsx-runtime");
+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 Anchor = ({
+  children,
+  style,
+  dock,
+  prefixCls,
+  onStart,
+  onMove,
+  onEnd,
+  ...restProps
+}) => {
+  const isPointDownRef = (0, _react.useRef)(false);
+  const originBodyStyleRef = (0, _react.useRef)(null);
+  const clientXRef = (0, _react.useRef)(0);
+  const clientYRef = (0, _react.useRef)(0);
+  const onDragStart = (0, _react.useCallback)(event => {
+    isPointDownRef.current = true;
+    clientXRef.current = event.clientX;
+    clientYRef.current = event.clientY;
+    if (onStart) onStart(event);
+    const cursor = dock?.style?.cursor;
+    if (cursor) {
+      originBodyStyleRef.current = document.body.getAttribute('style') || '';
+      const bodyStyle = `cursor:${cursor} !important; ${originBodyStyleRef.current}`;
+      document.body.setAttribute('style', bodyStyle);
+    }
+  }, [onStart, dock]);
+  const onDragMove = (0, _react.useCallback)(event => {
+    if (!isPointDownRef.current) return;
+    if (dock?.adjust) {
+      const {
+        clientX,
+        clientY
+      } = event;
+      const moveX = clientX - clientXRef.current;
+      const moveY = clientY - clientYRef.current;
+      // 以下event没有moveTop、moveBottom属性，希望在事件传递带上计算后的属性值
+      // @ts-ignore
+      event.moveTop = moveY * (dock.adjust[0] || 0);
+      // @ts-ignore
+      event.moveBottom = moveY * (dock.adjust[1] || 0);
+      // @ts-ignore
+      event.moveLeft = moveX * (dock.adjust[2] || 0);
+      // @ts-ignore
+      event.moveRight = moveX * (dock.adjust[3] || 0);
+    }
+    if (onMove) onMove(event);
+  }, [onMove, dock]);
+  const onDragEnd = (0, _react.useCallback)(event => {
+    if (!isPointDownRef.current) return;
+    isPointDownRef.current = false;
+    if (onEnd) onEnd(event);
+    if (originBodyStyleRef.current !== null) {
+      document.body.setAttribute('style', originBodyStyleRef.current);
+    }
+    originBodyStyleRef.current = null;
+  }, [onEnd]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: `${prefixCls}-anchor`,
+    style: {
+      ...style,
+      ...dock?.style
+    },
+    onPointerDown: onDragStart,
+    ...restProps,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_EventProxy.EventProxy, {
+      onPointerMove: onDragMove,
+      onPointerUp: onDragEnd
+    }), children]
+  });
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Anchor
-});
+exports.Anchor = Anchor;

package/lib/Dialog/Dock.js

@@ -1,28 +1,10 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+"use strict";
 
-// src/Dialog/Dock.ts
-var Dock_exports = {};
-__export(Dock_exports, {
-  Dock: () => Dock
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(Dock_exports);
-var Dock = ((size) => {
+exports.Dock = void 0;
+const Dock = exports.Dock = (size => {
   return {
     top: {
       adjust: [1, -1, 0, 0],
@@ -31,7 +13,7 @@ var Dock = ((size) => {
         height: size,
         left: 0,
         right: 0,
-        cursor: "ns-resize"
+        cursor: 'ns-resize'
       }
     },
     bottom: {
@@ -41,7 +23,7 @@ var Dock = ((size) => {
         height: size,
         left: 0,
         right: 0,
-        cursor: "ns-resize"
+        cursor: 'ns-resize'
       }
     },
     left: {
@@ -51,7 +33,7 @@ var Dock = ((size) => {
         width: size,
         top: 0,
         bottom: 0,
-        cursor: "ew-resize"
+        cursor: 'ew-resize'
       }
     },
     right: {
@@ -61,7 +43,7 @@ var Dock = ((size) => {
         width: size,
         top: 0,
         bottom: 0,
-        cursor: "ew-resize"
+        cursor: 'ew-resize'
       }
     },
     topLeft: {
@@ -71,7 +53,7 @@ var Dock = ((size) => {
         left: -size / 2,
         width: size,
         height: size,
-        cursor: "nwse-resize"
+        cursor: 'nwse-resize'
       }
     },
     topRight: {
@@ -81,7 +63,7 @@ var Dock = ((size) => {
         right: -size / 2,
         width: size,
         height: size,
-        cursor: "nesw-resize"
+        cursor: 'nesw-resize'
       }
     },
     bottomLeft: {
@@ -91,7 +73,7 @@ var Dock = ((size) => {
         left: -size / 2,
         width: size,
         height: size,
-        cursor: "nesw-resize"
+        cursor: 'nesw-resize'
       }
     },
     bottomRight: {
@@ -101,12 +83,8 @@ var Dock = ((size) => {
         right: -size / 2,
         width: size,
         height: size,
-        cursor: "nwse-resize"
+        cursor: 'nwse-resize'
       }
     }
   };
-})(8);
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  Dock
-});
+})(8);