# All files / src/Navigation/components Item.tsx

78.26% Statements 18/23
55.56% Branches 10/18
75% Functions 3/4
77.27% Lines 17/22

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
    7411x
    11x
    11x

    11x
    12x

    12x

    12x

    22x

    12x

    10x

    12x

    12x
    12x
    6x

    12x

    11x

    11x
     import * as React from 'react'
    import { NavigationContext } from '../Navigation'
    import {
      StyledItemWrapper,
      StyledItemActiveBar,
      StyledItemIconWrapper,
      StyledItemTextWrapper
    } from './Item.styled'
    import { NavigationItemProps, NavigationID } from '../Navigation.type'

    type Child = React.ReactChild | any

    const Item = React.memo(
      ({ id, onClick, children, ...rest }: NavigationItemProps): React.ReactElement => {
        const container: {
          icon: any
          content: any
        } = {
          icon: null,
          content: null
        }
        React.Children.forEach(
          children,
          (child: Child): void => {
            if (
              child.type &&
              child.type.displayName &&
              String.prototype.includes.call(child.type.displayName, 'FIcon')
            ) {
              container.icon = React.cloneElement(child, {
                style: { width: 16, height: 16 }
              })
            } else {
              container.content = React.cloneElement(child, {
                style: { fontSize: 14 }
              })
            }
          }
        )

        // handle active item
        const { value: activeID, onChange, expanded, reveal, horizontal } = React.useContext(
          NavigationContext
        )
        function handleItemClick(e: React.MouseEvent<HTMLDivElement>): void {
          onClick && onClick(e)
          onChange && id && onChange(id as NavigationID)
        }
        const [active, setActive] = React.useState(false)
        React.useEffect((): void => {
          Iif (id && activeID) {
            if (activeID === id) {
              setActive(true)
            } else {
              setActive(false)
            }
          }
        }, [activeID, id])
        return (
          <StyledItemWrapper onClick={handleItemClick} reveal={reveal} {...rest}>
            {!!id && <StyledItemActiveBar active={active} horizontal={horizontal} />}
            <StyledItemIconWrapper>{container.icon}</StyledItemIconWrapper>
            <StyledItemTextWrapper expanded={expanded} hasIcon={!!container.icon}>
              {container.content}
            </StyledItemTextWrapper>
          </StyledItemWrapper>
        )
      }
    )

    Item.displayName = 'FNavigationItem'

    export default Item