pixelize-design-library 2.1.20 → 2.1.21

package/src/Components/Table/Components/TableActions.tsx

@@ -1,75 +0,0 @@
-import React from "react";
-import {
-  Button,
-  IconButton,
-  Popover,
-  PopoverBody,
-  PopoverContent,
-  PopoverTrigger,
-  Portal,
-  VStack,
-} from "@chakra-ui/react";
-import { EllipsisVertical, ExternalLink, Pencil, Trash2 } from "lucide-react";
-
-const TableActions = ({ row }: any) => {
-  return (
-    <Popover placement="bottom-start" closeOnBlur>
-      <PopoverTrigger>
-        <IconButton
-          aria-label="Link"
-          color={"black"}
-          icon={<EllipsisVertical size={17}/>}
-          size="sm"
-          p={0}
-          variant="ghost"
-          _hover={{ transform: "scale(1.2)" }}
-        />
-      </PopoverTrigger>
-      <Portal>
-        <PopoverContent w="auto" minW="150px" boxShadow="lg" p={0} zIndex={999}>
-          <PopoverBody>
-            <VStack align="stretch" spacing={1}>
-              {row.onLink && (
-                <Button
-                  size="sm"
-                  variant="ghost"
-                  justifyContent="flex-start"
-                  gap={2}
-                  onClick={() => row?.onLink(row)}
-                >
-                  <ExternalLink size={17}/> View
-                </Button>
-              )}
-              {row.onEdit && (
-                <Button
-                  size="sm"
-                  variant="ghost"
-                  justifyContent="flex-start"
-                  gap={2}
-                  onClick={() => row?.onEdit?.(row)}
-                >
-                  <Pencil size={17}/> Edit
-                </Button>
-              )}
-              {row.onDelete && (
-                <Button
-                  size="sm"
-                  variant="ghost"
-                  justifyContent="flex-start"
-                  colorScheme="red"
-                  gap={2}
-                  onClick={() => row?.onDelete?.(row)}
-                >
-                  <Trash2 size={17} />
-                  Delete
-                </Button>
-              )}
-            </VStack>
-          </PopoverBody>
-        </PopoverContent>
-      </Portal>
-    </Popover>
-  );
-};
-
-export default TableActions;

package/src/Components/Table/Components/TableBody.tsx

@@ -1,299 +0,0 @@
-import { Box, IconButton, Td, Tr } from "@chakra-ui/react";
-import React, { useCallback, useState } from "react";
-import { TableCellCalculation } from "../../../Utils/table";
-import { DataObject, TableBodyPageProps } from "../TableProps";
-import { useCustomTheme } from "../../../Theme/useCustomTheme";
-import { TableBodyLoading } from "./TableLoading";
-import TableActions from "./TableActions";
-import { ChevronDown, ChevronRight } from "lucide-react";
-import CheckBox from "../../Checkbox/Checkbox";
-
-const TableBody = ({
-  data,
-  isCheckbox,
-  columns,
-  startRow,
-  columnWidths,
-  freezedBgColor,
-  freezedTextColor,
-  noBorders,
-  handleCheckbox,
-  selections,
-  isLoading,
-  onRowClick,
-  isContent,
-  isLink,
-  isActionFreeze,
-}: TableBodyPageProps) => {
-  const theme: any = useCustomTheme();
-  const [expandedRows, setExpandedRows] = useState<Set<number>>(new Set());
-
-  const toggleRowExpansion = (rowIndex: number) => {
-    setExpandedRows((prev) => {
-      const newSet = new Set(prev);
-      if (newSet.has(rowIndex)) {
-        newSet.delete(rowIndex);
-      } else {
-        newSet.add(rowIndex);
-      }
-      return newSet;
-    });
-  };
-
-  const handleRowClick = (
-    row: DataObject,
-    header: Record<string | number, string | number>
-  ) => {
-    onRowClick && onRowClick(row, header);
-  };
-
-  const RenderCheckbox = useCallback(
-    ({ row, isChecked }: { row: DataObject; isChecked: boolean }) => {
-      return (
-        <Td
-          w="6"
-          fontSize={14}
-          fontWeight={600}
-          color={theme.colors?.background?.[50]}
-          textTransform={"capitalize"}
-          backgroundColor={theme.colors?.background?.[50]}
-          position={"sticky"}
-          borderBottom={
-            noBorders ? "none" : `0.063rem solid ${theme.colors?.border[500]}`
-          }
-          boxSizing="border-box"
-          left={0}
-          zIndex={1}
-          className={`columns sticky-columns`}
-        >
-          <CheckBox
-            aria-label="Select all rows"
-            onChange={() => handleCheckbox(row.id)}
-            isChecked={isChecked}
-          />
-        </Td>
-      );
-    },
-    [handleCheckbox, noBorders, theme.colors]
-  );
-
-  const RenderContent = useCallback(
-    ({
-      isExpanded,
-      rowIndex,
-      isContent,
-    }: {
-      isExpanded: boolean;
-      rowIndex: number;
-      isContent: boolean;
-    }) => {
-      return (
-        <Td
-          w="6"
-          p={0}
-          fontSize={14}
-          backgroundColor={theme.colors?.background?.[50]}
-          color={freezedTextColor}
-          position={"sticky"}
-          borderBottom={
-            noBorders ? "none" : `0.063rem solid ${theme.colors?.border[500]}`
-          }
-          boxSizing="border-box"
-          left={0}
-          zIndex={1}
-          className={`columns sticky-columns`}
-        >
-          {isContent && (
-            <IconButton
-              aria-label={isExpanded ? "Collapse row" : "Expand row"}
-              color={theme.colors?.gray[600]}
-              icon={
-                isExpanded ? (
-                  <ChevronDown fontSize={16} />
-                ) : (
-                  <ChevronRight fontSize={16} />
-                )
-              }
-              _hover={{ transform: "scale(1.1)" }}
-              size="sm"
-              onClick={() => toggleRowExpansion(rowIndex)}
-              variant="ghost"
-            />
-          )}
-        </Td>
-      );
-    },
-    [freezedTextColor, noBorders, theme.colors]
-  );
-
-  const RenderView = useCallback(
-    ({ row }: { row: DataObject }) => {
-      return (
-        <Td
-          w={2}
-          p={0}
-          fontSize={14}
-          backgroundColor={theme?.colors?.background?.[50]}
-          color={freezedTextColor}
-          position={isActionFreeze ? "sticky" : "relative"}
-          borderBottom={
-            noBorders ? "none" : `0.063rem solid ${theme.colors?.border[500]}`
-          }
-          boxSizing="border-box"
-          right={0}
-          zIndex={1}
-          className={`columns sticky-columns${isActionFreeze ? "-right" : ""}`}
-        >
-          {(row.onLink || row.onEdit || row.onDelete) && (
-            <TableActions row={row} />
-          )}
-        </Td>
-      );
-    },
-    [freezedTextColor, noBorders, theme.colors, isActionFreeze]
-  );
-
-  const totalVisibleColumns =
-    Object.values(columns).filter((o) => !o.isHidden).length +
-    (isCheckbox ? 1 : 0) +
-    (isContent ? 1 : 0) +
-    (isLink ? 1 : 0);
-  if (isLoading) {
-    return (
-      <TableBodyLoading
-        noOfColumns={totalVisibleColumns}
-        borderColor={theme.colors.gray[300]}
-      />
-    );
-  }
-
-  if (data.length === 0) {
-    return (
-      <Tr backgroundColor={theme.colors.white}>
-        <Td colSpan={totalVisibleColumns} textAlign="center" py={4}>
-          <Box textAlign="center" fontSize={14}>
-            <p>No data found</p>
-          </Box>
-        </Td>
-      </Tr>
-    );
-  }
-
-  return (
-    <>
-      {data.map((row, index) => {
-        const rowIndex = startRow + index;
-        const isExpanded = expandedRows.has(rowIndex);
-        const isChecked = selections.includes(row.id);
-        return (
-          <React.Fragment key={rowIndex}>
-            <Tr
-              key={index + 1}
-              sx={
-                isChecked
-                  ? {
-                      "& td": {
-                        backgroundColor: theme.colors.disabled[100],
-                      },
-                    }
-                  : {}
-              }
-            >
-              {isContent && (
-                <RenderContent
-                  rowIndex={rowIndex}
-                  isExpanded={isExpanded}
-                  isContent={!!row?.content?.()}
-                />
-              )}
-              {isCheckbox && <RenderCheckbox row={row} isChecked={isChecked} />}
-              {columns.map((header, headerIndex) => {
-                if (header.isHidden) return null;
-                const isFrozen = header.isFreeze;
-                const { leftOffset } = TableCellCalculation({
-                  isFrozen,
-                  columnWidths,
-                  headerIndex,
-                  isCheckbox,
-                  header,
-                  row,
-                  freezedBgColor,
-                  index,
-                });
-
-                return (
-                  <Td
-                    maxWidth={500}
-                    minWidth={120}
-                    height={45}
-                    key={headerIndex + 1}
-                    onClick={() =>
-                      !header.node
-                        ? handleRowClick(row, {
-                            label: header.label,
-                            id: header.id,
-                          })
-                        : null
-                    }
-                    fontSize={14}
-                    fontWeight={400}
-                    position={isFrozen ? "sticky" : undefined}
-                    left={isFrozen ? leftOffset : undefined}
-                    zIndex={isFrozen ? 1 : 0}
-                    backgroundColor={theme.colors.background?.[50]}
-                    textOverflow={"ellipsis"}
-                    borderBottom={
-                      noBorders
-                        ? "none"
-                        : `0.063rem solid ${theme.colors?.gray[isFrozen || isChecked ? 300 : 200]}`
-                    }
-                    className={`columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`}
-                    boxSizing="border-box"
-                    color={theme.colors?.text?.[500]}
-                    _hover={
-                      row.cellStyle?.[header.id] || row.rowStyle
-                        ? {}
-                        : {
-                            backgroundColor:
-                              theme.colors.secondary?.opacity?.[4],
-                          }
-                    }
-                  >
-                    <Box
-                      display={"block"}
-                      overflow={"hidden"}
-                      whiteSpace={"normal"}
-                      overflowWrap={"break-word"}
-                    >
-                      {header.node ? header.node(row) : row[header.id]}
-                    </Box>
-                  </Td>
-                );
-              })}
-              {isLink && <RenderView row={row} />}
-            </Tr>
-            {row.content && isExpanded && (
-              <Tr>
-                <Td
-                  colSpan={
-                    columns.length +
-                    (isCheckbox ? 1 : 0) +
-                    (isContent ? 1 : 0) +
-                    (isLink ? 1 : 0)
-                  }
-                  p={2}
-                >
-                  <Box p={2} bg={theme.colors.white} borderRadius="md">
-                    {row?.content(row)}
-                  </Box>
-                </Td>
-              </Tr>
-            )}
-          </React.Fragment>
-        );
-      })}
-    </>
-  );
-};
-
-export default TableBody;

package/src/Components/Table/Components/TableFilters.tsx

@@ -1,77 +0,0 @@
-import React, { memo, useEffect, useRef, useState } from "react";
-import {
-  IconButton,
-  Input,
-  InputGroup,
-  InputLeftElement,
-  Popover,
-  PopoverBody,
-  PopoverContent,
-  PopoverTrigger,
-  Portal,
-} from "@chakra-ui/react";
-import { TableFiltersProps } from "../TableProps";
-import { debounce } from "../../../Utils/table";
-import { EllipsisVertical, Search } from "lucide-react";
-
-const TableFilters = memo(
-  ({ header, setColumnsSearch, columnsSearch, onClose }: TableFiltersProps) => {
-    const searchRef = useRef<HTMLInputElement>(null);
-
-    const [refreshDataOnOpen, setRefreshDataOnOpen] = useState(false);
-
-    const debounceRef = debounce((value: string) => {
-      setColumnsSearch(value);
-    }, 700);
-
-    useEffect(() => {
-      if (columnsSearch.length && searchRef.current) {
-        searchRef.current.value = columnsSearch;
-      }
-      /* eslint-disable */
-    }, [refreshDataOnOpen]);
-
-    return (
-      <Popover
-        onClose={onClose}
-        onOpen={() => {
-          setRefreshDataOnOpen((prev) => !prev);
-        }}
-      >
-        <PopoverTrigger>
-          <IconButton
-            aria-label="Search"
-            icon={<EllipsisVertical size={17} />}
-            size="xs"
-            variant="ghost"
-            _hover={{ bg: "none" }}
-          />
-        </PopoverTrigger>
-        <Portal>
-          <PopoverContent width="200px">
-            <PopoverBody p={2}>
-              <InputGroup flex="1" size={"xs"}>
-                <InputLeftElement pointerEvents="none">
-                  <Search color="gray.300" />
-                </InputLeftElement>
-                <Input
-                  autoFocus
-                  placeholder={`Search ${header.label}...`}
-                  size="xs"
-                  ref={searchRef}
-                  onChange={(e) => {
-                    e.stopPropagation();
-                    debounceRef(e.target.value);
-                  }}
-                  onFocus={(e) => e.stopPropagation()}
-                />
-              </InputGroup>
-            </PopoverBody>
-          </PopoverContent>
-        </Portal>
-      </Popover>
-    );
-  }
-);
-
-export default TableFilters;