gbs-add-block 1.0.30 → 1.2.0

package/source/components/datagridbeta/hooks/usePagination.ts

@@ -1,125 +0,0 @@
-import { useState, useCallback, useEffect } from "react";
-
-export const usePagination = (
-  totalPages: number,
-  lazy: boolean,
-  dataSource?: any[],
-  pageSettings?: { pageNumber: number }
-) => {
-  const [currentPage, setCurrentPage] = useState(0);
-  const [pageStart, setPageStart] = useState(0);
-  const [pageEnd, setPageEnd] = useState(10);
-  const [prevDataLength, setPrevDataLength] = useState(0);
-
-  const updatePageRange = useCallback(
-    (page: number) => {
-      const start = Math.floor(page / 10) * 10;
-      setPageStart(start);
-      setPageEnd(Math.min(start + 10, totalPages));
-    },
-    [totalPages]
-  );
-
-  useEffect(() => {
-    if (!lazy) {
-      setPageEnd(Math.min(10, totalPages));
-    } else {
-      setPageEnd(Math.min(pageStart + 10, totalPages));
-    }
-  }, [totalPages, lazy, pageStart]);
-
-  // This will handle the case when dataSource changes
-  // and adjust the current page accordingly
-  useEffect(() => {
-    if (dataSource && prevDataLength > 0) {
-      const currentDataLength = dataSource.length;
-
-      if (currentDataLength > prevDataLength) {
-        const lastPage = totalPages - 1;
-        setCurrentPage(lastPage);
-        updatePageRange(lastPage);
-      } else if (currentDataLength < prevDataLength) {
-        const rowsPerPage = lazy ? 1 : pageSettings?.pageNumber || 10;
-        const startIndex = currentPage * rowsPerPage;
-
-        if (startIndex >= currentDataLength && currentPage > 0) {
-          const newPage = currentPage - 1;
-          setCurrentPage(newPage);
-          updatePageRange(newPage);
-        }
-      }
-    }
-    setPrevDataLength(dataSource?.length || 0);
-  }, [
-    dataSource?.length,
-    totalPages,
-    updatePageRange,
-    prevDataLength,
-    currentPage,
-    lazy,
-  ]);
-
-  const nextPage = useCallback(() => {
-    setCurrentPage((prevPage) => {
-      if (prevPage < totalPages - 1) {
-        const newPage = prevPage + 1;
-        updatePageRange(newPage);
-        return newPage;
-      }
-      return prevPage;
-    });
-  }, [totalPages, updatePageRange]);
-
-  const prevPage = useCallback(() => {
-    setCurrentPage((prevPage) => {
-      if (prevPage > 0) {
-        const newPage = prevPage - 1;
-        updatePageRange(newPage);
-        return newPage;
-      }
-      return prevPage;
-    });
-  }, [updatePageRange]);
-
-  const goToEndPage = useCallback(() => {
-    const lastPage = totalPages - 1;
-    setCurrentPage(lastPage);
-    updatePageRange(lastPage);
-  }, [totalPages, updatePageRange]);
-
-  const goToFirstPage = useCallback(() => {
-    setCurrentPage(0);
-    updatePageRange(0);
-  }, [updatePageRange]);
-
-  const goToPage = useCallback(
-    (page: number) => {
-      setCurrentPage(page);
-      updatePageRange(page);
-    },
-    [updatePageRange]
-  );
-
-  const resetPage = useCallback((dataSource: any, pageSettings: any) => {
-    const newTotalPages = Math.ceil(
-      dataSource.length / pageSettings.pageNumber
-    );
-    setCurrentPage(0);
-    setPageStart(0);
-    setPageEnd(Math.min(10, newTotalPages));
-    return newTotalPages;
-  }, []);
-
-  return {
-    currentPage,
-    pageStart,
-    pageEnd,
-    nextPage,
-    prevPage,
-    goToEndPage,
-    goToFirstPage,
-    goToPage,
-    resetPage,
-    updatePageRange,
-  };
-};

package/source/components/datagridbeta/hooks/useRowSelection.ts

@@ -1,48 +0,0 @@
-import { useState, useCallback } from "react";
-
-export const useRowSelection = (
-  workingDataSource: any[],
-  onSelectRow?: (rows: any[]) => void
-) => {
-  const [selectedRows, setSelectedRows] = useState<any[]>([]);
-
-  const handleSelectAll = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      const selected = event.target.checked ? workingDataSource : [];
-      setSelectedRows(selected);
-      onSelectRow?.(selected);
-    },
-    [workingDataSource, onSelectRow]
-  );
-
-  const handleSelect = useCallback(
-    (rowData: any) => {
-      setSelectedRows((prevData) => {
-        const isSelected = prevData.includes(rowData);
-        let updatedData;
-        if (isSelected) {
-          updatedData = prevData.filter((item) => item !== rowData);
-        } else {
-          updatedData = [...prevData, rowData];
-        }
-        if (onSelectRow) onSelectRow(updatedData);
-        return updatedData;
-      });
-    },
-    [onSelectRow]
-  );
-
-  const isRowSelected = useCallback(
-    (rowData: any) => {
-      return selectedRows.includes(rowData);
-    },
-    [selectedRows]
-  );
-
-  return {
-    selectedRows,
-    handleSelectAll,
-    handleSelect,
-    isRowSelected,
-  };
-};

package/source/components/datagridbeta/hooks/useSearch.ts

@@ -1,86 +0,0 @@
-import { useState, useCallback } from "react";
-
-interface UseSearchProps {
-  workingDataSource: any[];
-  setWorkingDataSource: (data: any[]) => void;
-  fallbackSourceData: any[];
-  dataSource: any;
-  lazy: boolean;
-  pageSettings: any;
-  resetPage: (data: any[], settings: any) => number;
-  setTotalPages: (pages: number) => void;
-  searchParamValue?: (value: string) => void;
-}
-
-export const useSearch = ({
-  workingDataSource,
-  setWorkingDataSource,
-  fallbackSourceData,
-  dataSource,
-  lazy,
-  pageSettings,
-  resetPage,
-  setTotalPages,
-  searchParamValue,
-}: UseSearchProps) => {
-  const [searchParam, setSearchParam] = useState("");
-
-  const handleSearchInput = useCallback(
-    (e: any) => {
-      const searchValue = e.target.value;
-      if (searchParamValue) searchParamValue(searchValue);
-      setSearchParam(searchValue);
-
-      if (searchValue === "") {
-        if (!lazy) {
-          const fallback =
-            fallbackSourceData.length > 0 ? fallbackSourceData : dataSource;
-          setWorkingDataSource(fallback);
-          const totalPages = resetPage(fallback, pageSettings);
-          setTotalPages(totalPages);
-        }
-      }
-    },
-    [
-      searchParamValue,
-      lazy,
-      fallbackSourceData,
-      dataSource,
-      setWorkingDataSource,
-      resetPage,
-      pageSettings,
-      setTotalPages,
-    ]
-  );
-
-  const handleSearch = useCallback(
-    (searchParam: string) => {
-      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);
-        const totalPages = resetPage(filteredData, pageSettings);
-        setTotalPages(totalPages);
-      }
-    },
-    [
-      lazy,
-      workingDataSource,
-      setWorkingDataSource,
-      resetPage,
-      pageSettings,
-      setTotalPages,
-    ]
-  );
-
-  return {
-    searchParam,
-    handleSearchInput,
-    handleSearch,
-  };
-};

package/source/components/datagridbeta/index.tsx

@@ -1,26 +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.
- * Here We Will Re-Render Grid as a Memoized Component For Better Performance.
- * Extended Documentation for Grid can be found at
- * https://psychedelic-step-e70.notion.site/Data-GRID-by-GBS-R-D-20ff97c899d24bc590215a6196435fa3
- */
-
-import { GridMemoised as GridComponent } from "./layout";
-import { memo } from "react";
-
-const DataGrid = memo(GridComponent, (prevProps, nextProps) => {
-  // Custom comparison function
-  return (
-    prevProps.dataSource === nextProps.dataSource &&
-    prevProps.columns === nextProps.columns &&
-    prevProps.pageSettings.pageNumber === nextProps.pageSettings.pageNumber &&
-    prevProps.enableSearch === nextProps.enableSearch &&
-    prevProps.enablePdfExport === nextProps.enablePdfExport &&
-    prevProps.enableExcelExport === nextProps.enableExcelExport
-  );
-});
-
-export { DataGrid };

package/source/components/datagridbeta/layout/EditableRow.tsx

@@ -1,85 +0,0 @@
-import React from "react";
-
-interface EditableRowProps {
-  columnType: string | undefined;
-  cellValue: any;
-  rowIndex: number;
-  field: string;
-  style?: React.CSSProperties;
-  rowData: any;
-}
-
-export default function EditableRow({
-  columnType,
-  cellValue,
-  rowIndex,
-  field,
-  style,
-  rowData,
-}: EditableRowProps) {
-  // Function to handle cell value change
-  const handleCellChange = (newValue: any, field: string) => {
-    if (rowData) {
-      rowData[field] = newValue;
-      rowData(rowData);
-      console.log(rowData);
-    }
-  };
-
-  switch (columnType) {
-    case "text":
-      return (
-        <input
-          key={`${field}-${rowIndex}`}
-          id={`${field}-${rowIndex}`}
-          type="text"
-          defaultValue={cellValue || ""}
-          onBlur={(e) => handleCellChange(e.target.value, field)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              e.currentTarget.blur();
-            }
-          }}
-          className="px-2 py-1 outline-none focus:ring-1 focus:ring-black rounded"
-          style={style}
-        />
-      );
-
-    case "number":
-      return (
-        <input
-          key={`${field}-${rowIndex}`}
-          id={`${field}-${rowIndex}`}
-          type="number"
-          defaultValue={cellValue || ""}
-          onBlur={(e) => handleCellChange(e.target.value, field)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              e.currentTarget.blur();
-            }
-          }}
-          className="px-2 py-1 outline-none focus:ring-1 focus:ring-black rounded"
-          style={style}
-        />
-      );
-
-    default:
-      return (
-        <input
-          type="text"
-          defaultValue={cellValue || ""}
-          onBlur={(e) => handleCellChange(e.target.value, field)}
-          onKeyDown={(e) => {
-            if (e.key === "Enter") {
-              e.currentTarget.blur();
-            }
-          }}
-          style={{
-            width: "100%",
-            border: "none",
-            background: "transparent",
-          }}
-        />
-      );
-  }
-}

package/source/components/datagridbeta/layout/FilterPopup.tsx

@@ -1,85 +0,0 @@
-import React from "react";
-import { useState } from "react";
-
-export default function FilterPopup({ show, columnHeader, filterAction }: any) {
-  const [filterValue, setFilterValue] = useState("");
-  const [filterType, setFilterType] = useState("contains");
-  const [isFilterActive, setIsFilterActive] = useState(false);
-
-  const handleFilterInput = (e: any) => {
-    const filterKeyword = e.target.value;
-    setFilterValue(filterKeyword);
-  };
-
-  const onCancel = () => {
-    filterAction({ type: "cancel" });
-  };
-
-  const applyFilter = () => {
-    filterAction({
-      type: "applyFilter",
-      filterValue,
-      filterType,
-      columnHeader,
-    });
-    show = false;
-    setIsFilterActive(true);
-  };
-
-  const clearFilter = () => {
-    setIsFilterActive(false);
-    filterAction({ type: "clearFilter", columnHeader });
-  };
-
-  return (
-    show && (
-      <div
-        className="absolute bg-gray-100 p-2 text-xs z-50 mt-48 flex flex-col shadow-lg gap-2 rounded-md dark:bg-zinc-700"
-        role="dialog"
-      >
-        <select
-          name={`${columnHeader}-filter`}
-          id={`${columnHeader}-filter-id`}
-          className="w-full p-2 rounded-lg bg-gray-200 outline-none dark:bg-gray-600"
-          value={filterType}
-          onChange={(e: any) => {
-            setFilterType(e.target.value);
-          }}
-        >
-          <option value="contains">Contains</option>
-          <option value="starts_with">Starts With</option>
-          <option value="ends_with">Ends With</option>
-        </select>
-        <input
-          type="text"
-          placeholder="Enter filter value"
-          className="rounded-lg p-2 text-xs bg-gray-200 outline-none dark:bg-gray-600"
-          value={filterValue}
-          onInput={handleFilterInput}
-        />
-        <div className="mt-2 flex space-x-1">
-          <button
-            className="text-xs bg-red-600 text-white px-2 py-0.5 rounded-lg hover:bg-red-600"
-            onClick={onCancel}
-          >
-            Cancel
-          </button>
-          {isFilterActive && (
-            <button
-              className="text-xs bg-black text-white px-2 py-0.5 rounded-lg dark:bg-white dark:text-black"
-              onClick={clearFilter}
-            >
-              Clear Filter
-            </button>
-          )}
-          <button
-            className="text-xs bg-black text-white px-2 py-0.5 rounded-lg dark:bg-white dark:text-black"
-            onClick={applyFilter}
-          >
-            Apply Filter
-          </button>
-        </div>
-      </div>
-    )
-  );
-}

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

@@ -1,221 +0,0 @@
-import React from "react";
-import { useGridContext } from "../context/GridContext";
-import FilterPopup from "./FilterPopup";
-import Icon from "../../icon/Icon";
-import { listFilter, squarePen, trash } from "../../icon/iconPaths";
-import { Column } from "../type";
-import EditableRow from "./EditableRow";
-
-const GridBody = () => {
-  const {
-    workingDataSource,
-    workingColumns,
-    isFetching,
-    currentPage,
-    pageSettings,
-    tableHeaderStyle,
-    gridColumnStyle,
-    gridColumnStyleSelectAll,
-    rowChange,
-    lazy,
-    activeFilterArray,
-    toggleFilterPopup,
-    handleFilterAction,
-    selectAll,
-    handleSelectAll,
-    handleSelect,
-    isRowSelected,
-  } = useGridContext();
-
-  const renderCell = (rowData: any, column: Column, rowIndex: number) => {
-    const cellValue = rowData[column.field];
-    const globalRowIndex = rowIndex + currentPage * pageSettings.pageNumber;
-
-    if (column.template && !column.editable) {
-      const TemplateComponent = column.template;
-      return (
-        <TemplateComponent
-          rowData={rowData}
-          rowIndex={globalRowIndex}
-          rowChange={(changes) => rowChange?.(changes)}
-        />
-      );
-    }
-
-    if (column.tooltip && !column.editable) {
-      return (
-        <span title={cellValue?.toString()}>
-          {cellValue && cellValue.length > 10
-            ? `${cellValue.slice(0, 10)}...`
-            : cellValue}
-        </span>
-      );
-    }
-
-    if (column.editable && !column.template) {
-      return (
-        <EditableRow
-          columnType={column.type ? column.type : undefined}
-          cellValue={cellValue}
-          rowIndex={globalRowIndex}
-          field={column.field}
-          style={{ width: column.width ? `${column.width}px` : "auto" }}
-          rowData={rowData}
-        />
-      );
-    }
-
-    return cellValue;
-  };
-
-  const displayStart = currentPage * pageSettings.pageNumber;
-  const displayEnd = displayStart + pageSettings.pageNumber;
-  const displayData = lazy
-    ? workingDataSource
-    : workingDataSource.slice(displayStart, displayEnd);
-
-  const isEditablePresent = workingColumns.some(
-    (column) => column.editable || column.template
-  );
-
-  return (
-    <div className="overflow-x-auto">
-      <table className="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
-        <thead>
-          <tr>
-            {selectAll && (
-              <th
-                className={tableHeaderStyle}
-                style={{ width: "2px", paddingLeft: "16px" }}
-              >
-                <input
-                  type="checkbox"
-                  onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
-                    handleSelectAll(event);
-                  }}
-                  className="form-checkbox h-5 w-5"
-                />
-              </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 ${
-                            activeFilterArray.some(
-                              (filter) => filter.filterColumn === column.field
-                            )
-                              ? "stroke-red-400 dark:stroke-red-400"
-                              : "stroke-black dark:stroke-white"
-                          }`}
-                        />
-                      </button>
-                      <FilterPopup
-                        show={column.showFilterPopup ?? false}
-                        columnHeader={column.field}
-                        filterAction={(action: any) =>
-                          handleFilterAction(action, colIndex)
-                        }
-                      />
-                    </>
-                  )}
-                </div>
-              </th>
-            ))}
-            {isEditablePresent && <th className={tableHeaderStyle}>Action</th>}
-          </tr>
-        </thead>
-        <tbody>
-          {isFetching ? (
-            <tr>
-              <td colSpan={workingColumns.length + (selectAll ? 1 : 0)}>
-                Loading...
-              </td>
-            </tr>
-          ) : displayData.length === 0 ? (
-            <tr>
-              <td
-                colSpan={workingColumns.length + (selectAll ? 1 : 0)}
-                className="text-center py-3"
-              >
-                No data found
-              </td>
-            </tr>
-          ) : (
-            displayData.map((rowData, rowIndex) => (
-              <tr
-                key={rowIndex}
-                className={
-                  isRowSelected(rowData)
-                    ? "bg-blue-100 dark:bg-blue-900"
-                    : rowIndex % 2 === 0
-                    ? "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)}
-              >
-                {selectAll && (
-                  <td className={gridColumnStyleSelectAll}>
-                    <input
-                      type="checkbox"
-                      checked={isRowSelected(rowData)}
-                      onChange={() => handleSelect(rowData)}
-                      className="form-checkbox h-5 w-5"
-                    />
-                  </td>
-                )}
-                {workingColumns.map((column, colIndex) => (
-                  <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>
-                ))}
-                {isEditablePresent && (
-                  <td style={{ width: "16px", padding: "4px" }}>
-                    <div className="flex justify-start items-start px-2 gap-3">
-                      <button
-                        className="cursor-pointer"
-                        onClick={() => console.log(rowData)}
-                      >
-                        <Icon
-                          dimensions={{ width: "16", height: "16" }}
-                          elements={squarePen}
-                          svgClass="fill-none stroke-black dark:stroke-white"
-                        />
-                      </button>
-                      <button className="cursor-pointer">
-                        <Icon
-                          dimensions={{ width: "16", height: "16" }}
-                          elements={trash}
-                          svgClass="fill-none stroke-red-500 dark:stroke-red-500"
-                        />
-                      </button>
-                    </div>
-                  </td>
-                )}
-              </tr>
-            ))
-          )}
-        </tbody>
-      </table>
-    </div>
-  );
-};
-
-export default GridBody;