Instance home page: add expandable rows

src/client/components/main_layout/InstanceHomePageTable.js

@@ -2,6 +2,8 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import intl from 'react-intl-universal'
 import { withStyles } from '@material-ui/core/styles'
+import clsx from 'clsx'
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
 import Table from '@material-ui/core/Table'
 import TableBody from '@material-ui/core/TableBody'
 import TableRow from '@material-ui/core/TableRow'
@@ -37,6 +39,22 @@ const styles = theme => ({
   },
   tooltip: {
     marginTop: -3
+  },
+  expandCell: {
+    paddingRight: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+    width: 32
+  },
+  expand: {
+    transform: 'rotate(0deg)',
+    marginLeft: 'auto',
+    transition: theme.transitions.create('transform', {
+      duration: theme.transitions.duration.shortest
+    })
+  },
+  expandOpen: {
+    transform: 'rotate(180deg)'
   }
 })
 
@@ -44,6 +62,13 @@ const styles = theme => ({
  * A component for generating a table based on data about an entity.
  */
 class InstanceHomePageTable extends React.Component {
+  constructor (props) {
+    super(props)
+    this.state = {
+      expandedRows: new Set()
+    }
+  }
+
   componentDidMount = () => {
     if (this.props.fetchResultsWhenMounted) {
       this.props.fetchResults({
@@ -54,6 +79,33 @@ class InstanceHomePageTable extends React.Component {
     }
   }
 
+  handleExpandRow = rowId => () => {
+    const expandedRows = this.state.expandedRows
+    if (expandedRows.has(rowId)) {
+      expandedRows.delete(rowId)
+    } else {
+      expandedRows.add(rowId)
+    }
+    this.setState({ expandedRows })
+  }
+
+  hasExpandableContent = ({ data, config }) => {
+    let hasExpandableContent = false
+    const isArray = Array.isArray(data)
+    if (isArray) {
+      hasExpandableContent = true
+    }
+    if (!isArray &&
+        data !== '-' &&
+        config.valueType === 'string' &&
+        config.collapsedMaxWords &&
+        data.split(' ').length > config.collapsedMaxWords
+    ) {
+      hasExpandableContent = true
+    }
+    return hasExpandableContent
+  }
+
   render = () => {
     const { classes, data, resultClass, properties } = this.props
     return (
@@ -68,6 +120,7 @@ class InstanceHomePageTable extends React.Component {
                   id, valueType, makeLink, externalLink, sortValues, sortBy, numberedList, previewImageHeight,
                   linkAsButton, collapsedMaxWords, showSource, sourceExternalLink, renderAsHTML, HTMLParserTask
                 } = row
+                const expanded = this.state.expandedRows.has(row.id)
                 return (
                   <TableRow key={row.id}>
                     <TableCell className={classes.labelCell}>
@@ -82,6 +135,19 @@ class InstanceHomePageTable extends React.Component {
                         </IconButton>
                       </Tooltip>
                     </TableCell>
+                    <TableCell className={classes.expandCell}>
+                      {this.hasExpandableContent({ data: data[id], config: row }) &&
+                        <IconButton
+                          className={clsx(classes.expand, {
+                            [classes.expandOpen]: expanded
+                          })}
+                          onClick={this.handleExpandRow(row.id)}
+                          aria-expanded={expanded}
+                          aria-label='Show more'
+                        >
+                          <ExpandMoreIcon />
+                        </IconButton>}
+                    </TableCell>
                     <ResultTableCell
                       columnId={id}
                       data={data[id]}
@@ -92,7 +158,7 @@ class InstanceHomePageTable extends React.Component {
                       sortBy={sortBy}
                       numberedList={numberedList}
                       container='cell'
-                      expanded
+                      expanded={expanded}
                       previewImageHeight={previewImageHeight}
                       linkAsButton={linkAsButton}
                       collapsedMaxWords={collapsedMaxWords}