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