Merge pull request #3771 from matrix-org/t3chguy/ReactDOM.findDOMNode

stop using ReactDOM.findDOMNode in componentWillUnmount, use refs

src/components/structures/RoomView.js

@@ -25,7 +25,6 @@ import shouldHideEvent from '../../shouldHideEvent';
 
 import React, {createRef} from 'react';
 import createReactClass from 'create-react-class';
-import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { _t } from '../../languageHandler';
@@ -440,7 +439,7 @@ module.exports = createReactClass({
 
     componentDidUpdate: function() {
         if (this._roomView.current) {
-            const roomView = ReactDOM.findDOMNode(this._roomView.current);
+            const roomView = this._roomView.current;
             if (!roomView.ondrop) {
                 roomView.addEventListener('drop', this.onDrop);
                 roomView.addEventListener('dragover', this.onDragOver);
@@ -484,7 +483,7 @@ module.exports = createReactClass({
             // is really just for hygiene - we're going to be
             // deleted anyway, so it doesn't matter if the event listeners
             // don't get cleaned up.
-            const roomView = ReactDOM.findDOMNode(this._roomView.current);
+            const roomView = this._roomView.current;
             roomView.removeEventListener('drop', this.onDrop);
             roomView.removeEventListener('dragover', this.onDragOver);
             roomView.removeEventListener('dragleave', this.onDragLeaveOrEnd);

src/components/views/avatars/BaseAvatar.js

@@ -38,6 +38,12 @@ module.exports = createReactClass({
         // XXX resizeMethod not actually used.
         resizeMethod: PropTypes.string,
         defaultToInitialLetter: PropTypes.bool, // true to add default url
+        inputRef: PropTypes.oneOfType([
+            // Either a function
+            PropTypes.func,
+            // Or the instance of a DOM native element
+            PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+        ]),
     },
 
     statics: {
@@ -148,7 +154,7 @@ module.exports = createReactClass({
 
         const {
             name, idName, title, url, urls, width, height, resizeMethod,
-            defaultToInitialLetter, onClick,
+            defaultToInitialLetter, onClick, inputRef,
             ...otherProps
         } = this.props;
 
@@ -171,7 +177,7 @@ module.exports = createReactClass({
             if (onClick != null) {
                 return (
                     <AccessibleButton element='span' className="mx_BaseAvatar"
-                        onClick={onClick} {...otherProps}
+                        onClick={onClick} inputRef={inputRef} {...otherProps}
                     >
                         { textNode }
                         { imgNode }
@@ -179,7 +185,7 @@ module.exports = createReactClass({
                 );
             } else {
                 return (
-                    <span className="mx_BaseAvatar" {...otherProps}>
+                    <span className="mx_BaseAvatar" ref={inputRef} {...otherProps}>
                         { textNode }
                         { imgNode }
                     </span>
@@ -188,21 +194,26 @@ module.exports = createReactClass({
         }
         if (onClick != null) {
             return (
-                <AccessibleButton className="mx_BaseAvatar mx_BaseAvatar_image"
+                <AccessibleButton
+                    className="mx_BaseAvatar mx_BaseAvatar_image"
                     element='img'
                     src={imageUrl}
                     onClick={onClick}
                     onError={this.onError}
                     width={width} height={height}
                     title={title} alt=""
+                    inputRef={inputRef}
                     {...otherProps} />
             );
         } else {
             return (
-                <img className="mx_BaseAvatar mx_BaseAvatar_image" src={imageUrl}
+                <img
+                    className="mx_BaseAvatar mx_BaseAvatar_image"
+                    src={imageUrl}
                     onError={this.onError}
                     width={width} height={height}
                     title={title} alt=""
+                    ref={inputRef}
                     {...otherProps} />
             );
         }

src/components/views/rooms/ReadReceiptMarker.js

@@ -14,8 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
-import ReactDOM from 'react-dom';
+import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 
@@ -90,6 +89,10 @@ module.exports = createReactClass({
         };
     },
 
+    UNSAFE_componentWillMount: function() {
+        this._avatar = createRef();
+    },
+
     componentWillUnmount: function() {
         // before we remove the rr, store its location in the map, so that if
         // it reappears, it can be animated from the right place.
@@ -105,7 +108,7 @@ module.exports = createReactClass({
             return;
         }
 
-        const avatarNode = ReactDOM.findDOMNode(this);
+        const avatarNode = this._avatar.current;
         rrInfo.top = avatarNode.offsetTop;
         rrInfo.left = avatarNode.offsetLeft;
         rrInfo.parent = avatarNode.offsetParent;
@@ -125,7 +128,7 @@ module.exports = createReactClass({
             oldTop = oldInfo.top + oldInfo.parent.getBoundingClientRect().top;
         }
 
-        const newElement = ReactDOM.findDOMNode(this);
+        const newElement = this._avatar.current;
         let startTopOffset;
         if (!newElement.offsetParent) {
             // this seems to happen sometimes for reasons I don't understand
@@ -175,7 +178,7 @@ module.exports = createReactClass({
     render: function() {
         const MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
         if (this.state.suppressDisplay) {
-            return <div />;
+            return <div ref={this._avatar} />;
         }
 
         const style = {
@@ -215,6 +218,7 @@ module.exports = createReactClass({
                     style={style}
                     title={title}
                     onClick={this.props.onClick}
+                    inputRef={this._avatar}
                 />
             </Velociraptor>
         );