@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.
168 lines • 6.12 kB
JavaScript
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";
import useMediaQuery from "../../hooks/useMediaQuery";
const StyledArrow = styled.div.withConfig({
displayName: "Tooltip__StyledArrow",
componentId: "sc-17dgmzi-0"
})(["position:absolute;", ";&:before{content:\"\";background:", ";width:8px;height:8px;transform:translate(-50%,-50%) rotate(45deg);position:absolute;}"], resolvePlacement, resolveColor);
const StyledFormFeedbackTooltip = styled.div.withConfig({
displayName: "Tooltip__StyledFormFeedbackTooltip",
componentId: "sc-17dgmzi-1"
})(["", ""], ({
theme,
isHelp,
shown,
top,
left,
position,
bottom,
right: popperRight,
transform
}) => css(["display:flex;justify-content:space-between;box-sizing:border-box;border-radius:", ";padding:", " ", ";padding-", ":", ";z-index:10;max-height:none;overflow:visible;width:min(", ",100vw);background:", ";visibility:", ";opacity:", ";transition:opacity ", " ease-in-out,visibility ", " ease-in-out;position:", ";top:", ";left:", ";bottom:", ";right:", ";transform:", ";img{max-width:100%;}", ";", ""], theme.orbit.borderRadiusLarge, theme.orbit.spaceXSmall, theme.orbit.spaceSmall, right, isHelp && theme.orbit.spaceSmall, `calc(100% - ${SIDE_NUDGE * 2}px)`, resolveColor, shown ? "visible" : "hidden", shown ? "1" : "0", theme.orbit.durationFast, theme.orbit.durationFast, position, top, left, bottom, popperRight, transform, media.largeMobile(css(["width:auto;"])), media.tablet(css(["border-radius:", ";"], theme.orbit.borderRadiusNormal))));
StyledArrow.defaultProps = {
theme: defaultTheme
};
StyledFormFeedbackTooltip.defaultProps = {
theme: defaultTheme
};
const StyledTooltipContent = styled.div.withConfig({
displayName: "Tooltip__StyledTooltipContent",
componentId: "sc-17dgmzi-2"
})(["", ""], ({
theme
}) => 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.lineHeightTextSmall, theme.orbit.paletteWhite, StyledText, Item, theme.orbit.paletteWhite, theme.orbit.fontSizeTextNormal, theme.orbit.fontWeightNormal, theme.orbit.paletteWhite));
StyledTooltipContent.defaultProps = {
theme: defaultTheme
};
const StyledCloseButton = styled.a.withConfig({
displayName: "Tooltip__StyledCloseButton",
componentId: "sc-17dgmzi-3"
})(["", ""], ({
theme
}) => css(["color:", ";cursor:pointer;margin:", ";display:flex;"], theme.orbit.paletteWhite, rtlSpacing(`0 0 0 ${theme.orbit.spaceSmall}`)));
StyledCloseButton.defaultProps = {
theme: defaultTheme
};
const ErrorFormTooltip = ({
onShown,
dataTest,
helpClosable,
children,
shown,
referenceElement,
inlineLabel,
isHelp = false,
id
}) => {
const contentRef = React.useRef(null);
const tooltipRef = React.useRef(null);
const [arrowRef, setArrowRef] = React.useState(null);
const {
rtl
} = useTheme();
const {
isDesktop
} = useMediaQuery();
const {
styles,
attributes: attrs,
update
} = usePopper(referenceElement?.current, tooltipRef.current, {
placement: rtl ? "top-end" : "top-start",
modifiers: [{
name: "offset",
options: {
offset: [inlineLabel || isDesktop ? 0 : 4, 3]
}
}, {
name: "flip",
enabled: false
}, {
name: "arrow",
options: {
element: arrowRef
}
}, {
name: "eventListeners",
options: {
scroll: false
}
}]
});
const {
popper
} = styles;
useClickOutside(tooltipRef, () => {
onShown(false);
});
React.useEffect(() => {
if (update) update();
}, [update, shown]);
React.useEffect(() => {
const link = tooltipRef.current?.querySelector("a");
const 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 () => {
window.removeEventListener("keydown", handleTab);
};
}, [onShown, isHelp, helpClosable]);
return /*#__PURE__*/React.createElement(StyledFormFeedbackTooltip, {
id: id,
ref: tooltipRef,
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,
inlineLabel: inlineLabel,
placement: attrs.popper && attrs.popper["data-popper-placement"]
}), /*#__PURE__*/React.createElement(StyledTooltipContent, {
ref: contentRef
}, children), isHelp && helpClosable && /*#__PURE__*/React.createElement(StyledCloseButton, {
tabIndex: 0
// @ts-expect-error TODO
,
onKeyDown: handleKeyDown(onShown),
onClick: ev => {
ev.preventDefault();
if (shown) onShown(false);
}
}, /*#__PURE__*/React.createElement(CloseIc, {
ariaLabel: "close"
})));
};
export default ErrorFormTooltip;