All files / src/ScopeList ScopeList.js

25% Statements 2/8
0% Branches 0/16
0% Functions 0/3
25% Lines 2/8

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                        12x                                                                                                                       12x                                        
import React from 'react';
import * as R from 'ramda';
import PropTypes from 'prop-types';
import List from '@material-ui/core/List';
import NavigateBefore from '@material-ui/icons/NavigateBefore';
import NavigateNext from '@material-ui/icons/NavigateNext';
import { withScopeList } from './with-scope-list';
import Item from './Item';
import { ExpansionPanel, Tag as InternalTag } from '../';
import { useStyles } from './styles';
import { withBlank } from '../utils';
 
const ScopeList = props => {
  const {
    id,
    label,
    isRtl,
    list = [],
    currentItem,
    changeList,
    changeSelection,
    onChangeActivePanel,
    activePanelId,
    TopElementComponent,
    Tag,
    tagValue,
  } = props;
  const classes = useStyles();
  const Chip = R.isNil(Tag) ? InternalTag : Tag;
 
  return (
    <ExpansionPanel
      isOpen={R.equals(id, activePanelId)}
      id={id}
      label={label}
      onChangeActivePanel={onChangeActivePanel}
      topElementComponent={TopElementComponent ? <TopElementComponent {...props} /> : null}
      tag={<Chip items={list}>{tagValue}</Chip>}
    >
      <List dense disablePadding>
        {currentItem ? (
          <Item
            classes={classes}
            itemId={id}
            isRtl={isRtl}
            changeList={changeList}
            changeSelection={changeSelection}
            ariaLabel={isRtl ? 'navigate_next' : 'navigate_before'}
            NavigateIcon={isRtl ? NavigateNext : NavigateBefore}
            isSection
            divider
            {...currentItem}
          />
        ) : null}
        {R.map(item => (
          <Item
            key={item.id}
            classes={classes}
            itemId={id}
            isRtl={isRtl}
            changeList={changeList}
            changeSelection={changeSelection}
            ariaLabel={isRtl ? 'navigate_before' : 'navigate_next'}
            NavigateIcon={isRtl ? NavigateBefore : NavigateNext}
            {...item}
          />
        ))(list)}
      </List>
    </ExpansionPanel>
  );
};
 
ScopeList.propTypes = {
  id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  label: PropTypes.string,
  isRtl: PropTypes.bool,
  list: PropTypes.array,
  currentItem: PropTypes.object,
  classes: PropTypes.object,
  changeList: PropTypes.func,
  changeSelection: PropTypes.func,
  onChangeActivePanel: PropTypes.func,
  activePanelId: PropTypes.string,
  TopElementComponent: PropTypes.func,
  Tag: PropTypes.func,
  tagValue: PropTypes.node,
};
 
export default R.compose(
  withBlank(({ items = [], isBlank }) => ({ isBlank: R.or(R.isEmpty(items), isBlank) })),
  withScopeList,
)(ScopeList);