@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");

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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"));

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

var StyledDialogWrapper = _styledComponents.default.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 (0, _styledComponents.css)(["", ",", ",", ""], (0, _transition.default)(["transform"], "normal", "ease-in-out"), (0, _transition.default)(["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.default
};

var StyledTooltipContent = _styledComponents.default.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;
}, _Text.StyledText, _ListItem.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;
}, _TextLink.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.default
};

var StyledDialogOverlay = _styledComponents.default.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 (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
};

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);
  (0, _useLockScrolling.default)(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(_consts.default);

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

var _default = DialogContent;
exports.default = _default;