pixelize-design-library 2.1.19 → 2.1.20

package/src/Components/Table/Components/TableHeader.tsx

@@ -0,0 +1,314 @@
+import { Box, Th, Tr } from "@chakra-ui/react";
+import React, { memo, useCallback, useState } from "react";
+import { calculateLeftOffset } from "../../../Utils/table";
+import { useCustomTheme } from "../../../Theme/useCustomTheme";
+import {
+  ColumnHeaderProps,
+  SortingProps,
+  TableHeaderPageProps,
+} from "../TableProps";
+import TableFilters from "./TableFilters";
+import { ChevronDown, ChevronsUpDown, ChevronUp } from "lucide-react";
+import CheckBox from "../../Checkbox/Checkbox";
+
+const TableHeader = ({
+  columns,
+  isCheckbox,
+  handleSort,
+  headerRefs,
+  columnWidths,
+  columnsSort,
+  headerBgColor,
+  headerTextColor,
+  freezedBgColor,
+  freezedTextColor,
+  noBorders,
+  handleCheckbox,
+  checked,
+  isLoading,
+  isContent,
+  isLink,
+  isActionFreeze,
+  setColumnsSearch,
+  columnsSearch,
+}: TableHeaderPageProps) => {
+  const theme: any = useCustomTheme();
+
+  const RenderCheckbox = useCallback(() => {
+    return (
+      <Th
+        w={6}
+        fontSize={14}
+        fontWeight={600}
+        color={freezedTextColor}
+        textTransform={"capitalize"}
+        backgroundColor={theme.colors?.table?.hover?.[600]}
+        borderY={
+          noBorders ? "none" : `0.063rem solid ${theme.colors?.gray[300]}`
+        }
+        position={"sticky"}
+        className={`columns sticky-columns`}
+        left={"0px"}
+        zIndex={9}
+        boxShadow={"2px 0 5px rgba(0, 0, 0, 0.1)"}
+      >
+        <CheckBox
+          aria-label="Select all rows"
+          variant={"outline"}
+          onChange={() => handleCheckbox(0)}
+          isChecked={isLoading ? false : checked === true}
+          isIndeterminate={checked === "indeterminate"}
+        />
+      </Th>
+    );
+  }, [
+    checked,
+    freezedTextColor,
+    handleCheckbox,
+    isLoading,
+    noBorders,
+    theme.colors,
+  ]);
+
+  const RenderConent = useCallback(() => {
+    return (
+      <Th
+        w={6}
+        minW={"35px"}
+        p={0}
+        backgroundColor={theme.colors?.table?.hover?.[600]}
+        borderY={
+          noBorders ? "none" : `0.063rem solid ${theme.colors?.gray[300]}`
+        }
+        position={"sticky"}
+        className={`columns sticky-columns`}
+        left={"0px"}
+        zIndex={1}
+        boxShadow={"2px 0 5px rgba(0, 0, 0, 0.1)"}
+      ></Th>
+    );
+  }, [noBorders, theme.colors]);
+
+  const RenderView = useCallback(() => {
+    return (
+      <Th
+        w={2}
+        p={0}
+        minW={"2.065rem"}
+        backgroundColor={theme.colors?.table?.hover?.[600]}
+        borderY={
+          noBorders ? "none" : `0.063rem solid ${theme.colors?.gray[300]}`
+        }
+        position={isActionFreeze ? "sticky" : "relative"}
+        className={`columns sticky-columns`}
+        right={"0px"}
+        zIndex={1}
+        boxShadow={"2px 0 5px rgba(0, 0, 0, 0.1)"}
+      ></Th>
+    );
+  }, [noBorders, theme.colors, isActionFreeze]);
+
+  return (
+    <Tr pr={0}>
+      {isContent && <RenderConent />}
+      {isCheckbox && <RenderCheckbox />}
+      {columns.map((header, index) => {
+        if (header?.isHidden) return null;
+        return (
+          <ColumnHeader
+            header={header}
+            index={index}
+            key={header.label}
+            columnWidths={columnWidths}
+            handleSort={handleSort}
+            isCheckbox={isCheckbox}
+            headerBgColor={headerBgColor}
+            headerTextColor={headerTextColor}
+            freezedBgColor={freezedBgColor}
+            freezedTextColor={freezedTextColor}
+            noBorders={noBorders}
+            columnsSort={columnsSort}
+            headerRefs={headerRefs}
+            columnsSearch={columnsSearch}
+            setColumnsSearch={setColumnsSearch}
+          />
+        );
+      })}
+      {isLink && <RenderView />}
+    </Tr>
+  );
+};
+
+export default memo(TableHeader);
+
+const SortingIcon = memo(
+  ({
+    sortState,
+    handleSortClick,
+  }: {
+    sortState: string;
+    handleSortClick: () => void;
+  }) => {
+    const theme = useCustomTheme();
+    return (
+      <Box
+        display="flex"
+        alignItems="center"
+        justifyContent="center"
+        bg={theme.colors.white}
+        borderRadius="full"
+        cursor="pointer"
+        w="24px"
+        h="24px"
+        ml={2}
+        onClick={handleSortClick}
+        transition="transform 0.2s ease-in-out"
+        _hover={{ transform: "scale(1.1)" }}
+      >
+        {sortState === "none" && <ChevronsUpDown color="black" size={14} />}
+        {sortState === "asc" && <ChevronUp color="black" size={14} />}
+        {sortState === "desc" && <ChevronDown color="black" size={14} />}
+      </Box>
+    );
+  }
+);
+
+const ColumnHeader = memo(
+  ({
+    header,
+    index,
+    columnWidths,
+    isCheckbox,
+    headerTextColor,
+    freezedTextColor,
+    noBorders,
+    columnsSort,
+    headerRefs,
+    columnsSearch,
+    setColumnsSearch,
+    handleSort,
+  }: ColumnHeaderProps) => {
+    const [isHovered, setIsHovered] = useState(false);
+    const theme: any = useCustomTheme();
+
+    const isFrozen = header.isFreeze;
+    const leftOffset = isFrozen
+      ? calculateLeftOffset(columnWidths, index) + (isCheckbox ? 50 : 0)
+      : undefined;
+    const isSorting = header.isSort
+      ? columnsSort.find((o) => o.column === header.id)
+      : undefined;
+
+    // const TextColor = isFrozen ? freezedTextColor : headerTextColor;
+
+    const handleMouseDown = (e: React.MouseEvent<HTMLDivElement>) => {
+      const parentBox = (e.target as HTMLDivElement)
+        .parentElement as HTMLDivElement;
+
+      const th = parentBox.parentElement as HTMLTableCellElement;
+
+      const startX = e.pageX;
+      const startWidth = th.offsetWidth;
+
+      const onMouseMove = (moveEvent: MouseEvent) => {
+        const newWidth = startWidth + (moveEvent.pageX - startX);
+        th.style.width = `${newWidth}px`;
+      };
+
+      const onMouseUp = () => {
+        document.removeEventListener("mousemove", onMouseMove);
+        document.removeEventListener("mouseup", onMouseUp);
+      };
+
+      document.addEventListener("mousemove", onMouseMove);
+      document.addEventListener("mouseup", onMouseUp);
+    };
+
+    const Sorting = useCallback(
+      ({ isSorting, header }: SortingProps) => {
+        return (
+          <SortingIcon
+            sortState={isSorting?.direction ?? "none"}
+            handleSortClick={() => {
+              let direction: "asc" | "desc" | "none" = "asc";
+              if (isSorting?.direction === "asc") {
+                direction = "desc";
+              } else if (isSorting?.direction === "desc") {
+                direction = "none";
+              }
+              handleSort(header.id, direction);
+            }}
+          />
+        );
+      },
+      [handleSort]
+    );
+
+    const isFiltersEnabled =
+      (isHovered && header.isSort) ||
+      (isSorting?.direction && isSorting.direction !== "none");
+
+    return (
+      <Th
+        key={index + 1}
+        ref={(el) => (headerRefs.current[index] = el)} // Attach ref
+        textTransform={"capitalize"}
+        fontSize={16}
+        fontWeight={600}
+        position={isFrozen ? "sticky" : undefined}
+        left={isFrozen ? leftOffset : undefined}
+        minWidth={120}
+        backgroundColor={theme.colors?.table?.hover?.[600]}
+        maxWidth={500}
+        zIndex={isFrozen ? 2 : 1}
+        py={2}
+        pr={0}
+        borderY={
+          noBorders ? "none" : `0.063rem solid ${theme.colors?.border[500]}`
+        }
+        className={`columns ${isFrozen ? "sticky-columns" : "scrollable-columns"}`}
+        height={45}
+        onMouseEnter={() => setIsHovered(true)}
+        onMouseLeave={() => setIsHovered(false)}
+      >
+        <Box
+          display={"flex"}
+          color={theme.colors?.secondary?.[500]}
+          lineHeight={"1.25rem"}
+          justifyContent={"space-between"}
+          alignItems={"center"}
+          position={"relative"}
+        >
+          <Box
+            textOverflow={"ellipsis"}
+            whiteSpace={"nowrap"}
+            display={"block"}
+            overflow={"hidden"}
+          >
+            {header.label}
+          </Box>
+
+          <Box display={"flex"} alignItems={"center"}>
+            {isFiltersEnabled && (
+              <Sorting isSorting={isSorting} header={header} />
+            )}
+
+            <TableFilters
+              header={header}
+              setColumnsSearch={(searchVal: string) =>
+                setColumnsSearch((prev) => ({
+                  ...prev,
+                  [header.id]: searchVal,
+                }))
+              }
+              columnsSearch={columnsSearch[header.id] || ""}
+              onClose={() => setIsHovered(false)}
+            />
+          </Box>
+
+          <div className="resize-handle" onMouseDown={handleMouseDown}></div>
+        </Box>
+      </Th>
+    );
+  }
+);

package/src/Components/Table/Components/TableLoading.tsx

@@ -0,0 +1,83 @@
+import React from "react";
+import {
+  Box,
+  Skeleton,
+  SkeletonText,
+  Table,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+} from "@chakra-ui/react";
+
+const TableLoading = () => {
+  return (
+    <Box overflowX="auto" p={4}>
+      <Table variant="simple" width="full">
+        <Thead>
+          <Tr>
+            <Th p={2}>
+              <Skeleton height="20px" />
+            </Th>
+            <Th p={2}>
+              <Skeleton height="20px" />
+            </Th>
+            <Th p={2}>
+              <Skeleton height="20px" />
+            </Th>
+            <Th p={2}>
+              <Skeleton height="20px" />
+            </Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {Array.from({ length: 5 }).map((_, rowIndex) => (
+            <Tr key={rowIndex}>
+              <Td p={2}>
+                <SkeletonText noOfLines={1} skeletonHeight="2" />
+              </Td>
+              <Td p={2}>
+                <SkeletonText noOfLines={1} skeletonHeight="2" />
+              </Td>
+              <Td p={2}>
+                <SkeletonText noOfLines={1} skeletonHeight="2" />
+              </Td>
+              <Td p={2}>
+                <SkeletonText noOfLines={1} skeletonHeight="2" />
+              </Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </Box>
+  );
+};
+
+export default TableLoading;
+
+export const TableBodyLoading = ({
+  noOfColumns,
+  borderColor,
+}: {
+  noOfColumns: number;
+  borderColor: string;
+}) => {
+  return (
+    <>
+      {Array.from({ length: 5 }).map((_, index) => {
+        return (
+          <Tr key={index}>
+            <Td
+              colSpan={noOfColumns}
+              textAlign="center"
+              border={`1px solid ${borderColor}`}
+            >
+              <Skeleton height="15px" variant={"shine"} />
+            </Td>
+          </Tr>
+        );
+      })}
+    </>
+  );
+};

package/src/Components/Table/Components/TableSearch.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from "react";
+import {
+  Box,
+  Icon,
+  Input,
+  InputGroup,
+  InputRightElement,
+} from "@chakra-ui/react";
+import { Search, X } from "lucide-react";
+import { useCustomTheme } from "../../../Theme/useCustomTheme";
+import { useDebounce } from "../../../Utils/table";
+
+interface TableSearchProps {
+  onSearch?: (value: string) => void;
+}
+
+const TableSearch: React.FC<TableSearchProps> = ({ onSearch }) => {
+  const { colors }: any = useCustomTheme();
+  const [showInput, setShowInput] = useState(false);
+  const [query, setQuery] = useState("");
+
+  const handleSearchClick = () => {
+    setShowInput((prev) => !prev);
+    if (showInput) {
+      setQuery("");
+      if (query) onSearch?.(""); // clear search on close
+    }
+  };
+
+  const handleDebounce = useDebounce((value: string) => {
+    onSearch?.(value);
+  }, 700);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const value = e.target.value;
+    setQuery(value);
+
+    handleDebounce(value);
+  };
+
+  return (
+    <Box display="flex" alignItems="center" gap="2">
+      {!showInput && (
+        <Icon
+          as={Search}
+          transform="scaleX(-1)"
+          cursor="pointer"
+          boxSize={5}
+          color={colors?.text?.[500]}
+          onClick={handleSearchClick}
+        />
+      )}
+
+      {showInput ? (
+        <InputGroup maxW="12.5rem" transition="all 0.3s ease">
+          <Input
+            placeholder="Search..."
+            value={query}
+            onChange={handleInputChange}
+            size="sm"
+            borderRadius="md"
+            borderColor={colors?.border?.[500]}
+            _focus={{ borderColor: colors?.primary?.[500] }}
+            autoFocus
+          />
+          <InputRightElement
+            display="flex"
+            alignItems="center"
+            height={"2rem"}
+          >
+            <Icon
+              as={X}
+              color={colors?.text?.[500]}
+              cursor="pointer"
+              onClick={handleSearchClick}
+            />
+          </InputRightElement>
+        </InputGroup>
+      ) : null}
+    </Box>
+  );
+};
+
+export default TableSearch;

package/src/Components/Table/Components/useDebounce.ts

@@ -0,0 +1,31 @@
+import { useCallback, useEffect, useRef } from "react";
+
+// First, create a custom debounce hook
+const useDebounce = (callback: Function, delay: number) => {
+  const timeoutRef = useRef<NodeJS.Timeout>();
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const debouncedCallback = useCallback(
+    (...args: any[]) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      timeoutRef.current = setTimeout(() => {
+        callback(...args);
+      }, delay);
+    },
+    [callback, delay]
+  );
+
+  return debouncedCallback;
+};
+
+export default useDebounce;