Migrate string refs over to createRef

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

src/components/views/dialogs/AddressPickerDialog.js

@@ -17,7 +17,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import createReactClass from 'create-react-class';
 
@@ -106,10 +106,14 @@ module.exports = createReactClass({
         };
     },
 
+    UNSAFE_componentWillMount: function() {
+        this._textinput = createRef();
+    },
+
     componentDidMount: function() {
         if (this.props.focus) {
             // Set the cursor at the end of the text input
-            this.refs.textinput.value = this.props.value;
+            this._textinput.current.value = this.props.value;
         }
     },
 
@@ -126,8 +130,8 @@ module.exports = createReactClass({
         let selectedList = this.state.selectedList.slice();
         // Check the text input field to see if user has an unconverted address
         // If there is and it's valid add it to the local selectedList
-        if (this.refs.textinput.value !== '') {
-            selectedList = this._addAddressesToList([this.refs.textinput.value]);
+        if (this._textinput.current.value !== '') {
+            selectedList = this._addAddressesToList([this._textinput.current.value]);
             if (selectedList === null) return;
         }
         this.props.onFinished(true, selectedList);
@@ -154,23 +158,23 @@ module.exports = createReactClass({
             e.stopPropagation();
             e.preventDefault();
             if (this.addressSelector) this.addressSelector.chooseSelection();
-        } else if (this.refs.textinput.value.length === 0 && this.state.selectedList.length && e.keyCode === 8) { // backspace
+        } else if (this._textinput.current.value.length === 0 && this.state.selectedList.length && e.keyCode === 8) { // backspace
             e.stopPropagation();
             e.preventDefault();
             this.onDismissed(this.state.selectedList.length - 1)();
         } else if (e.keyCode === 13) { // enter
             e.stopPropagation();
             e.preventDefault();
-            if (this.refs.textinput.value === '') {
+            if (this._textinput.current.value === '') {
                 // if there's nothing in the input box, submit the form
                 this.onButtonClick();
             } else {
-                this._addAddressesToList([this.refs.textinput.value]);
+                this._addAddressesToList([this._textinput.current.value]);
             }
         } else if (e.keyCode === 188 || e.keyCode === 9) { // comma or tab
             e.stopPropagation();
             e.preventDefault();
-            this._addAddressesToList([this.refs.textinput.value]);
+            this._addAddressesToList([this._textinput.current.value]);
         }
     },
 
@@ -647,7 +651,7 @@ module.exports = createReactClass({
                 onPaste={this._onPaste}
                 rows="1"
                 id="textinput"
-                ref="textinput"
+                ref={this._textinput}
                 className="mx_AddressPickerDialog_input"
                 onChange={this.onQueryChanged}
                 placeholder={this.getPlaceholder()}

src/components/views/dialogs/SetMxIdDialog.js

@@ -15,7 +15,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, {createRef} from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import sdk from '../../../index';
@@ -62,8 +62,13 @@ export default createReactClass({
         };
     },
 
+    UNSAFE_componentWillMount: function() {
+        this._input_value = createRef();
+        this._uiAuth = createRef();
+    },
+
     componentDidMount: function() {
-        this.refs.input_value.select();
+        this._input_value.current.select();
 
         this._matrixClient = MatrixClientPeg.get();
     },
@@ -102,8 +107,8 @@ export default createReactClass({
     },
 
     onSubmit: function(ev) {
-        if (this.refs.uiAuth) {
-            this.refs.uiAuth.tryContinue();
+        if (this._uiAuth.current) {
+            this._uiAuth.current.tryContinue();
         }
         this.setState({
             doingUIAuth: true,
@@ -215,7 +220,7 @@ export default createReactClass({
                 onAuthFinished={this._onUIAuthFinished}
                 inputs={{}}
                 poll={true}
-                ref="uiAuth"
+                ref={this._uiAuth}
                 continueIsManaged={true}
             />;
         }
@@ -257,7 +262,7 @@ export default createReactClass({
             >
                 <div className="mx_Dialog_content" id='mx_Dialog_content'>
                     <div className="mx_SetMxIdDialog_input_group">
-                        <input type="text" ref="input_value" value={this.state.username}
+                        <input type="text" ref={this._input_value} value={this.state.username}
                             autoFocus={true}
                             onChange={this.onValueChange}
                             onKeyUp={this.onKeyUp}

src/components/views/dialogs/ShareDialog.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import {Room, User, Group, RoomMember, MatrixEvent} from 'matrix-js-sdk';
 import sdk from '../../../index';
@@ -74,6 +74,8 @@ export default class ShareDialog extends React.Component {
             // MatrixEvent defaults to share linkSpecificEvent
             linkSpecificEvent: this.props.target instanceof MatrixEvent,
         };
+
+        this._link = createRef();
     }
 
     static _selectText(target) {
@@ -94,7 +96,7 @@ export default class ShareDialog extends React.Component {
     onCopyClick(e) {
         e.preventDefault();
 
-        ShareDialog._selectText(this.refs.link);
+        ShareDialog._selectText(this._link.current);
 
         let successful;
         try {
@@ -195,7 +197,7 @@ export default class ShareDialog extends React.Component {
         >
             <div className="mx_ShareDialog_content">
                 <div className="mx_ShareDialog_matrixto">
-                    <a ref="link"
+                    <a ref={this._link}
                        href={matrixToUrl}
                        onClick={ShareDialog.onLinkClick}
                        className="mx_ShareDialog_matrixto_link"

src/components/views/dialogs/TextInputDialog.js

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React from 'react';
+import React, {createRef} from 'react';
 import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import sdk from '../../../index';
@@ -42,15 +42,19 @@ export default createReactClass({
         };
     },
 
+    UNSAFE_componentWillMount: function() {
+        this._textinput = createRef();
+    },
+
     componentDidMount: function() {
         if (this.props.focus) {
             // Set the cursor at the end of the text input
-            this.refs.textinput.value = this.props.value;
+            this._textinput.current.value = this.props.value;
         }
     },
 
     onOk: function() {
-        this.props.onFinished(true, this.refs.textinput.value);
+        this.props.onFinished(true, this._textinput.current.value);
     },
 
     onCancel: function() {
@@ -70,7 +74,13 @@ export default createReactClass({
                             <label htmlFor="textinput"> { this.props.description } </label>
                         </div>
                         <div>
-                            <input id="textinput" ref="textinput" className="mx_TextInputDialog_input" defaultValue={this.props.value} autoFocus={this.props.focus} size="64" />
+                            <input
+                                id="textinput"
+                                ref={this._textinput}
+                                className="mx_TextInputDialog_input"
+                                defaultValue={this.props.value}
+                                autoFocus={this.props.focus}
+                                size="64" />
                         </div>
                     </div>
                 </form>