# All files / src/Tearsheet Tearsheet.util.ts

87.87% Statements 29/33
86.66% Branches 13/15
100% Functions 5/5
86.66% Lines 26/30

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
    966x
    6x

    6x

    38x
    11x

    27x
    15x

    12x
    12x

    6x

    11x

    11x
    1x

    10x
    4x

    6x
    6x

    6x

    30x

    30x
    2x

    28x

    28x
    12x

    16x
    16x

     import { fadeInClassName, fadeOutClassName } from '../Modal/Modal.styles'
    import {
      closingPhasesInOrder,
      openingPhasesInOrder,
    } from './Tearsheet.constants'
    import { AnimationPhase, AnimationStatus } from './Tearsheet.types'

    export const wait = (ms: number) => new Promise((res) => setTimeout(res, ms))

    function getIsPhaseInProgressOrComplete(
      targetPhase: AnimationPhase,
      currentPhase: AnimationPhase,
      status: AnimationStatus
    ) {
      if (currentPhase === 'disabled') {
        return false
      }

      if (status === 'opening') {
        return (
          openingPhasesInOrder.indexOf(targetPhase) <=
          openingPhasesInOrder.indexOf(currentPhase)
        )
      }

      if (status === 'closing') {
        return (
          closingPhasesInOrder.indexOf(targetPhase) <=
          closingPhasesInOrder.indexOf(currentPhase)
        )
      }

      return false
    }

    export function getScrimClassName(
      status: AnimationStatus,
      phase: AnimationPhase
    ) {
      Iif (status === 'open') {
        return fadeInClassName
      }

      if (status === 'closed') {
        return fadeOutClassName
      }

      if (status === 'closing') {
        return getIsPhaseInProgressOrComplete('scrim', phase, status)
          ? fadeOutClassName
          : fadeInClassName
      }

      if (status === 'opening') {
        return getIsPhaseInProgressOrComplete('scrim', phase, status)
          ? fadeInClassName
          : fadeOutClassName
      }
    }

    export function getAnimationState(
      targetPhase: AnimationPhase,
      currentPhase: AnimationPhase,
      status: AnimationStatus
    ): { $open: boolean; $opening?: boolean; $closing?: boolean } {
      Iif (status === 'open') {
        return { $open: true }
      }

      if (status === 'closed') {
        return { $open: false }
      }

      const inProgressOrComplete = getIsPhaseInProgressOrComplete(
        targetPhase,
        currentPhase,
        status
      )

      if (status === 'closing') {
        return {
          $open: !inProgressOrComplete,
          $closing: targetPhase === currentPhase,
        }
      }

      if (status === 'opening') {
        return {
          $open: inProgressOrComplete,
          $opening: targetPhase === currentPhase,
        }
      }

      return { $open: false }
    }