All files / src/CollapseButtons CollapseButtons.js

26.32% Statements 5/19
0% Branches 0/9
0% Functions 0/10
33.33% Lines 5/15

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                      12x 12x   12x           12x                                                                                                     12x                                      
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import * as R from 'ramda';
import { makeStyles } from '@material-ui/core/styles';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import Grid from '@material-ui/core/Grid';
import Collapse from '@material-ui/core/Collapse';
import { ToggleButton } from '../';
import Item from './Item';
import Paper from './Paper';
 
export const MAX_COLUMNS = 12;
export const COLUMNS = [12, 12, 6, 4, 3, 3, 2, 2, 2, 2, 2, 2, 1];
 
const useStyles = makeStyles(() => ({
  collapseContainer: {
    width: '100%',
  },
}));
 
const CollapseButtons = props => {
  const { items = [], action = () => {}, nbColumns = 3 } = props;
  const [toggleId, setIsOpen] = useState();
  const classes = useStyles();
 
  const toggle = id => () => setIsOpen({ [id]: !R.prop(id)(toggleId) });
 
  const isMobileView = useMediaQuery(theme => theme.breakpoints.only('xs'));
 
  return (
    <Grid container spacing={2}>
      {R.map(({ id, label, values = [] }) => (
        <Grid item xs={12} sm={R.nth(nbColumns)(COLUMNS)} key={id}>
          <ToggleButton label={label} isOpen={R.prop(id)(toggleId)} toggle={toggle(id)} />
          {isMobileView ? (
            <Collapse
              in={R.prop(id)(toggleId)}
              timeout="auto"
              unmountOnExit
              className={classes.collapseContainer}
            >
              <Paper elevation={10} isMobileView={isMobileView}>
                {R.map(item => (
                  <Item key={R.prop('id')(item)} parentId={id} item={item} action={action} />
                ))(values)}
              </Paper>
            </Collapse>
          ) : null}
        </Grid>
      ))(items)}
      {isMobileView
        ? null
        : R.map(({ id, values = [] }) => (
            <Collapse
              in={R.prop(id)(toggleId)}
              timeout="auto"
              unmountOnExit
              key={id}
              className={classes.collapseContainer}
            >
              <Paper elevation={10}>
                {R.map(item => (
                  <Item key={R.prop('id')(item)} parentId={id} item={item} action={action} />
                ))(values)}
              </Paper>
            </Collapse>
          ))(items)}
    </Grid>
  );
};
 
CollapseButtons.propTypes = {
  items: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string,
      label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
      values: PropTypes.arrayOf(
        PropTypes.shape({
          id: PropTypes.string,
          label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
          subtopics: PropTypes.arrayOf(PropTypes.string),
        }),
      ),
    }),
  ),
  action: PropTypes.func,
  nbColumns: PropTypes.number,
};
 
export default CollapseButtons;