synapse-react-client/dist/utils/hooks/useOverlay.js

[](https://travis-ci.com/Sage-Bionetworks/Synapse-React-Client) [](https://badge.fury.io/js/synaps

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useOverlay = void 0;
var tslib_1 = require("tslib");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var react_bootstrap_1 = require("react-bootstrap");
function resetTimer(timer) {
    if (timer.current) {
        clearTimeout(timer.current);
    }
}
function useOverlay(children, targetRef, delayShow, delayHide, placement) {
    if (delayShow === void 0) { delayShow = 250; }
    if (delayHide === void 0) { delayHide = 500; }
    if (placement === void 0) { placement = 'top-start'; }
    var timer = (0, react_1.useRef)(null);
    var _a = (0, react_1.useState)(false), isShowing = _a[0], setIsShowing = _a[1];
    function toggle(show, withDelay) {
        if (show === void 0) { show = isShowing; }
        if (withDelay === void 0) { withDelay = true; }
        resetTimer(timer);
        if (withDelay) {
            timer.current = setTimeout(function () { return setIsShowing(show); }, show ? delayShow : delayHide);
        }
        else {
            setIsShowing(show);
        }
    }
    function toggleShow(withDelay) {
        if (withDelay === void 0) { withDelay = true; }
        toggle(true, withDelay);
    }
    function toggleHide(withDelay) {
        if (withDelay === void 0) { withDelay = true; }
        toggle(false, withDelay);
    }
    var OverlayComponent = (react_1.default.createElement(react_bootstrap_1.Overlay, { target: targetRef.current, show: isShowing, placement: placement }, function (_a) {
        var placement = _a.placement, arrowProps = _a.arrowProps, _show = _a.show, popper = _a.popper, props = (0, tslib_1.__rest)(_a, ["placement", "arrowProps", "show", "popper"]);
        return (react_1.default.createElement("div", (0, tslib_1.__assign)({ className: "bootstrap-4-backport", onMouseEnter: function () {
                toggle(true, false);
            }, onMouseLeave: function () {
                toggleHide(true);
            } }, props, { style: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props.style), { width: 'max-content', minWidth: '300px' }) }), children));
    }));
    return { OverlayComponent: OverlayComponent, isShowing: isShowing, toggleShow: toggleShow, toggleHide: toggleHide, toggle: toggle };
}
exports.useOverlay = useOverlay;
//# sourceMappingURL=useOverlay.js.map