From 98dd36c099214c69d1a684a330281cc82d97cc4d Mon Sep 17 00:00:00 2001
From: Gabriel Luong <gabriel.luong@gmail.com>
Date: Wed, 13 Mar 2019 14:31:54 -0400
Subject: [PATCH] Bug 1535077 - Switch to using Ref and PureComponent in the
 SearchBox component. r=Honza

Differential Revision: https://phabricator.services.mozilla.com/D23366
---
 devtools/client/shared/components/SearchBox.js | 65 ++++++++++++++------------
 1 file changed, 35 insertions(+), 30 deletions(-)

diff --git a/devtools/client/shared/components/SearchBox.js b/devtools/client/shared/components/SearchBox.js
index b60ab50bea78..ba6b175aac7b 100644
--- a/devtools/client/shared/components/SearchBox.js
+++ b/devtools/client/shared/components/SearchBox.js
@@ -6,31 +6,34 @@
 
 "use strict";
 
-const { Component, createFactory } = require("devtools/client/shared/vendor/react");
+const { createFactory, createRef, PureComponent } = require("devtools/client/shared/vendor/react");
 const PropTypes = require("devtools/client/shared/vendor/react-prop-types");
 const dom = require("devtools/client/shared/vendor/react-dom-factories");
-const KeyShortcuts = require("devtools/client/shared/key-shortcuts");
-const AutocompletePopup = createFactory(require("devtools/client/shared/components/AutoCompletePopup"));
 
+loader.lazyGetter(this, "AutocompletePopup", function() {
+  return createFactory(require("devtools/client/shared/components/AutoCompletePopup"));
+});
 loader.lazyGetter(this, "MDNLink", function() {
   return createFactory(require("./MdnLink"));
 });
 
-class SearchBox extends Component {
+loader.lazyRequireGetter(this, "KeyShortcuts", "devtools/client/shared/key-shortcuts");
+
+class SearchBox extends PureComponent {
   static get propTypes() {
     return {
+      autocompleteProvider: PropTypes.func,
       delay: PropTypes.number,
       keyShortcut: PropTypes.string,
-      onChange: PropTypes.func,
-      onFocus: PropTypes.func,
+      learnMoreTitle: PropTypes.string,
+      learnMoreUrl: PropTypes.string,
       onBlur: PropTypes.func,
+      onChange: PropTypes.func.isRequired,
+      onFocus: PropTypes.func,
       onKeyDown: PropTypes.func,
-      placeholder: PropTypes.string,
+      placeholder: PropTypes.string.isRequired,
       plainStyle: PropTypes.bool,
-      type: PropTypes.string,
-      autocompleteProvider: PropTypes.func,
-      learnMoreUrl: PropTypes.string,
-      learnMoreTitle: PropTypes.string,
+      type: PropTypes.string.isRequired,
     };
   }
 
@@ -42,10 +45,13 @@ class SearchBox extends Component {
       focused: false,
     };
 
+    this.autocompleteRef = createRef();
+    this.inputRef = createRef();
+
+    this.onBlur = this.onBlur.bind(this);
     this.onChange = this.onChange.bind(this);
     this.onClearButtonClick = this.onClearButtonClick.bind(this);
     this.onFocus = this.onFocus.bind(this);
-    this.onBlur = this.onBlur.bind(this);
     this.onKeyDown = this.onKeyDown.bind(this);
   }
 
@@ -59,7 +65,7 @@ class SearchBox extends Component {
     });
     this.shortcuts.on(this.props.keyShortcut, event => {
       event.preventDefault();
-      this.refs.input.focus();
+      this.inputRef.current.focus();
     });
   }
 
@@ -75,10 +81,10 @@ class SearchBox extends Component {
   }
 
   onChange() {
-    if (this.state.value !== this.refs.input.value) {
+    if (this.state.value !== this.inputRef.current.value) {
       this.setState({
         focused: true,
-        value: this.refs.input.value,
+        value: this.inputRef.current.value,
       });
     }
 
@@ -101,7 +107,7 @@ class SearchBox extends Component {
   }
 
   onClearButtonClick() {
-    this.refs.input.value = "";
+    this.setState({ value: "" });
     this.onChange();
   }
 
@@ -126,7 +132,7 @@ class SearchBox extends Component {
       this.props.onKeyDown();
     }
 
-    const { autocomplete } = this.refs;
+    const autocomplete = this.autocompleteRef.current;
     if (!autocomplete || autocomplete.state.list.length <= 0) {
       return;
     }
@@ -164,55 +170,54 @@ class SearchBox extends Component {
 
   render() {
     let {
-      type = "search",
-      placeholder,
       autocompleteProvider,
-      plainStyle,
-      learnMoreUrl,
       learnMoreTitle,
+      learnMoreUrl,
+      placeholder,
+      plainStyle,
+      type = "search",
     } = this.props;
     const { value } = this.state;
-    const divClassList = ["devtools-searchbox", "has-clear-btn"];
+    const showAutocomplete = autocompleteProvider && this.state.focused && value !== "";
+
     const inputClassList = [`devtools-${type}input`];
     if (plainStyle) {
       inputClassList.push("devtools-plaininput");
     }
-    const showAutocomplete = autocompleteProvider && this.state.focused && value !== "";
-
     if (value !== "") {
       inputClassList.push("filled");
       learnMoreUrl = false;
     }
 
     return dom.div(
-      { className: divClassList.join(" ") },
+      { className: "devtools-searchbox has-clear-btn" },
       dom.input({
         className: inputClassList.join(" "),
+        onBlur: this.onBlur,
         onChange: this.onChange,
         onFocus: this.onFocus,
-        onBlur: this.onBlur,
         onKeyDown: this.onKeyDown,
         placeholder,
-        ref: "input",
+        ref: this.inputRef,
         value,
       }),
       dom.button({
         className: "devtools-searchinput-clear",
-        hidden: value == "",
+        hidden: value === "",
         onClick: this.onClearButtonClick,
       }),
       learnMoreUrl && MDNLink({
-        url: learnMoreUrl,
         title: learnMoreTitle,
+        url: learnMoreUrl,
       }),
       showAutocomplete && AutocompletePopup({
         autocompleteProvider,
         filter: value,
-        ref: "autocomplete",
         onItemSelected: (itemValue) => {
           this.setState({ value: itemValue });
           this.onChange();
         },
+        ref: this.autocompleteRef,
       })
     );
   }
-- 
2.11.4.GIT