gbs-add-block 0.0.62 → 0.0.64

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.62)
+# GBS Building Blocks 2.0 (v0.0.64)
 
 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.62)
+## What's New 🎉 (Ver 0.0.64)
 
 - Updated for bug fixes.
 - New component "Skeleton" & "Navbar" Added.

package/package.json

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

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

@@ -87,7 +87,7 @@ export const GridProvider: React.FC<{
     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",
+    gridContainerClass = "flex flex-col rounded-md overflow-hidden",
     gridColumnStyleSelectAll = "px-4 text-xs",
     gridColumnStyle = "p-2 text-xs",
     rowChange = () => {},

package/source/components/datagrid/index.tsx

@@ -9,7 +9,7 @@
  */
 
 import { GridMemoised as GridComponent } from "./layout";
-import React, { memo } from "react";
+import { memo } from "react";
 
 const Grid = memo(GridComponent, (prevProps, nextProps) => {
   // Custom comparison function

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

@@ -1,152 +1,3 @@
-// import React from "react";
-// import Icon from "../../icon/Icon";
-// import { listFilter } from "../../icon/iconPaths";
-// import FilterPopup from "./FilterPopup";
-// import { Column, GridBodyProps } from "../type";
-
-// const GridBody: React.FC<GridBodyProps> = ({
-//   selectAll,
-//   handleSelectAll,
-//   workingColumns,
-//   tableHeaderStyle,
-//   toggleFilterPopup,
-//   activeFilterArray,
-//   handleFilterAction,
-//   workingDataSource,
-//   isFetching,
-//   currentPage,
-//   pageSettings,
-//   gridColumnStyleSelectAll,
-//   isRowSelected,
-//   handleSelect,
-//   gridColumnStyle,
-//   rowChange,
-// }) => {
-//   const renderCell = (rowData: any, column: Column, rowIndex: number) => {
-//     const cellValue = rowData[column.field];
-
-//     if (column.template) {
-//       return (
-//         <column.template
-//           rowData={rowData}
-//           rowIndex={rowIndex + currentPage * pageSettings.pageNumber}
-//           rowChange={(changes: any) => rowChange?.(changes)}
-//         />
-//       );
-//     }
-
-//     if (column.tooltip) {
-//       return (
-//         <span title={cellValue?.toString()}>
-//           {cellValue && cellValue.length > 10
-//             ? `${cellValue.slice(0, 10)}...`
-//             : cellValue}
-//         </span>
-//       );
-//     }
-
-//     return cellValue;
-//   };
-
-//   return (
-//     <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>
-//             )}
-//             {workingColumns.map((column, colIndex) => (
-//               <th
-//                 key={colIndex}
-//                 className={tableHeaderStyle}
-//                 style={{ width: column.width ? `${column.width}px` : "auto" }}
-//               >
-//                 <div className="flex items-center relative">
-//                   {column.headerText || column.field}
-//                   {column.filter && !column.template && (
-//                     <>
-//                       <button onClick={() => toggleFilterPopup(colIndex)}>
-//                         <Icon
-//                           dimensions={{ width: "12", height: "12" }}
-//                           elements={listFilter}
-//                           svgClass={`ml-2 fill-none dark:stroke-white ${
-//                             activeFilterArray.some(
-//                               (filter) => filter.filterColumn === column.field
-//                             )
-//                               ? "stroke-red-400"
-//                               : "stroke-black"
-//                           }`}
-//                         />
-//                       </button>
-//                       <FilterPopup
-//                         show={column.showFilterPopup ?? false}
-//                         columnHeader={column.field}
-//                         filterAction={(action: any) =>
-//                           handleFilterAction(action, colIndex)
-//                         }
-//                       />
-//                     </>
-//                   )}
-//                 </div>
-//               </th>
-//             ))}
-//           </tr>
-//         </thead>
-//         <tbody>
-//           {workingDataSource.length > 0 && !isFetching ? (
-//             workingDataSource
-//               .slice(
-//                 currentPage * pageSettings.pageNumber,
-//                 (currentPage + 1) * pageSettings.pageNumber
-//               )
-//               .map((rowData, rowIndex) => (
-//                 <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, colIndex) => (
-//                     <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>
-//   );
-// };
-
-// export default GridBody;
-
 import React from "react";
 import { useGridContext } from "../context/GridContext";
 import { useGridFilter, useGridRowSelection } from "../hooks/GridHooks";
@@ -281,8 +132,8 @@ const GridBody = () => {
                   isRowSelected(rowData)
                     ? "bg-blue-100 dark:bg-blue-900"
                     : rowIndex % 2 === 0
-                    ? "bg-gray-50 dark:bg-zinc-800"
-                    : "bg-white dark:bg-zinc-900"
+                    ? "bg-gray-50 dark:bg-zinc-800 cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-700"
+                    : "bg-white dark:bg-zinc-900 cursor-pointer hover:bg-zinc-200 dark:hover:bg-zinc-700"
                 }
                 onClick={() => rowChange(rowData)}
               >
@@ -297,7 +148,14 @@ const GridBody = () => {
                   </td>
                 )}
                 {workingColumns.map((column, colIndex) => (
-                  <td key={colIndex} className={gridColumnStyle}>
+                  <td
+                    key={colIndex}
+                    className={gridColumnStyle}
+                    style={{
+                      width: column.width ? `${column.width}px` : "auto",
+                      maxWidth: column.width ? `${column.width}px` : "auto",
+                    }}
+                  >
                     {renderCell(rowData, column, rowIndex)}
                   </td>
                 ))}

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

@@ -1,125 +1,3 @@
-// import React from "react";
-// import Icon from "../../icon/Icon";
-// import {
-//   leftArrow,
-//   leftArrows,
-//   rightArrow,
-//   rightArrows,
-// } from "../../icon/iconPaths";
-// import { PaginationProps } from "../type";
-
-// export default function Pagination({
-//   goToFirstPage,
-//   currentPage,
-//   prevPage,
-//   pageStart,
-//   goToPage,
-//   workingDataSource,
-//   pageEnd,
-//   totalPages,
-//   nextPage,
-//   goToEndPage,
-// }: PaginationProps) {
-//   return (
-//     <div className="flex p-2 justify-between dark:text-white text-xs mt-4">
-//       <div className="flex gap-4">
-//         <button
-//           onClick={goToFirstPage}
-//           className={`${
-//             currentPage === 0
-//               ? "text-gray-200 dark:text-gray-700 cursor-pointer"
-//               : ""
-//           }`}
-//         >
-//           <Icon
-//             elements={leftArrows}
-//             svgClass={`${
-//               currentPage === 0
-//                 ? "stroke-gray-200 fill-none dark:stroke-gray-700 cursor-pointer"
-//                 : "stroke-black fill-none dark:stroke-white cursor-pointer"
-//             }`}
-//           />
-//         </button>
-//         <button onClick={prevPage}>
-//           <Icon
-//             elements={leftArrow}
-//             svgClass={`${
-//               currentPage === 0
-//                 ? "stroke-gray-200 fill-none dark:stroke-gray-700 cursor-pointer"
-//                 : "stroke-black fill-none dark:stroke-white cursor-pointer"
-//             }`}
-//           />
-//         </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 cursor-pointer"
-//               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 cursor-pointer"
-//               : ""
-//           }`}
-//         >
-//           <Icon
-//             elements={rightArrow}
-//             svgClass={`${
-//               currentPage === totalPages - 1 || workingDataSource.length <= 0
-//                 ? "stroke-gray-200 fill-none dark:stroke-gray-700 cursor-pointer"
-//                 : "stroke-black fill-none dark:stroke-white cursor-pointer"
-//             }`}
-//           />
-//         </button>
-//         <button
-//           onClick={goToEndPage}
-//           className={`${
-//             currentPage === totalPages - 1 || workingDataSource.length <= 0
-//               ? "text-gray-200 dark:text-gray-700 cursor-pointer"
-//               : ""
-//           }`}
-//         >
-//           <Icon
-//             elements={rightArrows}
-//             svgClass={`${
-//               currentPage === totalPages - 1 || workingDataSource.length <= 0
-//                 ? "stroke-gray-200 fill-none dark:stroke-gray-700 cursor-pointer"
-//                 : "stroke-black fill-none dark:stroke-white cursor-pointer"
-//             }`}
-//           />
-//         </button>
-//       </div>
-//       <div className="flex text-xs">
-//         {currentPage + 1} of {totalPages} pages ({workingDataSource.length})
-//         items
-//       </div>
-//     </div>
-//   );
-// }
-
 import React from "react";
 import { useGridPagination } from "../hooks/GridHooks";
 import Icon from "../../icon/Icon";
@@ -145,7 +23,7 @@ const Pagination = () => {
   } = useGridPagination();
 
   return (
-    <div className="flex flex-wrap justify-between items-center text-xs px-2 py-4 bg-white dark:bg-zinc-900 gap-2 md:gap-4">
+    <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">
         <button onClick={goToFirstPage} disabled={currentPage === 0}>
           <Icon

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

@@ -27,7 +27,34 @@ const GridToolbar = () => {
   }
 
   return (
-    <div className="flex bg-white dark:bg-zinc-900 justify-end space-x-2 px-2 py-4">
+    <div className="flex bg-zinc-100 dark:bg-zinc-900 justify-end space-x-2 px-2 py-4">
+      {/* Search input */}
+      {enableSearch && (
+        <div className="flex">
+          <input
+            type="search"
+            value={searchParam}
+            onChange={handleSearchInput}
+            placeholder="Search..."
+            className="outline-none p-2 text-xs rounded-lg max-sm:hidden dark:bg-zinc-800 bg-zinc-200"
+            onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
+              if (event.key === "Enter") {
+                handleSearch(searchParam);
+              }
+            }}
+          />
+          <button
+            className="rounded-lg w-10 flex items-center justify-center cursor-pointer"
+            onClick={() => handleSearch(searchParam)}
+          >
+            <Icon
+              elements={search}
+              svgClass={"stroke-gray-500 fill-none dark:stroke-white"}
+            />{" "}
+          </button>
+        </div>
+      )}
+
       {/* Export buttons */}
       {(enableExcelExport || enablePdfExport) && (
         <div className="flex space-x-2">
@@ -59,33 +86,6 @@ const GridToolbar = () => {
           )}
         </div>
       )}
-
-      {/* Search input */}
-      {enableSearch && (
-        <div className="flex">
-          <input
-            type="search"
-            value={searchParam}
-            onChange={handleSearchInput}
-            placeholder="Search..."
-            className="outline-none p-2 text-xs font-normal  rounded-lg max-sm:hidden dark:bg-zinc-800 bg-zinc-100"
-            onKeyDown={(event: React.KeyboardEvent<HTMLInputElement>) => {
-              if (event.key === "Enter") {
-                handleSearch(searchParam);
-              }
-            }}
-          />
-          <button
-            className="rounded-lg w-10 flex items-center justify-center "
-            onClick={() => handleSearch(searchParam)}
-          >
-            <Icon
-              elements={search}
-              svgClass={"stroke-gray-500 fill-none dark:stroke-white"}
-            />{" "}
-          </button>
-        </div>
-      )}
     </div>
   );
 };

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

@@ -1,14 +1,3 @@
-/**
- * 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
- */
-
-"use client";
-
 import React, { forwardRef, useImperativeHandle } from "react";
 import type { GridProps } from "../type";
 import Pagination from "./GridPagination";