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

package/lib/SideTip/Dragger.js

@@ -1,195 +1,34 @@
-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/SideTip/Dragger.tsx
-var Dragger_exports = {};
-__export(Dragger_exports, {
-  default: () => Dragger_default
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(Dragger_exports);
-var import_classnames = __toESM(require("classnames"));
-var import_react = __toESM(require("react"));
-var import_utils = require("./utils");
-var INIT_RIGHT = 32;
-var INIT_BOTTOM = 32;
-var Draggable = class extends import_react.default.Component {
+exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _react = _interopRequireDefault(require("react"));
+var _utils = require("./utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/* eslint-disable react/sort-comp */
+/* eslint-disable no-restricted-syntax */
+const INIT_RIGHT = 32;
+const INIT_BOTTOM = 32;
+class Draggable extends _react.default.Component {
+  nodeRef;
+  intervalStart;
+  deltaX;
+  deltaY;
+  defaultScrollBarSize;
   constructor(props) {
     super(props);
-    this.overlapDetection = () => {
-      const node = this.nodeRef.current;
-      const { left, top, right, bottom, width, height } = node.getBoundingClientRect();
-      const aroundElems = [
-        document.elementFromPoint(left, top),
-        document.elementFromPoint(right, bottom),
-        document.elementFromPoint(left + width / 2, top + height / 2)
-      ];
-      for (const elem of aroundElems) {
-        if (elem !== node && (0, import_utils.isFixedElem)(elem)) {
-          if (this.props.onOverlap) {
-            this.props.onOverlap();
-          }
-          break;
-        }
-      }
-    };
-    this.getContainerDom = () => {
-      const { getPopupContainer } = this.props;
-      const dom = getPopupContainer ? getPopupContainer() : void 0;
-      return dom;
-    };
-    this.handleResize = () => {
-      const dom = this.getContainerDom();
-      this.defaultScrollBarSize = (0, import_utils.getScrollBarSize)();
-      const node = this.nodeRef.current;
-      const clientRect = node.getBoundingClientRect();
-      const { width, height } = clientRect;
-      const { right: styleRight, bottom: styleBottom } = window.getComputedStyle(node);
-      let right = Number(styleRight.replace("px", ""));
-      let bottom = Number(styleBottom.replace("px", ""));
-      const clientWidth = (0, import_utils.getClientWidth)(dom);
-      const clientHeight = (0, import_utils.getClientHeight)(dom);
-      const deltaX = clientWidth - right - width;
-      const deltaY = clientHeight - bottom - height;
-      if (deltaX < 0) {
-        right += deltaX;
-      }
-      if (deltaY < 0) {
-        bottom += deltaY;
-      }
-      this.setState({
-        bottom,
-        right
-      });
-    };
-    this.handleMouseDown = (e) => {
-      if (e.button !== 0) {
-        return;
-      }
-      const dom = this.getContainerDom();
-      this.intervalStart = (/* @__PURE__ */ new Date()).getTime();
-      const scroll = (0, import_utils.getScrollOffsets)(dom);
-      const node = this.nodeRef.current;
-      const startX = e.clientX + scroll.x;
-      const startY = e.clientY + scroll.y;
-      const origX = node.offsetLeft;
-      const origY = node.offsetTop;
-      this.deltaX = startX - origX;
-      this.deltaY = startY - origY;
-      if (this.props.onDragStart) {
-        this.props.onDragStart();
-      }
-      this.setState({
-        dragged: true
-      });
-      if (e.stopPropagation)
-        e.stopPropagation();
-      else
-        e.cancelBubble = true;
-      if (e.preventDefault)
-        e.preventDefault();
-      else
-        e.returnValue = false;
-    };
-    this.handleMouseMove = (e) => {
-      const { dragged } = this.state;
-      const { hide } = this.props;
-      if (e.button !== 0 || !dragged || !!hide) {
-        return;
-      }
-      const { clientX, clientY } = e;
-      const { deltaX, deltaY } = this;
-      const node = this.nodeRef.current;
-      const dom = this.getContainerDom();
-      const scroll = (0, import_utils.getScrollOffsets)(dom);
-      const clientWidth = (0, import_utils.getClientWidth)(dom);
-      const clientHeight = (0, import_utils.getClientHeight)(dom);
-      const { width, height } = node.getBoundingClientRect();
-      const left = clientX + scroll.x - deltaX;
-      const top = clientY + scroll.y - deltaY;
-      let right = clientWidth - left - width;
-      let bottom = clientHeight - top - height;
-      if (right > clientWidth - width) {
-        right = clientWidth - width;
-      }
-      if (bottom > clientHeight - height) {
-        bottom = clientHeight - height;
-      }
-      if (right < 0) {
-        right = 0;
-      }
-      if (bottom < 0) {
-        bottom = 0;
-      }
-      this.setState(
-        {
-          dragged: true,
-          right: right - this.defaultScrollBarSize,
-          bottom
-        },
-        () => {
-          if (this.props.onDrag) {
-            this.props.onDrag({
-              right,
-              bottom
-            });
-          }
-        }
-      );
-    };
-    this.handleMouseUp = (e) => {
-      const { dragged } = this.state;
-      if (dragged) {
-        const interval = (/* @__PURE__ */ new Date()).getTime() - this.intervalStart;
-        if (interval < 200 && e.target.id !== "ui-mini-hide") {
-          this.props.onClick(e);
-          this.setState({
-            dragged: false
-          });
-          return;
-        }
-        this.setState(
-          {
-            dragged: false
-          },
-          () => {
-            if (this.props.onDragEnd) {
-              this.props.onDragEnd();
-            }
-          }
-        );
-      }
-    };
-    const { position = {} } = props;
+    const {
+      position = {}
+    } = props;
     this.intervalStart = 0;
-    this.nodeRef = import_react.default.createRef();
+    this.nodeRef = /*#__PURE__*/_react.default.createRef();
     this.deltaX = 0;
     this.deltaY = 0;
-    this.defaultScrollBarSize = (0, import_utils.getScrollBarSize)();
+    this.defaultScrollBarSize = (0, _utils.getScrollBarSize)();
     this.state = {
       dragged: false,
       width: 0,
@@ -197,35 +36,227 @@ var Draggable = class extends import_react.default.Component {
       right: position.right ? position.right : INIT_RIGHT
     };
   }
+  overlapDetection = () => {
+    const node = this.nodeRef.current;
+    const {
+      left,
+      top,
+      right,
+      bottom,
+      width,
+      height
+    } = node.getBoundingClientRect();
+    const aroundElems = [document.elementFromPoint(left, top), document.elementFromPoint(right, bottom), document.elementFromPoint(left + width / 2, top + height / 2)];
+    for (const elem of aroundElems) {
+      if (elem !== node && (0, _utils.isFixedElem)(elem)) {
+        if (this.props.onOverlap) {
+          // eslint-disable-next-line react/destructuring-assignment
+          this.props.onOverlap();
+        }
+        break;
+      }
+    }
+  };
   componentDidMount() {
-    const { draggable = true } = this.props;
-    window.addEventListener("resize", this.handleResize, false);
-    if (draggable)
-      window.addEventListener("mousemove", this.handleMouseMove, false);
-    window.addEventListener("mouseup", this.handleMouseUp, false);
-    window.addEventListener("load", this.overlapDetection, false);
-    const { width } = this.nodeRef.current.getBoundingClientRect();
+    const {
+      draggable = true
+    } = this.props;
+    window.addEventListener('resize', this.handleResize, false);
+    if (draggable) window.addEventListener('mousemove', this.handleMouseMove, false);
+    window.addEventListener('mouseup', this.handleMouseUp, false);
+    window.addEventListener('load', this.overlapDetection, false);
+    const {
+      width
+    } = this.nodeRef.current.getBoundingClientRect();
     this.setState({
       width
     });
   }
   componentWillUnmount() {
-    const { draggable = true } = this.props;
-    window.removeEventListener("load", this.overlapDetection, false);
-    if (draggable)
-      window.removeEventListener("mousemove", this.handleMouseMove, false);
-    window.removeEventListener("mouseup", this.handleMouseUp, false);
-    window.removeEventListener("resize", this.handleResize, false);
+    const {
+      draggable = true
+    } = this.props;
+    window.removeEventListener('load', this.overlapDetection, false);
+    if (draggable) window.removeEventListener('mousemove', this.handleMouseMove, false);
+    window.removeEventListener('mouseup', this.handleMouseUp, false);
+    window.removeEventListener('resize', this.handleResize, false);
   }
+  getContainerDom = () => {
+    const {
+      getPopupContainer
+    } = this.props;
+    const dom = getPopupContainer ? getPopupContainer() : undefined;
+    return dom;
+  };
   componentDidUpdate(preProps) {
-    const { hide: preHide } = preProps;
-    const { hide } = this.props;
+    const {
+      hide: preHide
+    } = preProps;
+    const {
+      hide
+    } = this.props;
+
+    // 隐藏到显示，贴右侧边
     if (preHide && !hide) {
+      // eslint-disable-next-line react/no-did-update-set-state
       this.setState({
         right: INIT_RIGHT
       });
     }
   }
+  handleResize = () => {
+    const dom = this.getContainerDom();
+    // update defaultScrollBarSize
+    this.defaultScrollBarSize = (0, _utils.getScrollBarSize)();
+    const node = this.nodeRef.current;
+    const clientRect = node.getBoundingClientRect();
+    const {
+      width,
+      height
+    } = clientRect;
+    const {
+      right: styleRight,
+      bottom: styleBottom
+    } = window.getComputedStyle(node);
+    let right = Number(styleRight.replace('px', ''));
+    let bottom = Number(styleBottom.replace('px', ''));
+    const clientWidth = (0, _utils.getClientWidth)(dom);
+    const clientHeight = (0, _utils.getClientHeight)(dom);
+    const deltaX = clientWidth - right - width;
+    const deltaY = clientHeight - bottom - height;
+
+    // drag boundary detection
+    if (deltaX < 0) {
+      right += deltaX;
+    }
+    if (deltaY < 0) {
+      bottom += deltaY;
+    }
+    this.setState({
+      bottom,
+      right
+    });
+  };
+  handleMouseDown = e => {
+    // 非鼠标左键点按不处理
+    if (e.button !== 0) {
+      return;
+    }
+    const dom = this.getContainerDom();
+    this.intervalStart = new Date().getTime();
+    const scroll = (0, _utils.getScrollOffsets)(dom);
+    const node = this.nodeRef.current;
+    const startX = e.clientX + scroll.x;
+    const startY = e.clientY + scroll.y;
+    const origX = node.offsetLeft;
+    const origY = node.offsetTop;
+    this.deltaX = startX - origX;
+    this.deltaY = startY - origY;
+    if (this.props.onDragStart) {
+      this.props.onDragStart();
+    }
+    this.setState({
+      dragged: true
+    });
+
+    // We've handled this event. Don't let anybody else see it.
+    if (e.stopPropagation) e.stopPropagation();
+    // Standard model
+    else e.cancelBubble = true; // IE
+
+    // Now prevent any default action.
+    if (e.preventDefault) e.preventDefault();
+    // Standard model
+    else e.returnValue = false; // IE
+  };
+  handleMouseMove = e => {
+    const {
+      dragged
+    } = this.state;
+    const {
+      hide
+    } = this.props;
+
+    // 非鼠标左键点击 || 不在组件点击或拖拽过程中 || 组件隐藏中 都不处理鼠标移动事件
+    if (e.button !== 0 || !dragged || !!hide) {
+      return;
+    }
+    const {
+      clientX,
+      clientY
+    } = e;
+    const {
+      deltaX,
+      deltaY
+    } = this;
+    const node = this.nodeRef.current;
+    const dom = this.getContainerDom();
+    const scroll = (0, _utils.getScrollOffsets)(dom);
+    const clientWidth = (0, _utils.getClientWidth)(dom);
+    const clientHeight = (0, _utils.getClientHeight)(dom);
+    const {
+      width,
+      height
+    } = node.getBoundingClientRect();
+    const left = clientX + scroll.x - deltaX;
+    const top = clientY + scroll.y - deltaY;
+    let right = clientWidth - left - width;
+    let bottom = clientHeight - top - height;
+
+    // boundary detection
+    // left boundary
+    if (right > clientWidth - width) {
+      right = clientWidth - width;
+    }
+    // top boundary
+    if (bottom > clientHeight - height) {
+      bottom = clientHeight - height;
+    }
+    // right boundary
+    if (right < 0) {
+      right = 0;
+    }
+    // bottom boundary
+    if (bottom < 0) {
+      bottom = 0;
+    }
+    this.setState({
+      dragged: true,
+      right: right - this.defaultScrollBarSize,
+      bottom
+    }, () => {
+      if (this.props.onDrag) {
+        this.props.onDrag({
+          right,
+          bottom
+        });
+      }
+    });
+  };
+  handleMouseUp = e => {
+    const {
+      dragged
+    } = this.state;
+
+    // 非组件左键点按之后的事件不处理
+    if (dragged) {
+      const interval = new Date().getTime() - this.intervalStart;
+      if (interval < 200 && !e.target?.closest?.('#ui-mini-hide')) {
+        this.props.onClick(e);
+        this.setState({
+          dragged: false
+        });
+        return;
+      }
+      this.setState({
+        dragged: false
+      }, () => {
+        if (this.props.onDragEnd) {
+          this.props.onDragEnd();
+        }
+      });
+    }
+  };
   render() {
     const {
       children,
@@ -237,27 +268,36 @@ var Draggable = class extends import_react.default.Component {
       onMouseEnter,
       onMouseLeave
     } = this.props;
-    const { dragged, width, bottom, right } = this.state;
-    const containerStyle = { bottom, right, ...style };
+    const {
+      dragged,
+      width,
+      bottom,
+      right
+    } = this.state;
+    const containerStyle = {
+      bottom,
+      right,
+      ...style
+    };
     const containerPrefix = `${prefix}-container`;
-    const containerClassName = (0, import_classnames.default)(containerPrefix, className, {
+    const containerClassName = (0, _classnames.default)(containerPrefix, className, {
       [`${containerPrefix}-dragged`]: dragged,
       [`${containerPrefix}-hide`]: hide,
       [`${containerPrefix}-hide-not-dragged`]: hide && !dragged
     });
-    return /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        id,
-        ref: this.nodeRef,
-        onMouseDown: this.handleMouseDown,
-        onMouseEnter,
-        onMouseLeave,
-        style: hide ? { ...containerStyle, right: -width / 1.5 } : containerStyle,
-        className: containerClassName
-      },
-      children
-    );
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      id: id,
+      ref: this.nodeRef,
+      onMouseDown: this.handleMouseDown,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      style: hide ? {
+        ...containerStyle,
+        right: -width / 1.5
+      } : containerStyle,
+      className: containerClassName,
+      children: children
+    });
   }
-};
-var Dragger_default = Draggable;
+}
+var _default = exports.default = Draggable;

package/lib/SideTip/IconLoading.js

@@ -1,76 +1,44 @@
-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/SideTip/IconLoading.tsx
-var IconLoading_exports = {};
-__export(IconLoading_exports, {
-  default: () => IconLoading_default
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(IconLoading_exports);
-var import_react = __toESM(require("react"));
-var import_icons = __toESM(require("@oceanbase/icons"));
-var LoadingSvg = () => /* @__PURE__ */ import_react.default.createElement(
-  "svg",
-  {
-    version: "1.1",
-    id: "dc-spinner",
-    xmlns: "http://www.w3.org/2000/svg",
-    x: "0px",
-    y: "0px",
-    width: "1em",
-    height: "1em",
-    stroke: "currentColor",
-    viewBox: "3 3 34 34",
-    preserveAspectRatio: "xMinYMin meet"
-  },
-  /* @__PURE__ */ import_react.default.createElement(
-    "path",
-    {
-      strokeWidth: "1",
-      strokeMiterlimit: "10",
-      d: "M5.203,20\n			c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z",
-      transform: "rotate(278.217 20 20)"
-    },
-    /* @__PURE__ */ import_react.default.createElement(
-      "animateTransform",
-      {
-        attributeName: "transform",
-        type: "rotate",
-        from: "0 20 20",
-        to: "360 20 20",
-        calcMode: "spline",
-        keySplines: "0.2, 0.2, 0.2, 0.2",
-        keyTimes: "0;1",
-        dur: "1.2s",
-        repeatCount: "indefinite"
-      }
-    )
-  )
-);
-var iconLoading = (props) => /* @__PURE__ */ import_react.default.createElement(import_icons.default, { component: LoadingSvg, ...props });
-var IconLoading_default = iconLoading;
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _icons = _interopRequireDefault(require("@oceanbase/icons"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const LoadingSvg = () => /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+  version: "1.1",
+  id: "dc-spinner",
+  xmlns: "http://www.w3.org/2000/svg",
+  x: "0px",
+  y: "0px",
+  width: "1em",
+  height: "1em",
+  stroke: "currentColor",
+  viewBox: "3 3 34 34",
+  preserveAspectRatio: "xMinYMin meet",
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+    strokeWidth: "1",
+    strokeMiterlimit: "10",
+    d: "M5.203,20 c0-8.159,6.638-14.797,14.797-14.797V5C11.729,5,5,11.729,5,20s6.729,15,15,15v-0.203C11.841,34.797,5.203,28.159,5.203,20z",
+    transform: "rotate(278.217 20 20)",
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("animateTransform", {
+      attributeName: "transform",
+      type: "rotate",
+      from: "0 20 20",
+      to: "360 20 20",
+      calcMode: "spline",
+      keySplines: "0.2, 0.2, 0.2, 0.2",
+      keyTimes: "0;1",
+      dur: "1.2s",
+      repeatCount: "indefinite"
+    })
+  })
+});
+const iconLoading = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.default, {
+  component: LoadingSvg,
+  ...props
+});
+var _default = exports.default = iconLoading;

package/lib/SideTip/index.d.ts

@@ -2,7 +2,6 @@ import type { BadgeProps } from '@oceanbase/design/es/badge/index';
 import type { TooltipPropsWithTitle } from '@oceanbase/design/es/tooltip/index';
 import React from 'react';
 import type { LocaleWrapperProps } from '../locale/LocaleWrapper';
-import './index.less';
 export type SideTipType = 'primary' | 'default';
 export type SideTipSize = 'small' | 'default';
 export interface Position {