gbs-add-block 0.0.93 → 0.0.97

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.93)
+# GBS Building Blocks 2.0 (v0.0.97)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,7 +6,7 @@ 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.93)
+## What's New 🎉 (Ver 0.0.97)
 
 - Updated for bug fixes.
 

package/package.json

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

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

@@ -64,6 +64,9 @@ interface GridContextType {
   gridColumnStyleSelectAll: string;
   gridColumnStyle: string;
   rowChange: (rowData: any) => void;
+  showTotalPages?: boolean;
+  onSearch?: (searchParam: string) => void;
+  onToolbarButtonClick?: (action: string) => void;
 }
 
 const GridContext = createContext<GridContextType | undefined>(undefined);
@@ -83,7 +86,7 @@ export const GridProvider: React.FC<{
     enablePdfExport = false,
     pdfName = "data",
     pdfOptions = {},
-    gridButtonClass = "px-1 py-2 text-xs rounded bg-zinc-200 dark:bg-zinc-700",
+    gridButtonClass = "px-1 py-2 text-xs rounded bg-zinc-200 dark:bg-zinc-700 cursor-pointer",
     selectAll = false,
     onSelectRow,
     isFetching,
@@ -95,6 +98,9 @@ export const GridProvider: React.FC<{
     pageStatus = () => {},
     activeFilterArrayValue = [],
     searchParamValue = () => {},
+    showTotalPages = false,
+    onSearch = () => {},
+    onToolbarButtonClick = () => {},
   } = props;
 
   // States Handling Grid
@@ -134,7 +140,7 @@ export const GridProvider: React.FC<{
   // Calculates total pages and determine dataSource type
   useEffect(() => {
     const handleDataSource = async () => {
-      if (Array.isArray(dataSource) && dataSource.length > 0) {
+      if (Array.isArray(dataSource)) {
         setWorkingDataSource(dataSource);
 
         // if lazy is true, then totalPages will be taken from pageSettings
@@ -238,11 +244,10 @@ export const GridProvider: React.FC<{
   const handleSearchInput = (e: any) => {
     const searchValue = e.target.value;
     if (searchParamValue) searchParamValue(searchValue);
+    setSearchParam(searchValue);
 
-    if (!lazy) {
-      setSearchParam(searchValue);
-
-      if (searchValue === "") {
+    if (searchValue === "") {
+      if (!lazy) {
         setWorkingDataSource(
           fallbackSourceData.length > 0 ? fallbackSourceData : dataSource
         );
@@ -256,15 +261,17 @@ export const GridProvider: React.FC<{
   };
 
   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);
+    if (!lazy) {
+      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
@@ -418,6 +425,9 @@ export const GridProvider: React.FC<{
     gridColumnStyleSelectAll,
     gridColumnStyle,
     rowChange,
+    showTotalPages,
+    onSearch,
+    onToolbarButtonClick,
   };
 
   return (

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

@@ -15,6 +15,7 @@ export const useGridPagination = () => {
     workingDataSource,
     lazy,
     pageSettings,
+    showTotalPages,
   } = useGridContext();
 
   return {
@@ -30,19 +31,26 @@ export const useGridPagination = () => {
     workingDataSource,
     lazy,
     pageSettings,
+    showTotalPages,
   };
 };
 
 // Hook for grid search functionality
 export const useGridSearch = () => {
-  const { searchParam, handleSearchInput, handleSearch, enableSearch } =
-    useGridContext();
+  const {
+    searchParam,
+    handleSearchInput,
+    handleSearch,
+    enableSearch,
+    onSearch,
+  } = useGridContext();
 
   return {
     searchParam,
     handleSearchInput,
     handleSearch,
     enableSearch,
+    onSearch,
   };
 };
 
@@ -87,6 +95,8 @@ export const useGridExport = () => {
     pdfName,
     pdfOptions,
     gridButtonClass,
+    onToolbarButtonClick,
+    lazy,
   } = useGridContext();
 
   return {
@@ -98,5 +108,7 @@ export const useGridExport = () => {
     pdfName,
     pdfOptions,
     gridButtonClass,
+    onToolbarButtonClick,
+    lazy,
   };
 };

package/source/components/datagrid/layout/GridBody.tsx

@@ -123,7 +123,10 @@ const GridBody = () => {
             </tr>
           ) : displayData.length === 0 ? (
             <tr>
-              <td colSpan={workingColumns.length + (selectAll ? 1 : 0)}>
+              <td
+                colSpan={workingColumns.length + (selectAll ? 1 : 0)}
+                className="text-center py-3"
+              >
                 No data found
               </td>
             </tr>

package/source/components/datagrid/layout/GridPagination.tsx

@@ -22,11 +22,21 @@ const Pagination = () => {
     workingDataSource,
     lazy,
     pageSettings,
+    showTotalPages,
   } = useGridPagination();
 
   return (
-    <div className="flex flex-wrap justify-between items-center text-xs px-2 py-4 bg-zinc-100 dark:bg-zinc-900 gap-2 md:gap-4">
-      <div className="flex flex-1 space-x-1">
+    <div className="w-full flex flex-wrap justify-between items-center text-xs px-2 py-4 bg-zinc-100 dark:bg-zinc-900 gap-2 md:gap-4">
+      <div className="flex text-xs">
+        Showing {currentPage + 1} of {totalPages} pages
+        {showTotalPages && (
+          <span className="pl-1">
+            ({lazy ? pageSettings?.totalCount : workingDataSource.length} items)
+          </span>
+        )}
+      </div>
+
+      <div className="flex space-x-1">
         <button onClick={goToFirstPage} disabled={currentPage === 0}>
           <Icon
             elements={leftArrows}
@@ -35,6 +45,7 @@ const Pagination = () => {
                 ? "stroke-gray-200 fill-none dark:stroke-gray-700 cursor-not-allowed"
                 : "stroke-black fill-none dark:stroke-white cursor-pointer"
             }`}
+            dimensions={{ width: 18, height: 18 }}
           />
         </button>
         <button onClick={prevPage} disabled={currentPage === 0}>
@@ -45,6 +56,7 @@ const Pagination = () => {
                 ? "stroke-gray-200 fill-none dark:stroke-gray-700 cursor-not-allowed"
                 : "stroke-black fill-none dark:stroke-white cursor-pointer"
             }`}
+            dimensions={{ width: 18, height: 18 }}
           />
         </button>
         {pageStart > 0 && (
@@ -56,19 +68,20 @@ const Pagination = () => {
           </button>
         )}
         <div className="flex md:space-x-1">
-          {Array.from({ length: pageEnd - pageStart }, (_, i) => (
-            <button
-              key={pageStart + i}
-              onClick={() => goToPage(pageStart + i)}
-              className={`hidden md:block px-2 py-1 text-sm rounded-md transition-colors duration-200 ease-in-out ${
-                currentPage === pageStart + i
-                  ? "bg-black text-white dark:bg-white dark:text-black"
-                  : "bg-gray-200 dark:bg-zinc-700 hover:bg-gray-300 dark:hover:bg-zinc-600"
-              }`}
-            >
-              {pageStart + i + 1}
-            </button>
-          ))}
+          {totalPages > 0 &&
+            Array.from({ length: pageEnd - pageStart }, (_, i) => (
+              <button
+                key={pageStart + i}
+                onClick={() => goToPage(pageStart + i)}
+                className={`hidden md:block px-2 py-1 text-sm rounded-md transition-colors duration-200 ease-in-out ${
+                  currentPage === pageStart + i
+                    ? "bg-black text-white dark:bg-white dark:text-black"
+                    : "bg-gray-200 dark:bg-zinc-700 hover:bg-gray-300 dark:hover:bg-zinc-600"
+                }`}
+              >
+                {pageStart + i + 1}
+              </button>
+            ))}
         </div>
         {pageEnd < totalPages && (
           <button onClick={() => goToPage(pageEnd)} className="cursor-pointer">
@@ -83,6 +96,7 @@ const Pagination = () => {
                 ? "stroke-gray-200 fill-none dark:stroke-gray-700 cursor-not-allowed"
                 : "stroke-black fill-none dark:stroke-white cursor-pointer"
             }`}
+            dimensions={{ width: 18, height: 18 }}
           />
         </button>
         <button onClick={goToEndPage} disabled={currentPage === totalPages - 1}>
@@ -93,14 +107,10 @@ const Pagination = () => {
                 ? "stroke-gray-200 fill-none dark:stroke-gray-700 cursor-not-allowed"
                 : "stroke-black fill-none dark:stroke-white cursor-pointer"
             }`}
+            dimensions={{ width: 18, height: 18 }}
           />
         </button>
       </div>
-
-      <div className="flex text-xs">
-        {currentPage + 1} of {totalPages} pages (
-        {lazy ? pageSettings?.totalCount : workingDataSource.length}) items
-      </div>
     </div>
   );
 };

package/source/components/datagrid/layout/GridToolbar.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { lazy } from "react";
 import { useGridExport, useGridSearch } from "../hooks/GridHooks";
 import {
   exportToExcelHelper,
@@ -8,8 +8,13 @@ import Icon from "../../icon/Icon";
 import { search } from "../../icon/iconPaths";
 
 const GridToolbar = () => {
-  const { searchParam, handleSearchInput, handleSearch, enableSearch } =
-    useGridSearch();
+  const {
+    searchParam,
+    handleSearchInput,
+    handleSearch,
+    enableSearch,
+    onSearch,
+  } = useGridSearch();
 
   const {
     enableExcelExport,
@@ -20,6 +25,7 @@ const GridToolbar = () => {
     pdfName,
     pdfOptions,
     gridButtonClass,
+    onToolbarButtonClick,
   } = useGridExport();
 
   if (!enableSearch && !enableExcelExport && !enablePdfExport) {
@@ -45,12 +51,15 @@ const GridToolbar = () => {
           />
           <button
             className="rounded-lg w-10 flex items-center justify-center cursor-pointer"
-            onClick={() => handleSearch(searchParam)}
+            onClick={() => {
+              handleSearch(searchParam);
+              if (onSearch) onSearch(searchParam); // Call the onSearch prop if provided
+            }}
           >
             <Icon
               elements={search}
               svgClass={"stroke-gray-500 fill-none dark:stroke-white"}
-            />{" "}
+            />
           </button>
         </div>
       )}
@@ -62,7 +71,11 @@ const GridToolbar = () => {
             <button
               className={gridButtonClass}
               onClick={() => {
-                exportToExcelHelper(workingDataSource, columns, excelName);
+                if (!lazy) {
+                  exportToExcelHelper(workingDataSource, columns, excelName);
+                }
+
+                if (onToolbarButtonClick) onToolbarButtonClick("excelExport");
               }}
             >
               Export to Excel
@@ -73,12 +86,15 @@ const GridToolbar = () => {
             <button
               className={gridButtonClass}
               onClick={() => {
-                exportToPDFHelper(
-                  workingDataSource,
-                  columns,
-                  pdfName,
-                  pdfOptions
-                );
+                if (!lazy) {
+                  exportToPDFHelper(
+                    workingDataSource,
+                    columns,
+                    pdfName,
+                    pdfOptions
+                  );
+                }
+                if (onToolbarButtonClick) onToolbarButtonClick("pdfExport");
               }}
             >
               Export to PDF

package/source/components/datagrid/type.ts

@@ -38,6 +38,9 @@ export type GridProps = {
   pageStatus?: any;
   activeFilterArrayValue?: ActiveFilterArrayValue[] | any;
   searchParamValue?: (value: string) => void;
+  showTotalPages?: boolean;
+  onSearch?: (value: string) => void;
+  onToolbarButtonClick?: (action: string) => void;
 };
 
 interface GridColumn {

package/source/components/datepicker/index.tsx

@@ -148,7 +148,9 @@ export const DatePicker = ({
           />
           <span className={!selectedDate ? "text-gray-400 text-sm" : ""}>
             {selectedDate ? (
-              <span className="text-sm">{selectedDate.toLocaleDateString("en-GB")}</span>
+              <span className="text-sm">
+                {selectedDate.toLocaleDateString("en-GB")}
+              </span>
             ) : (
               placeholder
             )}
@@ -344,7 +346,7 @@ export const DatePicker = ({
             <button
               type="button"
               onClick={goToToday}
-              className="text-black hover:text-blue-600 transition duration-150 ease-in-out"
+              className="text-black hover:text-blue-600 transition duration-150 ease-in-out dark:text-gray-500"
             >
               Today
             </button>
@@ -360,4 +362,4 @@ export const DatePicker = ({
       )}
     </div>
   );
-};
+};