ResultTableCell: improve label handling

src/client/components/facet_results/ObjectListCollapsible.js

@@ -53,7 +53,7 @@ const ObjectList = props => {
     return data
   }
 
-  const renderItem = ({ collapsed, itemData, isFirstValue = false }) => {
+  const renderItem = ({ addThreeDots, itemData, isFirstValue = false }) => {
     if (columnId === 'event') {
       return (
         <>
@@ -61,7 +61,7 @@ const ObjectList = props => {
             data={itemData}
             isFirstValue={isFirstValue}
           />
-          {collapsed && <span> ...</span>}
+          {addThreeDots && <span> ...</span>}
         </>
       )
     } else {
@@ -75,7 +75,7 @@ const ObjectList = props => {
             isFirstValue={isFirstValue}
             collapsedMaxWords={collapsedMaxWords}
           />
-          {collapsed && <span> ...</span>}
+          {addThreeDots && <span> ...</span>}
           {showSource && itemData.source &&
             <ObjectListItemSources
               data={itemData.source}
@@ -111,14 +111,14 @@ const ObjectList = props => {
     data = sortValues ? sortList(data) : data
     return (
       <>
-        {!props.expanded && renderItem({ collapsed: true, itemData: data[0], isFirstValue: true })}
+        {!props.expanded && renderItem({ addThreeDots: true, itemData: data[0], isFirstValue: true })}
         <Collapse in={props.expanded} timeout='auto' unmountOnExit>
           {numberedList ? renderNumberedList(data) : renderBulletedList(data)}
         </Collapse>
       </>
     )
   } else {
-    return renderItem({ collapsed: false, itemData: data, isFirstValue: true })
+    return renderItem({ addThreeDots: data.shortenLabel, itemData: data })
   }
 }
 

src/client/components/facet_results/ObjectListItem.js

@@ -5,7 +5,7 @@ import ObjectListItemLink from './ObjectListItemLink'
 const ObjectListItem = props => {
   const { data, makeLink, externalLink, linkAsButton, isFirstValue, collapsedMaxWords } = props
   let label = Array.isArray(data.prefLabel) ? data.prefLabel[0] : data.prefLabel
-  if (isFirstValue && collapsedMaxWords) {
+  if ((isFirstValue || data.shortenLabel) && collapsedMaxWords) {
     const wordCount = label.split(' ').length
     if (wordCount > collapsedMaxWords) {
       label = label.trim().split(' ').splice(0, props.collapsedMaxWords).join(' ')

src/client/components/facet_results/ResultTable.js

@@ -203,13 +203,16 @@ class ResultTable extends React.Component {
       if (column.valueType === 'image' && Array.isArray(columnData)) {
         hasExpandableContent = false
       }
-      if (!isArray &&
-        columnData !== '-' &&
-        column.valueType === 'string' &&
-        column.collapsedMaxWords &&
-        columnData.split(' ').length > column.collapsedMaxWords
-      ) {
-        hasExpandableContent = true
+      // 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
+        }
+        if (column.valueType === 'object' && columnData.prefLabel.split(' ').length > column.collapsedMaxWords) {
+          hasExpandableContent = true
+          columnData.shortenLabel = !expanded // shorten label only if the cell is not expanded
+        }
       }
       return (
         <ResultTableCell