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

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

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

import * as React from "react";
import styled from "styled-components";
import Portal from "../Portal";
import PopoverContentWrapper from "./components/ContentWrapper";
import useTheme from "../hooks/useTheme";
import useStateWithTimeout from "../hooks/useStateWithTimeout";
import { POSITIONS, ALIGNS } from "./consts";
import handleKeyDown from "../utils/handleKeyDown";
var StyledPopoverChild = styled.div.withConfig({
  displayName: "Popover__StyledPopoverChild",
  componentId: "t88fx4-0"
})(["position:relative;"]);

var Popover = function Popover(_ref) {
  var children = _ref.children,
      _ref$offset = _ref.offset,
      offset = _ref$offset === void 0 ? {
    top: 0,
    left: 0
  } : _ref$offset,
      content = _ref.content,
      _ref$preferredPositio = _ref.preferredPosition,
      preferredPosition = _ref$preferredPositio === void 0 ? POSITIONS.BOTTOM : _ref$preferredPositio,
      _ref$preferredAlign = _ref.preferredAlign,
      preferredAlign = _ref$preferredAlign === void 0 ? ALIGNS.START : _ref$preferredAlign,
      dataTest = _ref.dataTest,
      opened = _ref.opened,
      width = _ref.width,
      noPadding = _ref.noPadding,
      overlapped = _ref.overlapped,
      onClose = _ref.onClose,
      onOpen = _ref.onOpen,
      fixed = _ref.fixed,
      lockScrolling = _ref.lockScrolling,
      actions = _ref.actions,
      _ref$renderInPortal = _ref.renderInPortal,
      renderInPortal = _ref$renderInPortal === void 0 ? true : _ref$renderInPortal;
  var theme = useTheme();
  var transitionLength = React.useMemo(function () {
    return parseFloat(theme.orbit.durationFast) * 1000;
  }, [theme.orbit.durationFast]);

  var _useStateWithTimeout = useStateWithTimeout(false, transitionLength),
      _useStateWithTimeout2 = _slicedToArray(_useStateWithTimeout, 4),
      shown = _useStateWithTimeout2[0],
      setShown = _useStateWithTimeout2[1],
      setShownWithTimeout = _useStateWithTimeout2[2],
      clearShownTimeout = _useStateWithTimeout2[3];

  var _useStateWithTimeout3 = useStateWithTimeout(false, transitionLength),
      _useStateWithTimeout4 = _slicedToArray(_useStateWithTimeout3, 4),
      render = _useStateWithTimeout4[0],
      setRender = _useStateWithTimeout4[1],
      setRenderWithTimeout = _useStateWithTimeout4[2],
      clearRenderTimeout = _useStateWithTimeout4[3];

  var container = React.useRef(null);
  var resolveCallback = React.useCallback(function (state) {
    if (onClose && !state) onClose();
    if (onOpen && state) onOpen();
  }, [onClose, onOpen]);
  var handleOut = React.useCallback(function (ev) {
    // If open prop is present ignore custom handler
    if (container.current && !container.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]);
  var handleClick = React.useCallback(function () {
    // 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(function () {
    if (typeof opened !== "undefined") {
      if (opened) {
        setRender(true);
        clearRenderTimeout();
        setShownWithTimeout(true);
      } else {
        setShown(false);
        clearShownTimeout();
        setRenderWithTimeout(false);
      }
    }
  }, [opened, clearRenderTimeout, clearShownTimeout, setRender, setShown, setShownWithTimeout, setRenderWithTimeout]);
  var popover = /*#__PURE__*/React.createElement(PopoverContentWrapper, {
    shown: shown,
    offset: _objectSpread({
      top: 0,
      left: 0
    }, offset),
    width: width,
    containerRef: container,
    preferredPosition: preferredPosition,
    preferredAlign: preferredAlign,
    onClose: handleOut,
    dataTest: dataTest,
    noPadding: noPadding,
    overlapped: overlapped,
    fixed: fixed,
    lockScrolling: lockScrolling,
    actions: actions
  }, content);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledPopoverChild, {
    onClick: handleClick,
    onKeyDown: handleKeyDown(handleClick),
    ref: container
  }, children), render && (renderInPortal ? /*#__PURE__*/React.createElement(Portal, {
    renderInto: "popovers"
  }, popover) : popover));
};

export default Popover;