@kiwicom/orbit-components/lib/Popover/components/ContentWrapper.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 _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

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

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

var _orbitDesignTokens = require("@kiwicom/orbit-design-tokens");

var _reactPopper = require("react-popper");

var _defaultTheme = _interopRequireDefault(require("../../defaultTheme"));

var _mediaQuery = _interopRequireDefault(require("../../utils/mediaQuery"));

var _Button = _interopRequireDefault(require("../../Button"));

var _useMediaQuery2 = _interopRequireDefault(require("../../hooks/useMediaQuery"));

var _Translate = _interopRequireDefault(require("../../Translate"));

var _transition = _interopRequireDefault(require("../../utils/transition"));

var _useClickOutside = _interopRequireDefault(require("../../hooks/useClickOutside"));

var _useLockScrolling = _interopRequireDefault(require("../../hooks/useLockScrolling"));

var _ModalContext = require("../../Modal/ModalContext");

var _ButtonPrimitive = require("../../primitives/ButtonPrimitive");

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

var _boundingClientRect = _interopRequireDefault(require("../../utils/boundingClientRect"));

var mobileTop = function mobileTop(_ref) {
  var theme = _ref.theme;
  return theme.orbit.spaceXLarge;
};

var popoverPadding = function popoverPadding(_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.spaceMedium;
};

var StyledContentWrapper = _styledComponents.default.div.withConfig({
  displayName: "ContentWrapper__StyledContentWrapper",
  componentId: "v01g55-0"
})(["", ""], function (_ref3) {
  var theme = _ref3.theme,
      windowHeight = _ref3.windowHeight,
      actionsHeight = _ref3.actionsHeight;
  return (0, _styledComponents.css)(["overflow:auto;border-top-left-radius:12px;border-top-right-radius:12px;position:absolute;left:0;width:100%;background-color:", ";max-height:", "px;bottom:", "px;", ""], theme.orbit.paletteWhite, windowHeight - actionsHeight - 32, actionsHeight || 0, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["max-height:100%;border-radius:3px;bottom:auto;left:auto;position:relative;"])));
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledContentWrapper.defaultProps = {
  theme: _defaultTheme.default
};

var StyledActions = _styledComponents.default.div.withConfig({
  displayName: "ContentWrapper__StyledActions",
  componentId: "v01g55-1"
})(["", ""], function (_ref4) {
  var theme = _ref4.theme;
  return (0, _styledComponents.css)(["position:fixed;bottom:0;left:0;width:100%;box-sizing:border-box;padding:", ";padding-top:", ";background-color:", ";", "{width:100%;flex:1 1 auto;}", ";"], popoverPadding, theme.orbit.spaceSmall, theme.orbit.paletteWhite, _ButtonPrimitive.StyledButtonPrimitive, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["position:relative;bottom:auto;left:auto;", "{width:auto;flex-grow:0;}"], _ButtonPrimitive.StyledButtonPrimitive)));
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledActions.defaultProps = {
  theme: _defaultTheme.default
};

var StyledPopoverParent = _styledComponents.default.div.withConfig({
  displayName: "ContentWrapper__StyledPopoverParent",
  componentId: "v01g55-2"
})(["", ""], function (_ref5) {
  var isInsideModal = _ref5.isInsideModal,
      width = _ref5.width,
      shown = _ref5.shown,
      theme = _ref5.theme,
      transform = _ref5.transform,
      top = _ref5.top,
      left = _ref5.left,
      bottom = _ref5.bottom,
      right = _ref5.right,
      position = _ref5.position,
      shownMobile = _ref5.shownMobile;
  return (0, _styledComponents.css)(["position:fixed;bottom:0;left:0;right:0;height:auto;width:100%;z-index:1000;box-sizing:border-box;box-shadow:", ";background-color:", ";max-height:calc(100% - ", ");transform:translateY(", ");transition:", ";&:focus{outline:0;}", ""], theme.orbit.boxShadowRaisedReverse, theme.orbit.backgroundModal, mobileTop, shownMobile ? "0%" : "100%", (0, _transition.default)(["opacity", "transform"], "fast", "ease-in-out"), _mediaQuery.default.largeMobile((0, _styledComponents.css)(["top:", ";left:", ";bottom:", ";right:", ";transform:", ";transition:", ";position:", ";z-index:", ";width:", ";border-radius:", ";box-shadow:", ";opacity:", ";max-height:none;"], top, left, bottom, right, transform, (0, _transition.default)(["opacity"], "fast", "ease-in-out"), position, isInsideModal ? "1000" : "600", width ? "".concat(width) : "auto", theme.orbit.borderRadiusNormal, theme.orbit.boxShadowRaised, shown ? "1" : "0")));
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledPopoverParent.defaultProps = {
  theme: _defaultTheme.default
};

var StyledPopoverPadding = _styledComponents.default.div.withConfig({
  displayName: "ContentWrapper__StyledPopoverPadding",
  componentId: "v01g55-3"
})(["padding:", ";"], function (_ref6) {
  var noPadding = _ref6.noPadding;
  return noPadding ? 0 : popoverPadding;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledPopoverPadding.defaultProps = {
  theme: _defaultTheme.default
};

var StyledPopoverContent = _styledComponents.default.div.withConfig({
  displayName: "ContentWrapper__StyledPopoverContent",
  componentId: "v01g55-4"
})([""]);

var StyledOverlay = _styledComponents.default.div.withConfig({
  displayName: "ContentWrapper__StyledOverlay",
  componentId: "v01g55-5"
})(["", ""], function (_ref7) {
  var theme = _ref7.theme,
      shown = _ref7.shown;
  return (0, _styledComponents.css)(["display:block;position:fixed;opacity:", ";top:0;left:0;right:0;width:100%;height:100%;background-color:", ";transition:", ";z-index:999;", ";"], shown ? "1" : "0", (0, _orbitDesignTokens.convertHexToRgba)(theme.orbit.paletteInkNormal, 60), (0, _transition.default)(["opacity"], "normal", "ease-in-out"), _mediaQuery.default.largeMobile((0, _styledComponents.css)(["display:none;"])));
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledOverlay.defaultProps = {
  theme: _defaultTheme.default
};

var StyledPopoverClose = _styledComponents.default.div.withConfig({
  displayName: "ContentWrapper__StyledPopoverClose",
  componentId: "v01g55-6"
})(["padding:", ";", ""], popoverPadding, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["display:none;visibility:hidden;padding-bottom:0;"]))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledPopoverClose.defaultProps = {
  theme: _defaultTheme.default
};

var PopoverContentWrapper = function PopoverContentWrapper(_ref8) {
  var children = _ref8.children,
      onClose = _ref8.onClose,
      width = _ref8.width,
      noFlip = _ref8.noFlip,
      _ref8$offset = _ref8.offset,
      offset = _ref8$offset === void 0 ? {
    top: 4,
    left: 0
  } : _ref8$offset,
      referenceElement = _ref8.referenceElement,
      dataTest = _ref8.dataTest,
      _ref8$placement = _ref8.placement,
      placement = _ref8$placement === void 0 ? _consts.PLACEMENTS.BOTTOM_START : _ref8$placement,
      noPadding = _ref8.noPadding,
      overlapped = _ref8.overlapped,
      shown = _ref8.shown,
      fixed = _ref8.fixed,
      allowOverflow = _ref8.allowOverflow,
      _ref8$lockScrolling = _ref8.lockScrolling,
      lockScrolling = _ref8$lockScrolling === void 0 ? true : _ref8$lockScrolling,
      actions = _ref8.actions;

  var _React$useState = React.useState(0),
      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
      actionsDimensions = _React$useState2[0],
      setActionsDimensions = _React$useState2[1];

  var _React$useContext = React.useContext(_ModalContext.ModalContext),
      isInsideModal = _React$useContext.isInsideModal;

  var _useMediaQuery = (0, _useMediaQuery2.default)(),
      isLargeMobile = _useMediaQuery.isLargeMobile,
      isTablet = _useMediaQuery.isTablet;

  var content = React.useRef(null);
  var scrollingElementRef = React.useRef(null);
  (0, _useLockScrolling.default)(scrollingElementRef, lockScrolling && !isLargeMobile);
  var popoverRef = React.useRef(null);
  var intervalRef = React.useRef(null);
  var windowHeight = typeof window !== "undefined" ? window.innerHeight : 0;

  var _usePopper = (0, _reactPopper.usePopper)(referenceElement, popoverRef.current, {
    placement: placement,
    strategy: fixed ? "fixed" : "absolute",
    modifiers: [{
      name: "offset",
      enabled: !!offset,
      options: {
        offset: [offset.left, overlapped ? -Number(referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetHeight) : offset.top]
      }
    }, {
      name: "flip",
      enabled: !noFlip
    }, {
      name: "preventOverflow",
      enabled: !allowOverflow
    }]
  }),
      styles = _usePopper.styles,
      update = _usePopper.update;

  var popper = styles.popper;
  React.useEffect(function () {
    var timer = setTimeout(function () {
      if (popoverRef.current) {
        popoverRef.current.focus();
      }
    }, 100);
    if (update) update();
    return function () {
      clearTimeout(timer);
      clearTimeout(intervalRef.current);
    };
  }, [update]);
  var measuredRef = React.useCallback(function (node) {
    if (node !== null) {
      var timer = setTimeout(function () {
        setActionsDimensions((0, _boundingClientRect.default)({
          current: node
        }));
      }, 15);
      intervalRef.current = timer;
    }
  }, // this measures the element that's containing actions
  // so it needs to be re-measured every time actions change
  // eslint-disable-next-line react-hooks/exhaustive-deps
  [actions]);
  (0, _useClickOutside.default)(content, function (ev) {
    if (isTablet) onClose(ev);
  });

  var handleKeyDown = function handleKeyDown(ev) {
    if (ev.keyCode === 27 && onClose) onClose(ev);
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledOverlay, {
    shown: shown,
    isInsideModal: isInsideModal,
    onMouseDown: onClose
  }), /*#__PURE__*/React.createElement(StyledPopoverParent, (0, _extends2.default)({
    shownMobile: shown,
    width: width,
    ref: popoverRef,
    tabIndex: "0",
    "data-test": dataTest,
    noPadding: noPadding,
    overlapped: overlapped,
    role: "tooltip",
    onKeyDown: handleKeyDown,
    fixed: fixed,
    shown: shown,
    isInsideModal: isInsideModal
  }, popper), /*#__PURE__*/React.createElement(StyledPopoverContent, {
    ref: content
  }, /*#__PURE__*/React.createElement(StyledContentWrapper, {
    actionsHeight: actionsDimensions ? actionsDimensions.height : 0,
    ref: scrollingElementRef,
    windowHeight: windowHeight
  }, /*#__PURE__*/React.createElement(StyledPopoverPadding, {
    noPadding: noPadding
  }, children)), actions ? /*#__PURE__*/React.createElement(StyledActions, {
    ref: measuredRef
  }, actions) : /*#__PURE__*/React.createElement(StyledPopoverClose, {
    ref: measuredRef
  }, /*#__PURE__*/React.createElement(_Button.default, {
    type: "secondary",
    fullWidth: true,
    onClick: onClose
  }, /*#__PURE__*/React.createElement(_Translate.default, {
    tKey: "button_close"
  }))))));
};

var _default = PopoverContentWrapper;
exports.default = _default;