ag-common 0.0.699 → 0.0.701

package/dist/ui/components/BarChart/Base.js

@@ -31,7 +31,7 @@ const BarChart = ({ data: dataRaw, style: sRaw, className, }) => {
     const UT = (0, useTooltip_1.useTooltip)();
     const maxWidth = Math.max(...dataRaw.map((a) => a.total));
     return (react_1.default.createElement(BarChartBase, { "data-type": "bcb", style: style, className: className },
-        react_1.default.createElement(UT.Comp, { pos: UT.pos }, (p) => react_1.default.createElement(TooltipContent_1.TooltipContent, Object.assign({}, p, { style: style }))),
+        react_1.default.createElement(UT.Comp, { pos: UT.pos }, ({ data }) => react_1.default.createElement(TooltipContent_1.TooltipContent, Object.assign({}, data, { style: style }))),
         dataRaw.map((data) => (react_1.default.createElement(ItemStyled, { style: style, key: data.name, data: data, maxWidth: maxWidth, onMouseLeave: () => UT.setPos(undefined), onMouseMove: (element) => {
                 var _a, _b;
                 const selectedKey = (_b = (_a = document

package/dist/ui/components/Modal/Modal.js

@@ -32,6 +32,7 @@ const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = __importStar(require("react"));
 const react_dom_1 = require("react-dom");
 const dom_1 = require("../../helpers/dom");
+const useLockBodyScroll_1 = require("../../helpers/useLockBodyScroll");
 const useOnClickOutside_1 = require("../../helpers/useOnClickOutside");
 const styles_1 = require("../../styles");
 const Close_1 = require("../Close");
@@ -92,6 +93,7 @@ const Modal = (p) => {
     if (portalId === undefined) {
         portalId = globalId;
     }
+    (0, useLockBodyScroll_1.useLockBodyScroll)(p.open);
     const [portalElem, setPortalElem] = (0, react_1.useState)();
     (0, react_1.useEffect)(() => {
         if (portalId === null ||
@@ -114,15 +116,6 @@ const Modal = (p) => {
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    (0, react_1.useEffect)(() => {
-        const originalStyle = window.getComputedStyle(document.body).overflow || '';
-        if (open) {
-            document.body.style.overflow = 'hidden';
-        }
-        return () => {
-            document.body.style.overflow = originalStyle;
-        };
-    }, [open]);
     const [bounced, setBounced] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
     (0, useOnClickOutside_1.useOnClickOutside)({

package/dist/ui/components/TreeChart/base.js

@@ -120,7 +120,7 @@ const TreeChart = (tnd) => {
         return react_1.default.createElement("div", null);
     }
     return (react_1.default.createElement(Base, { ref: r, className: tnd.className, style: tnd.style },
-        react_1.default.createElement(UT.Comp, { pos: UT.pos }, (p) => react_1.default.createElement(TooltipContent_1.TooltipContent, Object.assign({}, p))),
+        react_1.default.createElement(UT.Comp, { pos: UT.pos }, ({ data }) => react_1.default.createElement(TooltipContent_1.TooltipContent, Object.assign({}, data))),
         headDim &&
             Render({
                 UT,

package/dist/ui/helpers/useTooltip.d.ts

@@ -3,12 +3,16 @@ interface IPos<T> {
     cursor: MouseEvent;
     data: T;
     portalId: string;
-    usePortal: boolean;
+    hasParent: boolean;
     parentWidth: number;
     parentHeight: number;
     x: number;
     y: number;
 }
+interface IPosSize {
+    tooltipWidth: number;
+    tooltipHeight: number;
+}
 type ITooltipProps = {
     /** default 'ag-tooltip-portal' */
     portalId: string;
@@ -16,7 +20,7 @@ type ITooltipProps = {
 export interface IUseTooltip<T> {
     Comp: <T>({ pos, children, }: {
         pos: IPos<T> | undefined;
-        children: (data: T) => JSX.Element;
+        children: (pos: IPos<T>, size?: IPosSize) => JSX.Element;
     }) => JSX.Element | null;
     setPos: (p?: {
         element: MouseEvent;

package/dist/ui/helpers/useTooltip.js

@@ -38,23 +38,17 @@ const Comp = ({ pos, children, }) => {
     const ref = (0, react_1.createRef)();
     const [size, setSize] = (0, react_1.useState)();
     (0, react_1.useEffect)(() => {
-        var _a, _b;
-        if (!ref.current) {
+        if (!ref.current || size) {
             return;
         }
         const tooltipWidth = Math.max(ref.current.clientWidth, ref.current.scrollWidth);
         const tooltipHeight = Math.max(ref.current.clientHeight, ref.current.scrollHeight);
-        if (tooltipHeight === ((_a = size === null || size === void 0 ? void 0 : size.p) === null || _a === void 0 ? void 0 : _a.tooltipHeight) ||
-            tooltipWidth === ((_b = size === null || size === void 0 ? void 0 : size.p) === null || _b === void 0 ? void 0 : _b.tooltipWidth) ||
-            tooltipHeight === 0 ||
-            tooltipWidth === 0) {
+        if (tooltipHeight === 0 || tooltipWidth === 0) {
             return;
         }
         setSize({
-            p: {
-                tooltipWidth,
-                tooltipHeight,
-            },
+            tooltipWidth,
+            tooltipHeight,
         });
     }, [ref, size]);
     if (!pos) {
@@ -65,34 +59,40 @@ const Comp = ({ pos, children, }) => {
     let top;
     let bottom;
     const gap = 5;
-    if (size === null || size === void 0 ? void 0 : size.p) {
+    if (size) {
         left = pos.x + gap;
         const newRight = pos.parentWidth - pos.x + gap;
-        if (pos.x + gap + size.p.tooltipWidth > pos.parentWidth) {
+        if (pos.x + gap + size.tooltipWidth > pos.parentWidth) {
             left = undefined;
             right = newRight;
         }
         //
         top = pos.y + gap;
-        if (top + size.p.tooltipHeight > pos.parentHeight) {
-            top = undefined;
+        if (top + size.tooltipHeight > pos.parentHeight) {
+            if (pos.hasParent) {
+                top = undefined;
+            }
             bottom = pos.parentHeight - pos.y;
         }
-        if (right && right + size.p.tooltipWidth > pos.parentWidth) {
-            right = undefined;
+        if (right && right + size.tooltipWidth > pos.parentWidth) {
+            if (pos.hasParent) {
+                right = undefined;
+            }
             left = 0;
         }
-        if (bottom && bottom + size.p.tooltipHeight > pos.parentHeight) {
-            bottom = undefined;
+        if (bottom && bottom + size.tooltipHeight > pos.parentHeight) {
+            if (pos.hasParent) {
+                bottom = undefined;
+            }
             top = 0;
         }
     }
     const Content = (react_1.default.createElement(Base, { "data-type": "tooltip-content", ref: ref, style: Object.assign(Object.assign({ left,
             right,
             top,
-            bottom, zIndex: 10 }, (pos.usePortal && { position: 'fixed' })), (!(size === null || size === void 0 ? void 0 : size.p) && { zIndex: -1 })) }, children(pos.data)));
+            bottom, zIndex: 10, overflow: 'hidden' }, (!pos.hasParent && { position: 'fixed' })), (!size && { zIndex: -1 })) }, children(pos, size)));
     const e = document.querySelector(`#${pos.portalId}`);
-    if (pos.usePortal && e) {
+    if (!pos.hasParent && e) {
         return (0, react_dom_1.createPortal)(Content, e);
     }
     return Content;
@@ -152,7 +152,7 @@ const useTooltip = (p) => {
             parentHeight,
             x,
             y,
-            usePortal: !p.parent,
+            hasParent: !!p.parent,
             portalId,
         };
         setPosRaw(p2);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.0.699",
+  "version": "0.0.701",
   "name": "ag-common",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",