gbs-add-block 0.0.88 → 0.0.92

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.88)
+# GBS Building Blocks 2.0 (v0.0.92)
 
 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.92)
 
 - Updated for bug fixes.
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.88",
+  "version": "0.0.92",
   "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 {

package/source/components/datepicker/index.tsx

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useEffect, useRef } from "react";
+import React, { useRef } from "react";
 import {
   useDatePickerState,
   useYearMonthNavigation,
@@ -15,7 +15,7 @@ import {
   applyScrollbarStyles,
 } from "@grampro/headless-helpers";
 import Icon from "../icon/Icon";
-import { calender, down, leftArrows, rightArrows, x } from "../icon/iconPaths";
+import { calender, down, leftArrow, rightArrow, x } from "../icon/iconPaths";
 import type { DatePickerProps } from "./types";
 import { iconClass, popUp, primary } from "../globalStyle";
 
@@ -139,7 +139,7 @@ export const DatePicker = ({
           type="button"
           onClick={toggleDatepicker}
           disabled={disabled}
-          className="flex items-center gap-2 w-full"
+          className="flex items-center gap-2 w-full cursor-pointer"
         >
           <Icon
             dimensions={{ width: "20", height: "20" }}
@@ -147,9 +147,11 @@ export const DatePicker = ({
             svgClass={iconClass["grey-common"]}
           />
           <span className={!selectedDate ? "text-gray-400 text-sm" : ""}>
-            {selectedDate
-              ? selectedDate.toLocaleDateString("en-GB")
-              : placeholder}
+            {selectedDate ? (
+              <span className="text-sm">{selectedDate.toLocaleDateString("en-GB")}</span>
+            ) : (
+              placeholder
+            )}
           </span>
         </button>
 
@@ -173,33 +175,6 @@ export const DatePicker = ({
       {showDatepicker && !disabled && (
         <div className={popUp["pop-up-style"]}>
           <div className="flex justify-between items-center p-2">
-            <button
-              type="button"
-              onClick={prevMonth}
-              disabled={isAtYearLimit(
-                "prev",
-                currentMonth,
-                currentYear,
-                yearLimitStart,
-                yearLimitEnd
-              )}
-              className={`text-gray-500 hover:text-gray-700 w-8 h-8 rounded-full flex items-center justify-center hover:bg-gray-100 ${
-                isAtYearLimit(
-                  "prev",
-                  currentMonth,
-                  currentYear,
-                  yearLimitStart,
-                  yearLimitEnd
-                )
-                  ? "opacity-50"
-                  : ""
-              }`}
-            >
-              <Icon
-                elements={leftArrows}
-                svgClass={"stroke-black fill-none dark:stroke-white"}
-              />
-            </button>
             <div className="flex items-center space-x-2">
               <span className="text-md font-semibold">
                 {new Date(currentYear, currentMonth).toLocaleString("default", {
@@ -215,36 +190,70 @@ export const DatePicker = ({
                 <Icon
                   elements={down}
                   svgClass={"stroke-black fill-none dark:stroke-white"}
+                  dimensions={{ width: "20", height: "20" }}
                 />
               </button>
             </div>
-            <button
-              type="button"
-              onClick={nextMonth}
-              disabled={isAtYearLimit(
-                "next",
-                currentMonth,
-                currentYear,
-                yearLimitStart,
-                yearLimitEnd
-              )}
-              className={`text-gray-500 hover:text-gray-700 w-8 h-8 rounded-full flex items-center justify-center hover:bg-gray-100 ${
-                isAtYearLimit(
+
+            <div className="flex items-center space-x-2">
+              <button
+                type="button"
+                onClick={prevMonth}
+                disabled={isAtYearLimit(
+                  "prev",
+                  currentMonth,
+                  currentYear,
+                  yearLimitStart,
+                  yearLimitEnd
+                )}
+                className={`text-gray-500 hover:text-gray-700 w-8 h-8 rounded-full flex items-center justify-center hover:bg-gray-100 ${
+                  isAtYearLimit(
+                    "prev",
+                    currentMonth,
+                    currentYear,
+                    yearLimitStart,
+                    yearLimitEnd
+                  )
+                    ? "opacity-50"
+                    : ""
+                }`}
+              >
+                <Icon
+                  elements={leftArrow}
+                  svgClass={"stroke-black fill-none dark:stroke-white"}
+                  dimensions={{ width: "20", height: "20" }}
+                />
+              </button>
+
+              <button
+                type="button"
+                onClick={nextMonth}
+                disabled={isAtYearLimit(
                   "next",
                   currentMonth,
                   currentYear,
                   yearLimitStart,
                   yearLimitEnd
-                )
-                  ? "opacity-50"
-                  : ""
-              }`}
-            >
-              <Icon
-                elements={rightArrows}
-                svgClass={"stroke-black fill-none dark:stroke-white"}
-              />
-            </button>
+                )}
+                className={`text-gray-500 hover:text-gray-700 w-8 h-8 rounded-full flex items-center justify-center hover:bg-gray-100 ${
+                  isAtYearLimit(
+                    "next",
+                    currentMonth,
+                    currentYear,
+                    yearLimitStart,
+                    yearLimitEnd
+                  )
+                    ? "opacity-50"
+                    : ""
+                }`}
+              >
+                <Icon
+                  elements={rightArrow}
+                  svgClass={"stroke-black fill-none dark:stroke-white"}
+                  dimensions={{ width: "20", height: "20" }}
+                />
+              </button>
+            </div>
           </div>
           {showYearMonthPicker ? (
             <div className="flex p-2 h-[224px] scrollbar">
@@ -351,4 +360,4 @@ export const DatePicker = ({
       )}
     </div>
   );
-};
+};

package/source/globalStyle.ts

@@ -9,7 +9,7 @@ export const popUp = {
 };
 
 export const iconClass = {
-  "grey-common": "h-4 w-4 stroke-gray-500 fill-none dark:stroke-black",
+  "grey-common": "h-4 w-4 stroke-gray-500 fill-none dark:stroke-white",
   "error-icon": "h-4 w-4 stroke-red-500 fill-none dark:stroke-red-500",
 };
 

package/source/components/skeleton/index.tsx

@@ -1,95 +0,0 @@
-/**
- * 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.
- */
-
-import React, { useMemo, memo } from "react";
-
-type SkeletonType = "text" | "circle" | "rectangle";
-
-interface SkeletonProps {
-  type?: SkeletonType;
-  lines?: number;
-  height?: string | number;
-  width?: string | number;
-  className?: string;
-  style?: React.CSSProperties;
-  animationDuration?: number;
-  keyframes?: string;
-}
-
-export const Skeleton: React.FC<SkeletonProps> = memo(
-  ({
-    type = "text",
-    lines = 1,
-    height,
-    width,
-    className = "",
-    style = {},
-    animationDuration = 1.5,
-    keyframes = `
-    @keyframes pulse {
-      0% { opacity: 0.6; }
-      50% { opacity: 1; }
-      100% { opacity: 0.6; }
-    }
-  `,
-  }) => {
-    const getStyle = useMemo(() => {
-      const baseStyle: React.CSSProperties = {
-        backgroundColor: "#e0e0e0",
-        borderRadius: "4px",
-        animation: `pulse ${animationDuration}s ease-in-out 0.5s infinite`,
-        width: width || "100%",
-        ...style,
-      };
-
-      switch (type) {
-        case "text":
-          return {
-            ...baseStyle,
-            height: height || "16px",
-            marginBottom: "8px",
-          };
-        case "circle":
-          return {
-            ...baseStyle,
-            height: height || "48px",
-            width: width || "48px",
-            borderRadius: "50%",
-          };
-        case "rectangle":
-          return {
-            ...baseStyle,
-            height: height || "120px",
-          };
-        default:
-          return baseStyle;
-      }
-    }, [type, height, width, style, animationDuration]);
-
-    const renderLines = useMemo(() => {
-      if (type !== "text" || lines <= 1) return null;
-
-      return Array.from({ length: lines - 1 }, (_, index) => (
-        <div
-          key={index}
-          className={`skeleton-line ${className}`}
-          style={getStyle}
-        />
-      ));
-    }, [type, lines, className, getStyle]);
-
-    return (
-      <div className="skeleton-wrapper" style={{ width: "100%" }}>
-        <style>{keyframes}</style>
-        <div className={`skeleton ${className}`} style={getStyle} />
-        {renderLines}
-      </div>
-    );
-  }
-);
-
-Skeleton.displayName = "Skeleton";