@visactor/react-vtable/es/components/popover/popover.js

The react version of VTable

import { isValid, merge } from "@visactor/vutils";

import React, { useCallback, useEffect, useState } from "react";

import { Group } from "../../table-components";

const defaultProps = {
    defaultPopupVisible: !1,
    position: "top"
}, defaultPoptipPanelStyle = {
    backgroundColor: "rgb(255, 255, 255)",
    boxShadow: "0 4px 10px rgba(0, 0, 0, .1)",
    fontSize: "14px",
    borderRadius: "4px",
    lineHeight: "1.5715",
    boxSizing: "border-box",
    color: "rgb(78, 89, 105)",
    border: "1px solid rgb(229, 230, 235)",
    padding: "12px 16px"
}, Tooltip = props => {
    const arrowStyle = Object.assign(Object.assign({
        content: "",
        height: "8px",
        width: "8px",
        position: "absolute",
        display: "block",
        boxSizing: "border-box",
        transform: "rotate(45deg)",
        transformOrigin: "50% 50% 0",
        backgroundColor: "rgb(255, 255, 255)",
        border: "1px solid rgb(229, 230, 235)"
    }, getArrowStyle(props.position)), props.arrowStyle);
    return props.visible ? React.createElement(React.Fragment, null, React.createElement("div", {
        style: merge({}, defaultPoptipPanelStyle, props.panelStyle)
    }, props.content), React.createElement("div", {
        style: arrowStyle
    })) : React.createElement(React.Fragment, null);
};

function PopoverComponent(baseProps, ref) {
    const props = merge({}, defaultProps, baseProps), {content: content, position: position, popupVisible: popupVisible, defaultPopupVisible: defaultPopupVisible, panelStyle: panelStyle, arrowStyle: arrowStyle, children: children} = props;
    let popoverRef = React.useRef(null);
    popoverRef = ref || popoverRef;
    const [popupOpen, setPopupOpen] = useState(!1);
    useEffect((() => {
        setPopupOpen(!!popupVisible), popoverRef.current.stage.renderNextFrame();
    }), [ popupVisible ]), useEffect((() => {
        var _a;
        setPopupOpen(null !== (_a = null != popupVisible ? popupVisible : defaultPopupVisible) && void 0 !== _a && _a);
    }), []);
    const {transform: transform, anchorType: anchorType} = getTransform(position), groupAttribute = {
        react: {
            style: {
                transform: transform
            },
            element: React.createElement(Tooltip, {
                visible: popupOpen,
                content: content,
                position: position,
                panelStyle: panelStyle,
                arrowStyle: arrowStyle
            }),
            container: null,
            visible: !0,
            pointerEvents: !1,
            anchorType: anchorType
        }
    }, groupMouseEnter = useCallback((event => {
        isValid(popupVisible) || (setPopupOpen(!0), event.currentTarget.stage.renderNextFrame());
    }), []), groupMouseLeave = useCallback((event => {
        isValid(popupVisible) || (setPopupOpen(!1), event.currentTarget.stage.renderNextFrame());
    }), []);
    return React.createElement(Group, {
        ref: popoverRef,
        attribute: groupAttribute,
        onMouseEnter: groupMouseEnter,
        onMouseLeave: groupMouseLeave
    }, children);
}

function getTransform(position) {
    switch (position) {
      case "top":
        return {
            anchorType: "top",
            transform: "translate(-50%, calc(-100% - 10px))"
        };

      case "tl":
        return {
            anchorType: "top-left",
            transform: "translate(0, calc(-100% - 10px))"
        };

      case "tr":
        return {
            anchorType: "top-right",
            transform: "translate(-100%, calc(-100% - 10px))"
        };

      case "bottom":
        return {
            anchorType: "bottom",
            transform: "translate(-50%, 10px)"
        };

      case "bl":
        return {
            anchorType: "bottom-left",
            transform: "translate(0, 10px)"
        };

      case "br":
        return {
            anchorType: "bottom-right",
            transform: "translate(-100%, 10px)"
        };

      case "left":
        return {
            anchorType: "left",
            transform: "translate(calc(-100% - 10px), -50%)"
        };

      case "lt":
        return {
            anchorType: "top-left",
            transform: "translate(calc(-100% - 10px), 0)"
        };

      case "lb":
        return {
            anchorType: "bottom-left",
            transform: "translate(calc(-100% - 10px), -100%)"
        };

      case "right":
        return {
            anchorType: "right",
            transform: "translate(10px, -50%)"
        };

      case "rt":
        return {
            anchorType: "top-right",
            transform: "translate(10px, 0)"
        };

      case "rb":
        return {
            anchorType: "bottom-right",
            transform: "translate(10px, -100%)"
        };
    }
}

function getArrowStyle(position) {
    switch (position) {
      case "top":
        return {
            top: "calc(100% - 5px)",
            left: "calc(50% - 5px)",
            borderTop: "none",
            borderLeft: "none"
        };

      case "tl":
        return {
            top: "calc(100% - 4px)",
            left: "14px",
            borderTop: "none",
            borderLeft: "none"
        };

      case "tr":
        return {
            top: "calc(100% - 4px)",
            left: "calc(100% - 24px)",
            borderTop: "none",
            borderLeft: "none"
        };

      case "bottom":
        return {
            top: "-4px",
            left: "calc(50% - 4px)",
            borderRight: "none",
            borderBottom: "none"
        };

      case "bl":
        return {
            top: "-4px",
            left: "14px",
            borderRight: "none",
            borderBottom: "none"
        };

      case "br":
        return {
            top: "-4px",
            left: "calc(100% - 24px)",
            borderRight: "none",
            borderBottom: "none"
        };

      case "left":
        return {
            top: "calc(50% - 4px)",
            left: "calc(100% - 5px)",
            borderLeft: "none",
            borderBottom: "none"
        };

      case "lt":
        return {
            top: "14px",
            left: "calc(100% - 5px)",
            borderLeft: "none",
            borderBottom: "none"
        };

      case "lb":
        return {
            top: "calc(100% - 24px)",
            left: "calc(100% - 5px)",
            borderLeft: "none",
            borderBottom: "none"
        };

      case "right":
        return {
            top: "calc(50% - 4px)",
            left: "-4px",
            borderRight: "none",
            borderTop: "none"
        };

      case "rt":
        return {
            top: "14px",
            left: "-4px",
            borderRight: "none",
            borderTop: "none"
        };

      case "rb":
        return {
            top: "calc(100% - 24px)",
            left: "-4px",
            borderRight: "none",
            borderTop: "none"
        };
    }
}

export const Popover = React.forwardRef(PopoverComponent);

Popover.displayName = "Popover";
//# sourceMappingURL=popover.js.map