diff --git a/src/components/DisplayNames/index.js b/src/components/DisplayNames/index.js index 5e601f1362dc..6a7123f723f8 100644 --- a/src/components/DisplayNames/index.js +++ b/src/components/DisplayNames/index.js @@ -15,7 +15,6 @@ class DisplayNames extends PureComponent { this.state = { isEllipsisActive: false, }; - this.setContainerLayout = this.setContainerLayout.bind(this); this.getTooltipShiftX = this.getTooltipShiftX.bind(this); } @@ -25,15 +24,6 @@ class DisplayNames extends PureComponent { }); } - /** - * Set the container layout for post calculations - * - * @param {*} {nativeEvent} - */ - setContainerLayout({nativeEvent}) { - this.containerLayout = nativeEvent.layout; - } - /** * We may need to shift the Tooltip horizontally as some of the inline text wraps well with ellipsis, * but their container node overflows the parent view which causes the tooltip to be misplaced. @@ -47,11 +37,11 @@ class DisplayNames extends PureComponent { * @returns {Number} Distance to shift the tooltip horizontally */ getTooltipShiftX(index) { - // Only shift the tooltip in case the containerLayout or Refs to the text node are available - if (!this.containerLayout || !this.childRefs[index]) { + // Only shift the tooltip in case the container ref or Refs to the text node are available + if (!this.containerRef || !this.childRefs[index]) { return; } - const {width: containerWidth, left: containerLeft} = this.containerLayout; + const {width: containerWidth, left: containerLeft} = this.containerRef.getBoundingClientRect(); // We have to return the value as Number so we can't use `measureWindow` which takes a callback const {width: textNodeWidth, left: textNodeLeft} = this.childRefs[index].getBoundingClientRect(); @@ -81,7 +71,6 @@ class DisplayNames extends PureComponent { // Tokenization of string only support prop numberOfLines on Web (this.containerRef = el)} >