bj-web-components 0.2.26 → 0.2.28

package/dist/web/Tooltip/ContentTooltip.js

@@ -0,0 +1,94 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const reactDom = require("react-dom");
+const antd = require("antd");
+;/* empty css              */
+const useAutoPlacement = require("./useAutoPlacement.js");
+function BTooltip({
+  children,
+  placement = "top",
+  content = "这里是提示内容，可以包含更多详细信息。",
+  variant = "default",
+  className,
+  style,
+  getPopupContainer,
+  getAnchorElement,
+  color,
+  fontColor,
+  autoAdjustOverflow = true
+}) {
+  const [activePlacement, popupRef] = useAutoPlacement.useAutoPlacement(placement);
+  const anchorRef = react.useRef(null);
+  const [portalStyle, setPortalStyle] = react.useState();
+  const popupCls = [
+    "tooltip-popup",
+    "tooltip-popup--content",
+    `tooltip-popup--${activePlacement}`,
+    variant !== "default" ? `tooltip-popup--${variant}` : "",
+    className
+  ].filter(Boolean).join(" ");
+  const arrowCls = [
+    "tooltip-arrow",
+    `tooltip-arrow--${activePlacement}`,
+    variant === "tinted" ? "tooltip-arrow--tinted-bg" : ""
+  ].filter(Boolean).join(" ");
+  const mergedPopupStyle = {
+    ...style,
+    ...color ? { backgroundColor: color } : {},
+    ...fontColor ? { color: fontColor } : {}
+  };
+  const arrowStyle = color ? { backgroundColor: color, borderColor: color } : void 0;
+  const contentStyle = fontColor ? { color: fontColor } : void 0;
+  const customContent = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${popupCls} tooltip-popup--antd`, style: mergedPopupStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: arrowCls, style: arrowStyle }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bu-tooltip-content__text", style: contentStyle, children: content })
+  ] });
+  if (children) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      antd.Tooltip,
+      {
+        title: customContent,
+        placement: placement === "auto" ? "top" : placement,
+        arrowPointAtCenter: true,
+        autoAdjustOverflow,
+        getPopupContainer,
+        overlayClassName: "bu-content-tooltip",
+        children
+      }
+    );
+  }
+  const popup = /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: popupRef, className: popupCls, style: mergedPopupStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: arrowCls, style: arrowStyle }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bu-tooltip-content__text", style: contentStyle, children: content })
+  ] });
+  react.useLayoutEffect(() => {
+    if (!getPopupContainer || !anchorRef.current) return;
+    const anchor = (getAnchorElement == null ? void 0 : getAnchorElement()) ?? anchorRef.current.parentElement;
+    if (!anchor) return;
+    const rect = anchor.getBoundingClientRect();
+    setPortalStyle({
+      position: "fixed",
+      left: rect.left + rect.width / 2,
+      top: rect.top,
+      right: "auto",
+      bottom: "auto",
+      transform: "translate(-50%, calc(-100% - 16px))"
+    });
+  }, [getAnchorElement, getPopupContainer]);
+  if (getPopupContainer && typeof document !== "undefined") {
+    const container = getPopupContainer();
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { ref: anchorRef, className: "tooltip-portal-anchor" }),
+      portalStyle && reactDom.createPortal(
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: popupRef, className: popupCls, style: { ...mergedPopupStyle, ...portalStyle }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: arrowCls, style: arrowStyle }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bu-tooltip-content__text", style: contentStyle, children: content })
+        ] }),
+        container
+      )
+    ] });
+  }
+  return popup;
+}
+module.exports = BTooltip;

package/dist/web/Tooltip/ContentTooltip.mjs

@@ -0,0 +1,95 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useRef, useState, useLayoutEffect } from "react";
+import { createPortal } from "react-dom";
+import { Tooltip } from "antd";
+/* empty css              */
+import { useAutoPlacement } from "./useAutoPlacement.mjs";
+function BTooltip({
+  children,
+  placement = "top",
+  content = "这里是提示内容，可以包含更多详细信息。",
+  variant = "default",
+  className,
+  style,
+  getPopupContainer,
+  getAnchorElement,
+  color,
+  fontColor,
+  autoAdjustOverflow = true
+}) {
+  const [activePlacement, popupRef] = useAutoPlacement(placement);
+  const anchorRef = useRef(null);
+  const [portalStyle, setPortalStyle] = useState();
+  const popupCls = [
+    "tooltip-popup",
+    "tooltip-popup--content",
+    `tooltip-popup--${activePlacement}`,
+    variant !== "default" ? `tooltip-popup--${variant}` : "",
+    className
+  ].filter(Boolean).join(" ");
+  const arrowCls = [
+    "tooltip-arrow",
+    `tooltip-arrow--${activePlacement}`,
+    variant === "tinted" ? "tooltip-arrow--tinted-bg" : ""
+  ].filter(Boolean).join(" ");
+  const mergedPopupStyle = {
+    ...style,
+    ...color ? { backgroundColor: color } : {},
+    ...fontColor ? { color: fontColor } : {}
+  };
+  const arrowStyle = color ? { backgroundColor: color, borderColor: color } : void 0;
+  const contentStyle = fontColor ? { color: fontColor } : void 0;
+  const customContent = /* @__PURE__ */ jsxs("div", { className: `${popupCls} tooltip-popup--antd`, style: mergedPopupStyle, children: [
+    /* @__PURE__ */ jsx("div", { className: arrowCls, style: arrowStyle }),
+    /* @__PURE__ */ jsx("div", { className: "bu-tooltip-content__text", style: contentStyle, children: content })
+  ] });
+  if (children) {
+    return /* @__PURE__ */ jsx(
+      Tooltip,
+      {
+        title: customContent,
+        placement: placement === "auto" ? "top" : placement,
+        arrowPointAtCenter: true,
+        autoAdjustOverflow,
+        getPopupContainer,
+        overlayClassName: "bu-content-tooltip",
+        children
+      }
+    );
+  }
+  const popup = /* @__PURE__ */ jsxs("div", { ref: popupRef, className: popupCls, style: mergedPopupStyle, children: [
+    /* @__PURE__ */ jsx("div", { className: arrowCls, style: arrowStyle }),
+    /* @__PURE__ */ jsx("div", { className: "bu-tooltip-content__text", style: contentStyle, children: content })
+  ] });
+  useLayoutEffect(() => {
+    if (!getPopupContainer || !anchorRef.current) return;
+    const anchor = (getAnchorElement == null ? void 0 : getAnchorElement()) ?? anchorRef.current.parentElement;
+    if (!anchor) return;
+    const rect = anchor.getBoundingClientRect();
+    setPortalStyle({
+      position: "fixed",
+      left: rect.left + rect.width / 2,
+      top: rect.top,
+      right: "auto",
+      bottom: "auto",
+      transform: "translate(-50%, calc(-100% - 16px))"
+    });
+  }, [getAnchorElement, getPopupContainer]);
+  if (getPopupContainer && typeof document !== "undefined") {
+    const container = getPopupContainer();
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { ref: anchorRef, className: "tooltip-portal-anchor" }),
+      portalStyle && createPortal(
+        /* @__PURE__ */ jsxs("div", { ref: popupRef, className: popupCls, style: { ...mergedPopupStyle, ...portalStyle }, children: [
+          /* @__PURE__ */ jsx("div", { className: arrowCls, style: arrowStyle }),
+          /* @__PURE__ */ jsx("div", { className: "bu-tooltip-content__text", style: contentStyle, children: content })
+        ] }),
+        container
+      )
+    ] });
+  }
+  return popup;
+}
+export {
+  BTooltip as default
+};

package/dist/web/Tooltip/ProgressTooltip.js

@@ -0,0 +1,36 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+;/* empty css              */
+const useAutoPlacement = require("./useAutoPlacement.js");
+function ProgressTooltip({
+  placement = "top",
+  title = "正在翻译私域数据...",
+  progress = 0,
+  className,
+  style
+}) {
+  const [activePlacement, popupRef] = useAutoPlacement.useAutoPlacement(placement);
+  const pct = Math.min(100, Math.max(0, Math.round(progress)));
+  const popupCls = ["tooltip-popup", `tooltip-popup--${activePlacement}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: popupRef, className: popupCls, style, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `tooltip-arrow tooltip-arrow--${activePlacement}` }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tooltip-progress", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "tooltip-progress__header", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "tooltip-progress__title", children: title }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "tooltip-progress__percent", children: [
+          pct,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "tooltip-progress__track",
+          style: { "--tooltip-progress": `${pct}%` },
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "tooltip-progress__fill" })
+        }
+      )
+    ] })
+  ] });
+}
+module.exports = ProgressTooltip;

package/dist/web/Tooltip/ProgressTooltip.mjs

@@ -0,0 +1,37 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+/* empty css              */
+import { useAutoPlacement } from "./useAutoPlacement.mjs";
+function ProgressTooltip({
+  placement = "top",
+  title = "正在翻译私域数据...",
+  progress = 0,
+  className,
+  style
+}) {
+  const [activePlacement, popupRef] = useAutoPlacement(placement);
+  const pct = Math.min(100, Math.max(0, Math.round(progress)));
+  const popupCls = ["tooltip-popup", `tooltip-popup--${activePlacement}`, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { ref: popupRef, className: popupCls, style, children: [
+    /* @__PURE__ */ jsx("div", { className: `tooltip-arrow tooltip-arrow--${activePlacement}` }),
+    /* @__PURE__ */ jsxs("div", { className: "tooltip-progress", children: [
+      /* @__PURE__ */ jsxs("div", { className: "tooltip-progress__header", children: [
+        /* @__PURE__ */ jsx("span", { className: "tooltip-progress__title", children: title }),
+        /* @__PURE__ */ jsxs("span", { className: "tooltip-progress__percent", children: [
+          pct,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "tooltip-progress__track",
+          style: { "--tooltip-progress": `${pct}%` },
+          children: /* @__PURE__ */ jsx("div", { className: "tooltip-progress__fill" })
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  ProgressTooltip as default
+};

package/dist/web/Tooltip/TooltipWrapper.js

@@ -0,0 +1,12 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+;/* empty css              */
+const TooltipWrapper = react.forwardRef(
+  ({ children, style, className }, ref) => {
+    const cls = ["tooltip-wrapper", className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cls, style, children });
+  }
+);
+TooltipWrapper.displayName = "TooltipWrapper";
+module.exports = TooltipWrapper;

package/dist/web/Tooltip/TooltipWrapper.mjs

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+/* empty css              */
+const TooltipWrapper = forwardRef(
+  ({ children, style, className }, ref) => {
+    const cls = ["tooltip-wrapper", className].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx("div", { ref, className: cls, style, children });
+  }
+);
+TooltipWrapper.displayName = "TooltipWrapper";
+export {
+  TooltipWrapper as default
+};

package/dist/web/Tooltip/useAutoPlacement.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const react = require("react");
+const CLOCKWISE = ["top", "right", "bottom", "left"];
+function useAutoPlacement(placement) {
+  const [resolved, setResolved] = react.useState("top");
+  const [popupEl, setPopupEl] = react.useState(null);
+  const popupRef = react.useCallback((el) => {
+    setPopupEl(el);
+  }, []);
+  react.useLayoutEffect(() => {
+    if (placement !== "auto" || !popupEl) return;
+    const parent = popupEl.parentElement;
+    if (!parent) return;
+    const pr = parent.getBoundingClientRect();
+    const pw = popupEl.offsetWidth;
+    const ph = popupEl.offsetHeight;
+    const gap = 12;
+    const space = {
+      top: pr.top,
+      right: window.innerWidth - pr.right,
+      bottom: window.innerHeight - pr.bottom,
+      left: pr.left
+    };
+    const required = {
+      top: ph + gap,
+      right: pw + gap,
+      bottom: ph + gap,
+      left: pw + gap
+    };
+    for (const dir of CLOCKWISE) {
+      if (space[dir] >= required[dir]) {
+        setResolved(dir);
+        return;
+      }
+    }
+    setResolved("top");
+  }, [placement, popupEl]);
+  return [placement === "auto" ? resolved : placement, popupRef];
+}
+exports.useAutoPlacement = useAutoPlacement;

package/dist/web/Tooltip/useAutoPlacement.mjs

@@ -0,0 +1,41 @@
+import { useState, useCallback, useLayoutEffect } from "react";
+const CLOCKWISE = ["top", "right", "bottom", "left"];
+function useAutoPlacement(placement) {
+  const [resolved, setResolved] = useState("top");
+  const [popupEl, setPopupEl] = useState(null);
+  const popupRef = useCallback((el) => {
+    setPopupEl(el);
+  }, []);
+  useLayoutEffect(() => {
+    if (placement !== "auto" || !popupEl) return;
+    const parent = popupEl.parentElement;
+    if (!parent) return;
+    const pr = parent.getBoundingClientRect();
+    const pw = popupEl.offsetWidth;
+    const ph = popupEl.offsetHeight;
+    const gap = 12;
+    const space = {
+      top: pr.top,
+      right: window.innerWidth - pr.right,
+      bottom: window.innerHeight - pr.bottom,
+      left: pr.left
+    };
+    const required = {
+      top: ph + gap,
+      right: pw + gap,
+      bottom: ph + gap,
+      left: pw + gap
+    };
+    for (const dir of CLOCKWISE) {
+      if (space[dir] >= required[dir]) {
+        setResolved(dir);
+        return;
+      }
+    }
+    setResolved("top");
+  }, [placement, popupEl]);
+  return [placement === "auto" ? resolved : placement, popupRef];
+}
+export {
+  useAutoPlacement
+};