@kiwicom/orbit-components/es/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.

import * as React from "react";
import styled, { css } from "styled-components";
import { StyledText } from "../../../Text";
import { Item } from "../../../List/ListItem";
import defaultTheme from "../../../defaultTheme";
import Button from "../../../Button";
import Translate from "../../../Translate";
import { StyledTextLink } from "../../../TextLink";
import transition from "../../../utils/transition";
import FOCUSABLE_ELEMENT_SELECTORS from "../../../hooks/useFocusTrap/consts";
import useLockScrolling from "../../../hooks/useLockScrolling";
var StyledDialog = styled.div.withConfig({
  displayName: "DialogContent__StyledDialog",
  componentId: "sc-1w9as40-0"
})(["width:100%;"]);
var StyledDialogWrapper = styled.div.withConfig({
  displayName: "DialogContent__StyledDialogWrapper",
  componentId: "sc-1w9as40-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%;}"], function (_ref) {
  var theme = _ref.theme;
  return "calc(100% - ".concat(theme.orbit.spaceXLarge, ")");
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.paletteInkNormal;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.boxShadowRaisedReverse;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.orbit.spaceMedium;
}, function (_ref5) {
  var shown = _ref5.shown;
  return shown ? "visible" : "hidden";
}, function (_ref6) {
  var shown = _ref6.shown;
  return shown ? "1" : "0";
}, function (_ref7) {
  var theme = _ref7.theme,
      shown = _ref7.shown;
  return css(["", ",", ",", ""], transition(["transform"], "normal", "ease-in-out"), transition(["visibility"], "fast", "linear"), !shown && theme.orbit.durationNormal);
}, function (_ref8) {
  var shown = _ref8.shown;
  return !shown ? "translateY(calc(100% + 16px))" : "translateY(0)";
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.orbit.spaceMedium;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.orbit.spaceMedium;
}, function (_ref11) {
  var theme = _ref11.theme;
  return theme.orbit.spaceMedium;
}, function (_ref12) {
  var theme = _ref12.theme;
  return "calc(100% - ".concat(theme.orbit.spaceXLarge, ")");
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledDialogWrapper.defaultProps = {
  theme: defaultTheme
};
var StyledTooltipContent = styled.div.withConfig({
  displayName: "DialogContent__StyledTooltipContent",
  componentId: "sc-1w9as40-2"
})(["font-family:", ";font-size:", ";font-weight:", ";line-height:", ";color:", ";margin-bottom:", ";& ", ",", "{font-size:", ";font-weight:", ";color:", ";}& ", "{color:", ";}"], function (_ref13) {
  var theme = _ref13.theme;
  return theme.orbit.fontFamily;
}, function (_ref14) {
  var theme = _ref14.theme;
  return theme.orbit.fontSizeTextNormal;
}, function (_ref15) {
  var theme = _ref15.theme;
  return theme.orbit.fontWeightNormal;
}, function (_ref16) {
  var theme = _ref16.theme;
  return theme.orbit.lineHeightTextNormal;
}, function (_ref17) {
  var theme = _ref17.theme;
  return theme.orbit.paletteWhite;
}, function (_ref18) {
  var theme = _ref18.theme;
  return theme.orbit.spaceMedium;
}, StyledText, Item, function (_ref19) {
  var theme = _ref19.theme;
  return theme.orbit.fontSizeTextNormal;
}, function (_ref20) {
  var theme = _ref20.theme;
  return theme.orbit.fontWeightNormal;
}, function (_ref21) {
  var theme = _ref21.theme;
  return theme.orbit.paletteWhite;
}, StyledTextLink, function (_ref22) {
  var theme = _ref22.theme;
  return theme.orbit.paletteWhite;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledTooltipContent.defaultProps = {
  theme: defaultTheme
};
var StyledDialogOverlay = styled.div.withConfig({
  displayName: "DialogContent__StyledDialogOverlay",
  componentId: "sc-1w9as40-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:", ";"], function (_ref23) {
  var shown = _ref23.shown;
  return shown ? "visible" : "hidden";
}, function (_ref24) {
  var shown = _ref24.shown;
  return shown ? "1" : "0";
}, function (_ref25) {
  var theme = _ref25.theme,
      shown = _ref25.shown;
  return css(["", ",", ",", ""], transition(["opacity"], "normal", "ease-in-out"), transition(["visibility"], "fast", "linear"), !shown && theme.orbit.durationNormal);
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledDialogOverlay.defaultProps = {
  theme: defaultTheme
};

var DialogContent = function DialogContent(_ref26) {
  var dataTest = _ref26.dataTest,
      shown = _ref26.shown,
      _ref26$lockScrolling = _ref26.lockScrolling,
      lockScrolling = _ref26$lockScrolling === void 0 ? true : _ref26$lockScrolling,
      dialogId = _ref26.dialogId,
      children = _ref26.children,
      onClose = _ref26.onClose;
  var overlay = React.useRef(null);
  var dialog = React.useRef(null);
  useLockScrolling(dialog, lockScrolling);
  var handleClickOutside = React.useCallback(function (ev) {
    ev.stopPropagation();

    if (ev.target === overlay.current) {
      onClose(ev);
    }
  }, [onClose]);
  var handleInnerClick = React.useCallback(function (ev) {
    if (dialog.current) {
      var focusableElements = dialog.current.querySelectorAll(FOCUSABLE_ELEMENT_SELECTORS);

      if (Object.values(focusableElements).some(function (v) {
        return 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, {
    type: "secondary",
    fullWidth: true,
    onClick: onClose
  }, /*#__PURE__*/React.createElement(Translate, {
    tKey: "button_close"
  }))));
};

export default DialogContent;