diff --git a/package-lock.json b/package-lock.json index 58c9eedee6098c71fe9d506e324471d33637b48d..2b41f5408276db504694a9cd660d0b83edfa7116 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8390,7 +8390,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -8805,7 +8806,8 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -8861,6 +8863,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -8904,12 +8907,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, diff --git a/src/client/components/facet_results/ResultTable.js b/src/client/components/facet_results/ResultTable.js index 96455ba7529c0a1fe1c7d54bd86624431dc76c9d..68ef3caff8a07e1260cab5fa3e2d8acc975b7ced 100644 --- a/src/client/components/facet_results/ResultTable.js +++ b/src/client/components/facet_results/ResultTable.js @@ -47,10 +47,26 @@ const styles = theme => ({ expandCell: { paddingRight: 0, //paddingLeft: 0 - } + }, + expand: { + transform: 'rotate(0deg)', + marginLeft: 'auto', + transition: theme.transitions.create('transform', { + duration: theme.transitions.duration.shortest, + }), + }, + expandOpen: { + transform: 'rotate(180deg)', + }, }); class ResultTable extends React.Component { + constructor(props) { + super(props); + this.state = { + expandedRows: new Set(), + }; + } componentDidMount = () => { let page; @@ -123,27 +139,35 @@ class ResultTable extends React.Component { } } - handleExpandRow = () => { - //console.log('expanded') + handleExpandRow = rowId => () => { + console.log(rowId); + let expandedRows = this.state.expandedRows; + if (expandedRows.has(rowId)) { + expandedRows.delete(rowId); + } else { + expandedRows.add(rowId); + } + this.setState({ expandedRows}); } rowRenderer = row => { - // <TableCell className={classes.expandCell}> - // <IconButton - // className={clsx(classes.expand, { - // [classes.expandOpen]: expanded, - // })} - // onClick={this.handleExpandRow} - // aria-expanded={expanded} - // aria-label="Show more" - // > - // <ExpandMoreIcon /> - // </IconButton> - // </TableCell> - //const { classes } = this.props; - //const expanded = false; + const { classes } = this.props; + //console.log(this.state.expandedRows) + const expanded = this.state.expandedRows.has(row.id); return ( <TableRow key={row.id}> + <TableCell className={classes.expandCell}> + <IconButton + className={clsx(classes.expand, { + [classes.expandOpen]: expanded, + })} + onClick={this.handleExpandRow(row.id)} + aria-expanded={expanded} + aria-label="Show more" + > + <ExpandMoreIcon /> + </IconButton> + </TableCell> {this.props.data.tableColumns.map(column => { return ( <ResultTableCell @@ -156,6 +180,7 @@ class ResultTable extends React.Component { numberedList={column.numberedList} minWidth={column.minWidth} container='cell' + expanded={expanded} /> ); })} diff --git a/src/client/components/facet_results/ResultTableCell.js b/src/client/components/facet_results/ResultTableCell.js index 8b45d5f3da54a14f404ba8e75ffba5f7c2c56dd3..10b9ef7b0cc83bf87543aa4bb1d15913a8e56c00 100644 --- a/src/client/components/facet_results/ResultTableCell.js +++ b/src/client/components/facet_results/ResultTableCell.js @@ -3,6 +3,8 @@ import PropTypes from 'prop-types'; import { sortBy, orderBy, has } from 'lodash'; import TableCell from '@material-ui/core/TableCell'; import { withStyles } from '@material-ui/core/styles'; +import Collapse from '@material-ui/core/Collapse'; +import Typography from '@material-ui/core/Typography'; const styles = () => ({ valueList: { @@ -178,7 +180,8 @@ const ResultTableCell = props => { } }; - const { data, valueType, makeLink, sortValues, numberedList, minWidth, container } = props; + const { data, valueType, makeLink, sortValues, numberedList, minWidth, + container, expanded } = props; let renderer = null; let cellStyle = minWidth == null ? {} : { minWidth: minWidth }; switch (valueType) { @@ -206,6 +209,9 @@ const ResultTableCell = props => { return( <TableCell style={cellStyle}> {renderer(data, makeLink, sortValues, numberedList)} + <Collapse in={expanded} timeout="auto" unmountOnExit> + <Typography>expanded content</Typography> + </Collapse> </TableCell> ); } @@ -219,7 +225,8 @@ ResultTableCell.propTypes = { makeLink: PropTypes.bool.isRequired, sortValues: PropTypes.bool.isRequired, numberedList: PropTypes.bool.isRequired, - minWidth: PropTypes.number + minWidth: PropTypes.number, + expanded: PropTypes.bool.isRequired }; export default withStyles(styles)(ResultTableCell); diff --git a/src/client/components/facet_results/ResultTableHead.js b/src/client/components/facet_results/ResultTableHead.js index 07d5f6a49393ae79646c68ec33f5480fbaf95dda..8aefbd4fb22724a6ef10af325801bffd49e98282 100644 --- a/src/client/components/facet_results/ResultTableHead.js +++ b/src/client/components/facet_results/ResultTableHead.js @@ -23,8 +23,7 @@ const ResultTableHead = props => { return ( <TableHead> <TableRow> - {/* <TableCell className={classes.headerCol} key={'empty'}> - </TableCell>*/} + <TableCell className={classes.headerCol} key={'empty'} /> {columns.map(column => { return ( <TableCell