{"size": 1762, "ext": "js", "max_stars_repo_path": "uifab/src/uifab/NavItem.js", "max_stars_repo_name": "slenin/uifab", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "uifab/src/uifab/NavItem.js", "max_issues_repo_name": "slenin/uifab", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "uifab/src/uifab/NavItem.js", "max_forks_repo_name": "slenin/uifab", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 20.488372093, "max_line_length": 62, "alphanum_fraction": 0.5556186152}
import React from 'react';
import PropTypes from 'prop-types';
import { useLocation } from 'react-router';

import Box from './Box';
import Button from './Button';
import EllipsisText from './EllipsisText';
import Flex from './Flex';
import Icon from './Icon';
import stylex from './stylex';

function NavItem(props) {
  const {
    className, disabled, icon, onClick,
    to, text,
  } = props;
  const hasIcon = icon && true;
  const location = useLocation();
  return (
    <Button
      className={className}
      format="inline"
      color={location.pathname === to ? 'primary' : 'inherit'}
      to={to}
      onClick={onClick}
      disabled={disabled}
    >
      <Flex alignItems="center">
        {hasIcon && (
          <Box
            lineHeight="100%"
            minWidth="1em"
            mr={3}
            textAlign="left"
            width="1em"
          >
            {!React.isValidElement(icon) && (
              <Icon
                icon={icon}
              />
            )}
            {React.isValidElement(icon) && icon}
          </Box>
        )}
        <EllipsisText
          textAlign="left"
          text={text}
        />
      </Flex>
    </Button>
  );
}

NavItem.propTypes = {
  className: PropTypes.string,
  disabled: PropTypes.bool,
  icon: PropTypes.oneOfType([
    PropTypes.arrayOf(PropTypes.string),
    PropTypes.string,
    PropTypes.node,
  ]),
  onClick: PropTypes.func,
  to: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.shape({}),
  ]),
  text: PropTypes.string,
};

NavItem.defaultProps = {
  className: null,
  disabled: false,
  icon: null,
  onClick: null,
  to: null,
  text: null,
};


export default stylex(NavItem, {
  maxWidth: '100%',
  '&:hover': {
    color: 'primary',
  },
});
