next-helios-fe 1.8.138 → 1.8.140

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.8.138",
+  "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);
@@ -153,71 +155,80 @@ export const Table: TableComponentProps = ({
   }, []);
 
   useEffect(() => {
-    setFilter(
-      header?.map((item) => {
-        return { key: item.key, value: "", type: item.type };
-      })
-    );
+    if (!isReadyForDynamicValue) {
+      setFilter(
+        header?.map((item) => {
+          return { key: item.key, value: "", type: item.type };
+        })
+      );
 
-    const tempCategoryFilter: any = {};
-    const tempDateFilter: any = {};
+      setDelayedFilter(
+        header?.map((item) => {
+          return { key: item.key, value: "", type: item.type };
+        })
+      );
 
-    header
-      ?.filter((item) => item.type === "category")
-      ?.map((item) => {
-        if (dynamicTable?.setValue?.categoryFilter?.[item.key]) {
-          tempCategoryFilter[item.key] =
-            dynamicTable?.setValue?.categoryFilter[item.key];
-        } else {
-          if (data.length !== 0) {
-            const tempDataByCategory: string[] = [];
+      const tempCategoryFilter: any = {};
+      const tempDateFilter: any = {};
 
-            data
-              .map((dataItem) => dataItem[item.key as keyof typeof dataItem])
-              .sort((a, b) =>
-                (a === undefined
-                  ? "undefined"
-                  : a === null
-                  ? "null"
-                  : a.toString()
-                ).localeCompare(
-                  b === undefined
+      header
+        ?.filter((item) => item.type === "category")
+        ?.map((item) => {
+          if (dynamicTable?.setValue?.categoryFilter?.[item.key]) {
+            tempCategoryFilter[item.key] =
+              dynamicTable?.setValue?.categoryFilter[item.key];
+          } else {
+            if (data.length !== 0) {
+              const tempDataByCategory: string[] = [];
+
+              data
+                .map((dataItem) => dataItem[item.key as keyof typeof dataItem])
+                .sort((a, b) =>
+                  (a === undefined
                     ? "undefined"
-                    : b === null
+                    : a === null
                     ? "null"
-                    : b.toString()
+                    : a.toString()
+                  ).localeCompare(
+                    b === undefined
+                      ? "undefined"
+                      : b === null
+                      ? "null"
+                      : b.toString()
+                  )
                 )
-              )
-              .filter((value, index, self) => self.indexOf(value) === index)
-              .map((value) => {
-                if (!tempDataByCategory.includes(value)) {
-                  tempDataByCategory.push(value);
-                }
-              });
+                .filter((value, index, self) => self.indexOf(value) === index)
+                .map((value) => {
+                  if (!tempDataByCategory.includes(value)) {
+                    tempDataByCategory.push(value);
+                  }
+                });
 
-            tempCategoryFilter[item.key] = tempDataByCategory;
+              tempCategoryFilter[item.key] = tempDataByCategory;
+            }
           }
-        }
-      });
+        });
 
-    header
-      ?.filter((item) => item.type === "date")
-      ?.map((item) => {
-        if (dynamicTable?.setValue?.dateFilter?.[item.key]) {
-          tempDateFilter[item.key] =
-            dynamicTable?.setValue?.dateFilter[item.key];
-        } else {
-          tempDateFilter[item.key] = [];
-        }
-      });
+      header
+        ?.filter((item) => item.type === "date")
+        ?.map((item) => {
+          if (dynamicTable?.setValue?.dateFilter?.[item.key]) {
+            tempDateFilter[item.key] =
+              dynamicTable?.setValue?.dateFilter[item.key];
+          } else {
+            tempDateFilter[item.key] = [];
+          }
+        });
 
-    setCategoryFilter(tempCategoryFilter);
-    setDateFilter(tempDateFilter);
-    setIsReadyForDynamicValue(true);
+      setCategoryFilter(tempCategoryFilter);
+      setDateFilter(tempDateFilter);
+      setIsReadyForDynamicValue(true);
+    }
   }, [
+    data,
+    isReadyForDynamicValue,
     dynamicTable?.setValue?.categoryFilter,
     dynamicTable?.setValue?.dateFilter,
-    ...(!dynamicTable?.setValue?.categoryFilter ? [data] : []),
   ]);
 
   useEffect(() => {
@@ -241,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;
@@ -365,7 +368,7 @@ export const Table: TableComponentProps = ({
             page,
             dataOffset: (page - 1) * maxRow,
             maxRow,
-            filter,
+            filter: delayedFilter,
             categoryFilter,
             dateFilter,
             sortBy,
@@ -376,7 +379,7 @@ export const Table: TableComponentProps = ({
             page,
             dataOffset: (page - 1) * maxRow,
             maxRow,
-            filter,
+            filter: delayedFilter,
             categoryFilter,
             dateFilter,
             sortBy,
@@ -386,7 +389,7 @@ export const Table: TableComponentProps = ({
             page,
             dataOffset: (page - 1) * maxRow,
             maxRow,
-            filter,
+            filter: delayedFilter,
             categoryFilter,
             dateFilter,
             sortBy,
@@ -400,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) => {
@@ -621,6 +640,8 @@ export const Table: TableComponentProps = ({
                           : filterItem;
                       })
                     );
+
+                    debouncedUpdate(item.key, e.target.value);
                   }}
                 />
                 {((item?.type === "date" &&
@@ -640,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] &&