@dmsi/wedgekit-react 0.0.2

package/src/components/DataGridCell.tsx

@@ -0,0 +1,384 @@
+"use client";
+
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import {
+  // BuiltInFilterFn,
+  Cell,
+  // FilterFn,
+  FilterFnOption,
+  Header,
+  RowData,
+} from "@tanstack/react-table";
+import clsx from "clsx";
+import {
+  ComponentProps,
+  CSSProperties,
+  memo,
+  PropsWithChildren,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { paddingUsingComponentGap } from "../classNames";
+import { AsProps } from "../types";
+import { Icon } from "./Icon";
+import { Search } from "./Search";
+import { Menu } from "./Menu";
+import { MenuOption } from "./MenuOption";
+import { useSubMenuSystem } from "./useMenuSystem";
+
+type Tags = "td" | "th";
+
+type DataGridCellProps = PropsWithChildren<{
+  type?: "default" | "header" | "summary";
+  component?: "header" | "checkbox" | "icon" | "button" | "static" | "input";
+  locked?: boolean;
+  noPadding?: boolean;
+  paddedLeft?: boolean;
+  onRightClick?: () => void;
+  error?: boolean;
+  warning?: boolean;
+  center?: boolean;
+  width?: string;
+}>;
+
+export const DataGridCell = memo(
+  ({
+    type = "default",
+    component = "static",
+    children,
+    className,
+    locked = false,
+    noPadding = false,
+    paddedLeft = false,
+    style,
+    onClick,
+    onRightClick,
+    error,
+    warning,
+    center,
+    width,
+    ...props
+  }: AsProps<Tags> & DataGridCellProps) => {
+    const Element = type === "header" ? "th" : "td";
+    const timerRef = useRef<number | null>(null);
+    const [isGrabbing, setIsGrabbing] = useState(false);
+    const [isPointerPressed, setIsPointerPressed] = useState(false);
+
+    useEffect(() => {
+      return () => {
+        if (timerRef.current) {
+          clearTimeout(timerRef.current);
+          timerRef.current = null;
+        }
+      };
+    }, []);
+
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    const handlePointerDown = (_event: React.MouseEvent | React.TouchEvent) => {
+      setIsPointerPressed(true);
+
+      timerRef.current = window.setTimeout(() => {
+        setIsGrabbing(true);
+      }, 500);
+    };
+
+    const handlePointerUp = (event: React.MouseEvent | React.TouchEvent) => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+
+      const rightClick =
+        event.nativeEvent instanceof MouseEvent &&
+        event.nativeEvent.button === 2;
+
+      if (!isGrabbing && onClick && !rightClick && isPointerPressed) {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        onClick(event as any);
+      }
+
+      if (rightClick && onRightClick) {
+        onRightClick();
+      }
+
+      setIsGrabbing(false);
+      setIsPointerPressed(false);
+    };
+
+    const handlePointerLeave = () => {
+      if (timerRef.current) {
+        clearTimeout(timerRef.current);
+        timerRef.current = null;
+      }
+    };
+
+    const headerBgStyles =
+      type === "header" &&
+      !locked &&
+      !["button"].includes(component) &&
+      "bg-brand-400 border-brand-200";
+    const lockedHeaderBgStyles =
+      locked &&
+      !["button"].includes(component) &&
+      "bg-neutral-400 border-neutral-300";
+
+    const headerTypeStyles =
+      type === "header" &&
+      component !== "button" &&
+      component !== "icon" &&
+      clsx("border-r");
+
+    const buttonComponentStyles =
+      component === "button" &&
+      clsx("border-r border-b border-border-primary-normal");
+
+    const iconComponentStyles = component === "icon" && clsx("border-l");
+
+    const cellClasses = clsx(
+      headerTypeStyles,
+      buttonComponentStyles,
+      headerBgStyles,
+      lockedHeaderBgStyles,
+      iconComponentStyles,
+      className,
+      "flex flex-1 items-center gap-1 whitespace-nowrap min-w-full max-h-10 relative text-text-primary-normal",
+      "focus-within:!z-10",
+      component === "input" && "border",
+      component === "input" &&
+        !error &&
+        !warning &&
+        "border-border-primary-normal",
+      component === "input" && error && "border-border-primary-error",
+      component === "input" && warning && "border-background-warning-normal",
+      !["button", "icon"].includes(component) && !noPadding && "p-2",
+      paddedLeft && "pl-2",
+      component === "icon" && "border-l",
+      isGrabbing && "!cursor-grabbing",
+      component === "checkbox" || (center && "justify-center"),
+    );
+
+    return (
+      <Element
+        className={clsx("flex", !width && "flex-1")}
+        style={{ width }}
+        {...props}
+      >
+        <div
+          className={cellClasses}
+          style={{
+            ...style,
+          }}
+          onMouseDown={handlePointerDown}
+          onMouseUp={handlePointerUp}
+          onMouseLeave={handlePointerLeave}
+          onTouchStart={handlePointerDown}
+          onTouchEnd={handlePointerUp}
+          onTouchCancel={handlePointerLeave}
+          onContextMenu={(e) => e.preventDefault()}
+        >
+          {children}
+        </div>
+      </Element>
+    );
+  },
+);
+
+DataGridCell.displayName = "DataGridCell";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function DraggableCellHeader<T extends Record<string, any>>({
+  header,
+  children,
+  locked = false,
+  ...props
+}: {
+  header: Header<T, unknown>;
+  children: React.ReactNode;
+  locked?: boolean;
+  width?: string;
+} & DataGridCellProps &
+  ComponentProps<"th">) {
+  const { attributes, isDragging, listeners, setNodeRef, transform, node } =
+    useSortable({
+      id: header.column.id,
+    });
+
+  const [showMenu, setShowMenu] = useState(false);
+  const [filter, setFilter] = useState(
+    (header.column.getFilterValue() as string) ?? "",
+  );
+  
+  const {
+    menuRootRef,
+    isMenuActive,
+    registerSubMenu,
+    listeners: subMenuListeners,
+    mobileHide
+  } = useSubMenuSystem(node);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      header.column.setFilterValue(filter);
+    }, 500);
+
+    return () => {
+      clearTimeout(handler);
+    };
+  }, [filter]);
+
+  const style: CSSProperties = {
+    opacity: isDragging ? 0.8 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition: "width transform 0.2s ease-in-out",
+    whiteSpace: "nowrap",
+    width: header.column.getSize(),
+    zIndex: isDragging ? 1 : 0,
+    "--color-text-primary-normal": "var(--color-neutral-000)",
+  };
+
+  return (
+    <DataGridCell
+      locked={locked}
+      type="header"
+      component="header"
+      ref={setNodeRef}
+      colSpan={header.colSpan}
+      style={style}
+      {...props}
+      onClick={header.column.getToggleSortingHandler()}
+      onRightClick={() => setShowMenu(!showMenu)}
+      {...(locked ? {} : attributes)}
+      {...(locked ? {} : listeners)}
+    >
+      {children}
+
+      {header.column.getCanFilter() && (
+        <Menu
+          ref={menuRootRef}
+          positionTo={node}
+          show={showMenu}
+          setShow={setShowMenu}
+          mobileHide={mobileHide}
+        >
+          <MenuOption
+            {...subMenuListeners}
+            subMenu={({ menuId, subMenuLevel, ...props }) => (
+              <Menu
+                {...props}
+                show={isMenuActive(menuId, subMenuLevel)}
+                ref={(el) => {
+                  registerSubMenu(menuId, el);
+                }}
+              >
+                <div className={clsx(paddingUsingComponentGap)}>
+                  <Search
+                    onChange={(event) => {
+                      setFilter(event.target.value);
+                    }}
+                    onKeyDown={(event) => {
+                      if ([" ", "Space"].includes(event.key)) {
+                        event.stopPropagation();
+                      }
+                    }}
+                    value={(filter ?? "") as string}
+                  />
+                </div>
+
+                <MenuOption
+                  onClick={handleFilterFnChange}
+                  before={menuOptionIcon("includesString")}
+                >
+                  Contains
+                </MenuOption>
+
+                <MenuOption
+                  onClick={handleFilterFnChange}
+                  before={menuOptionIcon("startsWith")}
+                >
+                  Starts with
+                </MenuOption>
+
+                <MenuOption
+                  onClick={handleFilterFnChange}
+                  before={menuOptionIcon("endsWith")}
+                >
+                  Ends with
+                </MenuOption>
+              </Menu>
+            )}
+          >
+            Filter
+          </MenuOption>
+        </Menu>
+      )}
+    </DataGridCell>
+  );
+
+  function menuOptionIcon(value: string) {
+    return (
+      <Icon
+        name="check"
+        className={clsx(
+          header.column.columnDef.filterFn !== value && "text-transparent",
+        )}
+      />
+    );
+  }
+
+  function handleFilterFnChange<TData>(_id: string, value: string | undefined) {
+    let filterFn: FilterFnOption<TData> = "includesString";
+    const currentFilterFn = header.column.columnDef.filterFn as string;
+
+    if (value?.toLowerCase() === "starts with") {
+      filterFn = currentFilterFn === "startsWith" ? "auto" : "startsWith";
+    }
+
+    if (value?.toLowerCase() === "ends with") {
+      filterFn = currentFilterFn === "endsWith" ? "auto" : "endsWith";
+    }
+
+    if (value?.toLowerCase() === "contains") {
+      filterFn =
+        currentFilterFn === "includesString" ? "auto" : "includesString";
+    }
+
+    header.column.columnDef.filterFn = filterFn;
+    header.column.setFilterValue(header.column.getFilterValue() ?? "");
+  }
+}
+
+DraggableCellHeader.displayName = "DraggableCellHeader";
+
+export function DragAlongCell<T extends RowData, TValue>({
+  cell,
+  children,
+  ...props
+}: {
+  cell: Header<T, TValue> | Cell<T, TValue>;
+  children?: React.ReactNode;
+} & DataGridCellProps) {
+  const { isDragging, setNodeRef, transform } = useSortable({
+    id: cell.column.id,
+  });
+
+  const style: CSSProperties = {
+    opacity: isDragging ? 0.8 : 1,
+    position: "relative",
+    transform: CSS.Translate.toString(transform),
+    transition: "width transform 0.2s ease-in-out",
+    zIndex: isDragging ? 1 : 0,
+    width: cell.column.getSize(),
+    minWidth: "min-content",
+  };
+
+  return (
+    <DataGridCell style={style} ref={setNodeRef} {...props}>
+      {children}
+    </DataGridCell>
+  );
+}
+
+DragAlongCell.displayName = "DragAlongCell";