react-base-guide/lib/components/popover/index.js

react ui components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styled_components_1 = __importDefault(require("styled-components"));
const add_custom_style_1 = require("../../utils/add-custom-style");
const Wrapper = styled_components_1.default.div `
  position: relative;
  box-sizing: border-box;
  outline: none;
  user-select: none;
  
  ${p => (0, add_custom_style_1.addCustomStyle)(p.$styled, "inline-block")}
`;
const PopoverHead = styled_components_1.default.div `
  position: relative;
  box-sizing: border-box;
  cursor: pointer;
  z-index: ${p => p.theme.zIndex.relative};
`;
const Body = styled_components_1.default.div `
  position: absolute;
  box-sizing: border-box;
  right: ${p => p.right ? "0" : "auto"};
  bottom: ${p => p.up ? "100%" : "auto"};
  z-index: ${p => p.theme.zIndex.absolute};
`;
const onBlur = (e, setOpen, containerRef) => {
    if (!e.relatedTarget || !containerRef.current.contains(e.relatedTarget)) {
        setOpen(false);
    }
};
const Popover = (props) => {
    const [open, setOpen] = (0, react_1.useState)(props.open || false);
    const containerRef = (0, react_1.useRef)(null);
    return ((0, jsx_runtime_1.jsxs)(Wrapper, Object.assign({ ref: containerRef, tabIndex: 0, onBlur: e => onBlur(e, setOpen, containerRef), "$styled": props.styled }, { children: [(0, jsx_runtime_1.jsx)(PopoverHead, Object.assign({ className: open ? "popover-open" : "popover-close", onClick: (e) => {
                    e.preventDefault();
                    e.stopPropagation();
                    setOpen(!open);
                } }, { children: props.head })), open && (0, jsx_runtime_1.jsx)(Body, Object.assign({ up: props.up, right: props.right }, { children: props.children }))] })));
};
exports.default = Popover;
//# sourceMappingURL=index.js.map