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;
|