@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.
181 lines (155 loc) • 7.41 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _defaultTheme = _interopRequireDefault(require("../../defaultTheme"));
var _mediaQuery = _interopRequireDefault(require("../../utils/mediaQuery"));
var _Button = _interopRequireDefault(require("../../Button"));
var _resolvePopoverPosition = _interopRequireDefault(require("../helpers/resolvePopoverPosition"));
var _resolvePopoverHorizontal = _interopRequireDefault(require("../helpers/resolvePopoverHorizontal"));
var _calculatePopoverPosition = _interopRequireDefault(require("../helpers/calculatePopoverPosition"));
var _calculateVerticalPosition = _interopRequireDefault(require("../helpers/calculateVerticalPosition"));
var _calculateHorizontalPosition = _interopRequireDefault(require("../helpers/calculateHorizontalPosition"));
var _useDimensions = _interopRequireDefault(require("../hooks/useDimensions"));
var _Translate = _interopRequireDefault(require("../../Translate"));
var _transition = _interopRequireDefault(require("../../utils/transition"));
var _useClickOutside = _interopRequireDefault(require("../../hooks/useClickOutside"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
var StyledPopoverParent = _styledComponents.default.div.withConfig({
displayName: "ContentWrapper__StyledPopoverParent",
componentId: "v01g55-0"
})(["position:fixed;bottom:0;left:0;right:0;width:100%;box-sizing:border-box;border-top-left-radius:9px;border-top-right-radius:9px;background-color:", ";padding:", ";box-shadow:", ";overflow:hidden;z-index:1000;transition:", ";transform:translateY(", ");&:focus{outline:0;}", ""], function (_ref) {
var theme = _ref.theme;
return theme.orbit.backgroundModal;
}, function (_ref2) {
var theme = _ref2.theme,
noPadding = _ref2.noPadding;
return noPadding ? 0 : theme.orbit.spaceMedium;
}, function (_ref3) {
var theme = _ref3.theme;
return theme.orbit.boxShadowElevatedLevel1;
}, (0, _transition.default)(["opacity", "transform"], "fast", "ease-in-out"), function (_ref4) {
var shownMobile = _ref4.shownMobile;
return shownMobile ? "0%" : "100%";
}, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["position:", ";left:auto;right:auto;bottom:auto;width:", ";opacity:", ";transform:none;border-radius:", ";", " ", ""], function (_ref5) {
var fixed = _ref5.fixed;
return fixed ? "fixed" : "absolute";
}, function (_ref6) {
var width = _ref6.width;
return width ? "".concat(width) : "auto";
}, function (_ref7) {
var shown = _ref7.shown;
return shown ? "1" : "0";
}, function (_ref8) {
var theme = _ref8.theme;
return theme.orbit.borderRadiusNormal;
}, _resolvePopoverPosition.default, _resolvePopoverHorizontal.default)));
StyledPopoverParent.defaultProps = {
theme: _defaultTheme.default
};
var StyledPopoverContent = _styledComponents.default.div.withConfig({
displayName: "ContentWrapper__StyledPopoverContent",
componentId: "v01g55-1"
})([""]);
var StyledOverlay = _styledComponents.default.div.withConfig({
displayName: "ContentWrapper__StyledOverlay",
componentId: "v01g55-2"
})(["display:block;position:fixed;opacity:", ";top:0;left:0;right:0;width:100%;height:100%;background-color:rgba(23,27,30,0.6);transition:opacity ", " ease-in-out;z-index:999;", ";"], function (_ref9) {
var shown = _ref9.shown;
return shown ? "1" : "0";
}, function (_ref10) {
var theme = _ref10.theme;
return theme.orbit.durationNormal;
}, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["display:none;"])));
StyledOverlay.defaultProps = {
theme: _defaultTheme.default
};
var StyledPopoverClose = _styledComponents.default.div.withConfig({
displayName: "ContentWrapper__StyledPopoverClose",
componentId: "v01g55-3"
})(["padding:", ";padding-top:", ";", ""], function (_ref11) {
var theme = _ref11.theme,
noPadding = _ref11.noPadding;
return noPadding ? theme.orbit.spaceMedium : 0;
}, function (_ref12) {
var theme = _ref12.theme;
return theme.orbit.spaceMedium;
}, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["display:none;visibility:hidden;padding-bottom:0;"])));
StyledPopoverClose.defaultProps = {
theme: _defaultTheme.default
};
var PopoverContentWrapper = function PopoverContentWrapper(_ref13) {
var children = _ref13.children,
onClose = _ref13.onClose,
width = _ref13.width,
dataTest = _ref13.dataTest,
preferredPosition = _ref13.preferredPosition,
containerRef = _ref13.containerRef,
noPadding = _ref13.noPadding,
overlapped = _ref13.overlapped,
shown = _ref13.shown,
fixed = _ref13.fixed;
var popover = (0, _react.useRef)(null);
var content = (0, _react.useRef)(null);
var overlay = (0, _react.useRef)(null);
var position = (0, _calculatePopoverPosition.default)(preferredPosition);
var dimensions = (0, _useDimensions.default)({
containerRef: containerRef,
popover: popover,
content: content,
fixed: fixed
});
var verticalPosition = (0, _calculateVerticalPosition.default)(position[0], dimensions);
var horizontalPosition = (0, _calculateHorizontalPosition.default)(position[1], dimensions);
(0, _react.useEffect)(function () {
var timer = setTimeout(function () {
if (popover.current) {
popover.current.focus();
}
}, 100);
return function () {
return clearTimeout(timer);
};
}, []);
(0, _useClickOutside.default)(popover, onClose);
return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(StyledOverlay, {
ref: overlay,
shown: shown
}), _react.default.createElement(StyledPopoverParent, {
shownMobile: shown,
shown: shown && verticalPosition && horizontalPosition,
anchor: horizontalPosition,
position: verticalPosition,
containerTop: dimensions.containerTop,
containerLeft: dimensions.containerLeft,
containerPureTop: dimensions.containerPureTop,
containerHeight: dimensions.containerHeight,
containerWidth: dimensions.containerWidth,
popoverHeight: dimensions.popoverHeight,
popoverWidth: dimensions.popoverWidth,
width: width,
ref: popover,
tabIndex: "0",
"data-test": dataTest,
noPadding: noPadding,
overlapped: overlapped,
role: "tooltip",
fixed: fixed
}, _react.default.createElement(StyledPopoverContent, {
ref: content
}, children, _react.default.createElement(StyledPopoverClose, {
noPadding: noPadding
}, _react.default.createElement(_Button.default, {
type: "secondary",
block: true,
onClick: onClose
}, _react.default.createElement(_Translate.default, {
tKey: "button_close"
}))))));
};
var _default = PopoverContentWrapper;
exports.default = _default;