@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.
163 lines (159 loc) • 5.99 kB
JavaScript
import React, { useRef, useCallback } from "react";
import styled, { css } from "styled-components";
import { StyledText } from "../../../Text/index";
import { Item } from "../../../List/ListItem/index";
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";
var StyledDialog = styled.div.withConfig({
displayName: "DialogContent__StyledDialog",
componentId: "sc-1w9as40-0"
})(["width:100%;"]);
var StyledDialogWrapper = styled.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 css(["", ",", ",", ""], transition(["transform"], "normal", "ease-in-out"), transition(["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, ")");
});
StyledDialogWrapper.defaultProps = {
theme: defaultTheme
};
var StyledTooltipContent = styled.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;
}, StyledText, 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;
}, StyledTextLink, function (_ref22) {
var theme = _ref22.theme;
return theme.orbit.paletteWhite;
});
StyledTooltipContent.defaultProps = {
theme: defaultTheme
};
var StyledDialogOverlay = styled.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 css(["", ",", ",", ""], transition(["opacity"], "normal", "ease-in-out"), transition(["visibility"], "fast", "linear"), !shown && theme.orbit.durationNormal);
});
StyledDialogOverlay.defaultProps = {
theme: defaultTheme
};
var DialogContent = function DialogContent(_ref26) {
var dataTest = _ref26.dataTest,
shown = _ref26.shown,
dialogId = _ref26.dialogId,
children = _ref26.children,
onClose = _ref26.onClose;
var overlay = useRef(null);
var dialog = useRef(null);
var handleClickOutside = useCallback(function (ev) {
ev.stopPropagation();
if (ev.target === overlay.current) {
onClose();
}
}, [onClose]);
var handleInnerClick = useCallback(function (ev) {
if (dialog.current) {
var focusableElements = dialog.current.querySelectorAll(FOCUSABLE_ELEMENT_SELECTORS);
if (Object.values(focusableElements).some(function (v) {
return v === ev.target;
})) {
onClose();
}
}
}, [onClose]);
return /*#__PURE__*/React.createElement(StyledDialog, {
role: "tooltip",
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;