refactor

Expensify · Mar 19, 2021 · 996ae0e · 996ae0e
1 parent 237968c
commit 996ae0e
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 35 deletions.
diff --git a/src/components/Hoverable/HoverablePropTypes.js b/src/components/Hoverable/HoverablePropTypes.js
@@ -8,7 +8,7 @@ const propTypes = {
     ]).isRequired,
 
     // Styles to be assigned to the Hoverable Container
-    // eslint-disable-next-line.
+    // eslint-disable-next-line react/forbid-prop-types
     containerStyle: PropTypes.object,
 
     // Function that executes when the mouse moves over the children.

diff --git a/src/components/Tooltip/TooltipRenderedOnPageBody.js b/src/components/Tooltip/TooltipRenderedOnPageBody.js
@@ -52,4 +52,11 @@ const TooltipRenderedOnPageBody = props => ReactDOM.createPortal(
 
 TooltipRenderedOnPageBody.propTypes = propTypes;
 TooltipRenderedOnPageBody.defaultProps = defaultProps;
+TooltipRenderedOnPageBody.displayName = 'TooltipRenderedOnPageBody';
+
+// Props will change frequently.
+// On every tooltip hover, we update the position in state which will result in re-rendering.
+// We also update the state on layout changes which will be triggered often.
+// There will be n number of tooltip components in the page.
+// Its good to memorize this one.
 export default memo(TooltipRenderedOnPageBody);
diff --git a/src/pages/home/sidebar/OptionRowTitle/index.js b/src/pages/home/sidebar/OptionRowTitle/index.js
@@ -12,14 +12,8 @@ import hasEllipsis from '../../../../libs/hasEllipsis';
 class OptionRowTitle extends PureComponent {
     constructor(props) {
         super(props);
-        this.ref = null;
-        this.cRefs = [];
-        this.setContainerRef = (ref) => {
-            this.ref = ref;
-        };
-        this.setOptionChildRef = index => (ref) => {
-            this.cRefs[index] = ref;
-        };
+        this.containerRef = null;
+        this.childRefs = [];
         this.state = {
             isEllipsisActive: false,
         };
@@ -29,7 +23,7 @@ class OptionRowTitle extends PureComponent {
 
     componentDidMount() {
         this.setState({
-            isEllipsisActive: this.ref && hasEllipsis(this.ref),
+            isEllipsisActive: this.containerRef && hasEllipsis(this.containerRef),
         });
     }
 
@@ -58,13 +52,13 @@ class OptionRowTitle extends PureComponent {
      */
     getTooltipShiftX(index) {
         // Only shift when containerLayout or Refs to text node is available .
-        if (!this.containerLayout || !this.cRefs[index]) {
+        if (!this.containerLayout || !this.childRefs[index]) {
             return;
         }
         const {width: containerWidth, left: containerLeft} = this.containerLayout;
 
         // We have to return the value as Number so we can't use `measureWindow` which takes a callback
-        const {width: textNodeWidth, left: textNodeLeft} = this.cRefs[index].getBoundingClientRect();
+        const {width: textNodeWidth, left: textNodeLeft} = this.childRefs[index].getBoundingClientRect();
         const tooltipX = (textNodeWidth / 2) + textNodeLeft;
         const containerRight = containerWidth + containerLeft;
         const textNodeRight = textNodeWidth + textNodeLeft;
@@ -90,30 +84,25 @@ class OptionRowTitle extends PureComponent {
                 style={[style, styles.optionDisplayNameTooltipWrapper]}
                 onLayout={this.setContainerLayout}
                 numberOfLines={1}
-                ref={this.setContainerRef}
+                ref={el => this.containerRef = el}
             >
-                {_.map(option.participantsList, (participant, index) => {
-                    // We need to get the refs to all the names which will be used to correct
-                    // the horizontal position of the tooltip
-                    const setChildRef = this.setOptionChildRef(index);
-                    return (
-                        <Fragment key={index}>
-                            <Tooltip
-                                key={index}
-                                text={participant.login}
-                                containerStyle={styles.dInline}
-                                shiftHorizontal={() => this.getTooltipShiftX(index)}
-                            >
-                                <Text ref={setChildRef}>
-                                    {participant.displayName}
-                                </Text>
-                            </Tooltip>
-                            {index < option.participantsList.length - 1
-                                ? <Text>,&nbsp;</Text>
-                                : null}
-                        </Fragment>
-                    );
-                })}
+                {_.map(option.participantsList, (participant, index) => (
+                    <Fragment key={index}>
+                        <Tooltip
+                            key={index}
+                            text={participant.login}
+                            containerStyle={styles.dInline}
+                            shiftHorizontal={() => this.getTooltipShiftX(index)}
+                        >
+                            {/*  // We need to get the refs to all the names which will be used to correct
+                                 the horizontal position of the tooltip */}
+                            <Text ref={el => this.childRefs[index] = el}>
+                                {participant.displayName}
+                            </Text>
+                        </Tooltip>
+                        {index < option.participantsList.length - 1 && <Text>,&nbsp;</Text>}
+                    </Fragment>
+                ))}
                 {option.participantsList.length > 1 && this.state.isEllipsisActive
                     && (
                         <View style={styles.optionDisplayNameTooltipEllipsis}>