Merge pull request #3861 from fdiazq/develop

WV76 - Added TruncateMarkup fix to disappearing text issue Team Review

src/js/common/components/Widgets/ReadMore.jsx

@@ -1,11 +1,10 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
-import TextTruncate from 'react-text-truncate'; // TODO APRIL 2021:  This doesn't support the latest React libs, can't we do the same with css? (See note below)
-import { renderLog } from '../../utils/logging';
-
+// import TextTruncate from 'react-text-truncate'; // TODO APRIL 2021:  This doesn't support the latest React libs, can't we do the same with css? (See note below)
 // 2021-02-23 NOTE FROM DALE: I'd like to try to upgrade ReadMore to use react-truncate-markup
 // This newer package supports truncating JSX, and isn't limited to text only:
-// import TruncateMarkup from 'react-truncate-markup';
+import TruncateMarkup from 'react-truncate-markup';
+import { renderLog } from '../../utils/logging';
 
 export default class ReadMore extends Component {
   constructor (...args) {
@@ -111,39 +110,42 @@ export default class ReadMore extends Component {
     if (notEnoughTextToTruncate) {
       return <span className={this.props.className}>{expandedTextToDisplay}</span>;
     }
+
+    const showMoreEllipsis = (
+      <span>
+        &hellip;
+        {' '}
+        <a //eslint-disable-line
+          className="u-link-color u-link-underline-on hover u-no-break"
+          href="#"
+          id="readMore"
+          onClick={this.toggleLines}
+          onKeyDown={this.onKeyDown.bind(this)}
+        >
+          {linkText}
+        </a>
+
+      </span>
+    );
+
     if (this.state.readMore) {
       return (
-        <span>
-          <TextTruncate
-            containerClassName={this.props.className}
-            element="span"
-            line={numberOfLines}
-            truncateText="..."
-            text={textToDisplay}
-            textTruncateChild={(
-              <a // eslint-disable-line
-                className="u-link-color u-no-break"
-                // tabIndex="0"
-                href="#"
-                id="readMore"
-                onClick={this.toggleLines}
-                onKeyDown={this.onKeyDown.bind(this)}
-              >
-                {linkText}
-              </a>
-            )}
-          />
+        <span className="text">
+          <TruncateMarkup lines={numberOfLines} ellipsis={showMoreEllipsis} tokenize="words">
+            <span>
+              {textToDisplay}
+            </span>
+          </TruncateMarkup>
         </span>
       );
     } else {
       return (
-        <span className={this.props.className}>
-          {' '}
+
+        <span>
           {expandedTextToDisplay}
-          &nbsp;&nbsp;
-          <a // eslint-disable-line
-            className="u-link-color u-no-break"
-            // tabIndex="0"
+          {' '}
+          <a //eslint-disable-line
+            className="u-link-color u-link-underline-on hover u-no-break"
             href="#"
             id="showLess"
             onClick={this.toggleLines}