WIP - Bug 3038 editor search add text search button (#3100)

ruturajv · jasonLaster · commit 40df77e41da2 · 2017-06-14T10:27:32.000+01:00
* Adding plain text search button to SearchBar

* Worked on codehag suggestions

* fixed some suggestions by codehag

* Adding plain text search button to SearchBar

* Worked on codehag suggestions

* fixed some suggestions by codehag

* fix up searchText

* fix tests and make prettier happy
diff --git a/src/components/Editor/SearchBar.js b/src/components/Editor/SearchBar.js
@@ -134,6 +134,7 @@ class SearchBar extends Component {
     self.closeSearch = this.closeSearch.bind(this);
     self.toggleSearch = this.toggleSearch.bind(this);
     self.toggleSymbolSearch = this.toggleSymbolSearch.bind(this);
+    self.toggleTextSearch = this.toggleTextSearch.bind(this);
     self.setSearchValue = this.setSearchValue.bind(this);
     self.selectSearchInput = this.selectSearchInput.bind(this);
     self.searchInput = this.searchInput.bind(this);
@@ -297,24 +298,22 @@ class SearchBar extends Component {
     }
   }
 
-  toggleSymbolSearch(
-    e: SyntheticKeyboardEvent,
-    { toggle, searchType }: ToggleSymbolSearchOpts = {}
-  ) {
-    const { selectedSource } = this.props;
-
+  ignoreEvent(e) {
     if (e) {
       e.preventDefault();
       e.stopPropagation();
     }
+  }
 
+  toggleSymbolSearch(
+    e: SyntheticKeyboardEvent,
+    { toggle, searchType }: ToggleSymbolSearchOpts = {}
+  ) {
+    const { selectedSource } = this.props;
     if (!selectedSource) {
       return;
     }
-
-    if (!this.props.searchOn) {
-      this.props.toggleFileSearch();
-    }
+    this.ignoreEvent(e);
 
     if (this.props.symbolSearchOn) {
       if (toggle) {
@@ -325,11 +324,25 @@ class SearchBar extends Component {
       return;
     }
 
-    if (this.props.selectedSource) {
-      this.clearSearch();
-      this.props.toggleSymbolSearch(true);
-      this.props.setSelectedSymbolType(searchType);
+    this.clearSearch();
+    this.props.toggleSymbolSearch(true);
+    this.props.setSelectedSymbolType(searchType);
+  }
+
+  toggleTextSearch(e: SyntheticKeyboardEvent) {
+    const { selectedSource } = this.props;
+    this.ignoreEvent(e);
+
+    if (!selectedSource) {
+      return;
+    }
+
+    if (!this.props.searchOn) {
+      this.props.toggleFileSearch();
     }
+
+    this.clearSearch();
+    this.props.toggleSymbolSearch(false);
   }
 
   setSearchValue(value: string) {
@@ -662,22 +675,45 @@ class SearchBar extends Component {
   }
 
   renderSearchTypeToggle() {
-    const { toggleSymbolSearch } = this;
+    const { toggleSymbolSearch, toggleTextSearch } = this;
     const { symbolSearchOn, selectedSymbolType } = this.props;
 
+    function isButtonActive(searchType) {
+      switch (searchType) {
+        case "functions":
+        case "variables":
+          return symbolSearchOn && selectedSymbolType == searchType;
+        // text search
+        default:
+          return !symbolSearchOn;
+      }
+    }
+
+    function searchTextBtn() {
+      const searchType = "text";
+      const active = isButtonActive(searchType);
+
+      return dom.button(
+        {
+          className: classnames("search-type-btn", {
+            active
+          }),
+          onClick: e => toggleTextSearch(e)
+        },
+        searchType
+      );
+    }
+
     function searchTypeBtn(searchType) {
+      const active = isButtonActive(searchType);
+      const toggle = selectedSymbolType == searchType;
+
       return dom.button(
         {
           className: classnames("search-type-btn", {
-            active: symbolSearchOn && selectedSymbolType == searchType
+            active
           }),
-          onClick: e => {
-            if (selectedSymbolType == searchType) {
-              toggleSymbolSearch(e, { toggle: true, searchType });
-              return;
-            }
-            toggleSymbolSearch(e, { toggle: false, searchType });
-          }
+          onClick: e => toggleSymbolSearch(e, { toggle, searchType })
         },
         searchType
       );
@@ -689,6 +725,7 @@ class SearchBar extends Component {
         { className: "search-toggle-title" },
         L10N.getStr("editor.searchTypeToggleTitle")
       ),
+      searchTextBtn(),
       searchTypeBtn("functions"),
       searchTypeBtn("variables")
     );
diff --git a/src/components/Editor/tests/__snapshots__/SearchBar.js.snap b/src/components/Editor/tests/__snapshots__/SearchBar.js.snap
@@ -35,6 +35,12 @@ ShallowWrapper {
             >
                 Search for:
             </h1>
+            <button
+                className="search-type-btn"
+                onClick={[Function]}
+            >
+                text
+            </button>
             <button
                 className="search-type-btn active"
                 onClick={[Function]}
@@ -78,6 +84,12 @@ ShallowWrapper {
                   >
                         Search for:
                   </h1>
+                  <button
+                        className="search-type-btn"
+                        onClick={[Function]}
+                  >
+                        text
+                  </button>
                   <button
                         className="search-type-btn active"
                         onClick={[Function]}
@@ -153,6 +165,7 @@ ShallowWrapper {
         },
         "toggleSearch": [Function],
         "toggleSymbolSearch": [Function],
+        "toggleTextSearch": [Function],
         "traverseCodeResults": [Function],
         "traverseResults": [Function],
         "traverseSymbolResults": [Function],
@@ -202,6 +215,12 @@ ShallowWrapper {
                               >
                                         Search for:
                               </h1>
+                              <button
+                                        className="search-type-btn"
+                                        onClick={[Function]}
+                              >
+                                        text
+                              </button>
                               <button
                                         className="search-type-btn active"
                                         onClick={[Function]}
@@ -245,6 +264,12 @@ ShallowWrapper {
                               >
                                         Search for:
                               </h1>
+                              <button
+                                        className="search-type-btn"
+                                        onClick={[Function]}
+                              >
+                                        text
+                              </button>
                               <button
                                         className="search-type-btn active"
                                         onClick={[Function]}
diff --git a/src/utils/parser/tests/fixtures/var.js b/src/utils/parser/tests/fixtures/var.js
@@ -1,5 +1,4 @@
 var foo = 1;
 let bar = 2;
 const baz = 3;
-const a = 4,
-  b = 5;
+const a = 4, b = 5;
