ScopeList Item.js

57.14% Statements 4/7

0% Branches 0/10

0% Functions 0/3

57.14% Lines 4/7

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 92 93 94 95 96 97 98 99 100 101 102 103 104 105

12x 12x 12x 12x

import React from 'react';
import * as R from 'ramda';
import PropTypes from 'prop-types';
import ListItem from '@material-ui/core/ListItem';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';
import IconButton from '@material-ui/core/IconButton';
import cx from 'classnames';
 
const Label = ({ label, count, classes }) => (
  <div className={classes.labelContainer}>
    <div className={classes.label}>{label}</div>
    <div className={classes.count}>{count}</div>
  </div>
);
 
Label.propTypes = {
  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  count: PropTypes.number,
  classes: PropTypes.object,
};
 
const Item = ({
  classes,
  itemId,
  id,
  label,
  nodePath,
  parentId,
  isSelected,
  isDisabled,
  changeList,
  ariaLabel,
  NavigateIcon,
  changeSelection,
  isSection,
  hasChild,
  divider,
  count,
}) => {
  return (
    <ListItem
      button
      divider={divider}
      classes={{ divider: classes.divider }}
      selected={isSelected}
      disabled={isDisabled}
      onClick={changeSelection(itemId)(id)}
    >
      <ListItemText
        primaryTypographyProps={
          isSection ? { color: 'inherit' } : { noWrap: true, color: 'inherit' }
        }
        secondaryTypographyProps={{ color: 'inherit' }}
        primary={<Label count={count} label={label} classes={classes} />}
        secondary={nodePath}
        classes={
          isSection
            ? {
                root: classes.breadcrumb,
                primary: cx(classes.section, classes.textPrimary),
                secondary: classes.section,
              }
            : { root: cx(classes.breadcrumb, { [classes.labelIndentation]: R.not(hasChild) }) }
        }
        title={label}
      />
      {R.or(hasChild, isSection) ? (
        <ListItemSecondaryAction
          classes={isSection ? { root: classes.ListItemPrimaryAction } : null}
        >
          <IconButton
            className={classes.button}
            aria-label={ariaLabel}
            onClick={() => changeList(isSection ? parentId : id)}
          >
            <NavigateIcon />
          </IconButton>
        </ListItemSecondaryAction>
      ) : null}
    </ListItem>
  );
};
 
Item.propTypes = {
  classes: PropTypes.object,
  itemId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  label: PropTypes.string,
  parentId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  nodePath: PropTypes.string,
  ariaLabel: PropTypes.string,
  NavigateIcon: PropTypes.object,
  isSelected: PropTypes.bool,
  isDisabled: PropTypes.bool,
  hasChild: PropTypes.bool,
  isSection: PropTypes.bool,
  changeList: PropTypes.func,
  changeSelection: PropTypes.func,
  count: PropTypes.number,
  divider: PropTypes.bool,
};
 
export default Item;