@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.
277 lines (259 loc) • 11.4 kB
JavaScript
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/lib/convertHexToRgba";
import defaultTheme from "../../defaultTheme";
import media from "../../utils/mediaQuery";
import Button from "../../Button";
import resolvePopoverPosition from "../helpers/resolvePopoverPosition";
import resolvePopoverHorizontal from "../helpers/resolvePopoverHorizontal";
import calculatePopoverPosition from "../helpers/calculatePopoverPosition";
import calculateVerticalPosition from "../helpers/calculateVerticalPosition";
import calculateHorizontalPosition from "../helpers/calculateHorizontalPosition";
import useDimensions from "../hooks/useDimensions";
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 boundingClientRect from "../../utils/boundingClientRect";
import getScrollableParent from "../helpers/getScrollableParent";
import { StyledButtonPrimitive } from "../../primitives/ButtonPrimitive";
var mobileTop = function mobileTop(theme) {
return theme.orbit.spaceXLarge;
};
var popoverPadding = function popoverPadding(theme) {
return theme.orbit.spaceMedium;
};
var StyledContentWrapper = styled.div.withConfig({
displayName: "ContentWrapper__StyledContentWrapper",
componentId: "v01g55-0"
})(["overflow:auto;border-top-left-radius:12px;border-top-right-radius:12px;position:absolute;left:0;width:100%;background-color:", ";max-height:", ";bottom:", "px;", ""], function (_ref) {
var theme = _ref.theme;
return theme.orbit.paletteWhite;
}, function (_ref2) {
var windowHeight = _ref2.windowHeight,
actionsHeight = _ref2.actionsHeight;
return "".concat(windowHeight - actionsHeight - 32, "px");
}, function (_ref3) {
var actionsHeight = _ref3.actionsHeight;
return actionsHeight || 0;
}, media.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"
})(["position:fixed;bottom:0;left:0;width:100%;box-sizing:border-box;padding:", ";padding-top:", ";background-color:", ";", "{width:100%;flex:1 1 auto;}", ";"], function (_ref4) {
var theme = _ref4.theme;
return popoverPadding(theme);
}, function (_ref5) {
var theme = _ref5.theme;
return theme.orbit.spaceSmall;
}, function (_ref6) {
var theme = _ref6.theme;
return theme.orbit.paletteWhite;
}, StyledButtonPrimitive, media.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"
})(["position:fixed;bottom:0;left:0;right:0;width:100%;height:auto;box-sizing:border-box;background-color:", ";box-shadow:", ";z-index:1000;transition:", ";transform:translateY(", ");max-height:", ";&:focus{outline:0;}", ""], function (_ref7) {
var theme = _ref7.theme;
return theme.orbit.backgroundModal;
}, function (_ref8) {
var theme = _ref8.theme;
return theme.orbit.boxShadowRaisedReverse;
}, transition(["opacity", "transform"], "fast", "ease-in-out"), function (_ref9) {
var shownMobile = _ref9.shownMobile;
return shownMobile ? "0%" : "100%";
}, function (_ref10) {
var theme = _ref10.theme;
return "calc(100% - ".concat(mobileTop(theme), ")");
}, media.largeMobile(css(["z-index:", ";position:", ";left:auto;right:auto;bottom:auto;width:", ";opacity:", ";transform:none;border-radius:", ";box-shadow:", ";max-height:none;", " ", ""], function (_ref11) {
var isInsideModal = _ref11.isInsideModal;
return isInsideModal ? "1000" : "600";
}, function (_ref12) {
var fixed = _ref12.fixed;
return fixed ? "fixed" : "absolute";
}, function (_ref13) {
var width = _ref13.width;
return width ? "".concat(width) : "auto";
}, function (_ref14) {
var shown = _ref14.shown;
return shown ? "1" : "0";
}, function (_ref15) {
var theme = _ref15.theme;
return theme.orbit.borderRadiusNormal;
}, function (_ref16) {
var theme = _ref16.theme;
return theme.orbit.boxShadowRaised;
}, resolvePopoverPosition, resolvePopoverHorizontal))); // $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 (_ref17) {
var noPadding = _ref17.noPadding,
theme = _ref17.theme;
return noPadding ? 0 : popoverPadding(theme);
}); // $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"
})(["display:block;position:fixed;opacity:", ";top:0;left:0;right:0;width:100%;height:100%;background-color:", ";transition:", ";z-index:999;", ";"], function (_ref18) {
var shown = _ref18.shown;
return shown ? "1" : "0";
}, function (_ref19) {
var theme = _ref19.theme;
return convertHexToRgba(theme.orbit.paletteInkNormal, 60);
}, transition(["opacity"], "normal", "ease-in-out"), media.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:", ";", ""], function (_ref20) {
var theme = _ref20.theme;
return popoverPadding(theme);
}, media.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(_ref21) {
var children = _ref21.children,
offset = _ref21.offset,
onClose = _ref21.onClose,
width = _ref21.width,
dataTest = _ref21.dataTest,
preferredPosition = _ref21.preferredPosition,
preferredAlign = _ref21.preferredAlign,
containerRef = _ref21.containerRef,
noPadding = _ref21.noPadding,
overlapped = _ref21.overlapped,
shown = _ref21.shown,
fixed = _ref21.fixed,
_ref21$lockScrolling = _ref21.lockScrolling,
lockScrolling = _ref21$lockScrolling === void 0 ? true : _ref21$lockScrolling,
actions = _ref21.actions;
var _React$useContext = React.useContext(ModalContext),
isInsideModal = _React$useContext.isInsideModal;
var _useMediaQuery = useMediaQuery(),
isLargeMobile = _useMediaQuery.isLargeMobile,
isTablet = _useMediaQuery.isTablet;
var popover = React.useRef(null);
var content = React.useRef(null);
var scrollingElementRef = React.useRef(null);
useLockScrolling(scrollingElementRef, lockScrolling && !isLargeMobile);
var intervalRef = React.useRef(null);
var position = calculatePopoverPosition(preferredPosition, preferredAlign);
var scrollableParent = React.useMemo(function () {
return getScrollableParent(containerRef.current);
}, [containerRef]);
var dimensions = useDimensions({
containerRef: containerRef,
popover: popover,
content: content,
fixed: fixed,
scrollableParent: scrollableParent,
children: children
});
var verticalPosition = calculateVerticalPosition(position[0], dimensions);
var horizontalPosition = calculateHorizontalPosition(position[1], dimensions);
var _React$useState = React.useState(0),
_React$useState2 = _slicedToArray(_React$useState, 2),
actionsDimensions = _React$useState2[0],
setActionsDimensions = _React$useState2[1];
var windowHeight = typeof window !== "undefined" ? window.innerHeight : 0;
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]);
React.useEffect(function () {
var timer = setTimeout(function () {
if (popover.current) {
popover.current.focus();
}
}, 100);
return function () {
clearTimeout(timer);
clearTimeout(intervalRef.current);
};
}, []);
useClickOutside(popover, 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, {
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",
offset: offset,
"data-test": dataTest,
noPadding: noPadding,
overlapped: overlapped,
role: "tooltip",
onKeyDown: handleKeyDown,
fixed: fixed,
isInsideModal: isInsideModal
}, /*#__PURE__*/React.createElement(StyledPopoverContent, {
ref: content
}, /*#__PURE__*/React.createElement(StyledContentWrapper, {
ref: scrollingElementRef,
actionsHeight: actionsDimensions ? actionsDimensions.height : 0,
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;