0.1.7

CHANGELOG.md

@@ -2,6 +2,9 @@
 
 **[Get it on npm](https://www.npmjs.com/package/certego-ui)**
 
+## [v0.1.7](https://github.com/certego/certego-ui/releases/tag/v0.1.7)
+Added debounce hook and debounce filter for tables to delay the requests from the frontend
+
 ## [v0.1.6](https://github.com/certego/certego-ui/releases/tag/v0.1.6)
 Export style for selectable items in dropdown 
 

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.6";
+const CERTEGO_UI_VERSION = "v0.1.7";
 const selector = (state) => state.toasts;
 
 function AppFooter() {

package.json

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

src/components/table/filters.jsx

@@ -2,6 +2,7 @@
 import React from "react";
 import classnames from "classnames";
 import { Input } from "reactstrap";
+import useDebounceInput from "../../hooks/useDebounceInput";
 
 // Define a default UI for filtering
 function DefaultColumnFilter({ column: { filterValue, setFilter, id } }) {
@@ -26,6 +27,48 @@ function DefaultColumnFilter({ column: { filterValue, setFilter, id } }) {
   );
 }
 
+// This is a debounce filter based on DefaultColumnFilter
+function DebounceColumnFilter({
+  column: { filterValue, setFilter, id },
+}) {
+  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}`}
+      type="search"
+      bsSize="sm"
+      className={classnames(
+        {
+          "bg-body border-secondary": filterValue,
+        },
+        "input-dark",
+      )}
+      value={inputValue}
+      onChange={(e) => {
+        setInputValue(e.target.value);
+      }}
+      onKeyPress={(e) => {
+        // if the user presses 'enter' 
+        // the request is sent without waiting
+        if (e.key === "Enter") {
+          setFilter(e.target.value || undefined);
+        }
+      }}
+      onPaste={(e) => {
+        // if copy-paste is done, the request is sent without waiting
+        setFilter(e.clipboardData.getData("text/plain") || undefined);
+      }}
+      placeholder="Search keyword.."
+    />
+  );
+}
+
 // This is a custom filter UI for selecting
 // a unique option from a list
 function SelectColumnFilter({
@@ -135,6 +178,7 @@ function SliderColumnFilter({
 
 export {
   DefaultColumnFilter,
+  DebounceColumnFilter,
   SelectOptionsFilter,
   SelectColumnFilter,
   SliderColumnFilter,

src/hooks/index.js

@@ -1,2 +1,3 @@
 export { default as useAxiosComponentLoader } from "./useAxiosComponentLoader";
 export { default as useFuzzySearch } from "./useFuzzySearch";
+export { default as useDebounceInput } from "./useDebounceInput";

src/hooks/useDebounceInput.jsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+/*
+ * React hook for debounce input. 
+ */
+export default function useDebounceInput(inputValue, delay, setFunction) {
+    React.useEffect(() => {
+      const timer = setTimeout(() => {
+        setFunction(inputValue);
+      }, delay);
+      return () => clearTimeout(timer);
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [inputValue]);
+}