pixelize-design-library 2.1.19 → 2.1.20

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

@@ -0,0 +1,75 @@
+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

@@ -0,0 +1,299 @@
+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

@@ -0,0 +1,77 @@
+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;