# All files / src/FlexList FlexList.tsx

90.32% Statements 28/31
73.68% Branches 14/19
100% Functions 8/8
86.95% Lines 20/23

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
    7214x
    14x

    14x

    124x
    124x

    106x

    124x

    124x
    106x

    18x
    18x

    14x

    125x

    124x

    124x
    124x

    124x

    403x

    403x

    14x
     import React from 'react'
    import { Box } from '../Box/Box'
    import { FlexDirection, MarginSize } from '../Box/Box.types'
    import { DivAttributes } from '../_utils/types'
    import { StyledFlex } from './FlexList.styles'
    import { FlexListProps } from './FlexList.types'

    function getSingleSize(Isize: string = ''): MarginSize {
      return size.split(' ')[0] as MarginSize
    }

    function getItemMargin(direction: FlexDirection, size: MarginSize): string {
      return direction.includes('row') ? `0 ${size}` : `${size} 0`
    }

    function getMargin(
      direction: FlexDirection,
      space?: MarginSize,
      Isize: MarginSize = 'md'
    ) {
      if (space === undefined) {
        return { margin: getItemMargin(direction, size) }
      }

      if (space && direction.includes('row')) {
        return { marginRight: space }
      }

      Iif (space && direction.includes('column')) {
        return { marginBottom: space }
      }

      return {}
    }

    export const FlexList = React.forwardRef<
      HTMLDivElement,
      DivAttributes & FlexListProps
    >(function FlexList(
      { boxProps, children, direction = 'row', size = 'md', space, ...props },
      ref
    ) {
      const singleSize = React.useMemo(() => getSingleSize(size), [size])

      const margin = React.useMemo(
        () => getMargin(direction, space, singleSize),
        [direction, space, singleSize]
      )

      return (
        <StyledFlex
          {...props}
          ref={ref}
          direction={direction}
          $direction={direction}
        >
          {React.Children.toArray(children)
            .filter((child) => child)
            .map(
              (child: any, i) =>
                child && (
                  <Box {...boxProps} {...margin} key={child.key || i}>
                    {child}
                  </Box>
                )
            )}
        </StyledFlex>
      )
    })

    FlexList.displayName = 'FlexList'