@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.
212 lines (195 loc) • 8.69 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import * as React from "react";
import styled, { css } from "styled-components";
import { usePopper } from "react-popper";
import useClickOutside from "../../hooks/useClickOutside";
import KEY_CODE_MAP from "../../common/keyMaps";
import handleKeyDown from "../../utils/handleKeyDown";
import defaultTheme from "../../defaultTheme";
import media from "../../utils/mediaQuery";
import { StyledText } from "../../Text";
import { Item } from "../../List/ListItem";
import CloseIc from "../../icons/Close";
import { rtlSpacing, right } from "../../utils/rtl";
import resolveColor from "./helpers/resolveColor";
import resolvePlacement from "./helpers/resolvePlacement";
import { SIDE_NUDGE } from "./consts";
import useTheme from "../../hooks/useTheme";
var StyledArrow = styled( /*#__PURE__*/React.forwardRef(function (_ref, ref) {
var className = _ref.className;
return /*#__PURE__*/React.createElement("div", {
className: className,
ref: ref
});
})).withConfig({
displayName: "Tooltip__StyledArrow",
componentId: "sc-1dljgob-0"
})(["", ""], function (_ref2) {
var position = _ref2.position,
top = _ref2.top,
left = _ref2.left,
bottom = _ref2.bottom,
popperRight = _ref2.right,
transform = _ref2.transform;
return css(["position:", ";top:", ";left:", ";right:", ";bottom:", ";transform:", ";&:before{content:\"\";background:", ";width:0.6rem;height:0.6rem;transform:translate(-50%,-50%) rotate(45deg);position:absolute;}"], position, top, left, popperRight, bottom, transform, resolveColor);
});
var StyledFormFeedbackTooltip = styled.div.withConfig({
displayName: "Tooltip__StyledFormFeedbackTooltip",
componentId: "sc-1dljgob-1"
})(["", ""], function (_ref3) {
var theme = _ref3.theme,
isHelp = _ref3.isHelp,
shown = _ref3.shown,
inputSize = _ref3.inputSize,
top = _ref3.top,
left = _ref3.left,
position = _ref3.position,
bottom = _ref3.bottom,
popperRight = _ref3.right,
transform = _ref3.transform;
return css(["display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;border-radius:", ";box-shadow:", ";padding:", ";padding-", ":", ";z-index:10;max-height:none;overflow:visible;width:", ";background:", ";visibility:", ";opacity:", ";transition:opacity ", " ease-in-out,visibility ", " ease-in-out;position:", ";top:", ";left:", ";bottom:", ";right:", ";transform:", ";img{max-width:100%;}", "{", ";}", ";"], theme.orbit.borderRadiusNormal, theme.orbit.boxShadowElevatedLevel1, inputSize === "small" ? theme.orbit.spaceXSmall : theme.orbit.spaceSmall, right, isHelp && theme.orbit.spaceSmall, "calc(100% + ".concat(SIDE_NUDGE * 2, "px)"), resolveColor, shown ? "visible" : "hidden", shown ? "1" : "0", theme.orbit.durationFast, theme.orbit.durationFast, position, top, left, bottom, popperRight, transform, StyledArrow, resolvePlacement, media.largeMobile(css(["width:auto;"])));
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledArrow.defaultProps = {
theme: defaultTheme
}; // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledFormFeedbackTooltip.defaultProps = {
theme: defaultTheme
};
var StyledTooltipContent = styled.div.withConfig({
displayName: "Tooltip__StyledTooltipContent",
componentId: "sc-1dljgob-2"
})(["", ""], function (_ref4) {
var theme = _ref4.theme;
return css(["display:flex;align-items:center;height:100%;font-family:", ";font-size:", ";font-weight:", ";line-height:", ";color:", ";& ", ",", ",a{color:", ";font-size:", ";font-weight:", ";&:hover,&:focus{color:", ";}}", ";"], theme.orbit.fontFamily, theme.orbit.fontSizeTextNormal, theme.orbit.fontWeightNormal, theme.orbit.lineHeightText, theme.orbit.paletteWhite, StyledText, Item, theme.orbit.paletteWhite, theme.orbit.fontSizeTextNormal, theme.orbit.fontWeightNormal, theme.orbit.paletteWhite, media.largeMobile(css(["font-size:", ";font-weight:", ";", ",", ",a{font-weight:", ";font-size:", ";}"], theme.orbit.fontSizeTextSmall, theme.orbit.fontWeightMedium, StyledText, Item, theme.orbit.fontWeightMedium, theme.orbit.fontSizeTextSmall)));
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledTooltipContent.defaultProps = {
theme: defaultTheme
};
var StyledCloseButton = styled.a.withConfig({
displayName: "Tooltip__StyledCloseButton",
componentId: "sc-1dljgob-3"
})(["", ""], function (_ref5) {
var theme = _ref5.theme;
return css(["color:", ";cursor:pointer;margin:", ";display:flex;"], theme.orbit.paletteWhite, rtlSpacing("0 0 0 ".concat(theme.orbit.spaceSmall)));
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198
StyledCloseButton.defaultProps = {
theme: defaultTheme
};
var ErrorFormTooltip = function ErrorFormTooltip(_ref6) {
var onShown = _ref6.onShown,
dataTest = _ref6.dataTest,
inputSize = _ref6.inputSize,
children = _ref6.children,
shown = _ref6.shown,
referenceElement = _ref6.referenceElement,
inlineLabel = _ref6.inlineLabel,
_ref6$isHelp = _ref6.isHelp,
isHelp = _ref6$isHelp === void 0 ? false : _ref6$isHelp,
id = _ref6.id;
var contentRef = React.useRef(null);
var _useTheme = useTheme(),
rtl = _useTheme.rtl;
var _React$useState = React.useState(null),
_React$useState2 = _slicedToArray(_React$useState, 2),
tooltipRef = _React$useState2[0],
setTooltipRef = _React$useState2[1];
var _React$useState3 = React.useState(null),
_React$useState4 = _slicedToArray(_React$useState3, 2),
arrowRef = _React$useState4[0],
setArrowRef = _React$useState4[1];
var resolveOffset = React.useCallback(function () {
if (inlineLabel) {
if (inputSize === "small") return [rtl ? 10 : -14, 7];
return [rtl ? 6 : -6, 6];
}
return [rtl ? 10 : -10, 7];
}, [inlineLabel, inputSize, rtl]);
var _usePopper = usePopper(referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.current, tooltipRef, {
placement: rtl ? "top-end" : "top-start",
modifiers: [{
name: "offset",
options: {
offset: resolveOffset
}
}, {
name: "arrow",
options: {
element: arrowRef
}
}, {
name: "eventListeners",
options: {
scroll: false
}
}]
}),
styles = _usePopper.styles,
attrs = _usePopper.attributes,
update = _usePopper.update;
var popper = styles.popper,
arrow = styles.arrow;
useClickOutside(contentRef, function () {
if (!isHelp) onShown(false);
});
React.useEffect(function () {
if (update) update();
}, [update, resolveOffset, shown]);
React.useEffect(function () {
var link = tooltipRef === null || tooltipRef === void 0 ? void 0 : tooltipRef.querySelector("a");
var handleTab = function handleTab(ev) {
if (isHelp) return;
if (ev.keyCode === KEY_CODE_MAP.TAB && link) {
onShown(true);
if (document.activeElement === link) {
onShown(false);
}
} else {
onShown(false);
}
};
window.addEventListener("keydown", handleTab);
return function () {
window.removeEventListener("keydown", handleTab);
};
}, [onShown, isHelp, tooltipRef]);
return /*#__PURE__*/React.createElement(StyledFormFeedbackTooltip, {
id: id,
ref: setTooltipRef,
inputSize: inputSize,
shown: shown,
isHelp: isHelp,
"data-test": dataTest,
"aria-live": "polite",
inlineLabel: inlineLabel,
placement: attrs.popper && attrs.popper["data-popper-placement"],
position: popper.position,
top: popper.top,
left: popper.left,
right: popper.right,
bottom: popper.bottom,
transform: popper.transform
}, /*#__PURE__*/React.createElement(StyledArrow, {
isHelp: isHelp,
ref: setArrowRef,
position: popper.position,
placement: attrs.popper && attrs.popper["data-popper-placement"],
top: arrow.top,
left: arrow.left,
right: arrow.right,
bottom: arrow.bottom
}), /*#__PURE__*/React.createElement(StyledTooltipContent, {
ref: contentRef
}, children), isHelp && /*#__PURE__*/React.createElement(StyledCloseButton, {
tabIndex: 0 // $FlowFixMe: TODO
,
onKeyDown: handleKeyDown(onShown),
onClick: function onClick(ev) {
ev.preventDefault();
if (shown) onShown(false);
}
}, /*#__PURE__*/React.createElement(CloseIc, {
ariaLabel: "close",
size: "small"
})));
};
export default ErrorFormTooltip;