@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
42 lines (41 loc) • 2.01 kB
JavaScript
import * as React from 'react';
import innerText from 'react-innertext';
import { getTransformFromPlacement, Popper, defaultFallbackPlacements, } from '@workday/canvas-kit-react/popup';
import { createComponent, mergeCallback } from '@workday/canvas-kit-react/common';
import { TooltipContainer } from './TooltipContainer';
import { useTooltip } from './useTooltip';
function mergeCallbacks(elemProps, componentProps, keys = Object.keys(componentProps)) {
return keys.reduce((mergedProps, key) => {
if (typeof elemProps[key] === 'function') {
mergedProps[key] = mergeCallback(componentProps[key], elemProps[key]);
}
else {
mergedProps[key] = componentProps[key];
}
return mergedProps;
}, {});
}
export const Tooltip = createComponent('div')({
displayName: 'Tooltip',
Component({ type = 'label', placement = 'top', title, children, showDelay = 300, hideDelay = 100, fallbackPlacements = defaultFallbackPlacements, ...elemProps }) {
const titleText = innerText(title);
const { targetProps, popperProps, tooltipProps } = useTooltip({
type,
titleText,
showDelay,
hideDelay,
});
return (React.createElement(React.Fragment, null,
React.cloneElement(children, {
...targetProps,
...mergeCallbacks(children.props, targetProps),
...(/^(muted|describe)$/.test(type) && children.props['aria-label']
? { 'aria-label': children.props['aria-label'] }
: {}),
}),
React.createElement(Popper, { placement: placement, fallbackPlacements: fallbackPlacements, ...popperProps }, ({ placement }) => {
const transformOrigin = getTransformFromPlacement(placement);
return (React.createElement(TooltipContainer, { transformOrigin: transformOrigin, ...elemProps, ...tooltipProps }, title));
})));
},
});