@chayns-components/core
Version:
A set of beautiful React components for developing your own applications with chayns.
66 lines (65 loc) • 3.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _tooltip = require("../../utils/tooltip");
var _Popup = _interopRequireDefault(require("../popup/Popup"));
var _TooltipItem = _interopRequireDefault(require("./tooltip-item/TooltipItem"));
var _Tooltip = require("./Tooltip.styles");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const Tooltip = ({
alignment,
item,
children,
container,
isDisabled,
shouldHideOnChildrenLeave,
maxItemWidth,
yOffset,
itemWidth,
shouldUseFullWidth = false,
shouldUseChildrenWidth = !shouldUseFullWidth
}) => {
const tooltipRef = (0, _react.useRef)(null);
const content = (0, _react.useMemo)(() => {
if (/*#__PURE__*/(0, _react.isValidElement)(item)) {
return item;
}
return /*#__PURE__*/_react.default.createElement(_TooltipItem.default, {
width: itemWidth,
maxWidth: maxItemWidth,
text: item.text,
headline: item.headline,
imageUrl: item.imageUrl,
button: item.button
});
}, [item, itemWidth, maxItemWidth]);
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_Tooltip.StyledTooltip, {
className: "beta-chayns-tooltip"
}, isDisabled ? /*#__PURE__*/_react.default.createElement(_Tooltip.StyledTooltipChildren, {
$isOnlyText: (0, _tooltip.isTextOnlyElement)(children),
$shouldUseChildrenWidth: shouldUseChildrenWidth,
$shouldUseFullWidth: shouldUseFullWidth
}, children) : /*#__PURE__*/_react.default.createElement(_Popup.default, {
alignment: alignment,
shouldShowOnHover: true,
shouldHideOnChildrenLeave: shouldHideOnChildrenLeave,
content: content,
ref: tooltipRef,
container: container,
yOffset: yOffset,
shouldUseChildrenWidth: shouldUseChildrenWidth,
shouldUseFullWidth: shouldUseFullWidth,
shouldScrollWithContent: true
}, /*#__PURE__*/_react.default.createElement(_Tooltip.StyledTooltipChildren, {
$isOnlyText: (0, _tooltip.isTextOnlyElement)(children),
$shouldUseChildrenWidth: shouldUseChildrenWidth,
$shouldUseFullWidth: shouldUseFullWidth
}, children))), [isDisabled, children, shouldUseChildrenWidth, shouldUseFullWidth, alignment, shouldHideOnChildrenLeave, content, container, yOffset]);
};
Tooltip.displayName = 'Tooltip';
var _default = exports.default = Tooltip;
//# sourceMappingURL=Tooltip.js.map