[TS migration] Migrate 'DisplayNames' component to TypeScript

src/components/DisplayNames/DisplayNamesTooltipItem.js → src/components/DisplayNames/DisplayNamesTooltipItem.tsx

@@ -1,50 +1,45 @@
-import PropTypes from 'prop-types';
-import React, {useCallback} from 'react';
+import React, {RefObject, useCallback} from 'react';
+import {Text as RNText, StyleProp, TextStyle} from 'react-native';
 import Text from '@components/Text';
 import UserDetailsTooltip from '@components/UserDetailsTooltip';
+import {AvatarSource} from '@libs/UserUtils';
 import styles from '@styles/styles';
 
-const propTypes = {
-    index: PropTypes.number,
+type DisplayNamesTooltipItemProps = {
+    index?: number;
 
     /** The full title of the DisplayNames component (not split up) */
-    getTooltipShiftX: PropTypes.func,
+    getTooltipShiftX?: (index: number) => number | undefined;
 
     /** The Account ID for the tooltip */
-    accountID: PropTypes.number,
+    accountID?: number;
 
     /** The name to display in bold */
-    displayName: PropTypes.string,
+    displayName?: string;
 
     /** The login for the tooltip fallback */
-    login: PropTypes.string,
+    login?: string;
 
     /** The avatar for the tooltip fallback */
-    avatar: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+    avatar?: AvatarSource;
 
     /** Arbitrary styles of the displayName text */
-    // eslint-disable-next-line react/forbid-prop-types
-    textStyles: PropTypes.arrayOf(PropTypes.object),
+    textStyles?: StyleProp<TextStyle>;
 
     /** Refs to all the names which will be used to correct the horizontal position of the tooltip */
-    childRefs: PropTypes.shape({
-        // eslint-disable-next-line react/forbid-prop-types
-        current: PropTypes.arrayOf(PropTypes.object),
-    }),
+    childRefs: RefObject<RNText[]>;
 };
 
-const defaultProps = {
-    index: 0,
-    getTooltipShiftX: () => {},
-    accountID: 0,
-    displayName: '',
-    login: '',
-    avatar: '',
-    textStyles: [],
-    childRefs: {current: []},
-};
-
-function DisplayNamesTooltipItem({index, getTooltipShiftX, accountID, avatar, login, displayName, textStyles, childRefs}) {
+function DisplayNamesTooltipItem({
+    index = 0,
+    getTooltipShiftX = () => undefined,
+    accountID = 0,
+    avatar = '',
+    login = '',
+    displayName = '',
+    textStyles = [],
+    childRefs = {current: []},
+}: DisplayNamesTooltipItemProps) {
     const tooltipIndexBridge = useCallback(() => getTooltipShiftX(index), [getTooltipShiftX, index]);
 
     return (
@@ -62,18 +57,21 @@ function DisplayNamesTooltipItem({index, getTooltipShiftX, accountID, avatar, lo
             <Text
                 eslint-disable-next-line
                 no-param-reassign
-                // eslint-disable-next-line no-param-reassign
-                ref={(el) => (childRefs.current[index] = el)}
-                style={[...textStyles, styles.pre]}
+                ref={(el) => {
+                    if (!childRefs.current?.[index] || !el) {
+                        return;
+                    }
+                    // eslint-disable-next-line no-param-reassign
+                    childRefs.current[index] = el;
+                }}
+                style={[textStyles, styles.pre]}
             >
                 {displayName}
             </Text>
         </UserDetailsTooltip>
     );
 }
 
-DisplayNamesTooltipItem.propTypes = propTypes;
-DisplayNamesTooltipItem.defaultProps = defaultProps;
 DisplayNamesTooltipItem.displayName = 'DisplayNamesTooltipItem';
 
 export default DisplayNamesTooltipItem;

src/components/DisplayNames/DisplayNamesWithTooltip.js → src/components/DisplayNames/DisplayNamesWithTooltip.tsx

@@ -1,17 +1,17 @@
-import lodashGet from 'lodash/get';
 import React, {Fragment, useCallback, useRef} from 'react';
-import {View} from 'react-native';
-import _ from 'underscore';
+import {Text as RNText, View} from 'react-native';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import styles from '@styles/styles';
-import {defaultProps, propTypes} from './displayNamesPropTypes';
 import DisplayNamesTooltipItem from './DisplayNamesTooltipItem';
+import DisplayNamesProps from './types';
 
-function DisplayNamesWithToolTip(props) {
-    const containerRef = useRef(null);
-    const childRefs = useRef([]);
-    const isEllipsisActive = lodashGet(containerRef.current, 'offsetWidth') < lodashGet(containerRef.current, 'scrollWidth');
+type HTMLElementWithText = HTMLElement & RNText;
+
+function DisplayNamesWithToolTip({shouldUseFullTitle, fullTitle, displayNamesWithTooltips, textStyles = [], numberOfLines = 1}: DisplayNamesProps) {
+    const containerRef = useRef<HTMLElementWithText>(null);
+    const childRefs = useRef<HTMLElementWithText[]>([]);
+    const isEllipsisActive = !!containerRef.current?.offsetWidth && !!containerRef.current?.scrollWidth && containerRef.current.offsetWidth < containerRef.current.scrollWidth;
 
     /**
      * We may need to shift the Tooltip horizontally as some of the inline text wraps well with ellipsis,
@@ -25,9 +25,9 @@ function DisplayNamesWithToolTip(props) {
      * @param {Number} index Used to get the Ref to the node at the current index
      * @returns {Number} Distance to shift the tooltip horizontally
      */
-    const getTooltipShiftX = useCallback((index) => {
+    const getTooltipShiftX = useCallback((index: number) => {
         // Only shift the tooltip in case the containerLayout or Refs to the text node are available
-        if (!containerRef || !childRefs.current[index]) {
+        if (!containerRef.current || !childRefs.current[index]) {
             return;
         }
         const {width: containerWidth, left: containerLeft} = containerRef.current.getBoundingClientRect();
@@ -46,13 +46,14 @@ function DisplayNamesWithToolTip(props) {
     return (
         // Tokenization of string only support prop numberOfLines on Web
         <Text
-            style={[...props.textStyles, styles.pRelative, props.numberOfLines === 1 ? styles.noWrap : {}]}
-            numberOfLines={props.numberOfLines || undefined}
-            ref={(el) => (containerRef.current = el)}
+            style={[textStyles, styles.pRelative, numberOfLines === 1 ? styles.noWrap : {}]}
+            numberOfLines={numberOfLines || undefined}
+            ref={containerRef}
         >
-            {props.shouldUseFullTitle
-                ? props.fullTitle
-                : _.map(props.displayNamesWithTooltips, ({displayName, accountID, avatar, login}, index) => (
+            {shouldUseFullTitle
+                ? fullTitle
+                : displayNamesWithTooltips.map(({displayName, accountID, avatar, login}, index) => (
+                      // eslint-disable-next-line react/no-array-index-key
                       <Fragment key={index}>
                           <DisplayNamesTooltipItem
                               index={index}
@@ -61,16 +62,15 @@ function DisplayNamesWithToolTip(props) {
                               displayName={displayName}
                               login={login}
                               avatar={avatar}
-                              textStyles={props.textStyles}
+                              textStyles={textStyles}
                               childRefs={childRefs}
-                              addComma={index < props.displayNamesWithTooltips.length - 1}
                           />
-                          {index < props.displayNamesWithTooltips.length - 1 && <Text style={props.textStyles}>,&nbsp;</Text>}
+                          {index < displayNamesWithTooltips.length - 1 && <Text style={textStyles}>,&nbsp;</Text>}
                       </Fragment>
                   ))}
             {Boolean(isEllipsisActive) && (
                 <View style={styles.displayNameTooltipEllipsis}>
-                    <Tooltip text={props.fullTitle}>
+                    <Tooltip text={fullTitle}>
                         {/* There is some Gap for real ellipsis so we are adding 4 `.` to cover */}
                         <Text>....</Text>
                     </Tooltip>
@@ -80,8 +80,6 @@ function DisplayNamesWithToolTip(props) {
     );
 }
 
-DisplayNamesWithToolTip.propTypes = propTypes;
-DisplayNamesWithToolTip.defaultProps = defaultProps;
 DisplayNamesWithToolTip.displayName = 'DisplayNamesWithTooltip';
 
 export default DisplayNamesWithToolTip;

src/components/DisplayNames/DisplayNamesWithoutTooltip.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import {StyleProp, TextStyle} from 'react-native';
+import Text from '@components/Text';
+import styles from '@styles/styles';
+
+type DisplayNamesWithoutTooltipProps = {
+    /** The full title of the DisplayNames component (not split up) */
+    fullTitle?: string;
+
+    /** Arbitrary styles of the displayName text */
+    textStyles?: StyleProp<TextStyle>;
+
+    /** Number of lines before wrapping */
+    numberOfLines?: number;
+};
+
+function DisplayNamesWithoutTooltip({textStyles = [], numberOfLines = 1, fullTitle = ''}: DisplayNamesWithoutTooltipProps) {
+    return (
+        <Text
+            style={[textStyles, numberOfLines === 1 ? styles.pre : styles.preWrap]}
+            numberOfLines={numberOfLines}
+        >
+            {fullTitle}
+        </Text>
+    );
+}
+
+DisplayNamesWithoutTooltip.displayName = 'DisplayNamesWithoutTooltip';
+
+export default DisplayNamesWithoutTooltip;

src/components/DisplayNames/index.native.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Text from '@components/Text';
+import DisplayNamesProps from './types';
+
+// As we don't have to show tooltips of the Native platform so we simply render the full display names list.
+function DisplayNames({accessibilityLabel, fullTitle, textStyles = [], numberOfLines = 1}: DisplayNamesProps) {
+    return (
+        <Text
+            accessibilityLabel={accessibilityLabel}
+            style={textStyles}
+            numberOfLines={numberOfLines}
+        >
+            {fullTitle}
+        </Text>
+    );
+}
+
+DisplayNames.displayName = 'DisplayNames';
+
+export default DisplayNames;