@oceanbase/design 1.0.0-alpha.10 → 1.0.0-alpha.11

package/lib/tooltip/MouseTooltip.js

@@ -1,43 +1,19 @@
-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/tooltip/MouseTooltip.tsx
-var MouseTooltip_exports = {};
-__export(MouseTooltip_exports, {
-  default: () => MouseTooltip_default
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(MouseTooltip_exports);
-var import_ahooks = require("ahooks");
-var import_react = require("react");
-var import_ReactStickyMouseTooltip = __toESM(require("./ReactStickyMouseTooltip"));
-var import_theme = __toESM(require("../theme"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var MouseTooltip = ({
+exports.default = void 0;
+var _ahooks = require("ahooks");
+var _react = _interopRequireWildcard(require("react"));
+var _ReactStickyMouseTooltip = _interopRequireDefault(require("./ReactStickyMouseTooltip"));
+var _theme = _interopRequireDefault(require("../theme"));
+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); }
+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; }
+"use client";
+const MouseTooltip = ({
   children,
   title,
   color: backgroundColor,
@@ -50,73 +26,83 @@ var MouseTooltip = ({
   mouseLeaveDelay = 0.1,
   ...restProps
 }) => {
-  var _a, _b;
-  const { token } = import_theme.default.useToken();
-  const [visible, setVisible] = (0, import_react.useState)(false);
-  const { color: textColor, ...restOverlayInnerStyle } = overlayInnerStyle || {};
-  const handleVisibleChange = (value) => {
+  const {
+    token
+  } = _theme.default.useToken();
+  const [visible, setVisible] = (0, _react.useState)(false);
+  const {
+    color: textColor,
+    ...restOverlayInnerStyle
+  } = overlayInnerStyle || {};
+  const handleVisibleChange = value => {
     setVisible(value);
-    onOpenChange == null ? void 0 : onOpenChange(value);
-    onVisibleChange == null ? void 0 : onVisibleChange(value);
+    onOpenChange?.(value);
+    onVisibleChange?.(value);
   };
-  const mouseInfo = (0, import_ahooks.useMouse)();
-  const clientX = (mouseInfo == null ? void 0 : mouseInfo.clientX) || 0;
-  const clientY = (mouseInfo == null ? void 0 : mouseInfo.clientY) || 0;
-  const ref = (0, import_react.useRef)(null);
-  const size = (0, import_ahooks.useSize)(ref);
-  const tooltipWidth = ((size == null ? void 0 : size.width) || 0) + 16;
-  const tooltipHeight = ((size == null ? void 0 : size.height) || 0) + 12;
+
+  // 获取鼠标位置
+  const mouseInfo = (0, _ahooks.useMouse)();
+  // clientX and clientY maybe NaN, should use 0 as fallback value
+  // ref: https://github.com/oceanbase/oceanbase-design/pull/968
+  const clientX = mouseInfo?.clientX || 0;
+  const clientY = mouseInfo?.clientY || 0;
+  const ref = (0, _react.useRef)(null);
+  const size = (0, _ahooks.useSize)(ref);
+  // tooltip 宽高，由于 ref 是设置在内容区上的，因此还需要加上外部的 padding
+  const tooltipWidth = (size?.width || 0) + 16;
+  const tooltipHeight = (size?.height || 0) + 12;
+  // 页面宽高
   const pageWidth = document.body.clientWidth || 0;
   const pageHeight = document.body.clientHeight || 0;
+
+  // 是否横向超出浏览器，需要留出 8px 缓冲区，避免到达页面边界时位置调整不生效
   const isOverWidth = clientX + tooltipWidth + 8 > pageWidth;
+  // 是否纵向超出浏览器，需要留出 8px 缓冲区，避免到达页面边界时位置调整不生效
   const isOverHeight = clientY + tooltipHeight + 8 > pageHeight;
+
+  // tooltip 和鼠标之间的偏移
   const offset = 8;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "span",
-      {
-        onMouseEnter: () => {
-          if (outerOpen || outerVisible) {
-            setTimeout(() => {
-              handleVisibleChange(true);
-            }, mouseEnterDelay * 1e3);
-          }
-        },
-        onMouseLeave: () => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      onMouseEnter: () => {
+        if (outerOpen || outerVisible) {
           setTimeout(() => {
-            handleVisibleChange(false);
-          }, mouseLeaveDelay * 1e3);
-        },
-        children
-      }
-    ),
-    title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_ReactStickyMouseTooltip.default,
-      {
-        visible,
-        style: {
-          // 需要大于 Popover 的 1030 zIndex 值，否则会被遮挡
-          zIndex: 1100,
-          padding: "6px 8px",
-          boxShadow: token.boxShadowSecondary,
-          borderRadius: token.borderRadius,
-          // @ts-ignore
-          color: textColor || ((_a = token.Tooltip) == null ? void 0 : _a.colorTextLightSolid) || token.colorTextLightSolid,
-          backgroundColor: (
-            // @ts-ignore
-            backgroundColor || ((_b = token.Tooltip) == null ? void 0 : _b.colorBgSpotlight) || token.colorBgSpotlight
-          ),
-          left: isOverWidth ? clientX - tooltipWidth - offset : clientX + offset,
-          top: isOverHeight ? clientY - tooltipHeight - offset : clientY + offset,
-          ...restOverlayInnerStyle
-        },
-        ...restProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, children: typeof title === "function" ? title() : title })
-      }
-    )
-  ] });
+            handleVisibleChange(true);
+          }, mouseEnterDelay * 1000);
+        }
+      },
+      onMouseLeave: () => {
+        setTimeout(() => {
+          handleVisibleChange(false);
+        }, mouseLeaveDelay * 1000);
+      },
+      children: children
+    }), title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ReactStickyMouseTooltip.default, {
+      visible: visible,
+      style: {
+        // 需要大于 Popover 的 1030 zIndex 值，否则会被遮挡
+        zIndex: 1100,
+        padding: '6px 8px',
+        boxShadow: token.boxShadowSecondary,
+        borderRadius: token.borderRadius,
+        // @ts-ignore
+        color: textColor || token.Tooltip?.colorTextLightSolid || token.colorTextLightSolid,
+        backgroundColor:
+        // @ts-ignore
+        backgroundColor || token.Tooltip?.colorBgSpotlight || token.colorBgSpotlight,
+        left: isOverWidth ? clientX - tooltipWidth - offset : clientX + offset,
+        top: isOverHeight ? clientY - tooltipHeight - offset : clientY + offset,
+        ...restOverlayInnerStyle
+      },
+      ...restProps,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        ref: ref,
+        children: typeof title === 'function' ? title() : title
+      })
+    })]
+  });
 };
-if (process.env.NODE_ENV !== "production") {
-  MouseTooltip.displayName = "MouseTooltip";
+if (process.env.NODE_ENV !== 'production') {
+  MouseTooltip.displayName = 'MouseTooltip';
 }
-var MouseTooltip_default = MouseTooltip;
+var _default = exports.default = MouseTooltip;

package/lib/tooltip/ReactStickyMouseTooltip.js

@@ -1,72 +1,25 @@
-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/tooltip/ReactStickyMouseTooltip.tsx
-var ReactStickyMouseTooltip_exports = {};
-__export(ReactStickyMouseTooltip_exports, {
-  default: () => ReactStickyMouseTooltip_default
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(ReactStickyMouseTooltip_exports);
-var import_react = __toESM(require("react"));
-var import_jsx_runtime = require("react/jsx-runtime");
-var ReactStickyMouseTooltip = class extends import_react.default.PureComponent {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      xPosition: 0,
-      yPosition: 0,
-      mouseMoved: false,
-      listenerActive: false
-    };
-    this.getTooltipPosition = ({ clientX: xPosition, clientY: yPosition }) => {
-      this.setState({
-        xPosition,
-        yPosition,
-        mouseMoved: true
-      });
-    };
-    this.addListener = () => {
-      window.addEventListener("mousemove", this.getTooltipPosition);
-      this.setState({ listenerActive: true });
-    };
-    this.removeListener = () => {
-      window.removeEventListener("mousemove", this.getTooltipPosition);
-      this.setState({ listenerActive: false });
-    };
-    this.updateListener = () => {
-      if (!this.state.listenerActive && this.props.visible) {
-        this.addListener();
-      }
-      if (this.state.listenerActive && !this.props.visible) {
-        this.removeListener();
-      }
-    };
-  }
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+"use client";
+class ReactStickyMouseTooltip extends _react.default.PureComponent {
+  static defaultProps = {
+    visible: true,
+    offsetX: 0,
+    offsetY: 0
+  };
+  state = {
+    xPosition: 0,
+    yPosition: 0,
+    mouseMoved: false,
+    listenerActive: false
+  };
   componentDidMount() {
     this.addListener();
   }
@@ -76,26 +29,48 @@ var ReactStickyMouseTooltip = class extends import_react.default.PureComponent {
   componentWillUnmount() {
     this.removeListener();
   }
+  getTooltipPosition = ({
+    clientX: xPosition,
+    clientY: yPosition
+  }) => {
+    this.setState({
+      xPosition,
+      yPosition,
+      mouseMoved: true
+    });
+  };
+  addListener = () => {
+    window.addEventListener('mousemove', this.getTooltipPosition);
+    this.setState({
+      listenerActive: true
+    });
+  };
+  removeListener = () => {
+    window.removeEventListener('mousemove', this.getTooltipPosition);
+    this.setState({
+      listenerActive: false
+    });
+  };
+  updateListener = () => {
+    if (!this.state.listenerActive && this.props.visible) {
+      this.addListener();
+    }
+    if (this.state.listenerActive && !this.props.visible) {
+      this.removeListener();
+    }
+  };
   render() {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        className: this.props.className,
-        style: {
-          display: this.props.visible && this.state.mouseMoved ? "block" : "none",
-          position: "fixed",
-          top: this.state.yPosition + this.props.offsetY,
-          left: this.state.xPosition + this.props.offsetX,
-          ...this.props.style
-        },
-        children: this.props.children
-      }
-    );
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: this.props.className,
+      style: {
+        display: this.props.visible && this.state.mouseMoved ? 'block' : 'none',
+        position: 'fixed',
+        top: this.state.yPosition + this.props.offsetY,
+        left: this.state.xPosition + this.props.offsetX,
+        ...this.props.style
+      },
+      children: this.props.children
+    });
   }
-};
-ReactStickyMouseTooltip.defaultProps = {
-  visible: true,
-  offsetX: 0,
-  offsetY: 0
-};
-var ReactStickyMouseTooltip_default = ReactStickyMouseTooltip;
+}
+var _default = exports.default = ReactStickyMouseTooltip;

package/lib/tooltip/hooks/useTooltipTypeList.js

@@ -1,64 +1,31 @@
-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/tooltip/hooks/useTooltipTypeList.ts
-var useTooltipTypeList_exports = {};
-__export(useTooltipTypeList_exports, {
-  useTooltipTypeList: () => useTooltipTypeList
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-module.exports = __toCommonJS(useTooltipTypeList_exports);
-var import_theme = __toESM(require("../../theme"));
-var useTooltipTypeList = () => {
-  const { token } = import_theme.default.useToken();
-  return [
-    {
-      type: "success",
-      color: token.colorSuccess,
-      backgroundColor: token.colorSuccessBg
-    },
-    {
-      type: "info",
-      color: token.colorInfo,
-      backgroundColor: token.colorInfoBg
-    },
-    {
-      type: "warning",
-      color: token.colorWarning,
-      backgroundColor: token.colorWarningBg
-    },
-    {
-      type: "error",
-      color: token.colorError,
-      backgroundColor: token.colorErrorBg
-    }
-  ];
+exports.useTooltipTypeList = void 0;
+var _theme = _interopRequireDefault(require("../../theme"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const useTooltipTypeList = () => {
+  const {
+    token
+  } = _theme.default.useToken();
+  return [{
+    type: 'success',
+    color: token.colorSuccess,
+    backgroundColor: token.colorSuccessBg
+  }, {
+    type: 'info',
+    color: token.colorInfo,
+    backgroundColor: token.colorInfoBg
+  }, {
+    type: 'warning',
+    color: token.colorWarning,
+    backgroundColor: token.colorWarningBg
+  }, {
+    type: 'error',
+    color: token.colorError,
+    backgroundColor: token.colorErrorBg
+  }];
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  useTooltipTypeList
-});
+exports.useTooltipTypeList = useTooltipTypeList;