@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";

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

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

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

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

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

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

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

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

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

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

var Popover = function Popover(_ref) {
  var children = _ref.children,
      content = _ref.content,
      _ref$preferredPositio = _ref.preferredPosition,
      preferredPosition = _ref$preferredPositio === void 0 ? _consts.POSITIONS.BOTTOM : _ref$preferredPositio,
      _ref$preferredAlign = _ref.preferredAlign,
      preferredAlign = _ref$preferredAlign === void 0 ? _consts.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,
      actions = _ref.actions;
  var theme = (0, _useTheme.default)();
  var transitionLength = (0, _react.useMemo)(function () {
    return parseFloat(theme.orbit.durationFast) * 1000;
  }, [theme.orbit.durationFast]);

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

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

  var container = (0, _react.useRef)(null);
  var resolveCallback = (0, _react.useCallback)(function (state) {
    if (onClose && !state) onClose();
    if (onOpen && state) onOpen();
  }, [onClose, onOpen]);
  var handleOut = (0, _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 = (0, _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]);
  (0, _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]);
  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(StyledPopoverChild, {
    onClick: handleClick,
    ref: container
  }, children), render && _react.default.createElement(_Portal.default, {
    renderInto: "popovers"
  }, _react.default.createElement(_ContentWrapper.default, {
    shown: shown,
    width: width,
    containerRef: container,
    preferredPosition: preferredPosition,
    preferredAlign: preferredAlign,
    onClose: handleOut,
    dataTest: dataTest,
    noPadding: noPadding,
    overlapped: overlapped,
    fixed: fixed,
    actions: actions
  }, content)));
};

var _default = Popover;
exports.default = _default;