@kiwicom/orbit-components/es/Dialog/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.

import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import * as React from "react";
import styled, { css } from "styled-components";
import useFocusTrap from "../hooks/useFocusTrap";
import Portal from "../Portal";
import useTheme from "../hooks/useTheme";
import defaultTheme from "../defaultTheme";
import Heading from "../Heading";
import Text, { StyledText } from "../Text";
import Stack from "../Stack";
import useLockScrolling from "../hooks/useLockScrolling";
import mq from "../utils/mediaQuery";
import { StyledButtonPrimitive } from "../primitives/ButtonPrimitive";
import KEY_CODE_MAP from "../common/keyMaps";
import useRandomId from "../hooks/useRandomId";
import { left } from "../utils/rtl";
var StyledDialog = styled.div.withConfig({
  displayName: "Dialog__StyledDialog",
  componentId: "sc-136tbq6-0"
})(["font-family:", ";width:100%;height:100%;position:fixed;top:0;right:0;bottom:0;left:0;padding:", ";z-index:", ";box-sizing:border-box;outline:none;overflow-x:hidden;background-color:rgba(0,0,0,0.5);transition:opacity ", " ease-in-out;", ";"], function (_ref) {
  var theme = _ref.theme;
  return theme.orbit.fontFamily;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.spaceMedium;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.zIndexModalOverlay;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.orbit.durationFast;
}, mq.largeMobile(css(["opacity:1;display:flex;justify-content:center;align-items:center;"]))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledDialog.defaultProps = {
  theme: defaultTheme
};
var StyledDialogCenterWrapper = styled.div.withConfig({
  displayName: "Dialog__StyledDialogCenterWrapper",
  componentId: "sc-136tbq6-1"
})(["display:flex;align-items:center;min-height:100%;"]);
var StyledDialogContent = styled.div.withConfig({
  displayName: "Dialog__StyledDialogContent",
  componentId: "sc-136tbq6-2"
})(["display:block;width:100%;box-sizing:border-box;padding:", ";background:", ";border-radius:12px;bottom:", ";box-shadow:", ";text-align:center;", "{text-align:center;}", ";"], function (_ref5) {
  var theme = _ref5.theme;
  return "".concat(theme.orbit.spaceLarge, " ").concat(theme.orbit.spaceMedium, " ").concat(theme.orbit.spaceMedium);
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.paletteWhite;
}, function (_ref7) {
  var shown = _ref7.shown;
  return shown ? "0" : "-100%";
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.orbit.boxShadowOverlay;
}, StyledText, mq.largeMobile(css(["min-width:", ";border-radius:9px;padding:", ";text-align:", ";", "{text-align:", ";}"], function (_ref9) {
  var theme = _ref9.theme;
  return theme.orbit.widthModalSmall;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.orbit.spaceLarge;
}, left, StyledText, left))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledDialogContent.defaultProps = {
  theme: defaultTheme
};
var StyledAction = styled(function (_ref11) {
  var width = _ref11.width,
      theme = _ref11.theme,
      props = _objectWithoutProperties(_ref11, ["width", "theme"]);

  return /*#__PURE__*/React.createElement("div", props);
}).withConfig({
  displayName: "Dialog__StyledAction",
  componentId: "sc-136tbq6-3"
})(["width:100%;", "{width:100%;flex:1 1 auto;}", ";"], StyledButtonPrimitive, mq.largeMobile(css(["width:auto;", "{width:auto;flex:0 0 auto;}"], StyledButtonPrimitive))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledAction.defaultProps = {
  theme: defaultTheme
};
var IllustrationContainer = styled.div.withConfig({
  displayName: "Dialog__IllustrationContainer",
  componentId: "sc-136tbq6-4"
})(["margin-bottom:16px;"]);

var Dialog = function Dialog(_ref12) {
  var dataTest = _ref12.dataTest,
      title = _ref12.title,
      description = _ref12.description,
      primaryAction = _ref12.primaryAction,
      secondaryAction = _ref12.secondaryAction,
      onClose = _ref12.onClose,
      _ref12$renderInPortal = _ref12.renderInPortal,
      renderInPortal = _ref12$renderInPortal === void 0 ? true : _ref12$renderInPortal,
      illustration = _ref12.illustration,
      _ref12$lockScrolling = _ref12.lockScrolling,
      lockScrolling = _ref12$lockScrolling === void 0 ? true : _ref12$lockScrolling;
  var wrapperRef = React.useRef(null);
  useLockScrolling(wrapperRef, lockScrolling);
  var ref = React.useRef(null);
  var theme = useTheme();
  var transitionLength = React.useMemo(function () {
    return parseFloat(theme.orbit.durationFast) * 1000;
  }, [theme.orbit.durationFast]);

  var _React$useState = React.useState(false),
      _React$useState2 = _slicedToArray(_React$useState, 2),
      shown = _React$useState2[0],
      setShown = _React$useState2[1];

  useFocusTrap(ref);
  React.useEffect(function () {
    var timer = setTimeout(function () {
      setShown(true);

      if (ref.current) {
        ref.current.focus();
      }
    }, transitionLength);
    return function () {
      return clearTimeout(timer);
    };
  }, [transitionLength]);

  var handleClose = function handleClose(ev) {
    if (ref.current && onClose) {
      if (ref.current && !ref.current.contains(ev.target)) onClose();
    }
  };

  React.useEffect(function () {
    var handleKeyDown = function handleKeyDown(ev) {
      if (ev.keyCode === KEY_CODE_MAP.ESC && onClose) {
        onClose();
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    return function () {
      return window.removeEventListener("keydown", handleKeyDown);
    };
  }, [onClose]);
  var dialogID = useRandomId();
  var dialog = /*#__PURE__*/React.createElement(StyledDialog, {
    ref: wrapperRef,
    "data-test": dataTest,
    shown: shown,
    onClick: handleClose,
    tabIndex: "0",
    role: "dialog",
    "aria-modal": "true",
    "aria-labelledby": dialogID
  }, /*#__PURE__*/React.createElement(StyledDialogCenterWrapper, null, /*#__PURE__*/React.createElement(StyledDialogContent, {
    shown: shown,
    ref: ref,
    id: dialogID
  }, illustration && /*#__PURE__*/React.createElement(IllustrationContainer, null, illustration), /*#__PURE__*/React.createElement(Stack, {
    spacing: "XSmall",
    spaceAfter: "medium"
  }, title && /*#__PURE__*/React.createElement(Heading, {
    type: "title3"
  }, title), description && /*#__PURE__*/React.createElement(Text, {
    type: "secondary"
  }, description)), /*#__PURE__*/React.createElement(Stack, {
    direction: "column-reverse",
    spacing: "XSmall",
    largeMobile: {
      direction: "row",
      justify: "end"
    }
  }, secondaryAction && /*#__PURE__*/React.createElement(StyledAction, null, secondaryAction), /*#__PURE__*/React.createElement(StyledAction, null, primaryAction)))));
  return renderInPortal ? /*#__PURE__*/React.createElement(Portal, {
    renderInto: "modals"
  }, dialog) : dialog;
};

export default Dialog;