pixelize-design-library 2.1.20 → 2.1.21

package/src/Components/Table/Components/useTable.ts

@@ -1,220 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { useCustomTheme } from "../../../Theme/useCustomTheme";
-import {
-  ColumnSortingProps,
-  DataObject,
-  TableHeaderProps,
-} from "../TableProps";
-import { globalSearchFilter, SortMultiColumnData } from "../../../Utils/table";
-
-type UseTableProps = {
-  tableBorderColor?: string;
-  data: DataObject[];
-  isPagination: boolean;
-  selections?: (string | number)[];
-  columns: TableHeaderProps[];
-  onSelection?: (selected: (string | number)[]) => void;
-  tablePreferences?: Record<string, any>;
-  savePreferences?: (data: Record<string, any>) => void;
-  noOfRowsPerPage?: number;
-  isServerPagination: boolean;
-  totalRecords: number;
-};
-
-const defaultPageSize = 50;
-
-const useTable = ({
-  tableBorderColor,
-  data,
-  isPagination,
-  selections,
-  onSelection,
-  tablePreferences,
-  savePreferences,
-  noOfRowsPerPage,
-  isServerPagination,
-  totalRecords,
-  columns,
-}: UseTableProps) => {
-  const theme = useCustomTheme();
-
-  const headerRefs = useRef<(HTMLTableCellElement | null)[]>([]);
-
-  const [columnWidths, setColumnWidths] = useState<number[]>([]);
-  const [selection, setSelection] = useState<(string | number)[]>(
-    selections ?? []
-  );
-  const [columnsSort, setColumnsSort] = useState<ColumnSortingProps[]>([]);
-  const [currentPage, setCurrentPage] = useState(0);
-  const [rowsPerPage, setRowsPerPage] = useState(
-    noOfRowsPerPage ?? defaultPageSize
-  );
-
-  const tableData = useMemo(() => data, [data]);
-  const [filteredData, setFilteredData] = useState(tableData);
-  const [columnsList, setColumnsList] = useState(columns);
-
-  useEffect(() => {
-    if (tablePreferences) {
-      const columnPreference = tablePreferences.columns;
-      if (columnPreference?.length) {
-        setColumnsList(columnPreference);
-      }
-    }
-  }, [tablePreferences]);
-
-  useEffect(() => {
-    setFilteredData(tableData);
-  }, [tableData]);
-
-  const tableContainerStyles = useMemo(
-    () => ({
-      borderRadius: "10px 0 0 10px",
-      borderWidth: "0px 0px 0px 5px",
-      borderColor: tableBorderColor ?? theme.colors?.gray[500],
-      boxShadow: theme.shadows.lg,
-      maxHeight: "50vh",
-      overflowY: "auto",
-    }),
-    [tableBorderColor, theme]
-  );
-
-  const isContent = useMemo(
-    () => tableData.some((o) => o.content),
-    [tableData]
-  );
-  const isLink = useMemo(
-    () => tableData.some((o) => o.onLink || o.onDelete || o.onEdit),
-    [tableData]
-  );
-
-  useEffect(() => {
-    const widths = headerRefs.current.map((ref) => ref?.offsetWidth || 0);
-    setColumnWidths(widths);
-  }, []);
-
-  const pages = useMemo(() => {
-    if (isServerPagination) {
-      return Math.ceil(totalRecords / (noOfRowsPerPage ?? 1));
-    }
-    return isPagination ? Math.ceil(tableData.length / rowsPerPage) : 0;
-  }, [
-    isPagination,
-    rowsPerPage,
-    tableData.length,
-    totalRecords,
-    isServerPagination,
-    noOfRowsPerPage,
-  ]);
-  const startRow = useMemo(
-    () => (!isPagination ? 0 : currentPage * rowsPerPage),
-    [currentPage, isPagination, rowsPerPage]
-  );
-  const endRow = useMemo(
-    () => (!isPagination ? tableData.length : startRow + rowsPerPage),
-    [isPagination, rowsPerPage, startRow, tableData.length]
-  );
-
-  useEffect(() => {
-    if (isServerPagination) {
-      return setFilteredData(tableData);
-    }
-    const sortedData = SortMultiColumnData(tableData, columnsSort);
-    const data = sortedData.slice(startRow, endRow);
-    return setFilteredData(data);
-  }, [columnsSort, startRow, endRow, tableData, isServerPagination]);
-
-  const handlePageSizeChange = (
-    event: React.ChangeEvent<HTMLSelectElement>
-  ) => {
-    const value = Number(event.target.value);
-    setRowsPerPage(value !== 0 ? value : defaultPageSize);
-    setCurrentPage(0);
-  };
-
-  const handleSort = useCallback(
-    (field: string | number, sort: "asc" | "desc" | "none") => {
-      if (!sort) return;
-      const newSortState = [...columnsSort];
-      const existingIndex = newSortState.findIndex(
-        (sort) => sort.column === field
-      );
-
-      if (existingIndex === -1) {
-        newSortState.push({
-          column: field,
-          direction: "asc", // Default to ascending when adding a column
-        });
-      } else {
-        const existingSort = newSortState[existingIndex];
-        existingSort.direction = sort;
-      }
-
-      setColumnsSort(newSortState);
-    },
-    [columnsSort]
-  );
-  useEffect(() => {
-    setSelection(selections ?? []);
-  }, [selections]);
-
-  const handleCheckbox = useCallback(
-    (id: string | number) => {
-      let selectedItems = [];
-      if (id === 0) {
-        if (selection.length === tableData.length) {
-          selectedItems = [];
-        } else {
-          selectedItems = tableData.map((item) => item.id);
-        }
-      } else if (selection.includes(id)) {
-        selectedItems = selection.filter((item) => item !== id);
-      } else {
-        selectedItems = [...selection, id];
-      }
-      setSelection(selectedItems);
-      onSelection && onSelection(selectedItems);
-    },
-    [onSelection, selection, tableData]
-  );
-
-  const handleColumnPreferences = (columns: any) => {
-    setColumnsList(columns);
-    savePreferences &&
-      savePreferences({
-        ...tablePreferences,
-        columns: columns,
-      });
-  };
-
-  const handleGlobalSearch = (query: string) => {
-    if (!query) setFilteredData(tableData);
-    setFilteredData(globalSearchFilter(tableData, query));
-  };
-
-  return {
-    tableData,
-    tableContainerStyles,
-    isContent,
-    isLink,
-    headerRefs,
-    columnWidths,
-    handleSort,
-    handleCheckbox,
-    filteredData,
-    startRow,
-    endRow,
-    selection,
-    columnsSort,
-    handlePageSizeChange,
-    pages,
-    currentPage,
-    rowsPerPage,
-    setCurrentPage,
-    columnsList,
-    handleColumnPreferences,
-    handleGlobalSearch,
-  };
-};
-
-export default useTable;

package/src/Components/Table/Table.stories.tsx

@@ -1,48 +0,0 @@
-// // Import React and the Table component
-// import React from 'react';
-// import Table from './Table';
-// import { TableProps } from './TableProps';
-// // Import Storybook's required modules
-// import { StoryFn, Meta } from '@storybook/react';
-// import { fn } from '@storybook/test';
-
-// // Define default export with component metadata
-// export default {
-//     title: 'Components/Table/Table',
-//     component: Table,
-// } as Meta;
-
-// const Template: StoryFn<TableProps> = (args) => <Table {...args} />;
-
-// export const Default = Template.bind({});
-// Default.args = {
-//     headers: [
-//         { label: 'name', accessor_key: "name", sort: false, search: false, columnFreeze: true },
-//         { label: 'email', accessor_key: "email", sort: true, search: true, columnFreeze: true },
-//         { label: 'role', accessor_key: "role", sort: true, search: true },
-//         { label: 'age', accessor_key: "age", sort: true, search: true },
-//         { label: 'age1', accessor_key: "age1", sort: true, search: true },
-//         { label: 'age2', accessor_key: "age2", sort: true, search: true },
-//         { label: 'age3', accessor_key: "age3", sort: true, search: true },
-//         { label: 'age4', accessor_key: "age4", sort: true, search: true },
-//         { label: 'age5', accessor_key: "age5", sort: true, search: true },
-//         { label: 'age6', accessor_key: "age6", sort: true, search: true },
-//         { label: 'age7', accessor_key: "age7", sort: true, search: true },
-//     ],
-//     data: [{
-//         id: 1,
-//         name: `User 1`,
-//         email: `user1@example.com`,
-//         role: 'Developer',
-//         age: 20,
-//         age1: 34,
-//         age2: 56,
-//         age3: 66,
-//         age4: 68,
-//         age5: 70,
-//         age6: 35,
-//         age7: 24,
-//     }],
-// };
-
-export {};

package/src/Components/Table/Table.tsx

@@ -1,258 +0,0 @@
-import React, { useEffect, useMemo, useState } from "react";
-import { Box, TableContainer } from "@chakra-ui/react";
-import { Table as ChakraTable, Tbody, Thead } from "@chakra-ui/react";
-
-import { TableProps } from "./TableProps";
-import Pagination from "./Components/Pagination";
-import TableHeader from "./Components/TableHeader";
-import TableBody from "./Components/TableBody";
-import { useCustomTheme } from "../../Theme/useCustomTheme";
-import useTable from "./Components/useTable";
-import { searchAndSortData } from "../../Utils/table";
-import {
-  useGetPreferences,
-  useSavePreferences,
-} from "../../Hooks/usePreferences";
-import TableSettings from "./TableSettings/TableSettings";
-import HeaderActions from "./Components/HeaderActions";
-import VeritcalDivider from "../Divider/Divider";
-import TableSearch from "./Components/TableSearch";
-
-export default function Table({
-  data,
-  columns,
-  onSelection,
-  isLoading,
-  isCheckbox = false,
-  headerBgColor,
-  freezedBgColor,
-  headerTextColor,
-  freezedTextColor,
-  tableBorderColor,
-  noBorders = false,
-  isPagination = true,
-  onRowClick,
-  selections,
-  isActionFreeze = true,
-  preferencesUrl = "",
-  preferencesKey = "",
-  preferencesName = "",
-  preferencesPage = "",
-  authToken = "",
-  paginationMode = "client",
-  noOfRowsPerPage = 50,
-  totalRecords = 0,
-  onPagination,
-  isTableSettings = false,
-  headerActions,
-}: TableProps) {
-  const theme: any = useCustomTheme();
-  const [columnsSearch, setColumnsSearch] = useState({});
-
-  const isServerPagination = paginationMode === "server";
-
-  const { preferences, loading } = useGetPreferences({
-    baseUrl: preferencesUrl,
-    page: preferencesPage,
-    key: preferencesKey,
-    name: preferencesName,
-    authToken: authToken,
-  });
-
-  const { savePreferences } = useSavePreferences({
-    baseUrl: preferencesUrl,
-    page: preferencesPage,
-    key: preferencesKey,
-    name: preferencesName,
-    authToken: authToken,
-  });
-
-  const isTableLoading = useMemo(() => {
-    return loading || isLoading;
-  }, [loading, isLoading]);
-
-  const tablePreferences = useMemo(() => {
-    if (preferences.length) {
-      return preferences[0].json;
-    }
-    return {};
-  }, [preferences]);
-
-  const {
-    tableData,
-    isContent,
-    isLink,
-    headerRefs,
-    columnWidths,
-    handleSort,
-    handleCheckbox,
-    filteredData,
-    startRow,
-    endRow,
-    selection,
-    columnsSort,
-    currentPage,
-    pages,
-    rowsPerPage,
-    handlePageSizeChange,
-    setCurrentPage,
-    columnsList,
-    handleColumnPreferences,
-    handleGlobalSearch,
-  } = useTable({
-    tableBorderColor,
-    data,
-    isPagination,
-    selections,
-    columns,
-    onSelection,
-    tablePreferences,
-    savePreferences,
-    noOfRowsPerPage,
-    totalRecords,
-    isServerPagination,
-  });
-
-  const _filteredData = useMemo(() => {
-    return searchAndSortData(filteredData, columnsSearch);
-  }, [columnsSearch, filteredData]);
-
-  useEffect(() => {
-    if (onPagination) {
-      onPagination(currentPage + 1, noOfRowsPerPage);
-    }
-  }, [currentPage, onPagination, noOfRowsPerPage]);
-
-  const tablePaginationText = `${startRow + 1} - ${endRow > tableData.length ? tableData.length : endRow} of ${isServerPagination ? totalRecords : tableData.length}`;
-
-  return (
-    <Box
-      bg={theme.colors?.background?.[50]}
-      border={`0.063rem solid ${theme.colors.border?.[500]}`}
-      borderRadius={3}
-    >
-      <Box
-        display={"flex"}
-        alignItems={"center"}
-        justifyContent={"space-between"}
-        px={3}
-        py={0}
-        height={45}
-        gap={2}
-      >
-        <TableSearch onSearch={handleGlobalSearch} />
-        {isTableSettings && (
-          <>
-            <VeritcalDivider />
-            <TableSettings
-              columns={columnsList}
-              onSave={(cols: any) => handleColumnPreferences(cols)}
-            />
-          </>
-        )}
-        {selection.length ? (
-          <>
-            <VeritcalDivider />
-            <HeaderActions actions={headerActions} selections={selection} />
-          </>
-        ) : null}
-        {(isPagination || isServerPagination) && (
-          <Box ml={"auto"}>
-            <Pagination
-              columns={columns}
-              currentPage={currentPage}
-              setCurrentPage={setCurrentPage}
-              rowsPerPage={rowsPerPage}
-              pages={pages}
-              paginationText={tablePaginationText}
-              handlePageSizeChange={handlePageSizeChange}
-              dataLength={tableData.length}
-              isServerPagination={isServerPagination}
-              isVisiblity={true}
-            />
-          </Box>
-        )}
-      </Box>
-      <TableContainer maxH={500} overflowY={"auto"}>
-        <ChakraTable
-          variant="simple"
-          size="sm"
-          overflowX="scroll"
-          minW="100%"
-          className="table_wrapper"
-          sx={{
-            width: "100%",
-            borderCollapse: "collapse",
-            "th .resize-handle": {
-              position: "absolute",
-              top: 0,
-              right: 0,
-              width: "8px",
-              height: "100%",
-              cursor: "col-resize",
-              backgroundColor: "transparent",
-              zIndex: 999,
-            },
-          }}
-        >
-          <Thead position="sticky" top={-0.5} zIndex={2}>
-            <TableHeader
-              columns={columnsList}
-              isCheckbox={isCheckbox}
-              headerBgColor={
-                headerBgColor ?? theme.colors.backgroundColor.muted
-              }
-              headerTextColor={headerTextColor ?? theme.colors?.gray[600]}
-              freezedBgColor={
-                freezedBgColor ?? theme.colors.backgroundColor.secondary
-              }
-              freezedTextColor={freezedTextColor ?? theme.colors?.gray[600]}
-              handleSort={handleSort}
-              headerRefs={headerRefs}
-              columnWidths={columnWidths}
-              columnsSort={columnsSort}
-              noBorders={noBorders}
-              handleCheckbox={handleCheckbox}
-              isLoading={isTableLoading}
-              checked={
-                tableData.length !== 0 && selection.length === tableData.length
-                  ? true
-                  : selection.length === 0
-                    ? false
-                    : "indeterminate"
-              }
-              isContent={isContent}
-              isLink={isLink}
-              isActionFreeze={isActionFreeze}
-              setColumnsSearch={setColumnsSearch}
-              columnsSearch={columnsSearch}
-            />
-          </Thead>
-
-          <Tbody>
-            <TableBody
-              data={_filteredData}
-              columns={columnsList}
-              startRow={startRow}
-              endRow={endRow}
-              isCheckbox={isCheckbox}
-              columnWidths={columnWidths}
-              noBorders={noBorders}
-              freezedBgColor={
-                freezedBgColor ?? theme.colors.backgroundColor.secondary
-              }
-              freezedTextColor={freezedTextColor ?? theme.colors?.gray[600]}
-              handleCheckbox={handleCheckbox}
-              selections={selection}
-              isLoading={isTableLoading}
-              onRowClick={onRowClick}
-              isContent={isContent}
-              isLink={isLink}
-              isActionFreeze={isActionFreeze}
-            />
-          </Tbody>
-        </ChakraTable>
-      </TableContainer>
-    </Box>
-  );
-}

package/src/Components/Table/TableProps.tsx

@@ -1,163 +0,0 @@
-import { Dispatch, MutableRefObject, SetStateAction } from "react";
-
-export type TableProps = {
-  data: DataObject[];
-  columns: TableHeaderProps[];
-  handleExportChange?: (value: string) => void | undefined;
-  exportOptions?: ExportOption[];
-  exportLabel?: string;
-  isLoading?: boolean;
-  // loadingType?: "skeleton" | "spinner";
-  // loadingContaxt?: ReactNode;
-  // loadingBoxStyle?: React.CSSProperties;
-  isVisiblity?: boolean;
-  isCheckbox?: boolean;
-  headerBgColor?: string;
-  freezedBgColor?: string;
-  headerTextColor?: string;
-  freezedTextColor?: string;
-  tableBorderColor?: string;
-  noBorders?: boolean;
-  onSelection?: (selected: (string | number)[]) => void;
-  isPagination?: boolean;
-  selections?: (string | number)[];
-  onRowClick?: (
-    row: DataObject,
-    header: Record<string | number, string | number>
-  ) => void;
-  isActionFreeze?: boolean;
-  preferencesUrl?: string;
-  preferencesKey?: string;
-  preferencesName?: string;
-  preferencesPage?: string;
-  authToken?: string;
-  paginationMode?: "client" | "server";
-  noOfRowsPerPage?: number;
-  totalRecords?: number;
-  onPagination?: (page: number, noOfRecords: number) => void;
-  isTableSettings?: boolean;
-  headerActions?: HeaderActionsProps;
-};
-
-export type HeaderActionsProps = {
-  isDelete?: {
-    enabled?: boolean;
-    onClick?: (selection: (string | number)[]) => void;
-  };
-  isUpdate?: {
-    enabled?: boolean;
-    onClick?: (selection: (string | number)[]) => void;
-  };
-  items?: {
-    icon: React.ReactElement;
-    name: string;
-    onClick?: (selection: (string | number)[]) => void;
-  }[];
-};
-
-export type DataObject = {
-  [key: string]: string | number | any;
-};
-
-export type TableHeaderProps = {
-  label: string | number;
-  id: string | number;
-  isSort?: boolean;
-  isSearch?: boolean;
-  isFreeze?: boolean;
-  isHidden?: boolean;
-  node?: (data: DataObject) => JSX.Element | string | number | undefined;
-};
-
-export type ExportOption = {
-  label: string;
-  id: string;
-};
-
-export type ColumnSortingProps = {
-  column: string | number;
-  direction: "asc" | "desc" | "none";
-};
-
-export type TableHeaderPageProps = Pick<
-  TableProps,
-  | "columns"
-  | "isCheckbox"
-  | "headerBgColor"
-  | "headerTextColor"
-  | "freezedBgColor"
-  | "freezedTextColor"
-  | "noBorders"
-  | "isLoading"
-  | "isActionFreeze"
-> & {
-  handleSort: (label: string | number, type: "asc" | "desc" | "none") => void;
-  activeHeader?: string | null;
-  isPopoverOpen?: boolean;
-  closePopover?: () => void;
-  searchFeatures?: (header: string) => React.ReactNode;
-  // hoveredHeaderIndex: number | null;
-  handleHeaderClick?: (header: string, search: boolean) => void;
-  headerRefs: React.MutableRefObject<(HTMLTableCellElement | null)[]>;
-  columnWidths: number[];
-  columnsSort: ColumnSortingProps[];
-  handleCheckbox: (selection: string | number) => void;
-  checked: boolean | "indeterminate";
-  isContent: boolean;
-  isLink: boolean;
-  setColumnsSearch: React.Dispatch<
-    React.SetStateAction<Record<string, string>>
-  >;
-  columnsSearch: Record<string, string>;
-};
-
-export type TableBodyPageProps = Pick<
-  TableProps,
-  | "columns"
-  | "isCheckbox"
-  | "data"
-  | "freezedBgColor"
-  | "freezedTextColor"
-  | "noBorders"
-  | "isLoading"
-  | "onRowClick"
-  | "isActionFreeze"
-> & {
-  startRow: number;
-  endRow: number;
-  columnWidths: number[];
-  handleCheckbox: (selection: string | number) => void;
-  selections: (string | number)[];
-  isContent: boolean;
-  isLink: boolean;
-};
-
-export type TableFiltersProps = {
-  header: DataObject;
-  setColumnsSearch: (searchVal: string) => void;
-  columnsSearch: string;
-  onClose: () => void;
-};
-
-export type ColumnHeaderProps = Pick<
-  TableProps,
-  | "isCheckbox"
-  | "headerBgColor"
-  | "headerTextColor"
-  | "freezedBgColor"
-  | "freezedTextColor"
-  | "noBorders"
-> &
-  Pick<TableHeaderPageProps, "handleSort" | "columnsSort"> & {
-    header: TableHeaderProps;
-    index: number;
-    columnWidths: number[];
-    headerRefs: MutableRefObject<(HTMLTableCellElement | null)[]>;
-    columnsSearch: Record<string, string>;
-    setColumnsSearch: Dispatch<SetStateAction<Record<string, string>>>;
-  };
-
-export type SortingProps = {
-  isSorting: ColumnSortingProps | undefined;
-  header: TableHeaderProps;
-};