@fluent-windows/core/es/Item/Item.js

React components that inspired by Microsoft's Fluent Design System.

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import * as React from 'react';
import classNames from 'classnames';
import { createUseStyles } from '@fluent-windows/styles';
import { styles } from './Item.styled';
import { ItemPropTypes } from './Item.type';
import Box from '../Box';
import { NavigationContext } from '../Navigation/Navigation';
import { ListContext } from '../List/List';
import { CommandContext } from '../Command/Command';
export const name = 'Item';
const useStyles = createUseStyles(styles, {
  name
});
const Item = React.forwardRef((props, ref) => {
  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 => {
    onClick && onClick(e);
    onChange && value && onChange(value);
  }, [value, onChange, onClick]);
  const [_active, setActive] = React.useState(false);
  React.useEffect(() => {
    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 React.createElement(Box, _extends({
    className: className,
    ref: ref,
    as: as,
    onClick: handleItemClick
  }, rest), !!value && React.createElement("div", {
    className: activeBarClassName
  }), !!prefix && React.createElement("div", {
    className: classes.prefixRoot
  }, prefix), React.createElement("div", {
    className: textClassName
  }, children));
});
Item.displayName = `F${name}`;
Item.propTypes = ItemPropTypes;
export default Item;