From cd64bf3e7cce455e0c3ffce3e2d5850630adde44 Mon Sep 17 00:00:00 2001
From: Arpit <arpitnath42@gmail.com>
Date: Mon, 27 Sep 2021 09:08:34 +0530
Subject: [PATCH] Fixes table-search (#836)

* fixed table-search and able to search immediately as you type

* remove console.log
---
 .../Editor/Components/Table/GlobalFilter.jsx  | 53 ++++++++++++++++
 .../src/Editor/Components/Table/Table.jsx     | 61 ++++---------------
 2 files changed, 66 insertions(+), 48 deletions(-)
 create mode 100644 frontend/src/Editor/Components/Table/GlobalFilter.jsx

diff --git a/frontend/src/Editor/Components/Table/GlobalFilter.jsx b/frontend/src/Editor/Components/Table/GlobalFilter.jsx
new file mode 100644
index 0000000000..015779b110
--- /dev/null
+++ b/frontend/src/Editor/Components/Table/GlobalFilter.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+// Table Search
+export const GlobalFilter = ({
+  preGlobalFilteredRows,
+  globalFilter,
+  useAsyncDebounce,
+  setGlobalFilter,
+  onComponentOptionChanged,
+  component,
+  serverSideSearch,
+  onEvent,
+}) => {
+  const count = preGlobalFilteredRows.length;
+  const [value, setValue] = React.useState(globalFilter);
+  const onChange = useAsyncDebounce((filterValue) => {
+    setGlobalFilter(filterValue || undefined);
+  }, 200);
+
+  const handleSearchTextChange = (text) => {
+    setValue(text);
+    onChange(text);
+
+    onComponentOptionChanged(component, 'searchText', text).then(() => {
+      if (serverSideSearch === true) {
+        onEvent('onSearch', { component, data: {} });
+      }
+    });
+  };
+
+  return (
+    <div className="ms-2 d-inline-block">
+      Search:{' '}
+      <input
+        type="text"
+        className="global-search-field"
+        defaultValue={value || ''}
+        onBlur={(e) => {
+          handleSearchTextChange(e.target.value);
+        }}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            handleSearchTextChange(e.target.value);
+          }
+        }}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={`${count} records`}
+        style={{
+          border: '0',
+        }}
+      />
+    </div>
+  );
+};
diff --git a/frontend/src/Editor/Components/Table/Table.jsx b/frontend/src/Editor/Components/Table/Table.jsx
index 7380683c4b..e95dad3004 100644
--- a/frontend/src/Editor/Components/Table/Table.jsx
+++ b/frontend/src/Editor/Components/Table/Table.jsx
@@ -21,9 +21,8 @@ import { Tags } from './Tags';
 import { Radio } from './Radio';
 import { Toggle } from './Toggle';
 import { Datepicker } from './Datepicker';
-
+import { GlobalFilter } from './GlobalFilter';
 var _ = require('lodash');
-
 export function Table({
   id,
   width,
@@ -671,47 +670,6 @@ export function Table({
     }
   }, [state.columnResizing.isResizingColumn]);
 
-  function GlobalFilter() {
-    const count = preGlobalFilteredRows.length;
-    const [value, setValue] = React.useState(state.globalFilter);
-    const onChange = useAsyncDebounce((filterValue) => {
-      setGlobalFilter(filterValue || undefined);
-    }, 200);
-
-    const handleSearchTextChange = (text) => {
-      setValue(text);
-      onChange(text);
-
-      onComponentOptionChanged(component, 'searchText', text).then(() => {
-        if (serverSideSearch === true) {
-          onEvent('onSearch', { component, data: {} });
-        }
-      });
-    };
-
-    return (
-      <div className="ms-2 d-inline-block">
-        Search:{' '}
-        <input
-          className="global-search-field"
-          defaultValue={value || ''}
-          onBlur={(e) => {
-            handleSearchTextChange(e.target.value);
-          }}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter') {
-              handleSearchTextChange(e.target.value);
-            }
-          }}
-          placeholder={`${count} records`}
-          style={{
-            border: '0',
-          }}
-        />
-      </div>
-    );
-  }
-
   return (
     <div
       data-disabled={parsedDisabledState}
@@ -726,11 +684,18 @@ export function Table({
       {displaySearchBox && (
         <div className="card-body border-bottom py-3 jet-data-table-header">
           <div className="d-flex">
-            {displaySearchBox && (
-              <div className="ms-auto text-muted">
-                <GlobalFilter />
-              </div>
-            )}
+            <div className="ms-auto text-muted">
+              <GlobalFilter
+                preGlobalFilteredRows={preGlobalFilteredRows}
+                globalFilter={state.globalFilter}
+                useAsyncDebounce={useAsyncDebounce}
+                setGlobalFilter={setGlobalFilter}
+                onComponentOptionChanged={onComponentOptionChanged}
+                component={component}
+                serverSideSearch={serverSideSearch}
+                onEvent={onEvent}
+              />
+            </div>
           </div>
         </div>
       )}