Result table: expand row by clicking three dots

src/client/components/facet_results/ObjectListCollapsible.js

@@ -25,13 +25,16 @@ const styles = () => ({
   dateContainer: {
     width: 180,
     display: 'inline-block'
+  },
+  threeDots: {
+    cursor: 'pointer'
   }
 })
 
-const ObjectList = props => {
+const ObjectListCollapsible = props => {
   const {
     sortValues, sortBy, makeLink, externalLink, linkAsButton, columnId, showSource,
-    sourceExternalLink, numberedList, collapsedMaxWords
+    sourceExternalLink, numberedList, collapsedMaxWords, classes, shortenLabel
   } = props
   let { data } = props
 
@@ -61,7 +64,8 @@ const ObjectList = props => {
             data={itemData}
             isFirstValue={isFirstValue}
           />
-          {addThreeDots && <span> ...</span>}
+          {addThreeDots &&
+            <span className={classes.threeDots} onClick={() => props.onExpandClick(props.rowId)}> ...</span>}
         </>
       )
     } else {
@@ -75,7 +79,8 @@ const ObjectList = props => {
             isFirstValue={isFirstValue}
             collapsedMaxWords={collapsedMaxWords}
           />
-          {addThreeDots && <span> ...</span>}
+          {addThreeDots &&
+            <span className={classes.threeDots} onClick={() => props.onExpandClick(props.rowId)}> ...</span>}
           {showSource && itemData.source &&
             <ObjectListItemSources
               data={itemData.source}
@@ -118,11 +123,11 @@ const ObjectList = props => {
       </>
     )
   } else {
-    return renderItem({ addThreeDots: data.shortenLabel, itemData: data })
+    return renderItem({ addThreeDots: shortenLabel, itemData: data })
   }
 }
 
-ObjectList.propTypes = {
+ObjectListCollapsible.propTypes = {
   classes: PropTypes.object.isRequired,
   data: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.string]),
   makeLink: PropTypes.bool.isRequired,
@@ -132,7 +137,8 @@ ObjectList.propTypes = {
   expanded: PropTypes.bool.isRequired,
   columnId: PropTypes.string.isRequired,
   linkAsButton: PropTypes.bool,
-  showSource: PropTypes.bool
+  showSource: PropTypes.bool,
+  shortenLabel: PropTypes.bool.isRequired
 }
 
-export default withStyles(styles)(ObjectList)
+export default withStyles(styles)(ObjectListCollapsible)

src/client/components/facet_results/ResultTable.js

@@ -169,7 +169,11 @@ class ResultTable extends React.Component {
     }
   }
 
-  handleExpandRow = rowId => () => {
+  handleExpandRow = rowId => event => this.updateExpanedRows(rowId)
+
+  handleExpandRowFromChildComponent = rowId => this.updateExpanedRows(rowId)
+
+  updateExpanedRows = rowId => {
     const expandedRows = this.state.expandedRows
     if (expandedRows.has(rowId)) {
       expandedRows.delete(rowId)
@@ -203,20 +207,22 @@ class ResultTable extends React.Component {
       if (column.valueType === 'image' && Array.isArray(columnData)) {
         hasExpandableContent = false
       }
+      let shortenLabel = false
       // check if label should be shortened in ResultTableCell
       if (!isArray && column.collapsedMaxWords && columnData !== '-') {
         if (column.valueType === 'string' && columnData.split(' ').length > column.collapsedMaxWords) {
           hasExpandableContent = true
-          columnData.shortenLabel = !expanded // shorten label only if the cell is not expanded
+          shortenLabel = !expanded // shorten label only if the cell is not expanded
         }
         if (column.valueType === 'object' && columnData.prefLabel.split(' ').length > column.collapsedMaxWords) {
           hasExpandableContent = true
-          columnData.shortenLabel = !expanded // shorten label only if the cell is not expanded
+          shortenLabel = !expanded // shorten label only if the cell is not expanded
         }
       }
       return (
         <ResultTableCell
           key={id}
+          rowId={row.id}
           columnId={id}
           data={columnData}
           valueType={valueType}
@@ -229,8 +235,10 @@ class ResultTable extends React.Component {
           previewImageHeight={previewImageHeight}
           container='cell'
           expanded={expanded}
+          onExpandClick={this.handleExpandRowFromChildComponent}
           linkAsButton={linkAsButton}
           collapsedMaxWords={collapsedMaxWords}
+          shortenLabel={shortenLabel}
           showSource={false}
           sourceExternalLink={sourceExternalLink}
           renderAsHTML={renderAsHTML}

src/client/components/facet_results/ResultTableCell.js

@@ -10,7 +10,8 @@ const ResultTableCell = props => {
   const {
     data, valueType, makeLink, externalLink, sortValues, sortBy, numberedList, minWidth,
     container, columnId, expanded, linkAsButton, collapsedMaxWords, showSource,
-    sourceExternalLink, renderAsHTML, HTMLParserTask, referencedTerm, previewImageHeight
+    sourceExternalLink, renderAsHTML, HTMLParserTask, referencedTerm, previewImageHeight,
+    onExpandClick, rowId, shortenLabel
   } = props
   let cellContent = null
   const cellStyle = {
@@ -26,9 +27,12 @@ const ResultTableCell = props => {
           sortValues={sortValues}
           sortBy={sortBy}
           numberedList={numberedList}
+          rowId={rowId}
           columnId={columnId}
           expanded={expanded}
+          onExpandClick={onExpandClick}
           collapsedMaxWords={collapsedMaxWords}
+          shortenLabel={shortenLabel}
           linkAsButton={linkAsButton}
           showSource={showSource}
           sourceExternalLink={sourceExternalLink}
@@ -40,7 +44,10 @@ const ResultTableCell = props => {
         <StringList
           data={data}
           expanded={expanded}
+          onExpandClick={onExpandClick}
+          rowId={rowId}
           collapsedMaxWords={collapsedMaxWords}
+          shortenLabel={shortenLabel}
           renderAsHTML={renderAsHTML}
           HTMLParserTask={HTMLParserTask}
           referencedTerm={referencedTerm}

src/client/components/facet_results/StringList.js

@@ -27,23 +27,33 @@ const styles = theme => ({
   tooltipList: {
     listStylePosition: 'inside',
     paddingLeft: 0
+  },
+  threeDots: {
+    cursor: 'pointer'
   }
 })
 
 const StringList = props => {
   const createFirstValue = (data, isArray) => {
     let firstValue = isArray ? data[0] : data
+    let addThreeDots = false
     if (props.collapsedMaxWords) {
       const wordCount = firstValue.split(' ').length
       if (wordCount > props.collapsedMaxWords) {
         firstValue = firstValue.trim().split(' ').splice(0, props.collapsedMaxWords).join(' ')
-        firstValue = `${firstValue}...`
+        addThreeDots = true
+        // firstValue = `${firstValue}...`
       }
     } else if (isArray) {
-      firstValue = `${firstValue}...`
+      addThreeDots = true
+      // firstValue = `${firstValue}...`
     }
     return (
-      <div className={props.classes.stringContainer}>{firstValue}</div>
+      <>
+        <div className={props.classes.stringContainer}>{firstValue}</div>
+        {addThreeDots &&
+          <span className={props.classes.threeDots} onClick={() => props.onExpandClick(props.rowId)}> ...</span>}
+      </>
     )
   }