# All files / src/Item Item.tsx

100% Statements 35/35
95.65% Branches 22/23
100% Functions 3/3
100% Lines 35/35

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
    927x
    7x
    7x
    7x
    7x

    7x
    7x

    7x
    7x

    7x

    7x

    7x

    46x
    46x

    46x
    46x
    46x
    46x

    46x

    1x
    1x

    46x
    46x
    45x
    2x
    1x

    1x

    46x
    46x

    46x

    46x

    46x

    7x

    7x

    7x
     import * as React from 'react'
    import classNames from 'classnames'
    import { createUseStyles } from '@fluent-ui/styles'
    import { styles } from './Item.styled'
    import { ItemClassProps, ItemProps, ItemPropTypes } from './Item.type'
    import { Theme } from '../styles'

    import Box from '../Box'
    import { NavigationContext } from '../Navigation/Navigation'
    import { NavigationID } from '../Navigation/Navigation.type'
    import { ListContext } from '../List/List'
    import { CommandContext } from '../Command/Command'

    export const name = 'Item'

    const useStyles = createUseStyles<Theme, ItemClassProps>(styles, { name })

    const Item: React.FC<ItemProps> = React.forwardRef<HTMLDivElement, ItemProps>(
      (props, ref): React.ReactElement => {
        const {
          as = 'div',
          className: classNameProp,
          value,
          prefix,
          active,
          children,
          onClick,
          ...rest
        } = props
        // handle active item
        const {
          value: activeID,
          onChange,
          expanded,
          reveal: navigationReveal,
          horizontal
        } = React.useContext(NavigationContext)
        const { reveal: listReveal } = React.useContext(ListContext)
        const commandReveal = React.useContext(CommandContext)
        const reveal = navigationReveal || listReveal || commandReveal

        const handleItemClick = React.useCallback(
          (e: React.MouseEvent<HTMLDivElement>): void => {
            onClick && onClick(e)
            onChange && value && onChange(value as NavigationID)
          },
          [value, onChange, onClick]
        )
        const [_active, setActive] = React.useState(false)
        React.useEffect((): void => {
          if (value && activeID) {
            if (activeID === value) {
              setActive(true)
            } else {
              setActive(false)
            }
          }
        }, [activeID, value])

        const classes = useStyles(props)
        const className = classNames(
          classes.root,
          {
            [classes.reveal]: reveal
          },
          classNameProp
        )
        const activeBarClassName = classNames(classes.activeBar, {
          [classes.activeBarHorizontal]: horizontal,
          [classes.activeBarActive]: active || _active
        })
        const textClassName = classNames(classes.text, {
          [classes.textExpanded]: expanded,
          [classes.textNoChildren]: !children,
          [classes.textHasPrefix]: !!prefix && expanded
        })
        return (
          <Box className={className} ref={ref} as={as} onClick={handleItemClick} {...rest}>
            {!!value && <div className={activeBarClassName} />}
            {!!prefix && <div className={classes.prefixRoot}>{prefix}</div>}
            <div className={textClassName}>{children}</div>
          </Box>
        )
      }
    )

    Item.displayName = `F${name}`

    Item.propTypes = ItemPropTypes

    export default Item