gbs-add-block 0.0.88 → 0.0.90

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.88)
+# GBS Building Blocks 2.0 (v0.0.90)
 
 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.88)
+## What's New 🎉 (Ver 0.0.90)
 
 - Updated for bug fixes.
 

package/package.json

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

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

@@ -31,6 +31,7 @@ interface GridContextType {
   goToEndPage: () => void;
   goToFirstPage: () => void;
   goToPage: (page: number) => void;
+  lazy: boolean;
 
   // Search methods
   handleSearchInput: (e: any) => void;
@@ -93,6 +94,7 @@ export const GridProvider: React.FC<{
     rowChange = () => {},
     pageStatus = () => {},
     activeFilterArrayValue = [],
+    searchParamValue = () => {},
   } = props;
 
   // States Handling Grid
@@ -137,8 +139,8 @@ export const GridProvider: React.FC<{
 
         // if lazy is true, then totalPages will be taken from pageSettings
         const totalPages =
-          lazy && pageSettings.totalPages
-            ? pageSettings.totalPages
+          lazy && pageSettings.totalCount
+            ? Math.ceil(pageSettings.totalCount / pageSettings.pageNumber)
             : Math.ceil(dataSource.length / pageSettings.pageNumber);
 
         setTotalPages(totalPages);
@@ -163,6 +165,7 @@ export const GridProvider: React.FC<{
     }
   }, [columns]);
 
+  // Adds Search Column
   useEffect(() => {
     if (!columns || columns.length === 0) {
       if (
@@ -233,9 +236,12 @@ export const GridProvider: React.FC<{
 
   // *** Search Functions
   const handleSearchInput = (e: any) => {
+    const searchValue = e.target.value;
+    if (searchParamValue) searchParamValue(searchValue);
+
     if (!lazy) {
-      const searchValue = e.target.value;
       setSearchParam(searchValue);
+
       if (searchValue === "") {
         setWorkingDataSource(
           fallbackSourceData.length > 0 ? fallbackSourceData : dataSource
@@ -379,6 +385,7 @@ export const GridProvider: React.FC<{
     goToEndPage,
     goToFirstPage,
     goToPage,
+    lazy,
 
     // Search methods
     handleSearchInput,

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

@@ -13,6 +13,8 @@ export const useGridPagination = () => {
     nextPage,
     goToEndPage,
     workingDataSource,
+    lazy,
+    pageSettings,
   } = useGridContext();
 
   return {
@@ -26,6 +28,8 @@ export const useGridPagination = () => {
     nextPage,
     goToEndPage,
     workingDataSource,
+    lazy,
+    pageSettings,
   };
 };
 

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

@@ -17,6 +17,7 @@ const GridBody = () => {
     gridColumnStyle,
     gridColumnStyleSelectAll,
     rowChange,
+    lazy,
   } = useGridContext();
 
   const renderCell = (rowData: any, column: Column, rowIndex: number) => {
@@ -53,7 +54,9 @@ const GridBody = () => {
 
   const displayStart = currentPage * pageSettings.pageNumber;
   const displayEnd = displayStart + pageSettings.pageNumber;
-  const displayData = workingDataSource.slice(displayStart, displayEnd);
+  const displayData = lazy
+    ? workingDataSource
+    : workingDataSource.slice(displayStart, displayEnd);
 
   return (
     <div className="overflow-x-auto">

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

@@ -20,6 +20,8 @@ const Pagination = () => {
     nextPage,
     goToEndPage,
     workingDataSource,
+    lazy,
+    pageSettings,
   } = useGridPagination();
 
   return (
@@ -96,8 +98,8 @@ const Pagination = () => {
       </div>
 
       <div className="flex text-xs">
-        {currentPage + 1} of {totalPages} pages ({workingDataSource.length})
-        items
+        {currentPage + 1} of {totalPages} pages (
+        {lazy ? pageSettings?.totalCount : workingDataSource.length}) items
       </div>
     </div>
   );

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

@@ -33,7 +33,7 @@ const GridToolbar = () => {
         <div className="flex">
           <input
             type="search"
-            value={searchParam}
+            defaultValue={searchParam}
             onChange={handleSearchInput}
             placeholder="Search..."
             className="outline-none p-2 text-xs rounded-lg max-sm:hidden dark:bg-zinc-800 bg-zinc-200"

package/source/components/datagrid/type.ts

@@ -2,7 +2,7 @@ import { ChangeEvent } from "react";
 
 interface PageSettingsProps {
   pageNumber: number;
-  totalPages?: number;
+  totalCount?: number;
 }
 
 interface ActiveFilterArrayValue {
@@ -37,6 +37,7 @@ export type GridProps = {
   rowChange?: any;
   pageStatus?: any;
   activeFilterArrayValue?: ActiveFilterArrayValue[] | any;
+  searchParamValue?: (value: string) => void;
 };
 
 interface GridColumn {