Merge pull request #72 from certego/develop

* changed table filters

* remove DebounceColumnFilter export

Co-authored-by: Martina Carella <m.carella@certego.net>

CHANGELOG.md

@@ -2,7 +2,10 @@
 
 **[Get it on npm](https://www.npmjs.com/package/certego-ui)**
 
-## [v0.1.10](https://github.com/certego/certego-ui/releases/tag/v0.1.9)
+## [v0.1.11](https://github.com/certego/certego-ui/releases/tag/v0.1.11)
+Removed debounce filter for columns
+
+## [v0.1.10](https://github.com/certego/certego-ui/releases/tag/v0.1.10)
 Fixed bug in debounce filter
 
 ## [v0.1.9](https://github.com/certego/certego-ui/releases/tag/v0.1.9)

example/src/layouts/AppFooter.jsx

@@ -5,7 +5,7 @@ import { FaTwitter } from "react-icons/fa";
 import { Toaster, ScrollToTopButton, useToastr } from "@certego/certego-ui";
 
 // constants
-const CERTEGO_UI_VERSION = "v0.1.10";
+const CERTEGO_UI_VERSION = "v0.1.11";
 const selector = (state) => state.toasts;
 
 function AppFooter() {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@certego/certego-ui",
-  "version": "0.1.10",
+  "version": "0.1.11",
   "description": "certego components library (react.js, reactstrap, etc)",
   "author": "certego",
   "license": "MIT",

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,

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]);
 }