add options for search input

jupyterlab-contrib · Mar 12, 2022 · b5a3a03 · b5a3a03
1 parent 971f74c
commit b5a3a03
Showing 1 changed file with 95 additions and 4 deletions.
diff --git a/src/searchReplace.tsx b/src/searchReplace.tsx
@@ -2,14 +2,22 @@ import React from 'react';
 import { Debouncer } from '@lumino/polling';
 import { requestAPI } from './handler';
 import { VDomModel, VDomRenderer } from '@jupyterlab/apputils';
-import { Search } from '@jupyter-notebook/react-components';
+import { Search, Button } from '@jupyter-notebook/react-components';
 
 export class SearchReplaceModel extends VDomModel {
   constructor() {
     super();
     this._searchString = '';
+    this._caseSensitive = false;
+    this._wholeWord = false;
+    this._useRegex = false;
     this._debouncedStartSearch = new Debouncer(() => {
-      this.getSearchString(this._searchString);
+      this.getSearchString(
+        this._searchString,
+        this._caseSensitive,
+        this._wholeWord,
+        this._useRegex
+      );
     });
   }
 
@@ -29,14 +37,52 @@ export class SearchReplaceModel extends VDomModel {
     }
   }
 
+  get caseSensitive(): boolean {
+    return this._caseSensitive;
+  }
+
+  set caseSensitive(v: boolean) {
+    this._caseSensitive = v;
+    this.stateChanged.emit();
+  }
+
+  get wholeWord(): boolean {
+    return this._wholeWord;
+  }
+
+  set wholeWord(v: boolean) {
+    this._wholeWord = v;
+    this.stateChanged.emit();
+  }
+
+  get useRegex(): boolean {
+    return this._useRegex;
+  }
+
+  set useRegex(v: boolean) {
+    this._useRegex = v;
+    this.stateChanged.emit();
+  }
+
   get queryResults(): string {
     return this._queryResults;
   }
 
-  async getSearchString(search: string): Promise<void> {
+  async getSearchString(
+    search: string,
+    caseSensitive: boolean,
+    wholeWord: boolean,
+    useRegex: boolean
+  ): Promise<void> {
     try {
       const data = await requestAPI<any>(
-        '?' + new URLSearchParams([['query', search]]).toString(),
+        '?' +
+          new URLSearchParams([
+            ['query', search],
+            ['case_sensitive', caseSensitive.toString()],
+            ['whole_word', wholeWord.toString()],
+            ['use_regex', useRegex.toString()]
+          ]).toString(),
         {
           method: 'GET'
         }
@@ -52,6 +98,9 @@ export class SearchReplaceModel extends VDomModel {
   }
 
   private _searchString: string;
+  private _caseSensitive: boolean;
+  private _wholeWord: boolean;
+  private _useRegex: boolean;
   private _queryResults: any;
   private _debouncedStartSearch: Debouncer;
 }
@@ -74,6 +123,48 @@ export class SearchReplaceView extends VDomRenderer<SearchReplaceModel> {
             (this.model.searchString = event.target.value)
           }
         />
+        <Button
+          appearance={this.model.caseSensitive === true ? 'accent' : 'neutral'}
+          onClick={() => {
+            this.model.caseSensitive = !this.model.caseSensitive;
+            this.model.getSearchString(
+              this.model.searchString,
+              this.model.caseSensitive,
+              this.model.wholeWord,
+              this.model.useRegex
+            );
+          }}
+        >
+          Case Sensitive
+        </Button>
+        <Button
+          appearance={this.model.wholeWord === true ? 'accent' : 'neutral'}
+          onClick={() => {
+            this.model.wholeWord = !this.model.wholeWord;
+            this.model.getSearchString(
+              this.model.searchString,
+              this.model.caseSensitive,
+              this.model.wholeWord,
+              this.model.useRegex
+            );
+          }}
+        >
+          Whole World
+        </Button>
+        <Button
+          appearance={this.model.useRegex === true ? 'accent' : 'neutral'}
+          onClick={() => {
+            this.model.useRegex = !this.model.useRegex;
+            this.model.getSearchString(
+              this.model.searchString,
+              this.model.caseSensitive,
+              this.model.wholeWord,
+              this.model.useRegex
+            );
+          }}
+        >
+          Use Regex
+        </Button>
         <pre>{JSON.stringify(this.model.queryResults, undefined, 4)}</pre>
       </>
     );