@oceanbase/ui 1.0.0-alpha.4 → 1.0.0-alpha.5

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,195 @@
+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);
+
+// src/DateRanger/style/index.ts
+var style_exports = {};
+__export(style_exports, {
+  default: () => style_default,
+  genDateRangerStyle: () => genDateRangerStyle
+});
+module.exports = __toCommonJS(style_exports);
+var import_genComponentStyleHook = require("../../_util/genComponentStyleHook");
+var genDateRangerStyle = (token) => {
+  const {
+    componentCls,
+    antCls,
+    colorBgContainer,
+    colorBorder,
+    borderRadius,
+    colorPrimaryBorderHover,
+    colorTextSecondary,
+    colorFillSecondary,
+    colorFill
+  } = token;
+  return {
+    [`${componentCls}`]: {
+      cursor: "pointer",
+      [`${componentCls}-wrapper`]: {
+        backgroundColor: colorBgContainer,
+        border: `1px solid ${colorBorder}`,
+        boxSizing: "border-box",
+        display: "flex",
+        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: colorPrimaryBorderHover
+        }
+      },
+      [`${componentCls}-wrapper-has-jumper`]: {
+        borderTopRightRadius: 0,
+        borderBottomRightRadius: 0
+      },
+      [`${componentCls}-play`]: {
+        padding: "4px 11px 4px"
+      },
+      [`${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: 8,
+      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: colorPrimaryBorderHover,
+            "&::before": {
+              backgroundColor: colorPrimaryBorderHover
+            }
+          }
+        }
+      }
+    },
+    [`${componentCls}-label`]: {
+      backgroundColor: colorFillSecondary,
+      color: colorTextSecondary,
+      display: "inline-block",
+      width: 60,
+      padding: "4px 0",
+      borderRadius: 4,
+      lineHeight: 1,
+      textAlign: "center"
+    },
+    [`${componentCls}-back-radio-focused`]: {
+      [`${componentCls}-wrapper`]: {
+        borderRightColor: colorPrimaryBorderHover
+      },
+      [`${componentCls}-playback-control`]: {
+        [`${antCls}-radio-button-wrapper:first-child`]: {
+          [`+ ${antCls}-radio-button-wrapper::before`]: {
+            backgroundColor: colorPrimaryBorderHover
+          }
+        }
+      }
+    },
+    [`${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`
+      }
+    }
+  };
+};
+var style_default = (prefixCls) => {
+  const useStyle = (0, import_genComponentStyleHook.genComponentStyleHook)("DateRanger", (token) => {
+    return [genDateRangerStyle(token)];
+  });
+  return useStyle(prefixCls);
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  genDateRangerStyle
+});

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,8 +1,6 @@
-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)
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   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
@@ -32,41 +22,48 @@ __export(Anchor_exports, {
   Anchor: () => Anchor
 });
 module.exports = __toCommonJS(Anchor_exports);
-var import_react = __toESM(require("react"));
-var import_util = require("../_util");
+var import_react = require("react");
 var import_EventProxy = require("./EventProxy");
 var import_jsx_runtime = require("react/jsx-runtime");
-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 Anchor = ({
+  children,
+  style,
+  dock,
+  prefixCls,
+  onStart,
+  onMove,
+  onEnd,
+  ...restProps
+}) => {
+  const isPointDownRef = (0, import_react.useRef)(false);
+  const originBodyStyleRef = (0, import_react.useRef)(null);
+  const clientXRef = (0, import_react.useRef)(0);
+  const clientYRef = (0, import_react.useRef)(0);
+  const onDragStart = (0, import_react.useCallback)(
+    (event) => {
       var _a;
-      this.isPointDown = true;
-      const { onStart, dock } = this.props;
-      this.clientX = event.clientX;
-      this.clientY = event.clientY;
+      isPointDownRef.current = true;
+      clientXRef.current = event.clientX;
+      clientYRef.current = 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);
+        originBodyStyleRef.current = document.body.getAttribute("style") || "";
+        const bodyStyle = `cursor:${cursor} !important; ${originBodyStyleRef.current}`;
+        document.body.setAttribute("style", bodyStyle);
       }
-    };
-    this.onDragMove = (event) => {
-      if (!this.isPointDown)
+    },
+    [onStart, dock]
+  );
+  const onDragMove = (0, import_react.useCallback)(
+    (event) => {
+      if (!isPointDownRef.current)
         return;
-      const { onMove, dock = {} } = this.props;
-      if (dock.adjust) {
+      if (dock == null ? void 0 : dock.adjust) {
         const { clientX, clientY } = event;
-        const moveX = clientX - this.clientX;
-        const moveY = clientY - this.clientY;
+        const moveX = clientX - clientXRef.current;
+        const moveY = clientY - clientYRef.current;
         event.moveTop = moveY * (dock.adjust[0] || 0);
         event.moveBottom = moveY * (dock.adjust[1] || 0);
         event.moveLeft = moveX * (dock.adjust[2] || 0);
@@ -74,35 +71,36 @@ var Anchor = class extends import_react.default.Component {
       }
       if (onMove)
         onMove(event);
-    };
-    this.onDragEnd = (event) => {
-      if (!this.isPointDown)
+    },
+    [onMove, dock]
+  );
+  const onDragEnd = (0, import_react.useCallback)(
+    (event) => {
+      if (!isPointDownRef.current)
         return;
-      this.isPointDown = false;
-      const { onEnd } = this.props;
+      isPointDownRef.current = false;
       if (onEnd)
         onEnd(event);
-      if (this.originBodyStyle !== null) {
-        document.body.setAttribute("style", this.originBodyStyle);
+      if (originBodyStyleRef.current !== null) {
+        document.body.setAttribute("style", originBodyStyleRef.current);
       }
-      this.originBodyStyle = null;
-    };
-  }
-  render() {
-    const { children, style, dock } = this.props;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "div",
-      {
-        className: `${prefix}-anchor`,
-        style: { ...style, ...dock == null ? void 0 : dock.style },
-        onPointerDown: this.onDragStart,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_EventProxy.EventProxy, { onPointerMove: this.onDragMove, onPointerUp: this.onDragEnd }),
-          children
-        ]
-      }
-    );
-  }
+      originBodyStyleRef.current = null;
+    },
+    [onEnd]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: `${prefixCls}-anchor`,
+      style: { ...style, ...dock == null ? void 0 : dock.style },
+      onPointerDown: onDragStart,
+      ...restProps,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_EventProxy.EventProxy, { onPointerMove: onDragMove, onPointerUp: onDragEnd }),
+        children
+      ]
+    }
+  );
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/lib/Dialog/index.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
-import './index.less';
 export interface DialogLocale {
     helpDocument: string;
     openHelpCenter: string;