next-helios-fe 1.8.139 → 1.8.140

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.8.139",
+  "version": "1.8.140",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -33,6 +33,7 @@
     "react-pin-field": "^3.1.5",
     "react-syntax-highlighter": "^15.5.0",
     "sass": "^1.77.8",
+    "use-debounce": "^10.0.5",
     "xlsx": "^0.18.5"
   },
   "peerDependencies": {

package/src/components/form/input/date.tsx

@@ -74,13 +74,13 @@ export const Date: React.FC<DateProps> = ({
         dayjs().subtract(7, "days").format("YYYY-MM-DD") &&
       dayjs(data[1]).format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD")
     ) {
-      return "Last 7 days";
+      return "Last 7 Days";
     } else if (
       dayjs(data[0]).format("YYYY-MM-DD") ===
         dayjs().subtract(1, "months").format("YYYY-MM-DD") &&
       dayjs(data[1]).format("YYYY-MM-DD") === dayjs().format("YYYY-MM-DD")
     ) {
-      return "Last 30 days";
+      return "Last 30 Days";
     } else {
       return "Custom";
     }
@@ -215,7 +215,7 @@ export const Date: React.FC<DateProps> = ({
                 <button
                   type="button"
                   className="w-40 my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
-                  disabled={dateRangeLabel(tempValue) === "Last 7 days"}
+                  disabled={dateRangeLabel(tempValue) === "Last 7 Days"}
                   onClick={() => {
                     setTempValue([
                       dayjs().subtract(7, "days").startOf("day"),
@@ -233,12 +233,12 @@ export const Date: React.FC<DateProps> = ({
                     }
                   }}
                 >
-                  Last 7 days
+                  Last 7 Days
                 </button>
                 <button
                   type="button"
                   className="w-40 my-0.5 px-4 py-2 rounded-md text-sm text-left hover:bg-secondary-light disabled:bg-primary-transparent disabled:text-primary"
-                  disabled={dateRangeLabel(tempValue) === "Last 30 days"}
+                  disabled={dateRangeLabel(tempValue) === "Last 30 Days"}
                   onClick={() => {
                     setTempValue([
                       dayjs().subtract(1, "months").startOf("day"),
@@ -256,7 +256,7 @@ export const Date: React.FC<DateProps> = ({
                     }
                   }}
                 >
-                  Last 30 days
+                  Last 30 Days
                 </button>
                 <button
                   type="button"

package/src/components/table/index.tsx

@@ -6,6 +6,7 @@ import dayjs from "dayjs";
 import utc from "dayjs/plugin/utc";
 import { Form, Button, Dropdown, Tooltip, Calendar } from "../../components";
 import { Action, type ActionProps } from "./action";
+import { useDebouncedCallback } from "use-debounce";
 
 dayjs.extend(utc);
 
@@ -111,6 +112,7 @@ export const Table: TableComponentProps = ({
   const [excludedColumn, setExcludedColumn] = useState<string[]>([]);
   const [search, setSearch] = useState<string>("");
   const [filter, setFilter] = useState<any[]>([]);
+  const [delayedFilter, setDelayedFilter] = useState<any>([]);
   const [categoryFilter, setCategoryFilter] = useState<any>({});
   const [dateFilter, setDateFilter] = useState<any>({});
   const [maxRow, setMaxRow] = useState<number>(options?.maxRow || 10);
@@ -152,14 +154,20 @@ export const Table: TableComponentProps = ({
     setExcludedColumn(tempExcludedColumn.map((item) => item.key));
   }, []);
 
-  useEffect(
-    () => {
+  useEffect(() => {
+    if (!isReadyForDynamicValue) {
       setFilter(
         header?.map((item) => {
           return { key: item.key, value: "", type: item.type };
         })
       );
 
+      setDelayedFilter(
+        header?.map((item) => {
+          return { key: item.key, value: "", type: item.type };
+        })
+      );
+
       const tempCategoryFilter: any = {};
       const tempDateFilter: any = {};
 
@@ -215,18 +223,13 @@ export const Table: TableComponentProps = ({
       setCategoryFilter(tempCategoryFilter);
       setDateFilter(tempDateFilter);
       setIsReadyForDynamicValue(true);
-    },
-    dynamicTable?.setValue?.categoryFilter || dynamicTable?.setValue?.dateFilter
-      ? [
-          dynamicTable?.setValue?.categoryFilter,
-          dynamicTable?.setValue?.dateFilter,
-        ]
-      : [
-          data,
-          dynamicTable?.setValue?.categoryFilter,
-          dynamicTable?.setValue?.dateFilter,
-        ]
-  );
+    }
+  }, [
+    data,
+    isReadyForDynamicValue,
+    dynamicTable?.setValue?.categoryFilter,
+    dynamicTable?.setValue?.dateFilter,
+  ]);
 
   useEffect(() => {
     if (page === 1) {
@@ -249,14 +252,6 @@ export const Table: TableComponentProps = ({
     }
   }, [page]);
 
-  const handleExportData = (dataTitle: string, data: any[]) => {
-    const fileName = `${dataTitle}_${dayjs().format("YYYY-MM-DD_HH-mm-ss")}`;
-    const worksheet = xlsx.utils.json_to_sheet(data);
-    const workbook = xlsx.utils.book_new();
-    xlsx.utils.book_append_sheet(workbook, worksheet, "Data");
-    xlsx.writeFile(workbook, fileName + ".xlsx");
-  };
-
   const filteredData = useMemo(() => {
     if (dynamicTable?.getValue) {
       return data;
@@ -373,7 +368,7 @@ export const Table: TableComponentProps = ({
             page,
             dataOffset: (page - 1) * maxRow,
             maxRow,
-            filter,
+            filter: delayedFilter,
             categoryFilter,
             dateFilter,
             sortBy,
@@ -384,7 +379,7 @@ export const Table: TableComponentProps = ({
             page,
             dataOffset: (page - 1) * maxRow,
             maxRow,
-            filter,
+            filter: delayedFilter,
             categoryFilter,
             dateFilter,
             sortBy,
@@ -394,7 +389,7 @@ export const Table: TableComponentProps = ({
             page,
             dataOffset: (page - 1) * maxRow,
             maxRow,
-            filter,
+            filter: delayedFilter,
             categoryFilter,
             dateFilter,
             sortBy,
@@ -408,12 +403,28 @@ export const Table: TableComponentProps = ({
     search,
     page,
     maxRow,
-    filter,
+    delayedFilter,
     categoryFilter,
     dateFilter,
     sortBy,
   ]);
 
+  const debouncedUpdate = useDebouncedCallback((key: string, value: string) => {
+    setDelayedFilter(
+      filter?.map((filterItem) => {
+        return filterItem.key === key ? { ...filterItem, value } : filterItem;
+      })
+    );
+  }, 1250);
+
+  const handleExportData = (dataTitle: string, data: any[]) => {
+    const fileName = `${dataTitle}_${dayjs().format("YYYY-MM-DD_HH-mm-ss")}`;
+    const worksheet = xlsx.utils.json_to_sheet(data);
+    const workbook = xlsx.utils.book_new();
+    xlsx.utils.book_append_sheet(workbook, worksheet, "Data");
+    xlsx.writeFile(workbook, fileName + ".xlsx");
+  };
+
   const headerArr = header
     ?.filter((item) => !excludedColumn?.includes(item.key))
     ?.map((item) => {
@@ -629,6 +640,8 @@ export const Table: TableComponentProps = ({
                           : filterItem;
                       })
                     );
+
+                    debouncedUpdate(item.key, e.target.value);
                   }}
                 />
                 {((item?.type === "date" &&
@@ -648,6 +661,13 @@ export const Table: TableComponentProps = ({
                               : filterItem;
                           })
                         );
+                        setDelayedFilter(
+                          filter?.map((filterItem) => {
+                            return filterItem.key === item.key
+                              ? { ...filterItem, value: "" }
+                              : filterItem;
+                          })
+                        );
                       } else if (
                         item?.type === "date" &&
                         dateFilter[item.key]?.[0] &&