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

The react version of VTable

"use strict";

var __createBinding = this && this.__createBinding || (Object.create ? function(o, m, k, k2) {
    void 0 === k2 && (k2 = k);
    var desc = Object.getOwnPropertyDescriptor(m, k);
    desc && !("get" in desc ? !m.__esModule : desc.writable || desc.configurable) || (desc = {
        enumerable: !0,
        get: function() {
            return m[k];
        }
    }), Object.defineProperty(o, k2, desc);
} : function(o, m, k, k2) {
    void 0 === k2 && (k2 = k), o[k2] = m[k];
}), __setModuleDefault = this && this.__setModuleDefault || (Object.create ? function(o, v) {
    Object.defineProperty(o, "default", {
        enumerable: !0,
        value: v
    });
} : function(o, v) {
    o.default = v;
}), __importStar = this && this.__importStar || function(mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (null != mod) for (var k in mod) "default" !== k && Object.prototype.hasOwnProperty.call(mod, k) && __createBinding(result, mod, k);
    return __setModuleDefault(result, mod), result;
};

Object.defineProperty(exports, "__esModule", {
    value: !0
}), exports.Popover = void 0;

const vutils_1 = require("@visactor/vutils"), react_1 = __importStar(require("react")), table_components_1 = require("../../table-components"), 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_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement("div", {
        style: (0, vutils_1.merge)({}, defaultPoptipPanelStyle, props.panelStyle)
    }, props.content), react_1.default.createElement("div", {
        style: arrowStyle
    })) : react_1.default.createElement(react_1.default.Fragment, null);
};

function PopoverComponent(baseProps, ref) {
    const props = (0, vutils_1.merge)({}, defaultProps, baseProps), {content: content, position: position, popupVisible: popupVisible, defaultPopupVisible: defaultPopupVisible, panelStyle: panelStyle, arrowStyle: arrowStyle, children: children} = props;
    let popoverRef = react_1.default.useRef(null);
    popoverRef = ref || popoverRef;
    const [popupOpen, setPopupOpen] = (0, react_1.useState)(!1);
    (0, react_1.useEffect)((() => {
        setPopupOpen(!!popupVisible), popoverRef.current.stage.renderNextFrame();
    }), [ popupVisible ]), (0, react_1.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_1.default.createElement(Tooltip, {
                visible: popupOpen,
                content: content,
                position: position,
                panelStyle: panelStyle,
                arrowStyle: arrowStyle
            }),
            container: null,
            visible: !0,
            pointerEvents: !1,
            anchorType: anchorType
        }
    }, groupMouseEnter = (0, react_1.useCallback)((event => {
        (0, vutils_1.isValid)(popupVisible) || (setPopupOpen(!0), event.currentTarget.stage.renderNextFrame());
    }), []), groupMouseLeave = (0, react_1.useCallback)((event => {
        (0, vutils_1.isValid)(popupVisible) || (setPopupOpen(!1), event.currentTarget.stage.renderNextFrame());
    }), []);
    return react_1.default.createElement(table_components_1.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"
        };
    }
}

exports.Popover = react_1.default.forwardRef(PopoverComponent), exports.Popover.displayName = "Popover";
//# sourceMappingURL=popover.js.map