Add optional collapsedMaxWords prop for ResultTableCell

src/client/components/facet_results/ResultTable.js

@@ -174,7 +174,14 @@ class ResultTable extends React.Component {
     let hasExpandableContent = false;
     const dataCells = this.props.data.tableColumns.map(column => {
       const columnData = row[column.id];
-      if (Array.isArray(columnData)) {
+      const isArray = Array.isArray(columnData);
+      if (isArray) {
+        hasExpandableContent = true;
+      }
+      if (!isArray
+        && column.valueType === 'string'
+        && column.collapsedMaxWords
+        && columnData.split(' ').length > column.collapsedMaxWords) {
         hasExpandableContent = true;
       }
       return (
@@ -190,7 +197,14 @@ class ResultTable extends React.Component {
           minWidth={column.minWidth}
           container='cell'
           expanded={expanded}
-          linkAsButton={has(column, 'linkAsButton') ? column.linkAsButton : null}
+          linkAsButton={has(column, 'linkAsButton')
+            ? column.linkAsButton
+            : null
+          }
+          collapsedMaxWords={has(column, 'collapsedMaxWords')
+            ? column.collapsedMaxWords
+            : null
+          }
         />
       );
     });

src/client/components/facet_results/ResultTableCell.js

@@ -2,43 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import TableCell from '@material-ui/core/TableCell';
 import ObjectList from './ObjectList';
-import { withStyles } from '@material-ui/core/styles';
-
-const styles = () => ({
-  valueList: {
-    paddingLeft: 20,
-    maxHeight: 200,
-    overflow: 'auto'
-  },
-  valueListNoBullets: {
-    listStyle: 'none',
-    paddingLeft: 0
-  },
-  noDate: {
-    marginRight: 20
-  }
-});
+import StringList from './StringList';
 
 const ResultTableCell = props => {
-
-  const stringListRenderer = cell => {
-    if (cell == null || cell === '-'){
-      return '-';
-    }
-    if (Array.isArray(cell)) {
-      cell = cell.sort();
-      return (
-        <ul className={props.classes.valueList}>
-          {cell.map((item, i) => <li key={i}>{item}</li>)}
-        </ul>
-      );
-    } else {
-      return <span>{cell}</span>;
-    }
-  };
-
   const { data, valueType, makeLink, externalLink, sortValues, numberedList, minWidth,
-    container, columnId, expanded, linkAsButton } = props;
+    container, columnId, expanded, linkAsButton, collapsedMaxWords } = props;
   let cellContent = null;
   let cellStyle = minWidth == null ? {} : { minWidth: minWidth };
   switch (valueType) {
@@ -56,7 +24,12 @@ const ResultTableCell = props => {
         />;
       break;
     case 'string':
-      cellContent = stringListRenderer(data);
+      cellContent =
+        <StringList
+          data={data}
+          expanded={expanded}
+          collapsedMaxWords={collapsedMaxWords}
+        />;
       break;
   }
   if (container === 'div') {
@@ -76,7 +49,6 @@ const ResultTableCell = props => {
 };
 
 ResultTableCell.propTypes = {
-  classes: PropTypes.object.isRequired,
   columnId: PropTypes.string.isRequired,
   data: PropTypes.oneOfType([PropTypes.object, PropTypes.array, PropTypes.string]),
   valueType: PropTypes.string.isRequired,
@@ -86,7 +58,7 @@ ResultTableCell.propTypes = {
   numberedList: PropTypes.bool.isRequired,
   minWidth: PropTypes.number,
   expanded: PropTypes.bool.isRequired,
-  addSource: PropTypes.func
+  collapsedMaxWords: PropTypes.number,
 };
 
-export default withStyles(styles)(ResultTableCell);
+export default ResultTableCell;

src/client/components/facet_results/StringList.js

+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import Collapse from '@material-ui/core/Collapse';
+// import Button from '@material-ui/core/Button';
+// import { ISOStringToDate } from './Dates';
+// import { Link } from 'react-router-dom';
+// import { orderBy, has } from 'lodash';
+
+const styles = () => ({
+  valueList: {
+    paddingLeft: 20,
+    maxHeight: 200,
+    overflow: 'auto'
+  },
+  valueListNoBullets: {
+    listStyle: 'none',
+    paddingLeft: 0
+  },
+  noDate: {
+    marginRight: 20
+  },
+  stringContainer: {
+    maxHeight: 200,
+    overflow: 'auto'
+  }
+});
+
+const StringList = props => {
+
+  const createFirstValue = (data, isArray) => {
+    if (isArray) {
+      data = data[0];
+    }
+    if (props.collapsedMaxWords) {
+      const wordCount = data.split(' ').length;
+      if (wordCount > props.collapsedMaxWords) {
+        data = data.split(' ').splice(0, props.collapsedMaxWords).join(' ');
+        data = `${data} ...`;
+      }
+    }
+    return(
+      <div className={props.classes.stringContainer}>{data}</div>
+    );
+  };
+
+  const createBasicList = data => {
+    data = data.sort();
+    return (
+      <ul className={props.classes.valueList}>
+        {data.map((item, i) => <li key={i}>{item}</li>)}
+      </ul>
+    );
+  };
+
+  let { data } = props;
+  if (data == null || data === '-'){
+    return '-';
+  }
+  const isArray = Array.isArray(data);
+  return (
+    <React.Fragment>
+      {!props.expanded && createFirstValue(data, isArray)}
+      <Collapse in={props.expanded} timeout="auto" unmountOnExit>
+        {isArray && createBasicList(data)}
+        {!isArray && <div className={props.classes.stringContainer}>{data}</div>}
+      </Collapse>
+    </React.Fragment>
+  );
+};
+
+StringList.propTypes = {
+  classes: PropTypes.object.isRequired,
+  data: PropTypes.oneOfType([PropTypes.array, PropTypes.string]),
+  expanded: PropTypes.bool.isRequired,
+  collapsedMaxWords: PropTypes.number
+};
+
+export default withStyles(styles)(StringList);