# All files / Drawer Drawer.styled.ts

0% Statements 0/12
100% Branches 0/0
0% Functions 0/5
0% Lines 0/7

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

     import { Styles, Style } from 'jss'
    import { Theme } from '../styles'
    import { createBaseTransition } from '../styles/createTransition'
    import { DrawerProps, DrawerClassProps } from './Drawer.type'

    const anchorTransitionMap = {
      left: '-100%, 0, 0',
      right: '100%, 0, 0',
      top: '0, -100%, 0',
      bottom: '0, 100%, 0'
    }
    export const createSwipe = (anchor: DrawerProps['anchor']): Style => ({
      transition: createBaseTransition(['transform', 'visibility']),
      '&.custom-enter': {
        transform: `translate3d(${anchorTransitionMap[anchor!]})`,
        '&-done': {
          transform: 'none'
        }
      },
      '&.custom-exit': {
        transform: 'none',
        '&-active': {
          transform: `translate3d(${anchorTransitionMap[anchor!]})`
        },
        '&-done': {
          transform: `translate3d(${anchorTransitionMap[anchor!]})`
        }
      }
    })

    const anchorMap = {
      left: {
        height: '100%',
        left: 0,
        right: 'auto',
        top: 0,
        bottom: 0
      },
      right: {
        height: '100%',
        left: 'auto',
        right: 0,
        top: 0,
        bottom: 0
      },
      top: {
        width: '100%',
        left: 0,
        right: 0,
        top: 0,
        bottom: 'auto'
      },
      bottom: {
        width: '100%',
        left: 0,
        right: 0,
        top: 'auto',
        bottom: 0
      }
    }

    export const root = (theme: Theme): Style => ({ anchor }: DrawerProps): Style => ({
      position: 'fixed',
      zIndex: 1001,
      boxShadow: theme.shadows![3],
      backgroundColor: theme.colors!.white!.default,
      ...anchorMap[anchor!]
    })

    export const mask = (theme: Theme): Style => ({
      position: 'fixed',
      top: 0,
      right: 0,
      bottom: 0,
      left: 0,
      zIndex: 1000,
      backgroundColor: theme.colors!.standard!.transparent2
    })

    export const styles = (theme: Theme): Styles<DrawerClassProps> => ({
      root: root(theme),
      mask: mask(theme)
    })