@kiwicom/orbit-components/lib/primitives/MobileDialogPrimitive/components/DialogContent.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 = _interopRequireWildcard(require("styled-components"));

var _Text = require("../../../Text");

var _ListItem = require("../../../List/ListItem");

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

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

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

var _TextLink = require("../../../TextLink");

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

var _consts = _interopRequireDefault(require("../../../hooks/useFocusTrap/consts"));

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

const StyledDialog = _styledComponents.default.div.withConfig({
  displayName: "DialogContent__StyledDialog",
  componentId: "sc-o9zrmh-0"
})(["width:100%;"]);

const StyledDialogWrapper = _styledComponents.default.div.withConfig({
  displayName: "DialogContent__StyledDialogWrapper",
  componentId: "sc-o9zrmh-1"
})(["position:fixed;width:", ";box-sizing:border-box;border-radius:12px;background-color:", ";box-shadow:", ";padding:", ";visibility:", ";opacity:", ";transition:", ";z-index:10012;transform:", ";bottom:", ";left:", ";right:", ";max-height:", ";overflow-y:scroll;img{max-width:100%;}"], ({
  theme
}) => `calc(100% - ${theme.orbit.spaceXLarge})`, ({
  theme
}) => theme.orbit.paletteInkNormal, ({
  theme
}) => theme.orbit.boxShadowRaisedReverse, ({
  theme
}) => theme.orbit.spaceMedium, ({
  shown
}) => shown ? "visible" : "hidden", ({
  shown
}) => shown ? "1" : "0", ({
  theme,
  shown
}) => (0, _styledComponents.css)(["", ",", ",", ""], (0, _transition.default)(["transform"], "normal", "ease-in-out"), (0, _transition.default)(["visibility"], "fast", "linear"), !shown && theme.orbit.durationNormal), ({
  shown
}) => !shown ? "translateY(calc(100% + 16px))" : "translateY(0)", ({
  theme
}) => theme.orbit.spaceMedium, ({
  theme
}) => theme.orbit.spaceMedium, ({
  theme
}) => theme.orbit.spaceMedium, ({
  theme
}) => `calc(100% - ${theme.orbit.spaceXLarge})`); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


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

const StyledTooltipContent = _styledComponents.default.div.withConfig({
  displayName: "DialogContent__StyledTooltipContent",
  componentId: "sc-o9zrmh-2"
})(["font-family:", ";font-size:", ";font-weight:", ";line-height:", ";color:", ";margin-bottom:", ";& ", ",", "{font-size:", ";font-weight:", ";color:", ";}& ", "{color:", ";}"], ({
  theme
}) => theme.orbit.fontFamily, ({
  theme
}) => theme.orbit.fontSizeTextNormal, ({
  theme
}) => theme.orbit.fontWeightNormal, ({
  theme
}) => theme.orbit.lineHeightTextNormal, ({
  theme
}) => theme.orbit.paletteWhite, ({
  theme
}) => theme.orbit.spaceMedium, _Text.StyledText, _ListItem.Item, ({
  theme
}) => theme.orbit.fontSizeTextNormal, ({
  theme
}) => theme.orbit.fontWeightNormal, ({
  theme
}) => theme.orbit.paletteWhite, _TextLink.StyledTextLink, ({
  theme
}) => theme.orbit.paletteWhite); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


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

const StyledDialogOverlay = _styledComponents.default.div.withConfig({
  displayName: "DialogContent__StyledDialogOverlay",
  componentId: "sc-o9zrmh-3"
})(["position:fixed;visibility:", ";width:100%;height:100%;top:0;right:0;bottom:0;left:0;background-color:rgba(23,27,30,0.6);z-index:10011;opacity:", ";transition:", ";"], ({
  shown
}) => shown ? "visible" : "hidden", ({
  shown
}) => shown ? "1" : "0", ({
  theme,
  shown
}) => (0, _styledComponents.css)(["", ",", ",", ""], (0, _transition.default)(["opacity"], "normal", "ease-in-out"), (0, _transition.default)(["visibility"], "fast", "linear"), !shown && theme.orbit.durationNormal)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


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

const DialogContent = ({
  dataTest,
  shown,
  lockScrolling = true,
  dialogId,
  children,
  onClose
}) => {
  const overlay = React.useRef(null);
  const dialog = React.useRef(null);
  (0, _useLockScrolling.default)(dialog, lockScrolling);
  const handleClickOutside = React.useCallback(ev => {
    ev.stopPropagation();

    if (ev.target === overlay.current) {
      onClose(ev);
    }
  }, [onClose]);
  const handleInnerClick = React.useCallback(ev => {
    if (dialog.current) {
      const focusableElements = dialog.current.querySelectorAll(_consts.default);

      if (Object.values(focusableElements).some(v => v === ev.target)) {
        onClose(ev);
      }
    }
  }, [onClose]);
  return /*#__PURE__*/React.createElement(StyledDialog, {
    role: "dialog",
    id: dialogId,
    "data-test": dataTest
  }, /*#__PURE__*/React.createElement(StyledDialogOverlay, {
    shown: shown,
    ref: overlay,
    onClick: handleClickOutside
  }), /*#__PURE__*/React.createElement(StyledDialogWrapper, {
    shown: shown,
    ref: dialog,
    role: "tooltip",
    "aria-hidden": !shown,
    onClick: handleInnerClick
  }, /*#__PURE__*/React.createElement(StyledTooltipContent, null, children), /*#__PURE__*/React.createElement(_Button.default, {
    type: "secondary",
    fullWidth: true,
    onClick: onClose
  }, /*#__PURE__*/React.createElement(_Translate.default, {
    tKey: "button_close"
  }))));
};

var _default = DialogContent;
exports.default = _default;