changed DefaultColumnFilter (#71)

* changed table filters * remove DebounceColumnFilter export
certego · Dec 1, 2023 · a5a7ae8 · a5a7ae8
1 parent f4c3f6e
commit a5a7ae8
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 46 deletions.
diff --git a/src/components/table/filters.jsx b/src/components/table/filters.jsx
@@ -6,38 +6,11 @@ import useDebounceInput from "../../hooks/useDebounceInput";
 
 // Define a default UI for filtering
 function DefaultColumnFilter({ column: { filterValue, setFilter, id } }) {
-  // Set undefined to remove the filter entirely
-  const onChange = (e) => setFilter(e.target.value || undefined);
-
-  return (
-    <Input
-      id={`datatable-select-${id}`}
-      type="search"
-      bsSize="sm"
-      className={classnames(
-        {
-          "bg-body border-secondary": filterValue,
-        },
-        "input-dark"
-      )}
-      value={filterValue || ""}
-      onChange={onChange}
-      placeholder="Search keyword.."
-    />
-  );
-}
-
-// This is a debounce filter based on DefaultColumnFilter
-function DebounceColumnFilter({
-  column: { filterValue, setFilter, id },
-}) {
+  // state
   const [inputValue, setInputValue] = React.useState(
     filterValue !== undefined ? filterValue : "",
   );
 
-  // wait the user terminated to typing and then perform the request
-  useDebounceInput(inputValue, 2000, setFilter);
-
   return (
     <Input
       id={`datatable-select-${id}`}
@@ -47,21 +20,26 @@ function DebounceColumnFilter({
         {
           "bg-body border-secondary": filterValue,
         },
-        "input-dark",
+        "input-dark"
       )}
       value={inputValue}
-      onChange={(e) => {
-        setInputValue(e.target.value);
-      }}
-      onKeyPress={(e) => {
-        // if the user presses 'enter' 
-        // the request is sent without waiting
+      onChange={(e) => setInputValue(e.target.value)}
+      onKeyDown={(e) => {
+        // the request is sent if the user presses 'enter'
         if (e.key === "Enter") {
           setFilter(e.target.value || undefined);
         }
       }}
+      onKeyUp={(e) => {
+        // if the user presses 'backspace' 
+        // the request is sent if input value is empty
+        if (e.key === "Backspace" && e.target.value === "") {
+          // Set undefined to remove the filter entirely
+          setFilter(undefined);
+        }
+      }}
       onPaste={(e) => {
-        // if copy-paste is done, the request is sent without waiting
+        // if copy-paste is done, the request is sent automatically
         setFilter(e.clipboardData.getData("text/plain") || undefined);
       }}
       placeholder="Search keyword.."
@@ -178,7 +156,6 @@ function SliderColumnFilter({
 
 export {
   DefaultColumnFilter,
-  DebounceColumnFilter,
   SelectOptionsFilter,
   SelectColumnFilter,
   SliderColumnFilter,

diff --git a/src/hooks/useDebounceInput.jsx b/src/hooks/useDebounceInput.jsx
@@ -4,16 +4,11 @@ import React from "react";
  * React hook for debounce input. 
  */
 export default function useDebounceInput(inputValue, delay, setFunction) {
-  const initialized = React.useRef("");
   React.useEffect(() => {
-    if (initialized.current !== inputValue) {
-      initialized.current = inputValue;
-      const timer = setTimeout(() => {
-        setFunction(inputValue);
-      }, delay);
-      return () => clearTimeout(timer);
-    }
-    return null;
+    const timer = setTimeout(() => {
+      setFunction(inputValue);
+    }, delay);
+    return () => clearTimeout(timer);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [inputValue]);
 }