fix: fix link not appearing, general improvements

Author: Kashish Grover

.eslintrc.js

@@ -20,6 +20,7 @@ module.exports = {
   rules: {
     'react/jsx-props-no-spreading': ['off'],
     'react/jsx-filename-extension': ['off'],
-    'no-use-before-define': ['off']
+    'no-use-before-define': ['off'],
+    'operator-linebreak': ['off']
   },
 };

.prettierrc.js

@@ -1,6 +1,10 @@
 module.exports = {
-  bracketSpacing: false,
+  arrowParens: 'always',
+  bracketSpacing: true,
   jsxBracketSameLine: true,
+  printWidth: 100,
   singleQuote: true,
-  trailingComma: 'all',
+  tabWidth: 2,
+  trailingComma: 'always',
+  useTabs: false,
 };

src/SeeMore/SeeMore.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import { Text, PanResponder } from 'react-native';
-import reactNativeTextSize from 'react-native-text-size';
 import PropTypes from 'prop-types';
-import debounce from 'lodash/debounce';
+import SeeMoreUtil from './SeeMoreUtil';
 
 class SeeMore extends React.Component {
   panResponder = PanResponder.create({
@@ -13,9 +12,9 @@ class SeeMore extends React.Component {
     onPanResponderRelease: () => this.handleLinkReleased(),
   });
 
-  setDebouncedWidth;
-
-  // Map of containerWidth to truncationIndex so that we don't calculate it each time
+  /**
+   * Map of containerWidth and truncationIndex so that we don't calculate it each time
+   */
   containerWidthToTruncationIndexMap;
 
   constructor(props) {
@@ -26,90 +25,63 @@ class SeeMore extends React.Component {
       isShowingMore: false,
       truncationIndex: undefined,
     };
-
-    this.setDebouncedWidth = debounce((e) => {
-      this.findTruncationIndex(e.nativeEvent.layout.width);
-    }, 100);
   }
 
+  isExpanded = () => {
+    const { isShowingMore } = this.state;
+    return isShowingMore;
+  };
+
   onLayout = (e) => {
     // e.persist() keeps the original synthetic event intact
     e.persist();
-    this.setDebouncedWidth(e);
+    this.findAndUpdateTruncationIndex(e.nativeEvent.layout.width);
+  };
+
+  findAndUpdateTruncationIndex = async (containerWidth) => {
+    const truncationIndex = await this.findTruncationIndex(containerWidth);
+    this.setState({ truncationIndex });
   };
 
   findTruncationIndex = async (containerWidth) => {
     if (
-      this.containerWidthToTruncationIndexMap
-      && this.containerWidthToTruncationIndexMap[containerWidth]
+      this.containerWidthToTruncationIndexMap &&
+      this.containerWidthToTruncationIndexMap[containerWidth]
     ) {
-      this.setState({ truncationIndex: this.containerWidthToTruncationIndexMap[containerWidth] });
-      return;
+      return this.containerWidthToTruncationIndexMap[containerWidth];
     }
 
     const {
       children: text,
       style: { fontSize, fontFamily, fontWeight },
-      seeMoreText,
       numberOfLines,
+      seeMoreText,
     } = this.props;
 
-    const { width: textWidth } = await reactNativeTextSize.measure({
+    const truncationIndex = await SeeMoreUtil.getTruncationIndex(
       text,
+      numberOfLines,
       fontSize,
       fontFamily,
       fontWeight,
-    });
-
-    const textWidthLimit = containerWidth * numberOfLines;
-
-    if (textWidth < textWidthLimit) {
-      this.setState({ truncationIndex: undefined });
-      return;
-    }
-
-    const { width: seeMoreTextWidth } = await reactNativeTextSize.measure({
-      text: ` ...${seeMoreText}`,
-      fontSize,
-      fontFamily,
-      fontWeight,
-    });
-
-    const truncatedWidth = textWidthLimit - 2 * seeMoreTextWidth;
-
-    let index = 0;
-    let start = 0;
-    let end = text.length - 1;
-
-    while (start <= end) {
-      const middle = start + (end - start) / 2;
-      // eslint-disable-next-line no-await-in-loop
-      const { width: partialWidth } = await reactNativeTextSize.measure({
-        text: text.slice(0, middle),
-        fontSize,
-        fontFamily,
-        fontWeight,
-      });
-      if (Math.abs(truncatedWidth - partialWidth) <= 10) {
-        index = middle;
-        break;
-      } else if (partialWidth > truncatedWidth) {
-        end = middle - 1;
-      } else {
-        start = middle + 1;
-      }
-    }
-
-    const truncationIndex = Math.floor(index);
+      containerWidth,
+      seeMoreText,
+    );
 
-    // Map truncation index to width so that we don't calculate it again
     this.containerWidthToTruncationIndexMap = {
       ...this.containerWidthToTruncationIndexMap,
       [containerWidth]: truncationIndex,
     };
-    this.setState({ truncationIndex });
+
+    return truncationIndex;
   };
 
+  collapse() {
+    return new Promise((resolve) => {
+      this.setState({ isShowingMore: false }, () => resolve());
+    });
+  }
+
   handleLinkPressed() {
     this.setState({
       isLinkPressed: true,
@@ -130,36 +102,47 @@ class SeeMore extends React.Component {
     });
   }
 
-  render() {
+  renderSeeMoreSeeLessLink() {
     const { isLinkPressed, isShowingMore, truncationIndex } = this.state;
     const {
       children: text,
-      numberOfLines,
       linkColor,
       linkPressedColor,
       seeMoreText,
       seeLessText,
     } = this.props;
     const isTruncable = truncationIndex < text.length;
 
+    if (!isTruncable) {
+      return null;
+    }
+
+    return (
+      <Text
+        {...this.props}
+        {...this.panResponder.panHandlers}
+        style={{ color: isLinkPressed ? linkPressedColor : linkColor }}
+      >
+        {isShowingMore ? null : <Text {...this.props}>...</Text>}
+        {isShowingMore ? ` ${seeLessText}` : ` ${seeMoreText}`}
+      </Text>
+    );
+  }
+
+  render() {
+    const { isShowingMore, truncationIndex } = this.state;
+    const { children: text, numberOfLines } = this.props;
+
     return (
       <Text
         onLayout={isShowingMore ? undefined : this.onLayout}
         numberOfLines={isShowingMore ? undefined : numberOfLines}
+        {...this.panResponder.panHandlers}
       >
-        <Text {...this.props}>{isShowingMore ? text : text.slice(0, truncationIndex)}</Text>
-        {isTruncable ? (
-          <>
-            {isShowingMore ? null : <Text {...this.props}>...</Text>}
-            <Text
-              {...this.props}
-              {...this.panResponder.panHandlers}
-              style={{ color: isLinkPressed ? linkPressedColor : linkColor }}
-            >
-              {isShowingMore ? ` ${seeLessText}` : ` ${seeMoreText}`}
-            </Text>
-          </>
-        ) : null}
+        <Text {...this.props}>
+          {isShowingMore ? text : text.slice(0, truncationIndex)}
+        </Text>
+        {this.renderSeeMoreSeeLessLink()}
       </Text>
     );
   }

src/SeeMore/SeeMoreUtil.js

@@ -0,0 +1,88 @@
+import { PixelRatio } from 'react-native';
+import reactNativeTextSize from 'react-native-text-size';
+
+/**
+ * When difference between partialTextWidth and widthLimit is less than
+ * this value, we mark the truncation index.
+ */
+const DIFFERENCE_THRESHOLD = 10;
+
+/**
+ * Finds the point where the text will be truncated, leaving enough space to show
+ * the "read more" link
+ *
+ * @param text {string} Text for which you need to find the truncation index
+ * @param numberOfLines {number} Number of lines being displayed
+ * @param fontSize {number} Font size
+ * @param fontFamily {string} Font family
+ * @param fontWeight {string} Font weight
+ * @param containerWidth {number} Width of the container in which the text will be contained
+ * @param seeMoreText {string} See more text
+ */
+async function getTruncationIndex(
+  text,
+  numberOfLines,
+  fontSize,
+  fontFamily,
+  fontWeight,
+  containerWidth,
+  seeMoreText,
+) {
+  const scaledFontSize = Math.round(fontSize * PixelRatio.getFontScale());
+
+  const { width: totalTextWidth } = await reactNativeTextSize.measure({
+    text,
+    fontSize: scaledFontSize,
+    fontFamily,
+    fontWeight,
+  });
+
+  /**
+   * Max possible width of the text when it is collapsed.
+   * 10 is approx value of white space width per line.
+   */
+  const widthLimit = (containerWidth - 10) * numberOfLines;
+
+  if (totalTextWidth < widthLimit) {
+    return undefined;
+  }
+
+  let index = 0;
+  let start = 0;
+  let end = text.length - 1;
+
+  while (start <= end) {
+    const middle = start + (end - start) / 2;
+    // eslint-disable-next-line no-await-in-loop
+    const { width: partialTextWidth } = await reactNativeTextSize.measure({
+      text: text.slice(0, middle),
+      fontSize: scaledFontSize,
+      fontFamily,
+      fontWeight,
+    });
+    if (Math.abs(widthLimit - partialTextWidth) <= DIFFERENCE_THRESHOLD) {
+      index = middle;
+      break;
+    } else if (partialTextWidth > widthLimit) {
+      end = middle - 1;
+    } else {
+      start = middle + 1;
+    }
+  }
+
+  let truncationIndex = Math.floor(index) - (seeMoreText.length + 10);
+
+  // If there is a new line character before this truncation index, this will break
+  // So we find the first new line character before truncationIndex and set that as the
+  // new truncation index
+  const newLineCharacterIndex = text.slice(0, truncationIndex).indexOf('\n');
+  if (newLineCharacterIndex > -1) {
+    truncationIndex = newLineCharacterIndex;
+  }
+
+  return truncationIndex;
+}
+
+export default {
+  getTruncationIndex,
+};