rez-table-listing-mui 1.0.28 → 1.0.30

package/src/components/filter/components/forms/index.tsx

@@ -15,7 +15,7 @@ import {
 } from "../../../../types/filter";
 import { Controller, useForm } from "react-hook-form";
 import FormTextfield from "./components/Textfield";
-import React, { useEffect, useMemo } from "react";
+import React, { useEffect, useMemo, useCallback } from "react";
 import FormSelect from "./components/Select";
 import FormDatePicker from "./components/Date";
 import FormDropdown from "./components/Dropdown";
@@ -23,6 +23,7 @@ import FormMultiSelect from "./components/Multi-Select";
 import { CraftTableOptionsProps } from "../../../../types/table-options";
 import FilterCriteria from "./components/Filter-criteria";
 import CustomSearch from "../search";
+import { customDebounce } from "../../../../libs/utils/debounce";
 
 interface FormValues {
   filterName: string;
@@ -106,9 +107,18 @@ const FilterForm = ({
 
   // Reset form when filters change
   useEffect(() => {
-    reset(defaultValues);
+    if (!isDirty) reset(defaultValues);
   }, [selectedFilters, filterName]);
 
+  // Create a debounced version of the filter update function
+  const debouncedUpdateFilters = useCallback(
+    customDebounce((updatedFilters: UpdatedFilterStateProps[]) => {
+      setSelectedFilters(updatedFilters);
+      setFilters(updatedFilters);
+    }, 1000), // 1000ms delay
+    [setSelectedFilters, setFilters]
+  );
+
   // Effect to update filters when form values change
   useEffect(() => {
     if (isDirty) {
@@ -128,10 +138,10 @@ const FilterForm = ({
         return filter;
       });
 
-      setSelectedFilters(updatedFilters);
-      setFilters(updatedFilters);
+      // Use the debounced update function instead of direct updates
+      debouncedUpdateFilters(updatedFilters);
     }
-  }, [formValues]);
+  }, [formValues, isDirty, selectedFilters, debouncedUpdateFilters]);
 
   // Cleanup effect
   useEffect(() => {
@@ -428,7 +438,7 @@ const FilterForm = ({
               },
             }}
             // onClick={() => setSaveFilterModalOpen(true)}
-            // disabled={editMode && !isDirty}
+            disabled={editMode && !isDirty}
             onClick={() => {
               setSavedFilterModalOpen && setSavedFilterModalOpen(true);
             }}

package/src/components/filter/components/search/index.tsx

@@ -6,6 +6,7 @@ interface SearchInputProps {
   value: string;
   onChange: (value: string) => void;
   placeholder?: string;
+  className?: string;
 }
 
 const CustomSearch = ({
@@ -28,10 +29,14 @@ const CustomSearch = ({
       value={search}
       onChange={handleChange}
       placeholder={placeholder}
+      className={"search-input"}
       InputProps={{
         startAdornment: (
           <InputAdornment position="start">
-            <SearchIcon sx={{ color: "#888888", fontSize: "20px" }} />
+            <SearchIcon
+              sx={{ color: "#888888", fontSize: "20px" }}
+              className="search-icon-svg"
+            />
           </InputAdornment>
         ),
       }}

package/src/components/filter/index.tsx

@@ -241,14 +241,18 @@ const FilterDrawer = ({
             },
             {
               label: "Delete",
+
               onClick: () => {
                 onDeleteFilter && onDeleteFilter();
-
                 setDeleteFilterModalOpen(false);
                 setEditMode && setEditMode(false);
               },
               variant: "contained",
-              sx: { color: "white", backgroundColor: "#f63d68" },
+              sx: {
+                color: "white",
+                backgroundColor: "#f63d68",
+                "&:hover": { backgroundColor: "#f63d68" },
+              },
             },
           ]}
           maxWidth="xs"

package/src/components/index-table.tsx

@@ -33,6 +33,7 @@ function TableWrapper<T>({
   customRenderFn = {},
   // styleOptions,
   shouldHideColumn,
+  emptyListComponent,
 }: CraftTableProps<T>) {
   if (!Array.isArray(data)) {
     throw new Error("data must be an array of objects.");
@@ -274,6 +275,8 @@ function TableWrapper<T>({
             {loaderText && <p>{loaderText}</p>}
           </div>
         )
+      ) : !isLoading && data.length === 0 && emptyListComponent ? (
+        emptyListComponent
       ) : (
         <div
           // {...tableWrapperProps}

package/src/libs/utils/debounce.ts

@@ -0,0 +1,15 @@
+export const customDebounce = <T extends (...args: any[]) => any>(
+  func: T,
+  delay: number
+) => {
+  let timerId: NodeJS.Timeout;
+
+  return function (this: any, ...args: Parameters<T>) {
+    const context = this;
+
+    clearTimeout(timerId);
+    timerId = setTimeout(() => {
+      func.apply(context, args);
+    }, delay);
+  };
+};

package/src/types/table.ts

@@ -78,6 +78,7 @@ export interface CraftTableProps<T> {
   customRenderFn?: CustomRenderFnMap<T>;
   shouldHideColumn?: (accessorKey?: string) => boolean;
   styleOptions?: CraftTableStyleProps;
+  emptyListComponent?: React.ReactNode;
 }
 export interface CraftTableComponentProps<T> {
   table: Table<T>;