@activecollab/components
Version:
ActiveCollab Components
83 lines • 2.68 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useState, forwardRef } from "react";
import classnames from "classnames";
import { StyledTooltip } from "./Styles";
import { Portal, useLayerContext } from "../../helpers";
import { layers } from "../../utils";
import useForkRef from "../../utils/useForkRef";
import { Popper } from "../Popper";
import { FromElement } from "../Transitions/FromElement";
const TooltipAnimation = _ref => {
let {
children,
...props
} = _ref;
return /*#__PURE__*/React.createElement(FromElement, _extends({
timeout: 0
}, props), children);
};
export const Tooltip = /*#__PURE__*/forwardRef((_ref2, ref) => {
let {
children,
title,
className,
style,
isLight = false,
placement = "top",
TransitionComponent = TooltipAnimation,
popperTooltipStyle,
popperTooltipClassName,
disable
} = _ref2;
const {
zIndex = layers.skyscraper
} = useLayerContext();
const [open, setOpen] = useState(false);
const [childNode, setChildNode] = useState();
const handleEnter = event => {
const childrenProps = children.props;
if (event.type === "mouseover" && childrenProps.onMouseOver) {
childrenProps.onMouseOver(event);
}
childNode && childNode.removeAttribute("title");
setOpen(true);
};
const handleLeave = event => {
const childrenProps = children.props;
if (event.type === "mouseleave" && childrenProps.onMouseLeave && event.currentTarget === childNode) {
childrenProps.onMouseLeave(event);
}
setOpen(false);
};
const handleOwnRef = useForkRef(children.ref, ref);
const handleRef = useForkRef(setChildNode, handleOwnRef);
const childrenProps = {
onMouseOver: handleEnter,
onMouseLeave: handleLeave,
ref: handleRef
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.cloneElement(children, childrenProps), !disable && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(Popper, {
anchorEl: childNode,
open: childNode ? open : false,
placement: placement,
transition: true,
className: popperTooltipClassName,
style: {
zIndex,
...popperTooltipStyle
},
role: "tooltip"
}, _ref3 => {
let {
transitionProps = {}
} = _ref3;
return /*#__PURE__*/React.createElement(TransitionComponent, _extends({}, transitionProps, {
style: style
}), /*#__PURE__*/React.createElement(StyledTooltip, {
className: classnames("c-tooltip-ds", className),
$isLight: isLight
}, title));
})));
});
Tooltip.displayName = "Tooltip";
//# sourceMappingURL=Tooltip.js.map