next-helios-fe 1.8.119 → 1.8.121

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.8.119",
+  "version": "1.8.121",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

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

@@ -78,18 +78,18 @@ export const Checkbox: React.FC<CheckboxProps> = ({
           )}
         </div>
       )}
-      <button
-        type="button"
-        className={`flex items-center justify-start w-8 h-5 border rounded-full bg-secondary-bg overflow-hidden cursor-pointer duration-300 group-has-[:checked]/checkbox:justify-end group-has-[:checked]/checkbox:bg-primary group-has-[:disabled]/checkbox:bg-secondary-light group-has-[:disabled:checked]/checkbox:bg-secondary-dark focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-0 focus:shadow focus:shadow-primary focus:border-primary-dark ${
-          options?.variant !== "switch" && "hidden"
-        }`}
-        disabled={rest.disabled}
-        onClick={() => {
-          inputRef.current?.click();
-        }}
-      >
-        <div className="w-4 h-4 rounded-full bg-secondary duration-300 group-has-[:checked]/checkbox:bg-secondary-bg group-has-[:disabled]/checkbox:bg-secondary-dark group-has-[:disabled:checked]/checkbox:bg-secondary-bg"></div>
-      </button>
+      {options?.variant === "switch" && (
+        <button
+          type="button"
+          className="flex items-center justify-start w-8 h-5 border rounded-full bg-secondary-bg overflow-hidden cursor-pointer duration-300 group-has-[:checked]/checkbox:justify-end group-has-[:checked]/checkbox:bg-primary group-has-[:disabled]/checkbox:bg-secondary-light group-has-[:disabled:checked]/checkbox:bg-secondary-dark focus:outline-none focus:ring-1 focus:ring-primary focus:ring-offset-0 focus:shadow focus:shadow-primary focus:border-primary-dark"
+          disabled={rest.disabled}
+          onClick={() => {
+            inputRef.current?.click();
+          }}
+        >
+          <div className="w-4 h-4 rounded-full bg-secondary duration-300 group-has-[:checked]/checkbox:bg-secondary-bg group-has-[:disabled]/checkbox:bg-secondary-dark group-has-[:disabled:checked]/checkbox:bg-secondary-bg"></div>
+        </button>
+      )}
     </label>
   );
 };

package/src/components/table/index.tsx

@@ -71,6 +71,18 @@ interface TableProps {
   };
   loading?: boolean;
   actionColumn?: (e?: any) => React.ReactNode;
+  getDynamicTableValue?: (e: {
+    search: string;
+    page: number;
+    dataOffset: number;
+    maxRow: number;
+    filter: any[];
+    categoryFilter: any[];
+    sortBy: any;
+  }) => void;
+  setDynamicTableValue?: {
+    totalData: number;
+  };
 }
 
 interface TableComponentProps extends React.FC<TableProps> {
@@ -85,12 +97,14 @@ export const Table: TableComponentProps = ({
   checkbox,
   loading,
   actionColumn,
+  getDynamicTableValue,
+  setDynamicTableValue,
 }) => {
   const paginationRef = useRef<HTMLDivElement>(null);
   const [excludedColumn, setExcludedColumn] = useState<string[]>([]);
   const [search, setSearch] = useState<string>("");
   const [filter, setFilter] = useState<any[]>([]);
-  const [categoryFilter, setCategoryFilter] = useState<any[]>([]);
+  const [categoryFilter, setCategoryFilter] = useState<any>({});
   const [maxRow, setMaxRow] = useState<number>(options?.maxRow || 10);
   const [page, setPage] = useState<number>(1);
   const [selected, setSelected] = useState<
@@ -134,9 +148,13 @@ export const Table: TableComponentProps = ({
       })
     );
 
+    const tempCategoryFilter: any = {};
+
     header
       ?.filter((item) => item.type === "category")
       ?.map((item) => {
+        const tempDataByCategory: string[] = [];
+
         data
           .map((dataItem) => dataItem[item.key as keyof typeof dataItem])
           .sort((a, b) =>
@@ -151,11 +169,15 @@ export const Table: TableComponentProps = ({
           )
           .filter((value, index, self) => self.indexOf(value) === index)
           .map((value) => {
-            if (!categoryFilter.includes(value)) {
-              setCategoryFilter((prev) => [...prev, value]);
+            if (!tempDataByCategory.includes(value)) {
+              tempDataByCategory.push(value);
             }
           });
+
+        tempCategoryFilter[item.key] = tempDataByCategory;
       });
+
+    setCategoryFilter(tempCategoryFilter);
   }, [data]);
 
   useEffect(() => {
@@ -188,68 +210,85 @@ export const Table: TableComponentProps = ({
   };
 
   const filteredData = useMemo(() => {
-    const tempData = data
-      ?.filter((item) => {
-        if (search === "") {
-          return item;
-        } else if (
-          header
-            ?.filter((item) => !excludedColumn.includes(item.key))
-            ?.some((headerItem) => {
-              return item[headerItem.key as keyof typeof item]
-                ?.toString()
-                ?.toLowerCase()
-                ?.includes(search.toLowerCase());
+    if (getDynamicTableValue) {
+      return data;
+    } else {
+      const tempData = data
+        ?.filter((item) => {
+          if (search === "") {
+            return item;
+          } else if (
+            header
+              ?.filter((item) => !excludedColumn.includes(item.key))
+              ?.some((headerItem) => {
+                return item[headerItem.key as keyof typeof item]
+                  ?.toString()
+                  ?.toLowerCase()
+                  ?.includes(search.toLowerCase());
+              })
+          ) {
+            return item;
+          }
+        })
+        ?.filter((item) => {
+          return filter.every((filterItem) => {
+            return (item[filterItem.key as keyof typeof item] || "")
+              ?.toString()
+              ?.toLowerCase()
+              ?.includes(filterItem.value.toLowerCase());
+          });
+        })
+        ?.filter((item) => {
+          const convertedCategoryFilter: any[] = [];
+
+          Object.keys(categoryFilter)?.map((keyItem: string) =>
+            categoryFilter[keyItem].map((categoryItem: any) => {
+              convertedCategoryFilter.push(categoryItem);
             })
-        ) {
-          return item;
-        }
-      })
-      ?.filter((item) => {
-        return filter.every((filterItem) => {
-          return (item[filterItem.key as keyof typeof item] || "")
-            ?.toString()
-            ?.toLowerCase()
-            ?.includes(filterItem.value.toLowerCase());
+          );
+
+          return header
+            ?.filter((item) => !excludedColumn?.includes(item.key))
+            ?.filter((headerItem) => headerItem.type === "category")
+            ?.every((headerItem) => {
+              return convertedCategoryFilter?.includes(
+                item[headerItem.key as keyof typeof item]
+              );
+            });
         });
-      })
-      ?.filter((item) => {
-        return header
-          ?.filter((item) => !excludedColumn?.includes(item.key))
-          ?.filter((headerItem) => headerItem.type === "category")
-          ?.every((headerItem) => {
-            return categoryFilter?.includes(
-              item[headerItem.key as keyof typeof item]
-            );
-          });
-      });
 
-    if (sortBy?.column === "") {
-      return tempData;
-    } else {
-      return tempData?.sort((a, b): any => {
-        if (sortBy?.column === "") {
-          return a?.[options?.customDataIdName ?? "id"] >
-            b?.[options?.customDataIdName ?? "id"]
-            ? 1
-            : -1;
-        } else if (sortBy?.order === "asc") {
-          return a[sortBy?.column as keyof typeof a] >
-            b[sortBy?.column as keyof typeof b]
-            ? 1
-            : -1;
-        } else if (sortBy?.order === "desc") {
-          return a[sortBy?.column as keyof typeof a] <
-            b[sortBy?.column as keyof typeof b]
-            ? 1
-            : -1;
-        }
-      });
+      if (sortBy?.column === "") {
+        return tempData;
+      } else {
+        return tempData?.sort((a, b): any => {
+          if (sortBy?.column === "") {
+            return a?.[options?.customDataIdName ?? "id"] >
+              b?.[options?.customDataIdName ?? "id"]
+              ? 1
+              : -1;
+          } else if (sortBy?.order === "asc") {
+            return a[sortBy?.column as keyof typeof a] >
+              b[sortBy?.column as keyof typeof b]
+              ? 1
+              : -1;
+          } else if (sortBy?.order === "desc") {
+            return a[sortBy?.column as keyof typeof a] <
+              b[sortBy?.column as keyof typeof b]
+              ? 1
+              : -1;
+          }
+        });
+      }
     }
   }, [header, data, filter, categoryFilter, search, sortBy]);
 
   useEffect(() => {
-    if (page > Math.ceil(filteredData?.length / maxRow)) {
+    if (
+      page >
+      Math.ceil(
+        (setDynamicTableValue?.totalData ?? filteredData?.length) / maxRow
+      )
+    ) {
       setPage(1);
       paginationRef.current?.scrollTo({
         left: 0,
@@ -258,6 +297,20 @@ export const Table: TableComponentProps = ({
     }
   }, [filteredData]);
 
+  useEffect(() => {
+    if (getDynamicTableValue) {
+      getDynamicTableValue({
+        search,
+        page,
+        dataOffset: (page - 1) * maxRow,
+        maxRow,
+        filter,
+        categoryFilter,
+        sortBy,
+      });
+    }
+  }, [search, page, maxRow, filter, categoryFilter, sortBy]);
+
   const headerArr = header
     ?.filter((item) => !excludedColumn?.includes(item.key))
     ?.map((item) => {
@@ -303,6 +356,7 @@ export const Table: TableComponentProps = ({
               {item?.type === "category" && (
                 <div className="font-normal">
                   <Dropdown
+                    placement="bottom-end"
                     dismissOnClick={false}
                     trigger={
                       <button
@@ -340,15 +394,23 @@ export const Table: TableComponentProps = ({
                           <Dropdown.Item
                             key={value}
                             onClick={() => {
-                              if (categoryFilter.includes(value)) {
-                                setCategoryFilter(
-                                  categoryFilter.filter(
-                                    (prev) => prev !== value
-                                  )
+                              const tempCategoryFilter = { ...categoryFilter };
+
+                              if (categoryFilter[item.key].includes(value)) {
+                                tempCategoryFilter[item.key] = categoryFilter[
+                                  item.key
+                                ].filter(
+                                  (categoryItem: string) =>
+                                    categoryItem !== value
                                 );
                               } else {
-                                setCategoryFilter([...categoryFilter, value]);
+                                tempCategoryFilter[item.key] = [
+                                  ...categoryFilter[item.key],
+                                  value,
+                                ];
                               }
+
+                              setCategoryFilter(tempCategoryFilter);
                             }}
                           >
                             <div className="pointer-events-none capitalize">
@@ -362,7 +424,8 @@ export const Table: TableComponentProps = ({
                                     : value?.toString()
                                 }
                                 checked={
-                                  categoryFilter.includes(value) ?? false
+                                  categoryFilter[item.key].includes(value) ??
+                                  false
                                 }
                                 readOnly
                               />
@@ -375,7 +438,11 @@ export const Table: TableComponentProps = ({
               )}
             </div>
             {options?.toolbar?.columnSearch?.show !== false && (
-              <div className="relative flex items-center">
+              <div
+                className={`relative flex items-center ${
+                  item?.type === "category" && "invisible"
+                }`}
+              >
                 <Icon
                   icon="ic:round-search"
                   className="absolute text-sm text-disabled"
@@ -590,6 +657,7 @@ export const Table: TableComponentProps = ({
             )}
             {options?.toolbar?.filter?.show !== false && (
               <Dropdown
+                placement="bottom-end"
                 dismissOnClick={false}
                 trigger={
                   <Tooltip
@@ -699,7 +767,8 @@ export const Table: TableComponentProps = ({
                     <Form.Checkbox
                       options={{ disableHover: true }}
                       checked={
-                        filteredData?.length !== 0 &&
+                        (setDynamicTableValue?.totalData ??
+                          filteredData?.length) !== 0 &&
                         filteredData?.filter((item) => {
                           return selected?.find((selectedItem) => {
                             return (
@@ -708,7 +777,9 @@ export const Table: TableComponentProps = ({
                               ] === item[options?.customDataIdName ?? "id"]
                             );
                           });
-                        })?.length === filteredData?.length
+                        })?.length ===
+                          (setDynamicTableValue?.totalData ??
+                            filteredData?.length)
                           ? true
                           : false
                       }
@@ -722,7 +793,9 @@ export const Table: TableComponentProps = ({
                                 ] === item[options?.customDataIdName ?? "id"]
                               );
                             });
-                          })?.length === filteredData?.length
+                          })?.length ===
+                          (setDynamicTableValue?.totalData ??
+                            filteredData?.length)
                         ) {
                           if (checkbox?.onChange) {
                             checkbox?.onChange(
@@ -830,10 +903,15 @@ export const Table: TableComponentProps = ({
             </tr>
           </thead>
           <tbody className="divide-y">
-            {!loading && filteredData && filteredData.length !== 0 && dataArr}
+            {!loading &&
+              filteredData &&
+              (setDynamicTableValue?.totalData ?? filteredData?.length) !== 0 &&
+              dataArr}
           </tbody>
         </table>
-        {(loading || !filteredData || filteredData.length === 0) && (
+        {(loading ||
+          !filteredData ||
+          (setDynamicTableValue?.totalData ?? filteredData?.length) === 0) && (
           <div className="flex h-full items-center justify-center whitespace-nowrap bg-secondary-bg px-4 py-1.5 text-center">
             {loading ? (
               <Icon
@@ -887,15 +965,19 @@ export const Table: TableComponentProps = ({
               }}
             />
           </div>
-          {filteredData && filteredData.length !== 0 && (
-            <span className="hidden text-sm text-disabled lg:block">{`Showing ${
-              (page - 1) * maxRow + 1
-            } to ${
-              page * maxRow > filteredData?.length
-                ? filteredData?.length
-                : page * maxRow
-            } of ${filteredData?.length} entries`}</span>
-          )}
+          {filteredData &&
+            (setDynamicTableValue?.totalData ?? filteredData?.length) !== 0 && (
+              <span className="hidden text-sm text-disabled lg:block">{`Showing ${
+                (page - 1) * maxRow + 1
+              } to ${
+                page * maxRow >
+                (setDynamicTableValue?.totalData ?? filteredData?.length)
+                  ? setDynamicTableValue?.totalData ?? filteredData?.length
+                  : page * maxRow
+              } of ${
+                setDynamicTableValue?.totalData ?? filteredData?.length
+              } entries`}</span>
+            )}
           <div className="flex items-center gap-2 text-xs">
             <button
               type="button"
@@ -922,7 +1004,10 @@ export const Table: TableComponentProps = ({
               className="flex max-w-20 gap-2 overflow-auto xl:max-w-[124px] [&::-webkit-scrollbar]:hidden"
             >
               {Array.from({
-                length: Math.ceil(filteredData?.length / maxRow),
+                length: Math.ceil(
+                  (setDynamicTableValue?.totalData ?? filteredData?.length) /
+                    maxRow
+                ),
               }).map((_, index) => {
                 return (
                   <button
@@ -943,7 +1028,10 @@ export const Table: TableComponentProps = ({
             <button
               type="button"
               className="hidden h-9 min-w-9 items-center justify-center rounded-md border bg-secondary-bg hover:bg-secondary-light disabled:pointer-events-none disabled:bg-secondary-light disabled:text-disabled md:flex"
-              disabled={filteredData?.length <= page * maxRow}
+              disabled={
+                (setDynamicTableValue?.totalData ?? filteredData?.length) <=
+                page * maxRow
+              }
               onClick={() => {
                 setPage((prev) => prev + 1);
               }}
@@ -953,9 +1041,17 @@ export const Table: TableComponentProps = ({
             <button
               type="button"
               className="flex h-9 min-w-9 items-center justify-center rounded-md border bg-secondary-bg hover:bg-secondary-light disabled:pointer-events-none disabled:bg-secondary-light disabled:text-disabled"
-              disabled={filteredData?.length <= page * maxRow}
+              disabled={
+                (setDynamicTableValue?.totalData ?? filteredData?.length) <=
+                page * maxRow
+              }
               onClick={() => {
-                setPage(Math.ceil(filteredData?.length / maxRow));
+                setPage(
+                  Math.ceil(
+                    (setDynamicTableValue?.totalData ?? filteredData?.length) /
+                      maxRow
+                  )
+                );
               }}
             >
               <Icon icon="gravity-ui:chevrons-right" />