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