Skip to content

Commit

Permalink
Merge pull request #58 from certego/develop
Browse files Browse the repository at this point in the history
0.1.7
  • Loading branch information
drosetti authored Nov 3, 2023
2 parents 0c3d2e7 + 7098c8e commit 1666690
Show file tree
Hide file tree
Showing 8 changed files with 67 additions and 5 deletions.
3 changes: 3 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
2 changes: 1 addition & 1 deletion example/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion example/src/layouts/AppFooter.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
44 changes: 44 additions & 0 deletions src/components/table/filters.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 } }) {
Expand All @@ -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({
Expand Down Expand Up @@ -135,6 +178,7 @@ function SliderColumnFilter({

export {
DefaultColumnFilter,
DebounceColumnFilter,
SelectOptionsFilter,
SelectColumnFilter,
SliderColumnFilter,
Expand Down
1 change: 1 addition & 0 deletions src/hooks/index.js
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
export { default as useAxiosComponentLoader } from "./useAxiosComponentLoader";
export { default as useFuzzySearch } from "./useFuzzySearch";
export { default as useDebounceInput } from "./useDebounceInput";
14 changes: 14 additions & 0 deletions src/hooks/useDebounceInput.jsx
Original file line number Diff line number Diff line change
@@ -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]);
}

0 comments on commit 1666690

Please sign in to comment.