@instructure/ui-truncate-text 11.6.0 → 11.6.1-snapshot-129

package/src/TruncateText/v2/styles.ts

@@ -0,0 +1,60 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import type { NewComponentTypes } from '@instructure/ui-themes'
+import type { TruncateTextStyle } from './props'
+
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+const generateStyle = (
+  componentTheme: NewComponentTypes['TruncateText']
+): TruncateTextStyle => {
+  return {
+    truncateText: {
+      label: 'truncateText',
+      display: 'block',
+      overflow: 'hidden',
+      wordWrap: 'break-word',
+      whiteSpace: 'normal',
+      fontFamily: componentTheme.fontFamily
+    },
+    auto: { label: 'truncateText__auto', height: '100%' },
+    spacer: {
+      label: 'truncateText__spacer',
+      visibility: 'hidden',
+      maxHeight: '0',
+      display: 'block'
+    },
+    lineHeight: componentTheme.lineHeight
+  }
+}
+export default generateStyle

package/src/TruncateText/v2/utils/cleanData.ts

@@ -0,0 +1,178 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { cloneArray } from '@instructure/ui-utils'
+import type { CleanDataOptions } from '../props'
+
+/**
+ * ---
+ * parent: TruncateText
+ * private: true
+ * ---
+ * Removes given characters, such as whitespace and punctuation, from stringData
+ * arrays used by Truncator and TruncateText.
+ *
+ * @param {Array} stringData A stringData array.
+ * @param {Object} options The options object.
+ * @param {string} options.truncate Is the data being truncated by character or word.
+ * @param {string[]} options.ignore An array of characters to remove around the ellipsis.
+ * @param {string} options.ellipsis The string being used as an ellipsis.
+ * @param {boolean} repeat=false Do a thorough clean.
+ */
+function cleanData(
+  stringData: string[][],
+  options: Required<CleanDataOptions>,
+  repeat = false
+) {
+  const { truncate, ignore, ellipsis } = options
+
+  let newData = cloneArray(stringData)
+  let ellipsisNode = -1
+  let ellipsisIndex = -1
+
+  const findEllipsis = () => {
+    for (let i = 0; i < newData.length; i++) {
+      const nodeData = newData[i]
+      if (nodeData.indexOf(ellipsis) !== -1) {
+        ellipsisNode = i
+        ellipsisIndex = nodeData.indexOf(ellipsis)
+      }
+    }
+  }
+
+  if (truncate === 'character') {
+    findEllipsis()
+
+    let node = newData[ellipsisNode]
+
+    if (node) {
+      const before = node[ellipsisIndex - 1]
+      if (before && ignore.indexOf(before) !== -1) {
+        // remove character immediately BEFORE the ellipsis in the same node
+        newData[ellipsisNode].splice(ellipsisIndex - 1, 1)
+      }
+
+      if (!before) {
+        // character before the ellipsis is part of a different node
+        // find the next node with data and remove last datum
+        let prevNode = null
+        let prevNodeIndex = ellipsisNode - 1
+        while (prevNodeIndex >= 0) {
+          prevNode = newData[prevNodeIndex]
+          if (prevNode.length > 0) {
+            break
+          } else {
+            prevNodeIndex--
+          }
+        }
+
+        if (prevNode) {
+          const lastChar = String(prevNode.slice(-1))
+          if (ignore.indexOf(lastChar) !== -1) {
+            newData[prevNodeIndex].length -= 1
+          }
+        }
+      }
+    }
+
+    findEllipsis()
+
+    node = newData[ellipsisNode]
+
+    if (node) {
+      const after = node[ellipsisIndex + 1]
+      if (after && ignore.indexOf(after) !== -1) {
+        // remove character immediately AFTER the ellipsis in the same node
+        newData[ellipsisNode].splice(ellipsisIndex + 1, 1)
+      }
+
+      if (!after) {
+        // character after the ellipsis is part of a different node
+        // find the next node with data and remove first datum
+        let nextNode = null
+        let nextNodeIndex = ellipsisNode + 1
+        while (nextNodeIndex < newData.length) {
+          nextNode = newData[nextNodeIndex]
+          if (nextNode.length > 0) {
+            break
+          } else {
+            nextNodeIndex++
+          }
+        }
+        if (nextNode) {
+          const firstChar = String(nextNode[0])
+          if (ignore.indexOf(firstChar) !== -1) {
+            newData[nextNodeIndex].shift()
+          }
+        }
+      }
+    }
+  } else {
+    findEllipsis()
+
+    const node = newData[ellipsisNode]
+    if (node) {
+      const before = node[ellipsisIndex - 1]
+      if (before && ignore.indexOf(before.slice(-1)) !== -1) {
+        if (before.length === 1) {
+          // remove entire word datum
+          newData[ellipsisNode].splice(ellipsisIndex - 1, 1)
+        } else {
+          // remove word immediately BEFORE the ellipsis in the same node
+          newData[ellipsisNode][ellipsisIndex - 1] = before.slice(0, -1)
+        }
+      }
+      if (!before) {
+        // word before the ellipsis is part of a different node
+        // find the next node with data and remove last datum
+        let prevNode = null
+        let prevNodeIndex = ellipsisNode - 1
+        while (prevNodeIndex >= 0) {
+          prevNode = newData[prevNodeIndex]
+          if (prevNode.length > 0) {
+            break
+          } else {
+            prevNodeIndex--
+          }
+        }
+
+        if (prevNode) {
+          const lastChar = String(prevNode.slice(-1)).slice(-1)
+          if (ignore.indexOf(lastChar) !== -1) {
+            const lastItem = prevNode.length - 1
+            newData[prevNodeIndex][lastItem] = prevNode[lastItem].slice(0, -1)
+          }
+        }
+      }
+    }
+  }
+
+  if (repeat) {
+    newData = cleanData(newData, options, false)
+  }
+
+  return newData
+}
+
+export default cleanData

package/src/TruncateText/v2/utils/cleanString.ts

@@ -0,0 +1,61 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/**
+ * ---
+ * parent: TruncateText
+ * private: true
+ * ---
+ * Removes given characters, such as whitespace and punctuation, from either end of a string.
+ *
+ * @param {string} string The string to clean.
+ * @param {string[]} ignore Array of characters to remove.
+ * @param {boolean} start Whether or not to clean start of string.
+ * @param {boolean} end Whether or not to clean end of string.
+ * @param {boolean} repeat=false Do a thorough clean.
+ */
+function cleanString(
+  string: string,
+  ignore: string[],
+  start = true,
+  end = true,
+  repeat = false
+) {
+  let text = string
+  const firstChar = text.charAt(0)
+  const lastChar = text.slice(-1)
+
+  if (start && ignore.indexOf(firstChar) !== -1) {
+    text = text.slice(1)
+  }
+  if (end && ignore.indexOf(lastChar) !== -1) {
+    text = text.slice(0, -1)
+  }
+  if (repeat) {
+    text = cleanString(text, ignore, start, end, false)
+  }
+  return text
+}
+
+export default cleanString

package/src/TruncateText/v2/utils/measureText.ts

@@ -0,0 +1,86 @@
+/*
+ * The MIT License (MIT)
+ *
+ * Copyright (c) 2015 - present Instructure, Inc.
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { getCSSStyleDeclaration } from '@instructure/ui-dom-utils'
+
+/**
+ * ---
+ * parent: TruncateText
+ * private: true
+ * ---
+ * Finds the max potential width of set of DOM nodes.
+ *
+ * @param {DOMNode[]} nodes Array of DOM nodes.
+ * @param {DOMNode} parentNode The node to inherit default styles from.
+ */
+function measureText(nodes: Node[], parentNode?: Node) {
+  let width = 0
+  for (let i = 0; i < nodes.length; i++) {
+    const node = nodes[i]
+    width += measure(node.textContent, node.nodeType === 1 ? node : parentNode)
+  }
+  return width
+}
+
+function measure(string: string | null, domNode?: Node) {
+  const style = getCSSStyleDeclaration(domNode)
+  // we use a canvas in a doc fragment to prevent having to render the string full width in the DOM
+  const canvas = document.createElement('canvas')
+  document.createDocumentFragment().appendChild(canvas)
+
+  const context = canvas.getContext('2d')
+  if (!context || !string) {
+    return 0
+  }
+
+  let text = string
+  let letterOffset = 0
+  let width = 0
+  // grab individual font styles
+  // some browsers don't report a value for style['font']
+  context.font = [
+    style?.fontWeight,
+    style?.fontStyle,
+    style?.fontSize,
+    style?.fontFamily
+  ].join(' ')
+
+  if (style?.textTransform === 'uppercase') {
+    text = string.toUpperCase()
+  } else if (style?.textTransform === 'lowercase') {
+    text = string.toLowerCase()
+  } else if (style?.textTransform === 'capitalize') {
+    text = string.replace(/\b\w/g, (str: string) => str.toUpperCase())
+  }
+
+  if (style?.letterSpacing !== 'normal') {
+    letterOffset = text.length * parseInt(style?.letterSpacing as string)
+  }
+
+  width = context.measureText(text).width + letterOffset
+  // returns the max potential width of the text, assuming the text was on a single line
+  return width
+}
+
+export default measureText