gbs-add-block 0.0.87 → 0.0.90

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.87)
+# 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.87)
+## 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.87",
+  "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;
@@ -92,6 +93,8 @@ export const GridProvider: React.FC<{
     gridColumnStyle = "p-2 text-xs",
     rowChange = () => {},
     pageStatus = () => {},
+    activeFilterArrayValue = [],
+    searchParamValue = () => {},
   } = props;
 
   // States Handling Grid
@@ -133,9 +136,13 @@ export const GridProvider: React.FC<{
     const handleDataSource = async () => {
       if (Array.isArray(dataSource) && dataSource.length > 0) {
         setWorkingDataSource(dataSource);
-        const totalPages = Math.ceil(
-          dataSource.length / pageSettings.pageNumber
-        );
+
+        // if lazy is true, then totalPages will be taken from pageSettings
+        const totalPages =
+          lazy && pageSettings.totalCount
+            ? Math.ceil(pageSettings.totalCount / pageSettings.pageNumber)
+            : Math.ceil(dataSource.length / pageSettings.pageNumber);
+
         setTotalPages(totalPages);
         setPageEnd(Math.min(10, totalPages));
       } else if (typeof dataSource === "string") {
@@ -158,6 +165,7 @@ export const GridProvider: React.FC<{
     }
   }, [columns]);
 
+  // Adds Search Column
   useEffect(() => {
     if (!columns || columns.length === 0) {
       if (
@@ -228,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
@@ -289,6 +300,8 @@ export const GridProvider: React.FC<{
     setWorkingColumns(updatedColumns);
     setWorkingDataSource(updatedFullDataSource);
     setActiveFilterArray(updatedActiveFilterArray);
+    if (activeFilterArrayValue)
+      activeFilterArrayValue(updatedActiveFilterArray);
     resetPage(updatedFullDataSource);
   }
 
@@ -305,6 +318,8 @@ export const GridProvider: React.FC<{
     setWorkingColumns(updatedColumns);
     setWorkingDataSource(updatedDataSource);
     setActiveFilterArray(updatedActiveFilterArray);
+    if (activeFilterArrayValue)
+      activeFilterArrayValue(updatedActiveFilterArray);
     resetPage(updatedDataSource);
   }
 
@@ -370,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/layout/index.tsx

@@ -26,6 +26,7 @@ const GridContent = forwardRef((_, ref) => {
     prevPage,
     goToFirstPage,
     goToEndPage,
+    activeFilterArray,
   } = useGridContext();
 
   // Making Grid Functions Accessible in Parent
@@ -41,6 +42,7 @@ const GridContent = forwardRef((_, ref) => {
         handleSearch,
         handleApplyFilter,
         clearFilter,
+        getActiveFilters: () => activeFilterArray,
       };
     },
     [
@@ -52,6 +54,7 @@ const GridContent = forwardRef((_, ref) => {
       handleSearch,
       handleApplyFilter,
       clearFilter,
+      activeFilterArray,
     ]
   );
 

package/source/components/datagrid/type.ts

@@ -2,6 +2,13 @@ import { ChangeEvent } from "react";
 
 interface PageSettingsProps {
   pageNumber: number;
+  totalCount?: number;
+}
+
+interface ActiveFilterArrayValue {
+  filterColumn: string;
+  filterCondition: string;
+  filterValue: string;
 }
 
 export type GridProps = {
@@ -29,6 +36,8 @@ export type GridProps = {
   gridColumnStyle?: string;
   rowChange?: any;
   pageStatus?: any;
+  activeFilterArrayValue?: ActiveFilterArrayValue[] | any;
+  searchParamValue?: (value: string) => void;
 };
 
 interface GridColumn {