@kiwicom/orbit-components
Version:
Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com’s products.
211 lines (174 loc) • 8.28 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
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");
var StyledDialog = _styledComponents.default.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;
}, _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
};
var StyledDialogCenterWrapper = _styledComponents.default.div.withConfig({
displayName: "Dialog__StyledDialogCenterWrapper",
componentId: "sc-136tbq6-1"
})(["display:flex;align-items:center;min-height:100%;"]);
var StyledDialogContent = _styledComponents.default.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;
}, _Text.StyledText, _mediaQuery.default.largeMobile((0, _styledComponents.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;
}, _rtl.left, _Text.StyledText, _rtl.left))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledDialogContent.defaultProps = {
theme: _defaultTheme.default
};
var StyledAction = (0, _styledComponents.default)(function (_ref11) {
var width = _ref11.width,
theme = _ref11.theme,
props = (0, _objectWithoutProperties2.default)(_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;}", ";"], _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
};
var IllustrationContainer = _styledComponents.default.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);
(0, _useLockScrolling.default)(wrapperRef, lockScrolling);
var ref = React.useRef(null);
var theme = (0, _useTheme.default)();
var transitionLength = React.useMemo(function () {
return parseFloat(theme.orbit.durationFast) * 1000;
}, [theme.orbit.durationFast]);
var _React$useState = React.useState(false),
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
shown = _React$useState2[0],
setShown = _React$useState2[1];
(0, _useFocusTrap.default)(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 === _keyMaps.default.ESC && onClose) {
onClose();
}
};
window.addEventListener("keydown", handleKeyDown);
return function () {
return window.removeEventListener("keydown", handleKeyDown);
};
}, [onClose]);
var dialogID = (0, _useRandomId.default)();
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.default, {
spacing: "XSmall",
spaceAfter: "medium"
}, title && /*#__PURE__*/React.createElement(_Heading.default, {
type: "title3"
}, 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;