Merge pull request #5157 from matrix-org/t3chguy/crc1

Remove create-react-class

src/components/structures/SearchBox.js

@@ -16,7 +16,6 @@ limitations under the License.
 */
 
 import React, {createRef} from 'react';
-import createReactClass from 'create-react-class';
 import PropTypes from 'prop-types';
 import { Key } from '../../Keyboard';
 import dis from '../../dispatcher/dispatcher';
@@ -24,10 +23,8 @@ import {throttle} from 'lodash';
 import AccessibleButton from '../../components/views/elements/AccessibleButton';
 import classNames from 'classnames';
 
-export default createReactClass({
-    displayName: 'SearchBox',
-
-    propTypes: {
+export default class SearchBox extends React.Component {
+    static propTypes = {
         onSearch: PropTypes.func,
         onCleared: PropTypes.func,
         onKeyDown: PropTypes.func,
@@ -38,35 +35,32 @@ export default createReactClass({
         // on room search focus action (it would be nicer to take
         // this functionality out, but not obvious how that would work)
         enableRoomSearchFocus: PropTypes.bool,
-    },
+    };
 
-    getDefaultProps: function() {
-        return {
-            enableRoomSearchFocus: false,
-        };
-    },
+    static defaultProps = {
+        enableRoomSearchFocus: false,
+    };
 
-    getInitialState: function() {
-        return {
+    constructor(props) {
+        super(props);
+
+        this._search = createRef();
+
+        this.state = {
             searchTerm: "",
             blurred: true,
         };
-    },
+    }
 
-    // TODO: [REACT-WARNING] Replace component with real class, use constructor for refs
-    UNSAFE_componentWillMount: function() {
-        this._search = createRef();
-    },
-
-    componentDidMount: function() {
+    componentDidMount() {
         this.dispatcherRef = dis.register(this.onAction);
-    },
+    }
 
-    componentWillUnmount: function() {
+    componentWillUnmount() {
         dis.unregister(this.dispatcherRef);
-    },
+    }
 
-    onAction: function(payload) {
+    onAction = payload => {
         if (!this.props.enableRoomSearchFocus) return;
 
         switch (payload.action) {
@@ -81,51 +75,51 @@ export default createReactClass({
                 }
                 break;
         }
-    },
+    };
 
-    onChange: function() {
+    onChange = () => {
         if (!this._search.current) return;
         this.setState({ searchTerm: this._search.current.value });
         this.onSearch();
-    },
+    };
 
-    onSearch: throttle(function() {
+    onSearch = throttle(() => {
         this.props.onSearch(this._search.current.value);
-    }, 200, {trailing: true, leading: true}),
+    }, 200, {trailing: true, leading: true});
 
-    _onKeyDown: function(ev) {
+    _onKeyDown = ev => {
         switch (ev.key) {
             case Key.ESCAPE:
                 this._clearSearch("keyboard");
                 break;
         }
         if (this.props.onKeyDown) this.props.onKeyDown(ev);
-    },
+    };
 
-    _onFocus: function(ev) {
+    _onFocus = ev => {
         this.setState({blurred: false});
         ev.target.select();
         if (this.props.onFocus) {
             this.props.onFocus(ev);
         }
-    },
+    };
 
-    _onBlur: function(ev) {
+    _onBlur = ev => {
         this.setState({blurred: true});
         if (this.props.onBlur) {
             this.props.onBlur(ev);
         }
-    },
+    };
 
-    _clearSearch: function(source) {
+    _clearSearch(source) {
         this._search.current.value = "";
         this.onChange();
         if (this.props.onCleared) {
             this.props.onCleared(source);
         }
-    },
+    }
 
-    render: function() {
+    render() {
         // check for collapsed here and
         // not at parent so we keep
         // searchTerm in our state
@@ -166,5 +160,5 @@ export default createReactClass({
                 { clearButton }
             </div>
         );
-    },
-});
+    }
+}