@kiwicom/orbit-components/lib/Popover/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

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

var React = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _useStateWithTimeout = _interopRequireDefault(require("../hooks/useStateWithTimeout"));

var _useTheme = _interopRequireDefault(require("../hooks/useTheme"));

var _consts = require("../common/consts");

var _ContentWrapper = _interopRequireDefault(require("./components/ContentWrapper"));

var _Portal = _interopRequireDefault(require("../Portal"));

var _handleKeyDown = _interopRequireDefault(require("../utils/handleKeyDown"));

const StyledPopoverChild = _styledComponents.default.div.withConfig({
  displayName: "Popover__StyledPopoverChild",
  componentId: "sc-1n31v1j-0"
})(["position:relative;"]);

const Popover = ({
  children,
  renderInPortal = true,
  opened,
  content,
  onClose,
  onOpen,
  offset,
  placement = _consts.PLACEMENTS.BOTTOM_START,
  fixed,
  lockScrolling = true,
  noFlip,
  allowOverflow,
  noPadding,
  width,
  actions,
  overlapped,
  dataTest
}) => {
  const ref = React.useRef(null);
  const theme = (0, _useTheme.default)();
  const transitionLength = React.useMemo(() => parseFloat(theme.orbit.durationFast) * 1000, [theme.orbit.durationFast]);
  const [shown, setShown, setShownWithTimeout, clearShownTimeout] = (0, _useStateWithTimeout.default)(false, transitionLength);
  const [render, setRender, setRenderWithTimeout, clearRenderTimeout] = (0, _useStateWithTimeout.default)(false, transitionLength);
  const resolveCallback = React.useCallback(state => {
    if (onClose && !state) onClose();
    if (onOpen && state) onOpen();
  }, [onClose, onOpen]);
  const handleOut = React.useCallback(ev => {
    // If open prop is present ignore custom handler
    // $FlowFixMe: TODO
    if (ref.current && !ref.current.contains(ev.target)) {
      if (typeof opened === "undefined") {
        setShown(false);
        clearShownTimeout();
        setRenderWithTimeout(false);
        resolveCallback(false);
      } else if (onClose) onClose();
    }
  }, [clearShownTimeout, onClose, opened, resolveCallback, setRenderWithTimeout, setShown]);
  const handleClick = React.useCallback(() => {
    // If open prop is present ignore custom handler
    if (typeof opened === "undefined") {
      if (shown) {
        setShown(false);
        clearShownTimeout();
        setRenderWithTimeout(false);
        resolveCallback(false);
      } else {
        setRender(true);
        clearRenderTimeout();
        setShownWithTimeout(true);
        resolveCallback(true);
      }
    } else if (opened) {
      resolveCallback(false);
    } else if (!opened) {
      resolveCallback(true);
    }
  }, [clearRenderTimeout, clearShownTimeout, opened, resolveCallback, setRender, setRenderWithTimeout, setShown, setShownWithTimeout, shown]);
  React.useEffect(() => {
    if (typeof opened !== "undefined") {
      if (opened) {
        setRender(true);
        clearRenderTimeout();
        setShownWithTimeout(true);
      } else {
        setShown(false);
        clearShownTimeout();
        setRenderWithTimeout(false);
      }
    }
  }, [opened, clearRenderTimeout, clearShownTimeout, setRender, setShown, setShownWithTimeout, setRenderWithTimeout]);
  const popover = /*#__PURE__*/React.createElement(_ContentWrapper.default, {
    shown: shown,
    dataTest: dataTest,
    overlapped: overlapped,
    fixed: fixed,
    noFlip: noFlip,
    allowOverflow: allowOverflow,
    lockScrolling: lockScrolling,
    noPadding: noPadding,
    actions: actions,
    width: width,
    offset: offset,
    referenceElement: ref.current,
    onClose: handleOut,
    placement: placement
  }, content);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledPopoverChild, {
    ref: ref,
    onClick: handleClick,
    onKeyDown: (0, _handleKeyDown.default)(handleClick)
  }, children), render && (renderInPortal ? /*#__PURE__*/React.createElement(_Portal.default, {
    renderInto: "popovers"
  }, popover) : popover));
};

var _default = Popover;
exports.default = _default;