@trellixio/roaster-coffee
Version:
Beans' product component library
34 lines (33 loc) • 1.65 kB
JavaScript
import * as React from 'react';
import { useMergeRefs, FloatingPortal } from '@floating-ui/react';
import { useTooltip } from './useTooltip';
export const Tooltip = React.forwardRef((props, ref) => {
var _a, _b;
const { children, position, refProp = 'ref', label, opened, offset = 5, width, events = { hover: true, focus: false, touch: false }, zIndex, onClick, onMouseEnter, onMouseLeave, inline, } = props;
const tooltip = useTooltip({
position,
opened,
events,
offset,
positionDependencies: [],
inline,
});
const targetRef = useMergeRefs([tooltip.setReference, children.ref, ref]);
return (React.createElement(React.Fragment, null,
tooltip.opened && (React.createElement(FloatingPortal, null,
React.createElement("sub", Object.assign({ ref: tooltip.setFloating }, tooltip.getFloatingProps({
// ref: tooltip.floating,
className: 'tooltip',
style: {
zIndex,
width,
display: 'block',
top: (_a = tooltip.y) !== null && _a !== void 0 ? _a : 0,
left: (_b = tooltip.x) !== null && _b !== void 0 ? _b : 0,
},
})), label))),
React.cloneElement(children, tooltip.getReferenceProps(Object.assign({ onClick,
onMouseEnter,
onMouseLeave, onMouseMove: props.onMouseMove, onPointerDown: props.onPointerDown, onPointerEnter: props.onPointerEnter, [refProp]: targetRef, className: children.props.className }, children.props)))));
});
Tooltip.displayName = 'Tooltip';