@instructure/ui-truncate-text 8.33.1 → 8.33.2-snapshot-5

package/es/TruncateText/utils/truncate.js

@@ -21,6 +21,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 import escapeHtml from 'escape-html';
 import { cloneArray } from '@instructure/ui-utils';
 import { logError as error } from '@instructure/console';
@@ -28,7 +29,6 @@ import { getComputedStyle, getBoundingClientRect, isVisible } from '@instructure
 import measureText from './measureText';
 import cleanString from './cleanString';
 import cleanData from './cleanData';
-
 /**
  * ---
  * parent: TruncateText
@@ -49,14 +49,11 @@ import cleanData from './cleanData';
  */
 function truncate(element, options) {
   const truncator = new Truncator(element, options);
-
   if (truncator) {
     return truncator.truncate();
   }
-
   return;
 }
-
 class Truncator {
   constructor(element) {
     let options = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {};
@@ -80,161 +77,133 @@ class Truncator {
       lineHeight: options.lineHeight || 1.2,
       shouldTruncateWhenInvisible: !!options.shouldTruncateWhenInvisible
     };
-
     if (!element) {
       error(false, '[Truncator] No element to truncate.');
       return;
     }
-
     this._stage = element;
-
     if (options.parent) {
       this._parent = this._options.parent;
     } else {
       const parentEl = this._stage.parentElement ? this._stage.parentElement : void 0;
       this._parent = this._options.maxLines === 'auto' ? parentEl : this._stage;
     }
-
     this.setup();
   }
-
   setup() {
     if (!this._stage) {
       return;
     }
-
     const _this$_options = this._options,
-          maxLines = _this$_options.maxLines,
-          truncate = _this$_options.truncate,
-          lineHeight = _this$_options.lineHeight;
-    const style = getComputedStyle(this._parent); // if no explicit lineHeight is inherited, use lineHeight multiplier for calculations
-
+      maxLines = _this$_options.maxLines,
+      truncate = _this$_options.truncate,
+      lineHeight = _this$_options.lineHeight;
+    const style = getComputedStyle(this._parent);
+    // if no explicit lineHeight is inherited, use lineHeight multiplier for calculations
     const actualLineHeight = style.lineHeight === 'normal' ? lineHeight * parseFloat(style.fontSize) : parseFloat(style.lineHeight);
     const node = this._stage.firstChild.children ? this._stage.firstChild : this._stage;
     const nodeDataIndexes = [];
     const stringData = [];
     this._nodeMap = this.getNodeMap(node);
-
     for (let i = 0; i < this._nodeMap.length; i++) {
       const item = this._nodeMap[i];
-
       if (truncate === 'word' && item.data[item.data.length - 1] === ' ') {
         // remove random whitespace data between nodes
         item.data.length -= 1;
       }
-
       stringData[i] = item.data;
-
       for (let j = 0; j < item.data.length; j++) {
         // map each word or character datum index to its corresponding node
         nodeDataIndexes.push(i);
       }
     }
-
     this._defaultStringData = cloneArray(stringData);
     this._nodeDataIndexes = cloneArray(nodeDataIndexes);
     this._maxHeight = maxLines === 'auto' ? getBoundingClientRect(this._parent).height : maxLines * actualLineHeight;
     this._maxWidth = measureText(this._nodeMap.map(item => item.node), this._parent);
     this._maxLines = maxLines === 'auto' ? Math.round(this._maxHeight / actualLineHeight) : maxLines;
   }
-
   getNodeMap(rootNode) {
     const _this$_options2 = this._options,
-          shouldTruncateWhenInvisible = _this$_options2.shouldTruncateWhenInvisible,
-          truncate = _this$_options2.truncate;
+      shouldTruncateWhenInvisible = _this$_options2.shouldTruncateWhenInvisible,
+      truncate = _this$_options2.truncate;
     const nodes = Array.from(rootNode.childNodes);
-    const map = []; // parse child nodes and build a data map to associate each node with its data
-
+    const map = [];
+    // parse child nodes and build a data map to associate each node with its data
     nodes.forEach(node => {
       if (node.nodeType === 1 || node.nodeType === 3) {
         const shouldTruncate = shouldTruncateWhenInvisible ? true : isVisible(node, false);
         const textContent = node.textContent + ' ';
         map.push({
           node,
-          data: truncate === 'word' ? shouldTruncate ? // eslint-disable-next-line no-useless-escape
+          data: truncate === 'word' ? shouldTruncate ?
+          // eslint-disable-next-line no-useless-escape
           textContent.match(/.*?[\.\s\/]+?/g) : [''] : shouldTruncate ? node.textContent.split('') : []
         });
       }
     });
     return map;
   }
-
   getNodeIndexes(data) {
     const nodeDataIndexes = [];
-
     for (let i = 0; i < data.length; i++) {
       for (let j = 0; j < data[i].length; j++) {
         nodeDataIndexes.push([i, j]);
       }
     }
-
     return nodeDataIndexes;
   }
-
   domString(data) {
     let html = '';
-
     for (let i = 0; i < data.length; i++) {
       const mapItem = this._nodeMap[i];
       const text = data[i].join('');
       const safeText = escapeHtml(text);
-
       if (mapItem.node.nodeType === Node.ELEMENT_NODE) {
         const name = mapItem.node.nodeName;
         const attr = mapItem.node.attributes;
         let attributes = '';
-
         for (let j = 0; j < attr.length; j++) {
           const att = attr[j];
           attributes += ` ${att.nodeName}="${att.nodeValue}"`;
         }
-
         html += `<${name}${attributes}>${safeText}</${name}>`;
       } else if (mapItem.node.nodeType === 3) {
         html += safeText;
       }
     }
-
     return html;
   }
-
   checkFit(data) {
     const html = this.domString(data);
     const node = this._options.maxLines === 'auto' ? this._stage : this._parent;
     let fits = true;
-    this._stage.innerHTML = html; // allow a 0.5 px margin of error for browser calculation discrepancies
-
+    this._stage.innerHTML = html;
+    // allow a 0.5 px margin of error for browser calculation discrepancies
     if (getBoundingClientRect(node).height - this._maxHeight > 0.5) {
       fits = false;
     }
-
     return fits;
   }
-
   truncate() {
     const _this$_options3 = this._options,
-          ellipsis = _this$_options3.ellipsis,
-          ignore = _this$_options3.ignore,
-          position = _this$_options3.position;
+      ellipsis = _this$_options3.ellipsis,
+      ignore = _this$_options3.ignore,
+      position = _this$_options3.position;
     const middle = position === 'middle';
     let truncated = false;
     let truncatedText = '';
     let stringData = null;
-
     if (!this._stage) {
       return;
     }
-
     const binarySearch = function (_low, _high, ev, middle) {
       let _default = arguments.length > 4 && arguments[4] !== void 0 ? arguments[4] : null;
-
       let low = _low;
       let high = _high;
       let bestResult = _default;
-
       while (low <= high) {
         const tryNumber = Math.floor((low + high) / 2);
-
         if (ev(tryNumber, middle)) {
           high = tryNumber - 1;
           bestResult = tryNumber;
@@ -242,72 +211,65 @@ class Truncator {
           low = tryNumber + 1;
         }
       }
-
       return bestResult;
     };
-
     const truncateArray = (truncatedLength, originalArray, indexArray, middle) => {
       let truncated = false;
       const truncatedArray = cloneArray(originalArray);
-
       switch (truncatedLength) {
         // truncate nothing
         case 0:
           break;
-        // truncate all
 
+        // truncate all
         case indexArray.length:
           truncated = true;
-
           for (let i = 0; i < truncatedArray.length; i++) {
             truncatedArray[i] = [];
           }
-
           truncatedArray[0].push(ellipsis);
           break;
-        // truncate a positive amount of elements
 
+        // truncate a positive amount of elements
         default:
           truncated = true;
-
           if (middle) {
-            const dataHalves = Array(2); // calculate the indexes for two parts
-
+            const dataHalves = Array(2);
+            // calculate the indexes for two parts
             dataHalves[0] = Math.floor((indexArray.length - truncatedLength - 1) / 2);
             dataHalves[1] = dataHalves[0] + truncatedLength + 1;
             const nodeHalves = dataHalves.map(index => indexArray[index]);
             const sliceAmounts = Array(2);
             sliceAmounts[0] = dataHalves[0] + 1;
-            sliceAmounts[1] = indexArray.length - truncatedLength - sliceAmounts[0]; // keep the first part
+            sliceAmounts[1] = indexArray.length - truncatedLength - sliceAmounts[0];
 
+            // keep the first part
             for (let i = 0; i <= nodeHalves[0]; i++) {
               switch (true) {
                 case i < nodeHalves[0]:
                   sliceAmounts[0] -= truncatedArray[i].length;
                   break;
-
                 case i === nodeHalves[0]:
                   truncatedArray[i] = originalArray[i].slice(0, sliceAmounts[0]);
                   truncatedArray[i].push(ellipsis);
                   break;
               }
-            } // and the second part
-
+            }
 
+            // and the second part
             for (let i = originalArray.length - 1; i >= nodeHalves[1]; i--) {
               switch (true) {
                 case i > nodeHalves[1]:
                   sliceAmounts[1] -= originalArray[i].length;
                   break;
-
                 case i === nodeHalves[1]:
                   if (nodeHalves[1] > nodeHalves[0]) truncatedArray[i] = originalArray[i].slice(-sliceAmounts[1]);
                   if (nodeHalves[1] === nodeHalves[0]) truncatedArray[i] = truncatedArray[i].concat(originalArray[i].slice(-sliceAmounts[1]));
                   break;
               }
-            } // delete the middle
-
+            }
 
+            // delete the middle
             for (let i = nodeHalves[0] + 1; i < nodeHalves[1]; i++) {
               truncatedArray[i] = [];
             }
@@ -316,55 +278,44 @@ class Truncator {
             const indexToTry = indexArray.length - truncatedLength - 1;
             const nodeIndex = indexArray[indexToTry];
             let sliceAmount = indexToTry + 1;
-
             for (let i = 0; i < originalArray.length; i++) {
               switch (true) {
                 case i < nodeIndex:
                   sliceAmount -= truncatedArray[i].length;
                   break;
-
                 case i === nodeIndex:
                   truncatedArray[i] = truncatedArray[i].slice(0, sliceAmount);
                   truncatedArray[i].push(ellipsis);
                   break;
-
                 case i > nodeIndex:
                   truncatedArray[i] = [];
                   break;
               }
             }
           }
-
           break;
       }
-
       return {
         truncated,
         truncatedArray
       };
     };
-
     const truncateEvaluate = (truncatedLength, middle) => {
       const _truncateArray = truncateArray(truncatedLength, this._defaultStringData, this._nodeDataIndexes, middle),
-            truncatedArray = _truncateArray.truncatedArray;
-
+        truncatedArray = _truncateArray.truncatedArray;
       return this.checkFit(truncatedArray);
-    }; // find the best number of element to truncate
-
+    };
 
+    // find the best number of element to truncate
     const finestMatch = binarySearch(0, this._nodeDataIndexes.length, truncateEvaluate, middle, this._nodeDataIndexes.length);
-
     var _truncateArray2 = truncateArray(finestMatch, this._defaultStringData, this._nodeDataIndexes, middle);
-
     truncated = _truncateArray2.truncated;
     stringData = _truncateArray2.truncatedArray;
     stringData = cleanData(stringData, this._options, true);
-
     for (let i = 0; i < stringData.length; i++) {
       const data = stringData[i];
       truncatedText += data.join('');
     }
-
     if (truncated && !middle) {
       truncatedText = cleanString(truncatedText.split(ellipsis)[0], ignore, false, true, true);
       truncatedText += ellipsis;
@@ -372,7 +323,6 @@ class Truncator {
       const halves = truncatedText.split(ellipsis);
       truncatedText = cleanString(halves[0], ignore, false, true, true) + ellipsis + cleanString(halves[1], ignore, true, false, true);
     }
-
     return {
       isTruncated: truncated,
       text: truncatedText,
@@ -384,7 +334,5 @@ class Truncator {
       }
     };
   }
-
 }
-
 export default truncate;

package/lib/TruncateText/index.js

@@ -1,44 +1,26 @@
 "use strict";
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.TruncateText = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _debounce = require("@instructure/debounce");
-
 var _canUseDOM = require("@instructure/ui-dom-utils/lib/canUseDOM.js");
-
 var _getBoundingClientRect = require("@instructure/ui-dom-utils/lib/getBoundingClientRect.js");
-
 var _safeCloneElement = require("@instructure/ui-react-utils/lib/safeCloneElement.js");
-
 var _ensureSingleChild = require("@instructure/ui-react-utils/lib/ensureSingleChild.js");
-
 var _hack = require("@instructure/ui-react-utils/lib/hack.js");
-
 var _console = require("@instructure/console");
-
 var _testable = require("@instructure/ui-testable/lib/testable.js");
-
 var _emotion = require("@instructure/emotion");
-
 var _styles = _interopRequireDefault(require("./styles"));
-
 var _theme = _interopRequireDefault(require("./theme"));
-
 var _truncate = _interopRequireDefault(require("./utils/truncate"));
-
 var _props = require("./props");
-
 var _dec, _dec2, _dec3, _class, _class2;
-
 /**
 ---
 category: components
@@ -54,20 +36,16 @@ let TruncateText = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
     this._stage = null;
     this._wasTruncated = void 0;
     this._resizeListener = void 0;
-
     this.update = () => {
       if (this.ref) {
         this.setState(this.initialState);
       }
     };
-
     this.state = this.initialState;
   }
-
   get _ref() {
     return this.ref;
   }
-
   get initialState() {
     return {
       isTruncated: false,
@@ -76,13 +54,11 @@ let TruncateText = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
       truncatedText: void 0
     };
   }
-
   componentDidMount() {
     const _this$props = this.props,
-          children = _this$props.children,
-          makeStyles = _this$props.makeStyles;
+      children = _this$props.children,
+      makeStyles = _this$props.makeStyles;
     makeStyles === null || makeStyles === void 0 ? void 0 : makeStyles();
-
     if (children) {
       this.checkChildren();
       const txt = (0, _ensureSingleChild.ensureSingleChild)(children);
@@ -92,10 +68,8 @@ let TruncateText = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
         leading: true,
         trailing: true
       });
-
       const _getBoundingClientRec = (0, _getBoundingClientRect.getBoundingClientRect)(this.ref),
-            origWidth = _getBoundingClientRec.width;
-
+        origWidth = _getBoundingClientRec.width;
       this._resizeListener = new ResizeObserver(entries => {
         // requestAnimationFrame call is needed becuase some truncatetext test cases
         // failed due to ResizeObserver was not able to deliver all observations within a single animation frame
@@ -103,39 +77,33 @@ let TruncateText = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
         requestAnimationFrame(() => {
           for (const entry of entries) {
             const width = entry.contentRect.width;
-
             if (origWidth !== width) {
               this.props.debounce === 0 ? this.update() : this._debounced();
             }
           }
         });
       });
-
       this._resizeListener.observe(this.ref);
     }
   }
-
   componentWillUnmount() {
     if (this._resizeListener) {
       this._resizeListener.disconnect();
     }
-
     if (this._debounced) {
       this._debounced.cancel();
     }
   }
-
   componentDidUpdate(prevProps) {
     const _this$props2 = this.props,
-          children = _this$props2.children,
-          onUpdate = _this$props2.onUpdate,
-          makeStyles = _this$props2.makeStyles;
+      children = _this$props2.children,
+      onUpdate = _this$props2.onUpdate,
+      makeStyles = _this$props2.makeStyles;
     makeStyles === null || makeStyles === void 0 ? void 0 : makeStyles();
     const _this$state = this.state,
-          isTruncated = _this$state.isTruncated,
-          needsSecondRender = _this$state.needsSecondRender,
-          truncatedText = _this$state.truncatedText;
-
+      isTruncated = _this$state.isTruncated,
+      needsSecondRender = _this$state.needsSecondRender,
+      truncatedText = _this$state.truncatedText;
     if (children) {
       if (prevProps !== this.props) {
         if (prevProps.children !== this.props.children) {
@@ -143,13 +111,11 @@ let TruncateText = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
           this.checkChildren();
           const txt = (0, _ensureSingleChild.ensureSingleChild)(children);
           this._text = txt ? txt : void 0;
-        } // require the double render whenever props change
-
-
+        }
+        // require the double render whenever props change
         this.setState(this.initialState);
         return;
       }
-
       if (!needsSecondRender && (isTruncated || this._wasTruncated)) {
         onUpdate === null || onUpdate === void 0 ? void 0 : onUpdate(isTruncated, truncatedText);
         this._wasTruncated = isTruncated;
@@ -158,12 +124,10 @@ let TruncateText = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
       }
     }
   }
-
   checkChildren() {
     (0, _console.logError)(!(() => {
       let isTooDeep = false;
       const text = (0, _ensureSingleChild.ensureSingleChild)(this.props.children);
-
       _react.default.Children.forEach(text.props.children, child => {
         if (child.props) {
           _react.default.Children.forEach(child.props.children, grandChild => {
@@ -175,24 +139,20 @@ let TruncateText = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
           });
         }
       });
-
       return isTooDeep;
     })(), `[TruncateText] Some children are too deep in the node tree and will not render.`);
   }
-
   truncate() {
     if (!this.state.needsSecondRender) {
       return;
     }
-
     if (_canUseDOM.canUseDOM) {
       var _this$props$styles;
-
-      const result = (0, _truncate.default)(this._stage, { ...this.props,
+      const result = (0, _truncate.default)(this._stage, {
+        ...this.props,
         parent: this.ref ? this.ref : void 0,
         lineHeight: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.lineHeight
       });
-
       if (result) {
         const element = this.renderChildren(result.isTruncated, result.data, result.constraints.width);
         this.setState({
@@ -204,9 +164,8 @@ let TruncateText = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
       }
     } else {
       var _this$ref, _this$ref2;
-
-      const textContent = (_this$ref = this.ref) !== null && _this$ref !== void 0 && _this$ref.textContent ? (_this$ref2 = this.ref) === null || _this$ref2 === void 0 ? void 0 : _this$ref2.textContent : void 0; // if dom isn't available, use original children
-
+      const textContent = (_this$ref = this.ref) !== null && _this$ref !== void 0 && _this$ref.textContent ? (_this$ref2 = this.ref) === null || _this$ref2 === void 0 ? void 0 : _this$ref2.textContent : void 0;
+      // if dom isn't available, use original children
       this.setState({
         needsSecondRender: false,
         isTruncated: false,
@@ -215,47 +174,38 @@ let TruncateText = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
       });
     }
   }
-
   renderChildren(truncated, data, width) {
     var _this$props$styles2;
-
     if (!truncated) {
       return this._text;
     }
-
-    const childElements = []; // iterate over each node used in the truncated string
-
+    const childElements = [];
+    // iterate over each node used in the truncated string
     for (let i = 0; i < data.length; i++) {
       const item = data[i];
       const element = this._text.props.children[i];
       const nodeText = item.join('');
-
       if (element && element.props) {
         // if node is an html element and not just a string
         childElements.push((0, _safeCloneElement.safeCloneElement)(element, element.props, nodeText));
       } else {
         childElements.push(nodeText);
       }
-    } // this spacer element is set to the max width the full text could
+    }
+    // this spacer element is set to the max width the full text could
     // potentially be without this, text in `width: auto` elements won't expand
     // to accommodate more text, once truncated
-
-
     childElements.push((0, _emotion.jsx)("span", {
       css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.spacer,
       style: {
         width: width || void 0
       }
     }));
-
     const children = _react.default.Children.map(childElements, child => child);
-
     return this._text.props ? (0, _safeCloneElement.safeCloneElement)(this._text, this._text.props, children) : children;
   }
-
   render() {
     var _this$props$styles3;
-
     const truncatedElement = this.state.truncatedElement;
     const children = this.props.children;
     return (0, _emotion.jsx)("span", {
@@ -269,7 +219,6 @@ let TruncateText = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.defau
       }
     }, (0, _ensureSingleChild.ensureSingleChild)(children))), truncatedElement);
   }
-
 }, _class2.displayName = "TruncateText", _class2.componentId = 'TruncateText', _class2.allowedProps = _props.allowedProps, _class2.propTypes = _props.propTypes, _class2.defaultProps = {
   maxLines: 1,
   ellipsis: '\u2026',

package/lib/TruncateText/props.js

@@ -1,14 +1,11 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = exports.allowedProps = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 /*
  * The MIT License (MIT)
  *
@@ -32,6 +29,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
 const propTypes = {
   children: _propTypes.default.node.isRequired,
   maxLines: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),

package/lib/TruncateText/styles.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -61,6 +60,5 @@ const generateStyle = componentTheme => {
     lineHeight: componentTheme.lineHeight
   };
 };
-
 var _default = generateStyle;
 exports.default = _default;

package/lib/TruncateText/theme.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 /*
  * The MIT License (MIT)
  *
@@ -40,9 +39,9 @@ const generateComponentTheme = theme => {
     fontFamily: typography === null || typography === void 0 ? void 0 : typography.fontFamily,
     lineHeight: typography === null || typography === void 0 ? void 0 : typography.lineHeight
   };
-  return { ...componentVariables
+  return {
+    ...componentVariables
   };
 };
-
 var _default = generateComponentTheme;
 exports.default = _default;