gbs-add-block 1.0.11 → 1.0.13

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v1.0.11)
+# GBS Building Blocks 2.0 (v1.0.13)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,10 +6,10 @@ Latest and upgraded version of GBS building blocks with headless UI and removed
 
 For detailed documentation on usage and props, Please visit: [Building Block Documentation v2.0](https://blackmax-designs.gitbook.io/building-block-v2.0)
 
-## What's New 🎉 (Ver 1.0.11)
+## What's New 🎉 (Ver 1.0.13)
 
-- Uploader Enhancement
-- Select & MultiSelect Bug Fix
+- Data Grid Enhancement
+- End of Support for Grid Component
 
 ## Authors
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "1.0.11",
+  "version": "1.0.13",
   "description": "React Component Library",
   "type": "module",
   "files": [

package/source/components/datagrid/context/GridContext.tsx

@@ -70,7 +70,7 @@ export const GridProvider: React.FC<{
     goToFirstPage,
     goToPage,
     resetPage,
-  } = usePagination(totalPages, lazy);
+  } = usePagination(totalPages, lazy, workingDataSource, pageSettings);
 
   // Search functionality
   const { searchParam, handleSearchInput, handleSearch } = useSearch({

package/source/components/datagrid/hooks/usePagination.ts

@@ -1,9 +1,15 @@
 import { useState, useCallback, useEffect } from "react";
 
-export const usePagination = (totalPages: number, lazy: boolean) => {
+export const usePagination = (
+  totalPages: number,
+  lazy: boolean,
+  dataSource?: any[],
+  pageSettings?: { pageNumber: number }
+) => {
   const [currentPage, setCurrentPage] = useState(0);
   const [pageStart, setPageStart] = useState(0);
   const [pageEnd, setPageEnd] = useState(10);
+  const [prevDataLength, setPrevDataLength] = useState(0);
 
   const updatePageRange = useCallback(
     (page: number) => {
@@ -22,6 +28,37 @@ export const usePagination = (totalPages: number, lazy: boolean) => {
     }
   }, [totalPages, lazy, pageStart]);
 
+  // This will handle the case when dataSource changes
+  // and adjust the current page accordingly
+  useEffect(() => {
+    if (dataSource && prevDataLength > 0) {
+      const currentDataLength = dataSource.length;
+
+      if (currentDataLength > prevDataLength) {
+        const lastPage = totalPages - 1;
+        setCurrentPage(lastPage);
+        updatePageRange(lastPage);
+      } else if (currentDataLength < prevDataLength) {
+        const rowsPerPage = lazy ? 1 : pageSettings?.pageNumber || 10;
+        const startIndex = currentPage * rowsPerPage;
+
+        if (startIndex >= currentDataLength && currentPage > 0) {
+          const newPage = currentPage - 1;
+          setCurrentPage(newPage);
+          updatePageRange(newPage);
+        }
+      }
+    }
+    setPrevDataLength(dataSource?.length || 0);
+  }, [
+    dataSource?.length,
+    totalPages,
+    updatePageRange,
+    prevDataLength,
+    currentPage,
+    lazy,
+  ]);
+
   const nextPage = useCallback(() => {
     setCurrentPage((prevPage) => {
       if (prevPage < totalPages - 1) {

package/source/components/multiselect/index.tsx

@@ -153,7 +153,7 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
                   selected.includes(value) ? "stroke-gray-500" : ""
                 }`}
               />
-              {label}
+              {label.length > 20 ? `${label.substring(0, 20)}...` : label}
             </button>
           ))
         ) : (

package/source/components/select/index.tsx

@@ -170,7 +170,7 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
                 selectedItem === value ? "stroke-gray-500" : ""
               }`}
             />
-            {label}
+            {label.length > 20 ? `${label.substring(0, 20)}...` : label}
           </button>
         ))
       ) : (

package/source/components/grid/FilterPopup.tsx

@@ -1,85 +0,0 @@
-import React from "react";
-import { useState } from "react";
-
-export default function FilterPopup({ show, columnHeader, filterAction }: any) {
-  const [filterValue, setFilterValue] = useState("");
-  const [filterType, setFilterType] = useState("contains");
-  const [isFilterActive, setIsFilterActive] = useState(false);
-
-  const handleFilterInput = (e: any) => {
-    const filterKeyword = e.target.value;
-    setFilterValue(filterKeyword);
-  };
-
-  const onCancel = () => {
-    filterAction({ type: "cancel" });
-  };
-
-  const applyFilter = () => {
-    filterAction({
-      type: "applyFilter",
-      filterValue,
-      filterType,
-      columnHeader,
-    });
-    show = false;
-    setIsFilterActive(true);
-  };
-
-  const clearFilter = () => {
-    setIsFilterActive(false);
-    filterAction({ type: "clearFilter", columnHeader });
-  };
-
-  return (
-    show && (
-      <div
-        className="absolute bg-gray-100 p-2 border z-50 mt-48 flex items-end flex-col shadow-lg gap-2 rounded-md dark:bg-gray-700"
-        role="dialog"
-      >
-        <select
-          name={`${columnHeader}-filter`}
-          id={`${columnHeader}-filter-id`}
-          className="w-full p-2 rounded-lg dark:bg-gray-600"
-          value={filterType}
-          onChange={(e: any) => {
-            setFilterType(e.target.value);
-          }}
-        >
-          <option value="contains">Contains</option>
-          <option value="starts_with">Starts With</option>
-          <option value="ends_with">Ends With</option>
-        </select>
-        <input
-          type="text"
-          placeholder="Enter filter value"
-          className="rounded-lg p-2 text-sm dark:bg-gray-600"
-          value={filterValue}
-          onInput={handleFilterInput}
-        />
-        <div className="mt-2">
-          <button
-            className="text-xs bg-red-600 text-white p-1 rounded-lg hover:bg-red-600"
-            onClick={onCancel}
-          >
-            Cancel
-          </button>
-          {isFilterActive && (
-            <button
-              className="text-xs bg-black text-white p-1 rounded-lg dark:bg-white dark:text-white"
-              onClick={clearFilter}
-            >
-              Clear Filter
-            </button>
-          )}
-          <button
-            className="text-xs bg-black text-white p-1 rounded-lg dark:bg-white dark:text-black"
-            onClick={applyFilter}
-          >
-            Apply Filter
-          </button>
-        </div>
-      </div>
-    )
-  );
-}

package/source/components/grid/Grid.tsx

@@ -1,653 +0,0 @@
-/**
- * Copyright (c) Grampro Business Services and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * Extended Documentation for Grid can be found at
- * https://psychedelic-step-e70.notion.site/Data-GRID-by-GBS-R-D-20ff97c899d24bc590215a6196435fa3
- */
-
-import React, {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useImperativeHandle,
-  useState,
-} from "react";
-import FilterPopup from "./FilterPopup";
-import {
-  clearFilterHelper,
-  exportToExcelHelper,
-  exportToPDFHelper,
-} from "./GridHelperFunctions";
-import { handleApplyFilterHelper } from "./GridHelperFunctions";
-import Icon from "../icon/Icon";
-import {
-  leftArrows,
-  leftArrow,
-  rightArrow,
-  rightArrows,
-  search,
-  listFilter,
-} from "../icon/iconPaths";
-import type { GridProps } from "./type";
-import { getSourceData } from "../utils";
-
-export const GridMemoised = forwardRef((props: GridProps, ref) => {
-  const {
-    dataSource,
-    columns = [],
-    pageSettings,
-    enableSearch = false,
-    lazy = false,
-    enableExcelExport = false,
-    excelName = "data",
-    enablePdfExport = false,
-    pdfName = "data",
-    pdfOptions = {},
-    gridButtonClass = "px-1 py-2 bg-white border rounded-lg text-xs text-black dark:bg-black dark:text-white",
-    selectAll = false,
-    onSelectRow,
-    isFetching,
-    tableHeaderStyle = "text-left border-b border-t bg-gray-50 px-2 py-4 dark:bg-gray-700 dark:text-white",
-    gridContainerClass = "flex flex-col min-w-screen border rounded-md overflow-hidden dark:bg-black",
-    gridColumnStyleSelectAll = "border-b px-4 text-sm dark:text-white",
-    gridColumnStyle = "border-b p-2 text-sm dark:text-white",
-    rowChange = () => {},
-    pageStatus = () => {},
-  } = props;
-
-  // States Handling Grid
-  const [workingDataSource, setWorkingDataSource] = useState<any>([]);
-  const [fallbackSourceData, setFallbackSourceData] = useState([]);
-  const [workingColumns, setWorkingColumns] = useState<any>([]);
-  const [currentPage, setCurrentPage] = useState(0);
-  const [pageStart, setPageStart] = useState(0);
-  const [pageEnd, setPageEnd] = useState(10);
-  const [totalPages, setTotalPages] = useState(0);
-  const [searchParam, setSearchParam] = useState("");
-  const [activeFilterArray, setActiveFilterArray] = useState<any>([]);
-  const [selectedRows, setSelectedRows] = useState<any[]>([]);
-
-  // This will returns the Page Navigation Status of Grid
-  // Such as totalPages in the grid, currentpage, etc..
-  useEffect(() => {
-    if (pageStatus) {
-      pageStatus({ currentPage: currentPage, totalPages: totalPages });
-    }
-  }, [pageStatus, currentPage, totalPages]);
-
-  // Function to handle API datasource
-  const getGridData = useCallback(async () => {
-    try {
-      const sourceData = await getSourceData(dataSource);
-      const gridData = sourceData.sourcedata;
-      setFallbackSourceData(gridData);
-      setWorkingDataSource(gridData);
-      const totalPages = Math.ceil(gridData.length / pageSettings.pageNumber);
-      setTotalPages(totalPages);
-      setPageEnd(Math.min(10, totalPages));
-    } catch (error) {
-      console.error("Error fetching grid source data:", error);
-    }
-  }, [dataSource, pageSettings.pageNumber]);
-
-  // Calculates total pages and determine dataSource type
-  useEffect(() => {
-    const handleDataSource = async () => {
-      if (Array.isArray(dataSource) && dataSource.length > 0) {
-        setWorkingDataSource(dataSource);
-        const totalPages = Math.ceil(
-          dataSource.length / pageSettings.pageNumber
-        );
-        setTotalPages(totalPages);
-        setPageEnd(Math.min(10, totalPages));
-      } else if (typeof dataSource === "string") {
-        await getGridData();
-      }
-    };
-
-    handleDataSource();
-  }, [dataSource, pageSettings]);
-
-  // Adds Filter Column
-  useEffect(() => {
-    if (columns && columns.length > 0) {
-      const filteredColumns = columns.map((column) => ({
-        ...column,
-        showFilterPopup: false,
-        isFilterActive: false,
-      }));
-      setWorkingColumns(filteredColumns);
-    }
-  }, [columns]);
-
-  useEffect(() => {
-    if (!columns || columns.length === 0) {
-      if (
-        workingDataSource.length > 0 &&
-        Object.keys(workingDataSource[0]).length > 0
-      ) {
-        const inferredColumns = Object.keys(workingDataSource[0]).map(
-          (key) => ({
-            field: key,
-            headerText: key.charAt(0).toUpperCase() + key.slice(1),
-            width: 150,
-          })
-        );
-        setWorkingColumns((prevColumns: any) => {
-          if (JSON.stringify(prevColumns) !== JSON.stringify(inferredColumns)) {
-            return inferredColumns;
-          }
-          return prevColumns;
-        });
-      }
-    }
-  }, [columns, workingDataSource]);
-
-  // *** Page Navigation Helper Methods Starts Here
-  const nextPage = () => {
-    setCurrentPage((prevPage) => {
-      if (prevPage < totalPages - 1) {
-        const newPage = prevPage + 1;
-        updatePageRange(newPage);
-        return newPage;
-      }
-      return prevPage;
-    });
-  };
-
-  const prevPage = () => {
-    setCurrentPage((prevPage) => {
-      if (prevPage > 0) {
-        const newPage = prevPage - 1;
-        updatePageRange(newPage);
-        return newPage;
-      }
-      return prevPage;
-    });
-  };
-
-  const goToEndPage = () => {
-    const lastPage = totalPages - 1;
-    setCurrentPage(lastPage);
-    updatePageRange(lastPage);
-  };
-
-  const goToFirstPage = () => {
-    setCurrentPage(0);
-    updatePageRange(0);
-  };
-
-  const goToPage = (page: number) => {
-    setCurrentPage(page);
-    updatePageRange(page);
-  };
-
-  const updatePageRange = (page: number) => {
-    const start = Math.floor(page / 10) * 10;
-    setPageStart(start);
-    setPageEnd(Math.min(start + 10, totalPages));
-  };
-  // Page Navigation Helper Methods Ends Here ***
-
-  // *** Functions handling global search starts here
-  const handleSearchInput = (e: any) => {
-    if (!lazy) {
-      const searchValue = e.target.value;
-      setSearchParam(searchValue);
-      if (searchValue === "") {
-        setWorkingDataSource(
-          fallbackSourceData.length > 0 ? fallbackSourceData : dataSource
-        );
-        const fallback =
-          fallbackSourceData.length > 0 ? fallbackSourceData : dataSource;
-        const totalPages = Math.ceil(fallback.length / pageSettings.pageNumber);
-        setTotalPages(totalPages);
-        setPageEnd(Math.min(pageStart + 10, totalPages));
-      }
-    }
-  };
-
-  const handleSearch = (searchParam: string) => {
-    const filteredData = workingDataSource.filter((item: any) =>
-      Object.values(item).some((val: any) => {
-        const trimmedVal = val.toString().toLowerCase().trim();
-        const trimmedSearchParam = searchParam.toLowerCase().trim();
-        return trimmedVal.includes(trimmedSearchParam);
-      })
-    );
-    setWorkingDataSource(filteredData);
-    const newTotalPages = Math.ceil(
-      filteredData.length / pageSettings.pageNumber
-    );
-    setTotalPages(newTotalPages);
-    const newCurrentPage = 0;
-    setCurrentPage(newCurrentPage);
-    const newPageStart = Math.floor(newCurrentPage / 10) * 10;
-    setPageStart(newPageStart);
-    setPageEnd(Math.min(newPageStart + 10, newTotalPages));
-  };
-  // Functions handling global search ends here ***
-
-  // This will render template passed to Grid
-  const renderCell = (rowData: any, column: any, rowIndex: number) => {
-    const cellValue = rowData[column.field];
-
-    if (column.template) {
-      return (
-        <column.template
-          rowData={rowData}
-          rowIndex={rowIndex + currentPage * pageSettings.pageNumber}
-          rowChange={(changes: any) => {
-            if (rowChange) rowChange(changes);
-          }}
-        />
-      );
-    }
-
-    if (column.tooltip) {
-      return (
-        <span title={cellValue?.toString()}>
-          {cellValue && cellValue.length > 10
-            ? `${cellValue.slice(0, 10)}...`
-            : cellValue}
-        </span>
-      );
-    }
-
-    return cellValue;
-  };
-
-  // *** Filter Handling Functions Starts Here
-  const toggleFilterPopup = (index: number) => {
-    setWorkingColumns((prevColumns: any) =>
-      prevColumns.map((column: any, i: any) =>
-        i === index
-          ? { ...column, showFilterPopup: !column.showFilterPopup }
-          : column
-      )
-    );
-  };
-
-  // Resetting pagination params for updating pagination
-  function resetPage(dataSource: any) {
-    const newTotalPages = Math.ceil(
-      dataSource.length / pageSettings.pageNumber
-    );
-
-    setTotalPages(newTotalPages);
-    setCurrentPage(0);
-    setPageStart(0);
-    setPageEnd(Math.min(10, newTotalPages));
-  }
-
-  // Applying Filter
-  function handleApplyFilter(event: any) {
-    const {
-      columns: updatedColumns,
-      workingDataSource: updatedFullDataSource,
-      activeFilterArray: updatedActiveFilterArray,
-    } = handleApplyFilterHelper(event, columns, workingDataSource);
-
-    setWorkingColumns(updatedColumns);
-    setWorkingDataSource(updatedFullDataSource);
-    setActiveFilterArray(updatedActiveFilterArray);
-
-    setActiveFilterArray(updatedActiveFilterArray);
-    resetPage(updatedFullDataSource);
-  }
-
-  // Clearing Filter
-  function clearFilter(event: any) {
-    const clearDataSource = Array.isArray(dataSource)
-      ? dataSource
-      : fallbackSourceData;
-    const {
-      columns: updatedColumns,
-      workingDataSource: updatedDataSource,
-      activeFilterArray: updatedActiveFilterArray,
-    } = clearFilterHelper(event, workingColumns, clearDataSource);
-
-    setWorkingColumns(updatedColumns);
-    setWorkingDataSource(updatedDataSource);
-    setActiveFilterArray(updatedActiveFilterArray);
-    resetPage(updatedDataSource);
-  }
-
-  const handleFilterAction = (action: any, colIndex: number) => {
-    switch (action.type) {
-      case "cancel":
-        toggleFilterPopup(colIndex);
-        break;
-      case "applyFilter":
-        handleApplyFilter(action);
-        break;
-      case "clearFilter":
-        clearFilter(action);
-        break;
-      default:
-        break;
-    }
-  };
-  // *** Filter Handling Functions Ends Here
-
-  // *** RowSelection Handling Logic Starts Here
-  const handleSelectAll = () => {
-    setSelectedRows(workingDataSource);
-    if (onSelectRow) onSelectRow(workingDataSource);
-  };
-
-  const handleSelect = (rowData: any) => {
-    setSelectedRows((prevData) => {
-      const isSelected = prevData.includes(rowData);
-      let updatedData;
-      if (isSelected) {
-        updatedData = prevData.filter((item) => item !== rowData);
-      } else {
-        updatedData = [...prevData, rowData];
-      }
-      if (onSelectRow) onSelectRow(updatedData);
-      return updatedData;
-    });
-  };
-
-  const isRowSelected = (rowData: any) => {
-    return selectedRows.includes(rowData);
-  };
-  // RowSelection Handling Logic Ends Here ***
-
-  // Making Grid Functions Accessible in Parent
-  useImperativeHandle(
-    ref,
-    () => {
-      return {
-        goToPage,
-        nextPage,
-        prevPage,
-        goToFirstPage,
-        goToEndPage,
-        handleSearch,
-        handleApplyFilter,
-        clearFilter,
-      };
-    },
-    []
-  );
-
-  // JSX Rendering
-  return (
-    <div className={gridContainerClass}>
-      <React.Fragment>
-        {/* Global utility logic */}
-        <div
-          className={`min-w-full flex justify-between items-center ${
-            enableExcelExport || enableSearch || enablePdfExport
-              ? "block"
-              : "hidden"
-          }`}
-        >
-          <div className="flex justify-end gap-2 px-1 py-3 flex-grow">
-            {enableExcelExport && (
-              <button
-                className={gridButtonClass}
-                onClick={() => {
-                  exportToExcelHelper(workingDataSource, columns, excelName);
-                }}
-              >
-                Export as Excel
-              </button>
-            )}
-            {enablePdfExport && (
-              <button
-                className={gridButtonClass}
-                onClick={() => {
-                  exportToPDFHelper(
-                    workingDataSource,
-                    columns,
-                    pdfName,
-                    pdfOptions
-                  );
-                }}
-              >
-                Export as PDF
-              </button>
-            )}
-            {enableSearch && (
-              <div className="flex gap-1">
-                <input
-                  type="search"
-                  value={searchParam}
-                  onChange={handleSearchInput}
-                  placeholder="search"
-                  className="outline-none p-2 text-sm font-normal bg-gray-50 rounded-lg max-sm:hidden dark:bg-black dark:border dark:text-white"
-                  onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
-                    if (event.key === "Enter") {
-                      handleSearch(searchParam);
-                    }
-                  }}
-                />
-                <button
-                  className="bg-white border rounded-lg text-black w-10 flex items-center justify-center dark:bg-black dark:text-white"
-                  onClick={() => handleSearch(searchParam)}
-                >
-                  <Icon
-                    elements={search}
-                    svgClass={"stroke-gray-500 fill-none dark:stroke-white"}
-                  />
-                </button>
-              </div>
-            )}
-          </div>
-        </div>
-
-        <div className="overflow-x-auto">
-          <table className="min-w-full">
-            <thead>
-              <tr>
-                {selectAll && (
-                  <th className="text-left border-b border-t bg-gray-50 px-4 py-4 dark:bg-gray-700 dark:text-white">
-                    <input type="checkbox" onChange={handleSelectAll} />
-                  </th>
-                )}
-                {/* Rendering column headers */}
-                {workingColumns.map((columnHeader: any, colIndex: number) => (
-                  <th
-                    key={colIndex}
-                    className={tableHeaderStyle}
-                    style={{
-                      width: columnHeader.width
-                        ? `${columnHeader.width}px`
-                        : "auto",
-                    }}
-                  >
-                    <div className="flex items-center relative">
-                      {columnHeader.headerText
-                        ? columnHeader.headerText
-                        : columnHeader.field}
-                      {columnHeader.filter && !columnHeader.template && (
-                        <React.Fragment>
-                          <button
-                            onClick={() => {
-                              toggleFilterPopup(colIndex);
-                            }}
-                          >
-                            <Icon
-                              dimensions={{ width: "12", height: "12" }}
-                              elements={listFilter}
-                              svgClass={`ml-2 fill-none dark:stroke-white ${
-                                activeFilterArray &&
-                                activeFilterArray.some(
-                                  (filter: any) =>
-                                    filter.filterColumn === columnHeader.field
-                                )
-                                  ? "stroke-red-400"
-                                  : "stroke-black"
-                              }`}
-                            />
-                          </button>
-                          <FilterPopup
-                            show={columnHeader.showFilterPopup}
-                            columnHeader={columnHeader.field}
-                            filterAction={(action: any) => {
-                              handleFilterAction(action, colIndex);
-                            }}
-                          />
-                        </React.Fragment>
-                      )}
-                    </div>
-                  </th>
-                ))}
-              </tr>
-            </thead>
-            <tbody>
-              {/* rendering body */}
-              {workingDataSource.length > 0 && !isFetching ? (
-                workingDataSource
-                  .slice(
-                    currentPage * pageSettings.pageNumber,
-                    (currentPage + 1) * pageSettings.pageNumber
-                  )
-                  .map((rowData: any, rowIndex: number) => (
-                    <tr
-                      key={rowIndex}
-                      className="hover:bg-gray-50 dark:hover:bg-gray-900 cursor-pointer"
-                    >
-                      {selectAll && (
-                        <td className={gridColumnStyleSelectAll}>
-                          <input
-                            type="checkbox"
-                            checked={isRowSelected(rowData)}
-                            onChange={() => handleSelect(rowData)}
-                          />
-                        </td>
-                      )}
-                      {workingColumns.map((column: any, colIndex: number) => (
-                        <td
-                          key={colIndex}
-                          className={gridColumnStyle}
-                          style={{
-                            width: column.width ? `${column.width}px` : "auto",
-                          }}
-                        >
-                          {renderCell(rowData, column, rowIndex)}
-                        </td>
-                      ))}
-                    </tr>
-                  ))
-              ) : (
-                <tr>
-                  <td
-                    colSpan={workingColumns.length}
-                    className="text-center p-4 border-b text-sm"
-                  >
-                    {isFetching
-                      ? "Fetching Data Please Wait..."
-                      : "No Data Found"}
-                  </td>
-                </tr>
-              )}
-            </tbody>
-          </table>
-        </div>
-        {/* Pagination logic */}
-        <div className="flex p-2 justify-between dark:text-white">
-          <div className="flex gap-4">
-            <button
-              onClick={goToFirstPage}
-              className={`${
-                currentPage === 0 ? "text-gray-200 dark:text-gray-700" : ""
-              }`}
-            >
-              <Icon
-                elements={leftArrows}
-                svgClass={`${
-                  currentPage === 0
-                    ? "stroke-gray-200 fill-none dark:stroke-gray-700"
-                    : "stroke-black fill-none dark:stroke-white"
-                }`}
-              />
-            </button>
-            <button onClick={prevPage}>
-              <Icon
-                elements={leftArrow}
-                svgClass={`${
-                  currentPage === 0
-                    ? "stroke-gray-200 fill-none dark:stroke-gray-700"
-                    : "stroke-black fill-none dark:stroke-white"
-                }`}
-              />
-            </button>
-            <div className="flex flex-row gap-3 items-center">
-              {pageStart > 0 && (
-                <button
-                  className="p-1 w-5 h-5 flex items-center justify-center rounded-full"
-                  onClick={() => goToPage(pageStart - 1)}
-                >
-                  ...
-                </button>
-              )}
-              {workingDataSource.length > 0 &&
-                Array.from({ length: pageEnd - pageStart }).map((_, i) => (
-                  <button
-                    key={i}
-                    onClick={() => goToPage(pageStart + i)}
-                    className={`${
-                      pageStart + i === currentPage
-                        ? "font-bold text-white p-2 h-6 bg-black flex items-center justify-center rounded-md w-auto dark:bg-white dark:text-black"
-                        : ""
-                    }`}
-                  >
-                    {pageStart + i + 1}
-                  </button>
-                ))}
-              {pageEnd < totalPages && (
-                <button onClick={() => goToPage(pageEnd)}>...</button>
-              )}
-            </div>
-            <button
-              onClick={nextPage}
-              className={`${
-                currentPage === totalPages - 1 || workingDataSource.length <= 0
-                  ? "text-gray-200 dark:text-gray-700"
-                  : ""
-              }`}
-            >
-              <Icon
-                elements={rightArrow}
-                svgClass={`${
-                  currentPage === totalPages - 1 ||
-                  workingDataSource.length <= 0
-                    ? "stroke-gray-200 fill-none dark:stroke-gray-700"
-                    : "stroke-black fill-none dark:stroke-white"
-                }`}
-              />
-            </button>
-            <button
-              onClick={goToEndPage}
-              className={`${
-                currentPage === totalPages - 1 || workingDataSource.length <= 0
-                  ? "text-gray-200 dark:text-gray-700"
-                  : ""
-              }`}
-            >
-              <Icon
-                elements={rightArrows}
-                svgClass={`${
-                  currentPage === totalPages - 1 ||
-                  workingDataSource.length <= 0
-                    ? "stroke-gray-200 fill-none dark:stroke-gray-700"
-                    : "stroke-black fill-none dark:stroke-white"
-                }`}
-              />
-            </button>
-          </div>
-          <div className="flex text-sm">
-            {currentPage + 1} of {totalPages} pages ({workingDataSource.length})
-            items
-          </div>
-        </div>
-      </React.Fragment>
-    </div>
-  );
-});

package/source/components/grid/GridHelperFunctions.ts

@@ -1,218 +0,0 @@
-import * as XLSX from "xlsx";
-import jsPDF from "jspdf";
-import "jspdf-autotable";
-
-let activeFilterArray: any[] = [];
-
-interface PDFExportOptions {
-  layout: "portrait" | "landscape";
-  paperSize:
-    | "a3"
-    | "a4"
-    | "letter"
-    | "legal"
-    | "tabloid"
-    | "statement"
-    | "executive";
-}
-
-export function handleApplyFilterHelper(
-  event: any,
-  columns: any,
-  dataSource: any
-) {
-  let workingDataSource: any[] = [...dataSource];
-  let filterValue = event.filterValue.toLowerCase();
-  let filterCondition = event.filterType;
-  let filterColumn = event.columnHeader;
-
-  // Add the new filter to activeFilterArray
-  activeFilterArray.push({
-    filterValue: filterValue,
-    filterCondition: filterCondition,
-    filterColumn: filterColumn,
-  });
-
-  columns = columns.map((column: any) => {
-    if (column.field === filterColumn) {
-      return { ...column, isFilterActive: true, showFilterPopup: false };
-    }
-    return column;
-  });
-
-  // Apply all active filters
-  activeFilterArray.forEach((filter: any) => {
-    workingDataSource = dataSource.filter((item: any) => {
-      let columnValue = item[filter.filterColumn].toString().toLowerCase();
-      switch (filter.filterCondition) {
-        case "contains":
-          return columnValue.includes(filter.filterValue);
-        case "equals":
-          return columnValue === filter.filterValue;
-        case "starts_with":
-          return columnValue.startsWith(filter.filterValue);
-        case "ends_with":
-          return columnValue.endsWith(filter.filterValue);
-        default:
-          return true;
-      }
-    });
-  });
-
-  return { columns, workingDataSource, activeFilterArray };
-}
-
-// Function For Clearing the Filter
-export function clearFilterHelper(
-  event: any,
-  columns: any[],
-  dataSource: any[]
-) {
-  let workingDataSource = [...dataSource];
-  let filterColumn = event.columnHeader;
-
-  // Remove the cleared filter from activeFilterArray
-  activeFilterArray = activeFilterArray.filter(
-    (filter: any) => filter.filterColumn !== filterColumn
-  );
-
-  let hasActiveFilters = activeFilterArray.length > 0;
-
-  // Reset the isFilterActive and showFilterPopup flags for the cleared filter
-  columns = columns.map((column: any) => {
-    if (column.field === filterColumn) {
-      return { ...column, isFilterActive: false, showFilterPopup: false };
-    }
-    return column;
-  });
-
-  // Reapply all remaining active filters
-  if (hasActiveFilters) {
-    activeFilterArray.forEach((filter: any) => {
-      workingDataSource = workingDataSource.filter((item: any) => {
-        let columnValue = item[filter.filterColumn].toString().toLowerCase();
-        switch (filter.filterCondition) {
-          case "contains":
-            return columnValue.includes(filter.filterValue);
-          case "equals":
-            return columnValue === filter.filterValue;
-          case "starts_with":
-            return columnValue.startsWith(filter.filterValue);
-          case "ends_with":
-            return columnValue.endsWith(filter.filterValue);
-          default:
-            return true;
-        }
-      });
-    });
-  }
-
-  return { columns, workingDataSource, hasActiveFilters, activeFilterArray };
-}
-
-export function exportToExcelHelper(
-  dataSource: any[],
-  columns: any[],
-  excelName: string
-) {
-  // This will remove the column template.
-  const templateRemovedColumn = columns.filter((column) => !column.template);
-  const dataToExport = dataSource.map((row) => {
-    const rowData: any = {};
-    templateRemovedColumn.forEach((column: any) => {
-      rowData[column.field] = row[column.field];
-    });
-    return rowData;
-  });
-  const ws = XLSX.utils.json_to_sheet(dataToExport);
-  const wb = XLSX.utils.book_new();
-  XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
-  XLSX.writeFile(wb, `${excelName}.xlsx`);
-}
-
-export function exportToPDFHelper(
-  dataSource: any[],
-  columns: any[],
-  pdfName: string,
-  pdfoptions?: PDFExportOptions
-) {
-  const { layout = "portrait", paperSize = "a4" }: any = pdfoptions;
-
-  const doc: any = new jsPDF({
-    orientation: layout,
-    unit: "mm",
-    format: paperSize,
-  });
-  // This will remove the columns with template.
-  const printableColumns = columns.filter(
-    (column) => !column.template || column.showInPdf
-  );
-
-  const dataToExport = dataSource.map((row) => {
-    const rowData: any = {};
-    printableColumns.forEach((column: any) => {
-      rowData[column.field] = row[column.field];
-    });
-    return Object.values(rowData);
-  });
-
-  const columnNames = printableColumns.map((column: any) => column.field);
-  doc.autoTable({
-    head: [columnNames],
-    body: dataToExport,
-  });
-
-  doc.save(`${pdfName}.pdf`);
-}
-
-export function handleEditActionHelper(
-  e: any,
-  isEditModeActive: boolean,
-  actionMode: string,
-  newEntry: any,
-  workingDataSource: any[],
-  goToFirstPage: () => void
-) {
-  const { mode } = e.detail;
-  let dataSourceUpdate = [...workingDataSource];
-  let isEditModeActiveUpdate: boolean = isEditModeActive;
-  let actionModeUpdate: string = actionMode;
-  let newEntryUpdate: any = { ...newEntry };
-
-  function resetEditMode() {
-    isEditModeActiveUpdate = false;
-    actionModeUpdate = "";
-    newEntryUpdate = {};
-  }
-
-  function addNewEntry() {
-    if (Object.keys(newEntryUpdate).length > 0) {
-      dataSourceUpdate = [newEntryUpdate, ...workingDataSource];
-      newEntryUpdate = {};
-    }
-  }
-
-  switch (mode) {
-    case "add":
-      isEditModeActiveUpdate = true;
-      actionModeUpdate = mode;
-      goToFirstPage();
-      break;
-    case "cancel":
-      resetEditMode();
-      break;
-    case "update":
-      addNewEntry();
-      resetEditMode();
-      break;
-    default:
-      break;
-  }
-
-  return {
-    dataSourceUpdate,
-    isEditModeActiveUpdate,
-    actionModeUpdate,
-    newEntryUpdate,
-  };
-}

package/source/components/grid/index.tsx

@@ -1,26 +0,0 @@
-/**
- * Copyright (c) Grampro Business Services and affiliates.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- * Here We Will Re-Render Grid as a Memoized Component For Better Performance.
- * Extended Documentation for Grid can be found at
- * https://psychedelic-step-e70.notion.site/Data-GRID-by-GBS-R-D-20ff97c899d24bc590215a6196435fa3
- */
-
-import { GridMemoised as GridComponent } from "./Grid";
-import React, { memo } from "react";
-
-const Grid = memo(GridComponent, (prevProps, nextProps) => {
-  // Custom comparison function
-  return (
-    prevProps.dataSource === nextProps.dataSource &&
-    prevProps.columns === nextProps.columns &&
-    prevProps.pageSettings.pageNumber === nextProps.pageSettings.pageNumber &&
-    prevProps.enableSearch === nextProps.enableSearch &&
-    prevProps.enablePdfExport === nextProps.enablePdfExport &&
-    prevProps.enableExcelExport === nextProps.enableExcelExport
-  );
-});
-
-export { Grid };

package/source/components/grid/type.ts

@@ -1,30 +0,0 @@
-interface PageSettingsProps {
-  pageNumber: number;
-}
-
-export type GridProps = {
-  dataSource: any[] | string;
-  columns?: any[];
-  pageSettings: PageSettingsProps;
-  enableSearch?: boolean;
-  lazy?: boolean;
-  enableExcelExport?: boolean;
-  excelName?: string;
-  enablePdfExport?: boolean;
-  pdfName?: string;
-  gridContainerClass?: string;
-  gridButtonClass?: string;
-  gridHeaderClass?: string;
-  gridGlobalSearchButtonClass?: string;
-  gridPaginationButtonClass?: string;
-  pdfOptions?: any;
-  isFetching?: boolean;
-  showPagination?: boolean;
-  selectAll?: boolean;
-  onSelectRow?: (value: any) => void;
-  tableHeaderStyle?: string;
-  gridColumnStyleSelectAll?: string;
-  gridColumnStyle?: string;
-  rowChange?: any;
-  pageStatus?: any;
-};