@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
58 lines • 2.11 kB
JavaScript
import React, { isValidElement, useMemo, useRef } from 'react';
import { isTextOnlyElement } from '../../utils/tooltip';
import Popup from '../popup/Popup';
import TooltipItem from './tooltip-item/TooltipItem';
import { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';
const Tooltip = _ref => {
let {
alignment,
item,
children,
container,
isDisabled,
shouldHideOnChildrenLeave,
maxItemWidth,
yOffset,
itemWidth,
shouldUseFullWidth = false,
shouldUseChildrenWidth = !shouldUseFullWidth
} = _ref;
const tooltipRef = useRef(null);
const content = useMemo(() => {
if (/*#__PURE__*/isValidElement(item)) {
return item;
}
return /*#__PURE__*/React.createElement(TooltipItem, {
width: itemWidth,
maxWidth: maxItemWidth,
text: item.text,
headline: item.headline,
imageUrl: item.imageUrl,
button: item.button
});
}, [item, itemWidth, maxItemWidth]);
return useMemo(() => /*#__PURE__*/React.createElement(StyledTooltip, {
className: "beta-chayns-tooltip"
}, isDisabled ? /*#__PURE__*/React.createElement(StyledTooltipChildren, {
$isOnlyText: isTextOnlyElement(children),
$shouldUseChildrenWidth: shouldUseChildrenWidth,
$shouldUseFullWidth: shouldUseFullWidth
}, children) : /*#__PURE__*/React.createElement(Popup, {
alignment: alignment,
shouldShowOnHover: true,
shouldHideOnChildrenLeave: shouldHideOnChildrenLeave,
content: content,
ref: tooltipRef,
container: container,
yOffset: yOffset,
shouldUseChildrenWidth: shouldUseChildrenWidth,
shouldUseFullWidth: shouldUseFullWidth
}, /*#__PURE__*/React.createElement(StyledTooltipChildren, {
$isOnlyText: isTextOnlyElement(children),
$shouldUseChildrenWidth: shouldUseChildrenWidth,
$shouldUseFullWidth: shouldUseFullWidth
}, children))), [isDisabled, children, shouldUseChildrenWidth, shouldUseFullWidth, alignment, shouldHideOnChildrenLeave, content, container, yOffset]);
};
Tooltip.displayName = 'Tooltip';
export default Tooltip;
//# sourceMappingURL=Tooltip.js.map