UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

42 lines (41 loc) 2.01 kB
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)); }))); }, });