# All files / Tooltip Tooltip.tsx

0% Statements 0/27
0% Branches 0/9
0% Functions 0/3
0% Lines 0/26

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69

     import * as React from 'react'
    import {
      usePopper,
      useHover,
      useClick,
      useTouch,
      useFocus,
      useClickOutside
    } from '@fluent-ui/hooks'
    import Portal from '../Portal'
    import Transition from '../Transition'
    import { StyledTooltip } from './Tooltip.styled'
    import { TooltipProps, TooltipPropTypes } from './Tooltip.type'

    const Tooltip: React.FC<TooltipProps> = ({
      children,
      title,
      visible,
      onChange,
      trigger = 'hover',
      ...propperOptions
    }): React.ReactElement => {
      const [referenceRef, popperRef] = usePopper<HTMLDivElement, HTMLDivElement>(propperOptions)
      const isControlled = React.useMemo((): boolean => !!visible, [visible])

      const hoverHandler = useHover(onChange)
      const clickHandler = useClick(onChange)
      useClickOutside(
        referenceRef,
        (): void => {
          clickHandler[2] && clickHandler[2](false)
          onChange && onChange(false)
        }
      )
      const touchHandler = useTouch(onChange)
      const focusHandler = useFocus(onChange)
      const triggerMap = {
        hover: hoverHandler,
        click: clickHandler,
        touch: touchHandler,
        focus: focusHandler
      }
      const [currentStatus, bind] = triggerMap[trigger]
      const isVisible = isControlled ? visible : currentStatus

      const content =
        typeof title === 'string' ? (
          <StyledTooltip ref={popperRef}>{title}</StyledTooltip>
        ) : (
          React.cloneElement(title, { ref: popperRef, ...bind })
        )
      return (
        <>
          {React.cloneElement(children, { ref: referenceRef, ...bind })}
          <Portal>
            <Transition visible={isVisible} wrapper={false} mountOnEnter unmountOnExit>
              {content}
            </Transition>
          </Portal>
        </>
      )
    }

    Tooltip.displayName = 'FTooltip'

    Tooltip.propTypes = TooltipPropTypes

    export default Tooltip