rez-table-listing-mui 1.3.62 → 2.0.0

package/src/listing/components/table-head-dnd-cell.tsx

@@ -1,150 +0,0 @@
-import { flexRender } from "@tanstack/react-table";
-import { useSortable } from "@dnd-kit/sortable";
-import { CSSProperties, useState } from "react";
-import { CSS } from "@dnd-kit/utilities";
-import { DownArrow, DragHandleIcon, UpArrow } from "../../assets/svg";
-import {
-  getColumnAlignment,
-  getColumnPinningStyles,
-} from "../libs/utils/common";
-import { align } from "../types/common";
-import { TableHeaderProps } from "../types/table";
-import TableHeadPin from "./table-head-pin";
-import TableHeadPopover from "./table-head-popover";
-
-function DraggableTableHeader<T>({
-  header,
-  activeTab,
-  featureOptions,
-  tableStates,
-  filterSettingStates,
-  onSaveSettings,
-}: TableHeaderProps<T>) {
-  const { enableColumnPinning } = featureOptions;
-
-  // Popover
-  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
-
-  const handleHover = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl((prev) => (prev ? null : event.currentTarget));
-  };
-
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-
-  const { isDragging, transform, attributes, listeners } = useSortable({
-    id: header.column.id,
-  });
-
-  const isPinned = header.column.getIsPinned();
-
-  const styles: CSSProperties = {
-    opacity: isDragging ? 0.8 : 1,
-    position: "relative",
-    transform: CSS.Translate.toString(transform),
-    transition: "width transform 0.2s ease-in-out",
-    width: header.column.getSize(),
-    minWidth: `${header.column.columnDef.minSize ?? 180}px`,
-    maxWidth: `${header.column.columnDef.maxSize}px`,
-  };
-
-  let sortProps: {
-    className: string;
-    title?: string;
-    style?: CSSProperties;
-  } = {
-    className: "ts__content",
-    // style: {
-    //   justifyContent: getColumnAlignment(
-    //     (header?.column?.columnDef?.meta as align)?.align
-    //   ),
-    // },
-  };
-
-  // if (header.column.getCanSort()) {
-  //   sortProps = {
-  //     ...sortProps,
-  //     title:
-  //       header.column.getNextSortingOrder() === "asc"
-  //         ? "Sort ascending"
-  //         : header.column.getNextSortingOrder() === "desc"
-  //         ? "Sort descending"
-  //         : "Clear sort",
-  //   };
-  // }
-
-  return (
-    <th
-      onMouseLeave={handleClose}
-      key={header?.id}
-      className="ts__head__th"
-      colSpan={header.colSpan}
-      onClick={handleHover}
-      style={{
-        width: `${header.column.getSize()}px `,
-        minWidth: `${header.column.columnDef.minSize}px`,
-        maxWidth: `${header.column.columnDef.maxSize}px`,
-        ...styles,
-        ...getColumnPinningStyles(header.column),
-        zIndex: isPinned ? 3 : isDragging ? 1 : 0,
-      }}
-    >
-      {header.isPlaceholder ? null : (
-        <div {...sortProps}>
-          <div
-            className={`${
-              header.column.getCanSort() ? "ts__content__sort" : ""
-            }`.trim()}
-            // onClick={header.column.getToggleSortingHandler()}
-          >
-            {flexRender(header.column.columnDef.header, header.getContext())}
-
-            {{
-              asc: <UpArrow />,
-              desc: <DownArrow />,
-            }[header.column.getIsSorted() as "asc" | "desc"] ?? null}
-          </div>
-
-          {enableColumnPinning && (
-            <TableHeadPin
-              header={header}
-              featureOptions={featureOptions}
-              tableStates={tableStates}
-              filterSettingStates={filterSettingStates}
-            />
-          )}
-
-          <div {...attributes} {...listeners} className="ts__dnd__button">
-            <DragHandleIcon />
-          </div>
-        </div>
-      )}
-
-      {/* column resizing */}
-      {header.column.getCanResize() ? (
-        <div
-          onDoubleClick={() => header.column.resetSize()}
-          onMouseDown={header.getResizeHandler()}
-          onTouchStart={header.getResizeHandler()}
-          className={`column__resize ${
-            header.column.getIsResizing() ? "is__resizing" : ""
-          }`}
-        />
-      ) : null}
-
-      {/* Popover */}
-      <TableHeadPopover
-        anchorEl={anchorEl}
-        activeTab={activeTab}
-        onClose={handleClose}
-        header={header}
-        tableStates={tableStates}
-        filterSettingStates={filterSettingStates}
-        onSaveSettings={onSaveSettings}
-      />
-    </th>
-  );
-}
-
-export default DraggableTableHeader;

package/src/listing/components/table-head-pin.tsx

@@ -1,22 +0,0 @@
-import { IconPinOffOutline } from "../../assets/svg";
-import { TableHeaderProps } from "../types/table";
-
-function TableHeadPin<T>({ header }: TableHeaderProps<T>) {
-  return header.column.getIsPinned() !== "left" ? (
-    <div className="ts--head--button" onClick={() => header.column.pin("left")}>
-      {/* <IconPinOutline /> */}
-    </div>
-  ) : (
-    <div
-      className="ts--head--button"
-      onClick={(e) => {
-        e.stopPropagation();
-        header.column.pin(false);
-      }}
-    >
-      <IconPinOffOutline />
-    </div>
-  );
-}
-
-export default TableHeadPin;

package/src/listing/components/tabs/index.scss

@@ -1,42 +0,0 @@
-.table-tabs {
-  .tabs {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    margin: 0rem;
-    padding: 0rem;
-
-    .tabs-settings {
-      margin-left: 0.1rem;
-      margin-right: 0.5rem;
-      cursor: pointer;
-    }
-
-    .tab {
-      display: flex;
-      gap: 0.5rem;
-      padding: 0.5rem 1rem;
-      cursor: pointer;
-      color: var(--grey-900);
-      font-size: 0.875rem;
-      font-family: "Satoshi";
-      font-weight: 700;
-
-      .tab__label {
-        font-family: inherit;
-      }
-
-      &.active {
-        background: var(--grey-500);
-        border-top-left-radius: 0.5rem;
-        border-top-right-radius: 0.5rem;
-        backdrop-filter: blur(200px);
-      }
-    }
-
-    .tabs-dropdown {
-      margin-left: 1rem;
-      cursor: pointer;
-    }
-  }
-}

package/src/listing/components/tabs/styles.ts

@@ -1,34 +0,0 @@
-import { SxProps, Theme } from "@mui/material";
-
-interface TabStylesProps {
-  tabs: SxProps<Theme>;
-  tab: SxProps<Theme>;
-  tabCount: SxProps<Theme>;
-}
-
-export const tableTabsStyles: TabStylesProps = {
-  tabs: {
-    minHeight: "38px",
-  },
-
-  tab: {
-    color: "#888888",
-    padding: "8px 12px",
-    minHeight: "38px",
-    textTransform: "none",
-    minWidth: "unset",
-    whiteSpace: "nowrap",
-
-    "&.Mui-selected": {
-      color: "#0e0c0b",
-      fontWeight: 700,
-    },
-  },
-
-  tabCount: {
-    padding: "2px 3px",
-    borderRadius: "6px",
-    border: "1px solid #0E0C0BE6",
-    color: "#0E0C0B",
-  },
-};