@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.
245 lines (226 loc) • 10.4 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from "react";
import styled, { css } from "styled-components";
import { convertHexToRgba } from "@kiwicom/orbit-design-tokens";
import { usePopper } from "react-popper";
import defaultTheme from "../../defaultTheme";
import mq from "../../utils/mediaQuery";
import Button from "../../Button";
import useMediaQuery from "../../hooks/useMediaQuery";
import Translate from "../../Translate";
import transition from "../../utils/transition";
import useClickOutside from "../../hooks/useClickOutside";
import useLockScrolling from "../../hooks/useLockScrolling";
import { ModalContext } from "../../Modal/ModalContext";
import { StyledButtonPrimitive } from "../../primitives/ButtonPrimitive";
import { PLACEMENTS } from "../consts";
import boundingClientRect from "../../utils/boundingClientRect";
var mobileTop = function mobileTop(_ref) {
var theme = _ref.theme;
return theme.orbit.spaceXLarge;
};
var popoverPadding = function popoverPadding(_ref2) {
var theme = _ref2.theme;
return theme.orbit.spaceMedium;
};
var StyledContentWrapper = styled.div.withConfig({
displayName: "ContentWrapper__StyledContentWrapper",
componentId: "v01g55-0"
})(["", ""], function (_ref3) {
var theme = _ref3.theme,
windowHeight = _ref3.windowHeight,
actionsHeight = _ref3.actionsHeight;
return css(["overflow:auto;border-top-left-radius:12px;border-top-right-radius:12px;position:absolute;left:0;width:100%;background-color:", ";max-height:", "px;bottom:", "px;", ""], theme.orbit.paletteWhite, windowHeight - actionsHeight - 32, actionsHeight || 0, mq.largeMobile(css(["max-height:100%;border-radius:3px;bottom:auto;left:auto;position:relative;"])));
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledContentWrapper.defaultProps = {
theme: defaultTheme
};
var StyledActions = styled.div.withConfig({
displayName: "ContentWrapper__StyledActions",
componentId: "v01g55-1"
})(["", ""], function (_ref4) {
var theme = _ref4.theme;
return css(["position:fixed;bottom:0;left:0;width:100%;box-sizing:border-box;padding:", ";padding-top:", ";background-color:", ";", "{width:100%;flex:1 1 auto;}", ";"], popoverPadding, theme.orbit.spaceSmall, theme.orbit.paletteWhite, StyledButtonPrimitive, mq.largeMobile(css(["position:relative;bottom:auto;left:auto;", "{width:auto;flex-grow:0;}"], StyledButtonPrimitive)));
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledActions.defaultProps = {
theme: defaultTheme
};
var StyledPopoverParent = styled.div.withConfig({
displayName: "ContentWrapper__StyledPopoverParent",
componentId: "v01g55-2"
})(["", ""], function (_ref5) {
var isInsideModal = _ref5.isInsideModal,
width = _ref5.width,
shown = _ref5.shown,
theme = _ref5.theme,
transform = _ref5.transform,
top = _ref5.top,
left = _ref5.left,
bottom = _ref5.bottom,
right = _ref5.right,
position = _ref5.position,
shownMobile = _ref5.shownMobile;
return css(["position:fixed;bottom:0;left:0;right:0;height:auto;width:100%;z-index:1000;box-sizing:border-box;box-shadow:", ";background-color:", ";max-height:calc(100% - ", ");transform:translateY(", ");transition:", ";&:focus{outline:0;}", ""], theme.orbit.boxShadowRaisedReverse, theme.orbit.backgroundModal, mobileTop, shownMobile ? "0%" : "100%", transition(["opacity", "transform"], "fast", "ease-in-out"), mq.largeMobile(css(["top:", ";left:", ";bottom:", ";right:", ";transform:", ";transition:", ";position:", ";z-index:", ";width:", ";border-radius:", ";box-shadow:", ";opacity:", ";max-height:none;"], top, left, bottom, right, transform, transition(["opacity"], "fast", "ease-in-out"), position, isInsideModal ? "1000" : "600", width ? "".concat(width) : "auto", theme.orbit.borderRadiusNormal, theme.orbit.boxShadowRaised, shown ? "1" : "0")));
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledPopoverParent.defaultProps = {
theme: defaultTheme
};
var StyledPopoverPadding = styled.div.withConfig({
displayName: "ContentWrapper__StyledPopoverPadding",
componentId: "v01g55-3"
})(["padding:", ";"], function (_ref6) {
var noPadding = _ref6.noPadding;
return noPadding ? 0 : popoverPadding;
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledPopoverPadding.defaultProps = {
theme: defaultTheme
};
var StyledPopoverContent = styled.div.withConfig({
displayName: "ContentWrapper__StyledPopoverContent",
componentId: "v01g55-4"
})([""]);
var StyledOverlay = styled.div.withConfig({
displayName: "ContentWrapper__StyledOverlay",
componentId: "v01g55-5"
})(["", ""], function (_ref7) {
var theme = _ref7.theme,
shown = _ref7.shown;
return css(["display:block;position:fixed;opacity:", ";top:0;left:0;right:0;width:100%;height:100%;background-color:", ";transition:", ";z-index:999;", ";"], shown ? "1" : "0", convertHexToRgba(theme.orbit.paletteInkNormal, 60), transition(["opacity"], "normal", "ease-in-out"), mq.largeMobile(css(["display:none;"])));
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledOverlay.defaultProps = {
theme: defaultTheme
};
var StyledPopoverClose = styled.div.withConfig({
displayName: "ContentWrapper__StyledPopoverClose",
componentId: "v01g55-6"
})(["padding:", ";", ""], popoverPadding, mq.largeMobile(css(["display:none;visibility:hidden;padding-bottom:0;"]))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledPopoverClose.defaultProps = {
theme: defaultTheme
};
var PopoverContentWrapper = function PopoverContentWrapper(_ref8) {
var children = _ref8.children,
onClose = _ref8.onClose,
width = _ref8.width,
noFlip = _ref8.noFlip,
_ref8$offset = _ref8.offset,
offset = _ref8$offset === void 0 ? {
top: 4,
left: 0
} : _ref8$offset,
referenceElement = _ref8.referenceElement,
dataTest = _ref8.dataTest,
_ref8$placement = _ref8.placement,
placement = _ref8$placement === void 0 ? PLACEMENTS.BOTTOM_START : _ref8$placement,
noPadding = _ref8.noPadding,
overlapped = _ref8.overlapped,
shown = _ref8.shown,
fixed = _ref8.fixed,
allowOverflow = _ref8.allowOverflow,
_ref8$lockScrolling = _ref8.lockScrolling,
lockScrolling = _ref8$lockScrolling === void 0 ? true : _ref8$lockScrolling,
actions = _ref8.actions;
var _React$useState = React.useState(0),
_React$useState2 = _slicedToArray(_React$useState, 2),
actionsDimensions = _React$useState2[0],
setActionsDimensions = _React$useState2[1];
var _React$useContext = React.useContext(ModalContext),
isInsideModal = _React$useContext.isInsideModal;
var _useMediaQuery = useMediaQuery(),
isLargeMobile = _useMediaQuery.isLargeMobile,
isTablet = _useMediaQuery.isTablet;
var content = React.useRef(null);
var scrollingElementRef = React.useRef(null);
useLockScrolling(scrollingElementRef, lockScrolling && !isLargeMobile);
var popoverRef = React.useRef(null);
var intervalRef = React.useRef(null);
var windowHeight = typeof window !== "undefined" ? window.innerHeight : 0;
var _usePopper = usePopper(referenceElement, popoverRef.current, {
placement: placement,
strategy: fixed ? "fixed" : "absolute",
modifiers: [{
name: "offset",
enabled: !!offset,
options: {
offset: [offset.left, overlapped ? -Number(referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.offsetHeight) : offset.top]
}
}, {
name: "flip",
enabled: !noFlip
}, {
name: "preventOverflow",
enabled: !allowOverflow
}]
}),
styles = _usePopper.styles,
update = _usePopper.update;
var popper = styles.popper;
React.useEffect(function () {
var timer = setTimeout(function () {
if (popoverRef.current) {
popoverRef.current.focus();
}
}, 100);
if (update) update();
return function () {
clearTimeout(timer);
clearTimeout(intervalRef.current);
};
}, [update]);
var measuredRef = React.useCallback(function (node) {
if (node !== null) {
var timer = setTimeout(function () {
setActionsDimensions(boundingClientRect({
current: node
}));
}, 15);
intervalRef.current = timer;
}
}, // this measures the element that's containing actions
// so it needs to be re-measured every time actions change
// eslint-disable-next-line react-hooks/exhaustive-deps
[actions]);
useClickOutside(content, function (ev) {
if (isTablet) onClose(ev);
});
var handleKeyDown = function handleKeyDown(ev) {
if (ev.keyCode === 27 && onClose) onClose(ev);
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledOverlay, {
shown: shown,
isInsideModal: isInsideModal,
onMouseDown: onClose
}), /*#__PURE__*/React.createElement(StyledPopoverParent, _extends({
shownMobile: shown,
width: width,
ref: popoverRef,
tabIndex: "0",
"data-test": dataTest,
noPadding: noPadding,
overlapped: overlapped,
role: "tooltip",
onKeyDown: handleKeyDown,
fixed: fixed,
shown: shown,
isInsideModal: isInsideModal
}, popper), /*#__PURE__*/React.createElement(StyledPopoverContent, {
ref: content
}, /*#__PURE__*/React.createElement(StyledContentWrapper, {
actionsHeight: actionsDimensions ? actionsDimensions.height : 0,
ref: scrollingElementRef,
windowHeight: windowHeight
}, /*#__PURE__*/React.createElement(StyledPopoverPadding, {
noPadding: noPadding
}, children)), actions ? /*#__PURE__*/React.createElement(StyledActions, {
ref: measuredRef
}, actions) : /*#__PURE__*/React.createElement(StyledPopoverClose, {
ref: measuredRef
}, /*#__PURE__*/React.createElement(Button, {
type: "secondary",
fullWidth: true,
onClick: onClose
}, /*#__PURE__*/React.createElement(Translate, {
tKey: "button_close"
}))))));
};
export default PopoverContentWrapper;