@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.
99 lines • 3.42 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from "react";
import styled, { css } from "styled-components";
import { SIZE_OPTIONS } from "./consts";
import { StyledText } from "../../Text";
import Portal from "../../Portal";
import useRandomId from "../../hooks/useRandomId";
import TooltipContent from "./components/TooltipContent";
import useStateWithTimeout from "../../hooks/useStateWithTimeout";
export const StyledTooltipChildren = styled.span.withConfig({
displayName: "TooltipPrimitive__StyledTooltipChildren",
componentId: "sc-vkgnmr-0"
})(["", ""], ({
block,
enabled,
removeUnderlinedText
}) => css(["display:", ";max-width:100%;&:focus:active{outline:none;}", ";[disabled]{pointer-events:none;}"], block ? "flex" : "inline-flex", enabled && !removeUnderlinedText && css(["", "{display:inline-block;text-decoration:underline;text-decoration:underline currentColor dotted;}"], StyledText)));
const TooltipPrimitive = ({
children,
enabled = true,
tooltipShown,
tabIndex = "0",
onShow,
dataTest,
id,
renderInPortal = true,
size = SIZE_OPTIONS.SMALL,
content,
error,
help,
stopPropagation = false,
removeUnderlinedText,
block = false,
...popper
}) => {
const [shown, setShown] = React.useState(false);
const [referenceElement, setReferenceElement] = React.useState(null);
const [render, setRender, setRenderWithTimeout, clearRenderTimeout] = useStateWithTimeout(false, 200);
const tooltipId = useRandomId();
const handleIn = React.useCallback(() => {
setRender(true);
setShown(true);
if (onShow) onShow();
clearRenderTimeout();
}, [clearRenderTimeout, setRender, onShow]);
const handleOut = React.useCallback(() => {
setShown(false);
setRenderWithTimeout(false);
}, [setRenderWithTimeout]);
const handleClick = React.useCallback(ev => {
if (stopPropagation) {
ev.stopPropagation();
}
}, [stopPropagation]);
React.useEffect(() => {
if (tooltipShown) {
handleIn();
} else {
handleOut();
}
}, [tooltipShown, handleIn, handleOut]);
const handleOutMobile = React.useCallback(() => {
setRenderWithTimeout(false);
}, [setRenderWithTimeout]);
if (!enabled) return /*#__PURE__*/React.createElement(React.Fragment, null, children);
const tooltip = /*#__PURE__*/React.createElement(TooltipContent, _extends({
parent: children,
dataTest: dataTest,
id: id,
shown: shown,
size: size,
error: error,
help: help,
tooltipId: id || tooltipId,
onClick: handleClick,
onClose: handleOut,
onCloseMobile: handleOutMobile,
onEnter: handleIn
}, popper, {
referenceElement: referenceElement
}), content);
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledTooltipChildren, {
as: block ? "div" : "span",
onMouseEnter: handleIn,
onMouseLeave: handleOut,
onClick: handleClick,
onFocus: handleIn,
onBlur: handleOut,
ref: setReferenceElement,
"aria-describedby": enabled ? id || tooltipId : undefined,
tabIndex: enabled ? Number(tabIndex) : undefined,
enabled: enabled,
removeUnderlinedText: removeUnderlinedText,
block: block
}, children), enabled && render && (renderInPortal ? /*#__PURE__*/React.createElement(Portal, {
renderInto: "tooltips"
}, tooltip) : tooltip));
};
export default TooltipPrimitive;