@kiwicom/orbit-components/lib/Dialog/index.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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

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

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

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

var _Portal = _interopRequireDefault(require("../Portal"));

var _useTheme = _interopRequireDefault(require("../hooks/useTheme"));

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

var _Heading = _interopRequireDefault(require("../Heading"));

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

var _Stack = _interopRequireDefault(require("../Stack"));

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

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

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

var _keyMaps = _interopRequireDefault(require("../common/keyMaps"));

var _useRandomId = _interopRequireDefault(require("../hooks/useRandomId"));

var _rtl = require("../utils/rtl");

const _excluded = ["width", "theme"];

const StyledDialog = _styledComponents.default.div.withConfig({
  displayName: "Dialog__StyledDialog",
  componentId: "sc-1w083wr-0"
})(["", ""], ({
  theme
}) => (0, _styledComponents.css)(["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;", ";"], theme.orbit.fontFamily, theme.orbit.spaceMedium, theme.orbit.zIndexModalOverlay, theme.orbit.durationFast, _mediaQuery.default.largeMobile((0, _styledComponents.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.default
};

const StyledDialogCenterWrapper = _styledComponents.default.div.withConfig({
  displayName: "Dialog__StyledDialogCenterWrapper",
  componentId: "sc-1w083wr-1"
})(["display:flex;align-items:center;min-height:100%;"]);

const StyledDialogContent = _styledComponents.default.div.withConfig({
  displayName: "Dialog__StyledDialogContent",
  componentId: "sc-1w083wr-2"
})(["", ""], ({
  theme
}) => (0, _styledComponents.css)(["display:block;width:100%;box-sizing:border-box;padding:", ";background:", ";border-radius:12px;bottom:", ";box-shadow:", ";text-align:center;", "{text-align:center;}", ";"], `${theme.orbit.spaceLarge} ${theme.orbit.spaceMedium} ${theme.orbit.spaceMedium}`, theme.orbit.paletteWhite, ({
  shown
}) => shown ? "0" : "-100%", theme.orbit.boxShadowOverlay, _Text.StyledText, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["min-width:", ";border-radius:9px;padding:", ";text-align:", ";", "{text-align:", ";}"], theme.orbit.widthModalSmall, theme.orbit.spaceLarge, _rtl.left, _Text.StyledText, _rtl.left)))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledDialogContent.defaultProps = {
  theme: _defaultTheme.default
};
const StyledAction = (0, _styledComponents.default)((_ref) => {
  let {
    width,
    theme
  } = _ref,
      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
  return /*#__PURE__*/React.createElement("div", props);
}).withConfig({
  displayName: "Dialog__StyledAction",
  componentId: "sc-1w083wr-3"
})(["width:100%;", "{width:100%;flex:1 1 auto;}", ";"], _ButtonPrimitive.StyledButtonPrimitive, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["width:auto;", "{width:auto;flex:0 0 auto;}"], _ButtonPrimitive.StyledButtonPrimitive))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

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

const IllustrationContainer = _styledComponents.default.div.withConfig({
  displayName: "Dialog__IllustrationContainer",
  componentId: "sc-1w083wr-4"
})(["margin-bottom:16px;"]);

const Dialog = ({
  dataTest,
  title,
  description,
  primaryAction,
  secondaryAction,
  onClose,
  renderInPortal = true,
  illustration,
  lockScrolling = true
}) => {
  const wrapperRef = React.useRef(null);
  (0, _useLockScrolling.default)(wrapperRef, lockScrolling);
  const ref = React.useRef(null);
  const theme = (0, _useTheme.default)();
  const transitionLength = React.useMemo(() => parseFloat(theme.orbit.durationFast) * 1000, [theme.orbit.durationFast]);
  const [shown, setShown] = React.useState(false);
  (0, _useFocusTrap.default)(ref);
  React.useEffect(() => {
    const timer = setTimeout(() => {
      setShown(true);

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

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

  React.useEffect(() => {
    const handleKeyDown = ev => {
      if (ev.keyCode === _keyMaps.default.ESC && onClose) {
        onClose();
      }
    };

    window.addEventListener("keydown", handleKeyDown);
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [onClose]);
  const dialogID = (0, _useRandomId.default)();
  const 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.default, {
    spacing: "XSmall",
    spaceAfter: "medium"
  }, title && /*#__PURE__*/React.createElement(_Heading.default, {
    type: "title3",
    align: "center",
    largeMobile: {
      align: "start"
    }
  }, title), description && /*#__PURE__*/React.createElement(_Text.default, {
    type: "secondary"
  }, description)), /*#__PURE__*/React.createElement(_Stack.default, {
    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.default, {
    renderInto: "modals"
  }, dialog) : dialog;
};

var _default = Dialog;
exports.default = _default;