pixelize-design-library 2.1.20 → 2.1.21

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

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

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

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

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