next-helios-fe 1.5.3 → 1.6.1

package/src/components/table/index.tsx

@@ -115,9 +115,9 @@ export const Table: TableComponentProps = ({
   }, [checkbox?.checked]);
 
   useEffect(() => {
-    if (selected && selected.length !== 0) {
+    if (selected && selected?.length !== 0) {
       checkbox?.onChange &&
-        checkbox.onChange({
+        checkbox?.onChange({
           target: {
             checked: selected,
           },
@@ -127,14 +127,14 @@ export const Table: TableComponentProps = ({
 
   useEffect(() => {
     setFilter(
-      header.map((item) => {
+      header?.map((item) => {
         return { key: item.key, value: "", type: item.type };
       })
     );
 
     header
-      .filter((item) => item.type === "category")
-      .map((item) => {
+      ?.filter((item) => item.type === "category")
+      ?.map((item) => {
         data
           .map((dataItem) => dataItem[item.key as keyof typeof dataItem])
           .sort((a, b) => (a || "").localeCompare(b || ""))
@@ -163,9 +163,9 @@ export const Table: TableComponentProps = ({
   };
 
   const handleOnNextClick = () => {
-    if (page + 1 === Math.ceil(data.length / maxRow)) {
+    if (page + 1 === Math.ceil(data?.length / maxRow)) {
       paginationRef.current?.scrollTo({
-        left: paginationRef.current.scrollWidth,
+        left: paginationRef.current?.scrollWidth,
         behavior: "smooth",
       });
     } else {
@@ -184,8 +184,8 @@ export const Table: TableComponentProps = ({
           return item;
         } else if (
           header
-            .filter((item) => !excludedColumn.includes(item.key))
-            .some((headerItem) => {
+            ?.filter((item) => !excludedColumn.includes(item.key))
+            ?.some((headerItem) => {
               return item[headerItem.key as keyof typeof item]
                 ?.toString()
                 ?.toLowerCase()
@@ -203,31 +203,31 @@ export const Table: TableComponentProps = ({
             ?.includes(filterItem.value.toLowerCase());
         });
       })
-      .filter((item) => {
+      ?.filter((item) => {
         return header
-          .filter((item) => !excludedColumn.includes(item.key))
-          .filter((headerItem) => headerItem.type === "category")
-          .every((headerItem) => {
-            return categoryFilter.includes(
+          ?.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 === "") {
+    if (sortBy?.column === "") {
       return tempData;
     } else {
       return tempData?.sort((a, b): any => {
-        if (sortBy.column === "") {
+        if (sortBy?.column === "") {
           return a.id > b.id ? 1 : -1;
-        } else if (sortBy.order === "asc") {
-          return a[sortBy.column as keyof typeof a] >
-            b[sortBy.column as keyof typeof b]
+        } 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]
+        } else if (sortBy?.order === "desc") {
+          return a[sortBy?.column as keyof typeof a] <
+            b[sortBy?.column as keyof typeof b]
             ? 1
             : -1;
         }
@@ -236,7 +236,7 @@ export const Table: TableComponentProps = ({
   }, [header, data, filter, categoryFilter, search, sortBy]);
 
   useEffect(() => {
-    if (page > Math.ceil(filteredData.length / maxRow)) {
+    if (page > Math.ceil(filteredData?.length / maxRow)) {
       setPage(1);
       paginationRef.current?.scrollTo({
         left: 0,
@@ -246,7 +246,7 @@ export const Table: TableComponentProps = ({
   }, [filteredData]);
 
   const headerArr = header
-    ?.filter((item) => !excludedColumn.includes(item.key))
+    ?.filter((item) => !excludedColumn?.includes(item.key))
     ?.map((item) => {
       return (
         <th
@@ -301,15 +301,15 @@ export const Table: TableComponentProps = ({
                     }
                   >
                     {data
-                      .map(
+                      ?.map(
                         (dataItem) =>
                           dataItem[item.key as keyof typeof dataItem]
                       )
-                      .sort((a, b) => (a || "").localeCompare(b || ""))
-                      .filter(
+                      ?.sort((a, b) => (a || "").localeCompare(b || ""))
+                      ?.filter(
                         (value, index, self) => self.indexOf(value) === index
                       )
-                      .map((value) => {
+                      ?.map((value) => {
                         return (
                           <Dropdown.Item
                             key={value}
@@ -350,12 +350,12 @@ export const Table: TableComponentProps = ({
                   className="w-full px-6 pt-0 pb-0.5 border-default border-t-0 border-b border-x-0 bg-secondary-bg text-sm font-normal placeholder:duration-300 placeholder:translate-x-0 [&::-webkit-search-cancel-button]:appearance-none focus:placeholder:translate-x-1 placeholder:text-slate-300 focus:outline-none focus:ring-0 focus:border-primary-dark disabled:bg-secondary-light disabled:text-slate-400"
                   placeholder="search.."
                   value={
-                    filter.find((filterItem) => filterItem.key === item.key)
+                    filter?.find((filterItem) => filterItem.key === item.key)
                       ?.value
                   }
                   onChange={(e) => {
                     setFilter(
-                      filter.map((filterItem) => {
+                      filter?.map((filterItem) => {
                         return filterItem.key === item.key
                           ? { ...filterItem, value: e.target.value }
                           : filterItem;
@@ -363,13 +363,13 @@ export const Table: TableComponentProps = ({
                     );
                   }}
                 />
-                {filter.find((filterItem) => filterItem.key === item.key)
+                {filter?.find((filterItem) => filterItem.key === item.key)
                   ?.value && (
                   <button
                     className="absolute right-0 rounded-full text-slate-400 hover:bg-secondary-light"
                     onClick={() => {
                       setFilter(
-                        filter.map((filterItem) => {
+                        filter?.map((filterItem) => {
                           return filterItem.key === item.key
                             ? { ...filterItem, value: "" }
                             : filterItem;
@@ -397,15 +397,19 @@ export const Table: TableComponentProps = ({
               <Form.Checkbox
                 options={{ disableHover: true }}
                 checked={
-                  selected.find((selectedItem) => selectedItem.id === item.id)
+                  selected?.find((selectedItem) => selectedItem.id === item.id)
                     ? true
                     : false
                 }
                 onClick={(e) => {
                   if (
-                    selected.find((selectedItem) => selectedItem.id === item.id)
+                    selected?.find(
+                      (selectedItem) => selectedItem.id === item.id
+                    )
                   ) {
-                    setSelected(selected.filter((prev) => prev.id !== item.id));
+                    setSelected(
+                      selected?.filter((prev) => prev.id !== item.id)
+                    );
                   } else {
                     setSelected((prev) => [...prev, item]);
                   }
@@ -419,7 +423,7 @@ export const Table: TableComponentProps = ({
             </td>
           )}
           {header
-            ?.filter((headerItem) => !excludedColumn.includes(headerItem.key))
+            ?.filter((headerItem) => !excludedColumn?.includes(headerItem.key))
             ?.map((headerItem) => {
               if (headerItem?.render) {
                 return (
@@ -515,14 +519,14 @@ export const Table: TableComponentProps = ({
                   </button>
                 }
               >
-                {header.map((item) => {
+                {header?.map((item) => {
                   return (
                     <Dropdown.Item
                       key={item.key}
                       onClick={() => {
-                        if (excludedColumn.includes(item.key)) {
+                        if (excludedColumn?.includes(item.key)) {
                           setExcludedColumn(
-                            excludedColumn.filter((prev) => prev !== item.key)
+                            excludedColumn?.filter((prev) => prev !== item.key)
                           );
                         } else {
                           setExcludedColumn([...excludedColumn, item.key]);
@@ -533,7 +537,7 @@ export const Table: TableComponentProps = ({
                         <Form.Checkbox
                           options={{ disableHover: true }}
                           label={item.title}
-                          checked={!excludedColumn.includes(item.key)}
+                          checked={!excludedColumn?.includes(item.key)}
                         />
                       </div>
                     </Dropdown.Item>
@@ -582,24 +586,24 @@ export const Table: TableComponentProps = ({
                     <Form.Checkbox
                       options={{ disableHover: true }}
                       checked={
-                        filteredData.length !== 0 &&
-                        filteredData.filter((item) => {
-                          return selected.find((selectedItem) => {
+                        filteredData?.length !== 0 &&
+                        filteredData?.filter((item) => {
+                          return selected?.find((selectedItem) => {
                             return selectedItem.id === item.id;
                           });
-                        }).length === filteredData.length
+                        })?.length === filteredData?.length
                       }
                       onChange={(e) => {
                         if (
-                          filteredData.filter((item) => {
-                            return selected.find((selectedItem) => {
+                          filteredData?.filter((item) => {
+                            return selected?.find((selectedItem) => {
                               return selectedItem.id === item.id;
                             });
-                          }).length === filteredData.length
+                          })?.length === filteredData?.length
                         ) {
                           setSelected((prev) => {
                             return prev.filter((prevItem) => {
-                              return !filteredData.find((filteredItem) => {
+                              return !filteredData?.find((filteredItem) => {
                                 return filteredItem.id === prevItem.id;
                               });
                             });
@@ -698,10 +702,10 @@ export const Table: TableComponentProps = ({
           <span className="hidden md:block text-sm text-slate-400">{`Showing ${
             (page - 1) * maxRow + 1
           } to ${
-            page * maxRow > filteredData.length
-              ? filteredData.length
+            page * maxRow > filteredData?.length
+              ? filteredData?.length
               : page * maxRow
-          } of ${filteredData.length} entries`}</span>
+          } of ${filteredData?.length} entries`}</span>
           <div className="flex items-center gap-2 text-xs">
             <button
               type="button"
@@ -733,7 +737,7 @@ export const Table: TableComponentProps = ({
               className="flex gap-2 max-w-20 overflow-auto [&::-webkit-scrollbar]:hidden"
             >
               {Array.from({
-                length: Math.ceil(filteredData.length / maxRow),
+                length: Math.ceil(filteredData?.length / maxRow),
               }).map((_, index) => {
                 return (
                   <button
@@ -754,7 +758,7 @@ export const Table: TableComponentProps = ({
             <button
               type="button"
               className="hidden md:flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
-              disabled={filteredData.length <= page * maxRow}
+              disabled={filteredData?.length <= page * maxRow}
               onClick={() => {
                 setPage((prev) => prev + 1);
                 handleOnNextClick();
@@ -765,11 +769,11 @@ export const Table: TableComponentProps = ({
             <button
               type="button"
               className="flex justify-center items-center min-w-9 h-9 border rounded-md bg-secondary-bg hover:bg-secondary-light disabled:bg-secondary-light disabled:text-slate-400 disabled:pointer-events-none"
-              disabled={filteredData.length <= page * maxRow}
+              disabled={filteredData?.length <= page * maxRow}
               onClick={() => {
-                setPage(Math.ceil(filteredData.length / maxRow));
+                setPage(Math.ceil(filteredData?.length / maxRow));
                 paginationRef.current?.scrollTo({
-                  left: paginationRef.current.scrollWidth,
+                  left: paginationRef.current?.scrollWidth,
                   behavior: "smooth",
                 });
               }}