diff --git a/CHANGELOG.md b/CHANGELOG.md
index 52662e9..4d53352 100644
--- a/CHANGELOG.md
+++ b/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)
diff --git a/example/package-lock.json b/example/package-lock.json
index b5c362c..ba63808 100644
--- a/example/package-lock.json
+++ b/example/package-lock.json
@@ -19,7 +19,7 @@
},
"..": {
"name": "@certego/certego-ui",
- "version": "0.1.10",
+ "version": "0.1.11",
"license": "MIT",
"dependencies": {
"classnames": "^2.3.1",
diff --git a/example/src/layouts/AppFooter.jsx b/example/src/layouts/AppFooter.jsx
index d34d5fb..19de5e8 100644
--- a/example/src/layouts/AppFooter.jsx
+++ b/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() {
diff --git a/package-lock.json b/package-lock.json
index 174c8d8..7629de8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@certego/certego-ui",
- "version": "0.1.10",
+ "version": "0.1.11",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@certego/certego-ui",
- "version": "0.1.10",
+ "version": "0.1.11",
"license": "MIT",
"dependencies": {
"classnames": "^2.3.1",
diff --git a/package.json b/package.json
index f856bc0..3b830c8 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/table/filters.jsx b/src/components/table/filters.jsx
index ac975a6..f5cf211 100644
--- 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 (
-
- );
-}
-
-// 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 (
{
- 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
index 0a86ffc..a73a4f0 100644
--- 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]);
}
\ No newline at end of file