@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";
const StyledDialog = styled.div.withConfig({
  displayName: "DialogContent__StyledDialog",
  componentId: "sc-o9zrmh-0"
})(["width:100%;"]);
const StyledDialogWrapper = styled.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
}) => css(["", ",", ",", ""], transition(["transform"], "normal", "ease-in-out"), transition(["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
};
const StyledTooltipContent = styled.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, StyledText, Item, ({
  theme
}) => theme.orbit.fontSizeTextNormal, ({
  theme
}) => theme.orbit.fontWeightNormal, ({
  theme
}) => theme.orbit.paletteWhite, StyledTextLink, ({
  theme
}) => theme.orbit.paletteWhite); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledTooltipContent.defaultProps = {
  theme: defaultTheme
};
const StyledDialogOverlay = styled.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
}) => 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
};

const DialogContent = ({
  dataTest,
  shown,
  lockScrolling = true,
  dialogId,
  children,
  onClose
}) => {
  const overlay = React.useRef(null);
  const dialog = React.useRef(null);
  useLockScrolling(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(FOCUSABLE_ELEMENT_SELECTORS);

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

export default DialogContent;