# All files / src/_hooks Visibility.tsx

100% Statements 36/36
91.66% Branches 11/12
100% Functions 9/9
100% Lines 26/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
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    12461x

    61x
    1446x
    1446x
    1446x

    1446x

    1446x
    20x

    20x
    20x

    1446x
    50x

    50x
    50x

    1446x

    1446x

    61x
    2x

    2x

    183x
    3x

    61x

    61x
    2x

    61x
    3x

     import React from 'react'

    /* TYPES */

    /**
     * @deprecatedSince 9
     * @deprecated Never officially documented/supported
     */
    export interface VisibilityConfig {
      afterHide?: (e?: Event) => void
      afterShow?: () => void
      initialIsVisible?: boolean
    }

    interface VisibilityApi {
      hide: (e?: Event) => any
      isVisible: boolean
      show: () => any
      toggle: () => any
    }

    interface Props extends VisibilityConfig {
      children?: React.ReactNode
    }

    /**
     * @deprecatedSince 9
     * @deprecated Never officially documented/supported
     */
    export interface RenderProps extends VisibilityConfig {
      children: (props: VisibilityApi) => React.ReactElement<{}>
    }

    /* HOOK */

    function noop() {}

    /**
     * @deprecatedSince 9
     * @deprecated Never officially documented/supported
     */
    export function useVisibility({
      afterHide = noop,
      afterShow = noop,
      initialIsVisible = false,
    }: VisibilityConfig): VisibilityApi {
      const [isVisible, setVisibility] = React.useState(initialIsVisible)

      const hide = (e?: Event) => {
        setVisibility(false)

        if (isVisible) {
          afterHide(e)
        }
      }

      const show = () => {
        setVisibility(true)

        if (!isVisible) {
          afterShow()
        }
      }

      const toggle = isVisible ? hide : show

      return {
        hide,
        isVisible,
        show,
        toggle,
      }
    }

    /* RENDER PROP */

    /**
     * @deprecatedSince 9
     * @deprecated Never officially documented/supported
     */
    export function Visibility({ children, ...props }: RenderProps) {
      const visibility = useVisibility(props)

      return typeof children === 'function' ? children(visibility) : children
    }

    /* CONTEXT */

    const noopCtx = (method: string) => () =>
      console.warn(
        `Could not call \`${method}\`, please wrap your component in a \`<VisibilityProvider>\``
      )

    /**
     * @deprecatedSince 9
     * @deprecated Never officially documented/supported
     */
    export const VisibilityContext = React.createContext<VisibilityApi>({
      isVisible: false,
      hide: noopCtx('hide'),
      show: noopCtx('show'),
      toggle: noopCtx('toggle'),
    })

    /**
     * @deprecatedSince 9
     * @deprecated Never officially documented/supported
     */
    export function VisibilityProvider({ children, ...props }: Props) {
      return (
        <VisibilityContext.Provider value={useVisibility(props)}>
          {children}
        </VisibilityContext.Provider>
      )
    }

    /**
     * @deprecatedSince 9
     * @deprecated Never officially documented/supported
     */
    export function useVisibilityContext() {
      return React.useContext(VisibilityContext)
    }