gbs-add-block 0.0.60 → 0.0.61

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.60)
+# GBS Building Blocks 2.0 (v0.0.61)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,11 +6,11 @@ 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 0.0.60)
+## What's New 🎉 (Ver 0.0.61)
 
 - Updated for bug fixes.
 - New component "Skeleton" & "Navbar" Added.
-
+- Planned Deprecation of Current Grid Component and Adding Beta version for the New Data Grid.
 
 ## Authors
 

package/index.js

@@ -26,6 +26,7 @@ const CONFIG = {
     "ContextMenu",
     "Skeleton",
     "Navbar",
+    "DataGrid",
   ],
   // Define component dependencies
   dependencies: {
@@ -95,7 +96,10 @@ const installComponentWithDependencies = async (component, destPath) => {
 
   if (pendingInstalls.length === 0) {
     console.log(
-      `✓ ${component} and all its dependencies are already installed.`
+      `✓ ${component} and all its dependencies are already installed. ${
+        component === "Grid" &&
+        "This Version of Grid will be deprecated soon. Please Install The New Data Grid Component"
+      }`
     );
     return;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.60",
+  "version": "0.0.61",
   "description": "React Component Library",
   "files": [
     "index.js",

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

@@ -0,0 +1,419 @@
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+} from "react";
+import { getSourceData } from "../../utils";
+import {
+  clearFilterHelper,
+  handleApplyFilterHelper,
+} from "@grampro/headless-helpers";
+import type { GridProps } from "../type";
+
+interface GridContextType {
+  workingDataSource: any[];
+  fallbackSourceData: any[];
+  workingColumns: any[];
+  currentPage: number;
+  pageStart: number;
+  pageEnd: number;
+  totalPages: number;
+  searchParam: string;
+  activeFilterArray: any[];
+  selectedRows: any[];
+  isFetching: boolean | undefined;
+
+  // Navigation methods
+  nextPage: () => void;
+  prevPage: () => void;
+  goToEndPage: () => void;
+  goToFirstPage: () => void;
+  goToPage: (page: number) => void;
+
+  // Search methods
+  handleSearchInput: (e: any) => void;
+  handleSearch: (searchParam: string) => void;
+
+  // Filter methods
+  toggleFilterPopup: (index: number) => void;
+  handleApplyFilter: (event: any) => void;
+  clearFilter: (event: any) => void;
+  handleFilterAction: (action: any, colIndex: number) => void;
+
+  // Row selection methods
+  handleSelectAll: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  handleSelect: (rowData: any) => void;
+  isRowSelected: (rowData: any) => boolean;
+
+  // Grid settings
+  columns: any[];
+  pageSettings: any;
+  enableSearch: boolean;
+  enableExcelExport: boolean;
+  enablePdfExport: boolean;
+  excelName: string;
+  pdfName: string;
+  pdfOptions: any;
+  gridButtonClass: string;
+  selectAll: boolean;
+  tableHeaderStyle: string;
+  gridContainerClass: string;
+  gridColumnStyleSelectAll: string;
+  gridColumnStyle: string;
+  rowChange: (rowData: any) => void;
+}
+
+const GridContext = createContext<GridContextType | undefined>(undefined);
+
+export const GridProvider: React.FC<{
+  children: React.ReactNode;
+  props: GridProps;
+}> = ({ children, props }) => {
+  const {
+    dataSource,
+    columns = [],
+    pageSettings,
+    enableSearch = false,
+    lazy = false,
+    enableExcelExport = false,
+    excelName = "data",
+    enablePdfExport = false,
+    pdfName = "data",
+    pdfOptions = {},
+    gridButtonClass = "px-1 py-2 text-xs rounded bg-zinc-200 dark:bg-zinc-700",
+    selectAll = false,
+    onSelectRow,
+    isFetching,
+    tableHeaderStyle = "text-left px-2 py-4 bg-zinc-200 dark:bg-zinc-800",
+    gridContainerClass = "flex flex-col min-w-screen rounded-md overflow-hidden",
+    gridColumnStyleSelectAll = "px-4 text-xs",
+    gridColumnStyle = "p-2 text-xs",
+    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
+  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, getGridData]);
+
+  // 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
+  const updatePageRange = (page: number) => {
+    const start = Math.floor(page / 10) * 10;
+    setPageStart(start);
+    setPageEnd(Math.min(start + 10, totalPages));
+  };
+
+  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);
+  };
+
+  // *** Search Functions
+  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);
+    resetPage(filteredData);
+  };
+
+  // *** Filter Functions
+  // 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));
+  }
+
+  const toggleFilterPopup = (index: number) => {
+    setWorkingColumns((prevColumns: any) =>
+      prevColumns.map((column: any, i: any) =>
+        i === index
+          ? { ...column, showFilterPopup: !column.showFilterPopup }
+          : column
+      )
+    );
+  };
+
+  function handleApplyFilter(event: any) {
+    const {
+      columns: updatedColumns,
+      workingDataSource: updatedFullDataSource,
+      activeFilterArray: updatedActiveFilterArray,
+    } = handleApplyFilterHelper(event, columns, workingDataSource);
+
+    setWorkingColumns(updatedColumns);
+    setWorkingDataSource(updatedFullDataSource);
+    setActiveFilterArray(updatedActiveFilterArray);
+    resetPage(updatedFullDataSource);
+  }
+
+  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;
+    }
+  };
+
+  // *** Row Selection Functions
+  const handleSelectAll = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const selected = event.target.checked ? workingDataSource : [];
+    setSelectedRows(selected);
+    onSelectRow?.(selected);
+  };
+
+  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);
+  };
+
+  // Provide context value
+  const contextValue: GridContextType = {
+    // State
+    workingDataSource,
+    fallbackSourceData,
+    workingColumns,
+    currentPage,
+    pageStart,
+    pageEnd,
+    totalPages,
+    searchParam,
+    activeFilterArray,
+    selectedRows,
+    isFetching,
+
+    // Navigation methods
+    nextPage,
+    prevPage,
+    goToEndPage,
+    goToFirstPage,
+    goToPage,
+
+    // Search methods
+    handleSearchInput,
+    handleSearch,
+
+    // Filter methods
+    toggleFilterPopup,
+    handleApplyFilter,
+    clearFilter,
+    handleFilterAction,
+
+    // Row selection methods
+    handleSelectAll,
+    handleSelect,
+    isRowSelected,
+
+    // Grid settings
+    columns,
+    pageSettings,
+    enableSearch,
+    enableExcelExport,
+    enablePdfExport,
+    excelName,
+    pdfName,
+    pdfOptions,
+    gridButtonClass,
+    selectAll,
+    tableHeaderStyle,
+    gridContainerClass,
+    gridColumnStyleSelectAll,
+    gridColumnStyle,
+    rowChange,
+  };
+
+  return (
+    <GridContext.Provider value={contextValue}>{children}</GridContext.Provider>
+  );
+};
+
+// Base context hook
+export const useGridContext = () => {
+  const context = useContext(GridContext);
+  if (context === undefined) {
+    throw new Error("useGridContext must be used within a GridProvider");
+  }
+  return context;
+};

package/source/components/datagrid/hooks/GridHooks.tsx

@@ -0,0 +1,98 @@
+import { useGridContext } from "../context/GridContext";
+
+// Hook for pagination functionality
+export const useGridPagination = () => {
+  const {
+    currentPage,
+    pageStart,
+    pageEnd,
+    totalPages,
+    goToFirstPage,
+    prevPage,
+    goToPage,
+    nextPage,
+    goToEndPage,
+    workingDataSource,
+  } = useGridContext();
+
+  return {
+    currentPage,
+    pageStart,
+    pageEnd,
+    totalPages,
+    goToFirstPage,
+    prevPage,
+    goToPage,
+    nextPage,
+    goToEndPage,
+    workingDataSource,
+  };
+};
+
+// Hook for grid search functionality
+export const useGridSearch = () => {
+  const { searchParam, handleSearchInput, handleSearch, enableSearch } =
+    useGridContext();
+
+  return {
+    searchParam,
+    handleSearchInput,
+    handleSearch,
+    enableSearch,
+  };
+};
+
+// Hook for grid filter functionality
+export const useGridFilter = () => {
+  const {
+    workingColumns,
+    activeFilterArray,
+    toggleFilterPopup,
+    handleFilterAction,
+  } = useGridContext();
+
+  return {
+    workingColumns,
+    activeFilterArray,
+    toggleFilterPopup,
+    handleFilterAction,
+  };
+};
+
+// Hook for row selection
+export const useGridRowSelection = () => {
+  const { selectAll, handleSelectAll, handleSelect, isRowSelected } =
+    useGridContext();
+
+  return {
+    selectAll,
+    handleSelectAll,
+    handleSelect,
+    isRowSelected,
+  };
+};
+
+// Hook for export functionality
+export const useGridExport = () => {
+  const {
+    enableExcelExport,
+    enablePdfExport,
+    workingDataSource,
+    columns,
+    excelName,
+    pdfName,
+    pdfOptions,
+    gridButtonClass,
+  } = useGridContext();
+
+  return {
+    enableExcelExport,
+    enablePdfExport,
+    workingDataSource,
+    columns,
+    excelName,
+    pdfName,
+    pdfOptions,
+    gridButtonClass,
+  };
+};

package/source/components/datagrid/index.tsx

@@ -0,0 +1,26 @@
+/**
+ * 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 "./layout";
+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/datagrid/layout/FilterPopup.tsx

@@ -0,0 +1,85 @@
+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 text-xs z-50 mt-48 flex flex-col shadow-lg gap-2 rounded-md dark:bg-zinc-700"
+        role="dialog"
+      >
+        <select
+          name={`${columnHeader}-filter`}
+          id={`${columnHeader}-filter-id`}
+          className="w-full p-2 rounded-lg bg-gray-200 outline-none 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-xs bg-gray-200 outline-none dark:bg-gray-600"
+          value={filterValue}
+          onInput={handleFilterInput}
+        />
+        <div className="mt-2 flex space-x-1">
+          <button
+            className="text-xs bg-red-600 text-white px-2 py-0.5 rounded-lg hover:bg-red-600"
+            onClick={onCancel}
+          >
+            Cancel
+          </button>
+          {isFilterActive && (
+            <button
+              className="text-xs bg-black text-white px-2 py-0.5 rounded-lg dark:bg-white dark:text-black"
+              onClick={clearFilter}
+            >
+              Clear Filter
+            </button>
+          )}
+          <button
+            className="text-xs bg-black text-white px-2 py-0.5 rounded-lg dark:bg-white dark:text-black"
+            onClick={applyFilter}
+          >
+            Apply Filter
+          </button>
+        </div>
+      </div>
+    )
+  );
+}