@rebasepro/core 0.0.1-canary.0

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -0,0 +1,275 @@
+import React, { RefObject, useCallback, useEffect, useState } from "react";
+import { deepEqual as equal } from "fast-equals";
+
+import { VirtualTableColumn, VirtualTableSort, VirtualTableWhereFilterOp } from "./VirtualTableProps";
+import { ErrorBoundary } from "../ErrorBoundary";
+import {
+    ArrowUpwardIcon,
+    Badge,
+    Button,
+    cls,
+    defaultBorderMixin,
+    FilterListIcon,
+    IconButton,
+    Popover
+} from "@rebasepro/ui";
+
+interface FilterFormProps<T> {
+    column: VirtualTableColumn<T>;
+    onFilterUpdate: (filter?: [VirtualTableWhereFilterOp, any], newOpenFilterState?: boolean) => void;
+    filter?: [VirtualTableWhereFilterOp, any];
+    onHover: boolean,
+    createFilterField: (props: FilterFormFieldProps<T>) => React.ReactNode;
+    hidden: boolean;
+    setHidden: (hidden: boolean) => void;
+}
+
+export type FilterFormFieldProps<CustomProps> = {
+    id: React.Key,
+    filterValue: [VirtualTableWhereFilterOp, any] | undefined,
+    setFilterValue: (filterValue?: [VirtualTableWhereFilterOp, any]) => void;
+    column: VirtualTableColumn<CustomProps>;
+    hidden: boolean;
+    setHidden: (hidden: boolean) => void;
+};
+
+type VirtualTableHeaderProps<M extends Record<string, any>> = {
+    resizeHandleRef: React.Ref<HTMLDivElement>;
+    columnIndex: number;
+    isResizingIndex: number;
+    column: VirtualTableColumn<any>;
+    onColumnSort: (key: Extract<keyof M, string>) => void;
+    filter?: [VirtualTableWhereFilterOp, any];
+    sort: VirtualTableSort;
+    onFilterUpdate: (column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, any]) => void;
+    onClickResizeColumn?: (columnIndex: number, column: VirtualTableColumn) => void;
+    createFilterField?: (props: FilterFormFieldProps<any>) => React.ReactNode;
+    AdditionalHeaderWidget?: (props: { onHover: boolean }) => React.ReactNode;
+    isDragging?: boolean;
+    isDraggable?: boolean;
+};
+
+export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
+    function VirtualTableHeader<M extends Record<string, any>>({
+        resizeHandleRef,
+        columnIndex,
+        isResizingIndex,
+        sort,
+        onColumnSort,
+        onFilterUpdate,
+        filter,
+        column,
+        onClickResizeColumn,
+        createFilterField,
+        AdditionalHeaderWidget,
+        isDragging,
+        isDraggable
+    }: VirtualTableHeaderProps<M>) {
+
+        const [onHover, setOnHover] = useState(false);
+
+        const [openFilter, setOpenFilter] = React.useState(false);
+        const [hidden, setHidden] = React.useState(false);
+
+        const handleSettingsClick = useCallback((_event: React.MouseEvent) => {
+            setOpenFilter(true);
+        }, []);
+
+        const update = useCallback((filterForProperty?: [VirtualTableWhereFilterOp, any], newOpenFilterState?: boolean) => {
+            onFilterUpdate(column, filterForProperty);
+            if (newOpenFilterState !== undefined)
+                setOpenFilter(newOpenFilterState);
+        }, [column, onFilterUpdate]);
+
+        const thisColumnIsResizing = isResizingIndex === columnIndex;
+        const anotherColumnIsResizing = isResizingIndex !== columnIndex && isResizingIndex > 0;
+
+        const hovered = !anotherColumnIsResizing && (onHover || thisColumnIsResizing);
+
+        return (
+            <ErrorBoundary>
+                <div
+                    className={cls("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center",
+                        isDragging
+                            ? "bg-primary-bg dark:bg-primary-bg-dark"
+                            : "bg-surface-50 dark:bg-surface-900",
+                        "text-text-secondary hover:text-text-primary dark:text-text-secondary-dark dark:hover:text-text-primary-dark",
+                        !isDragging && "hover:bg-surface-100 dark:hover:bg-surface-800 hover:bg-opacity-50 hover:bg-surface-100/50 dark:hover:bg-opacity-50 dark:hover:bg-surface-800/50",
+                        column.frozen ? "sticky left-0 z-10" : "relative z-0",
+                        isDraggable && "cursor-grab"
+                    )}
+                    style={{
+                        left: column.frozen ? 0 : undefined,
+                        minWidth: column.width,
+                        maxWidth: column.width
+                    }}
+                    onMouseEnter={() => setOnHover(true)}
+                    onMouseMove={() => setOnHover(true)}
+                    onMouseLeave={() => setOnHover(false)}
+                >
+
+                    <div className="overflow-hidden grow">
+                        <div
+                            className={`flex items-center justify-${column.headerAlign} flex-row`}>
+
+                            {column.icon}
+
+                            <div
+                                className="truncate -webkit-box w-full mx-1 overflow-hidden"
+                                style={{
+                                    WebkitBoxOrient: "vertical",
+                                    WebkitLineClamp: 2,
+                                    justifyContent: column.align
+                                }}>
+                                {column.title}
+                            </div>
+
+                        </div>
+                    </div>
+                    <>
+
+                        {AdditionalHeaderWidget &&
+                            <AdditionalHeaderWidget onHover={onHover || openFilter} />}
+
+                        {column.sortable && (sort || hovered || openFilter) &&
+                            <Badge color="secondary"
+                                invisible={!sort}>
+                                <IconButton
+                                    size={"small"}
+                                    className={onHover || openFilter ? "bg-white dark:bg-surface-950" : undefined}
+                                    onClick={() => {
+                                        onColumnSort(column.key as Extract<keyof M, string>);
+                                    }}
+                                >
+                                    {!sort &&
+                                        <ArrowUpwardIcon />}
+                                    {sort === "asc" &&
+                                        <ArrowUpwardIcon />}
+                                    {sort === "desc" &&
+                                        <ArrowUpwardIcon className={"rotate-180"} />}
+                                </IconButton>
+                            </Badge>
+                        }
+                    </>
+
+                    {column.filter && createFilterField && <div>
+                        <Badge color="secondary"
+                            invisible={!filter}>
+
+                            <Popover
+                                open={openFilter}
+                                onOpenChange={setOpenFilter}
+                                className={hidden ? "hidden" : undefined}
+                                modal={true}
+                                trigger={
+                                    <IconButton
+                                        className={onHover || openFilter ? "bg-white dark:bg-surface-950" : undefined}
+                                        size={"small"}
+                                        onClick={handleSettingsClick}>
+                                        <FilterListIcon size={"small"} />
+                                    </IconButton>}
+                            >
+                                <FilterForm column={column}
+                                    filter={filter}
+                                    onHover={onHover}
+                                    onFilterUpdate={update}
+                                    createFilterField={createFilterField}
+                                    hidden={hidden}
+                                    setHidden={setHidden} />
+
+                            </Popover>
+
+                        </Badge>
+
+                    </div>}
+
+                    {column.resizable && <div
+                        ref={resizeHandleRef}
+                        data-no-dnd="true"
+                        className={cls(
+                            "absolute h-full w-[6px] top-0 right-0 cursor-col-resize",
+                            hovered && "bg-surface-300 dark:bg-surface-700"
+                        )}
+                        onPointerDown={(e) => {
+                            e.stopPropagation();
+                            if (onClickResizeColumn) {
+                                onClickResizeColumn(columnIndex, column);
+                            }
+                        }}
+                    />}
+                </div>
+
+            </ErrorBoundary>
+        );
+    }, equal) as React.FunctionComponent<VirtualTableHeaderProps<any>>;
+
+function FilterForm<M>({
+    column,
+    onFilterUpdate,
+    filter,
+    onHover,
+    createFilterField,
+    hidden,
+    setHidden
+}: FilterFormProps<M>) {
+
+    const id = column.key;
+
+    const [filterInternal, setFilterInternal] = useState<[VirtualTableWhereFilterOp, any] | undefined>(filter);
+
+    useEffect(() => {
+        setFilterInternal(filter);
+    }, [filter]);
+
+    if (!column.filter) return null;
+
+    const submit = () => {
+        onFilterUpdate(filterInternal, false);
+    };
+
+    const reset = (_e: React.MouseEvent) => {
+        onFilterUpdate(undefined, false);
+    };
+
+    const filterIsSet = !!filter;
+
+    const filterField = createFilterField({
+        id,
+        filterValue: filterInternal,
+        setFilterValue: setFilterInternal,
+        column,
+        hidden,
+        setHidden
+    });
+
+    if (!filterField) return null;
+    return (
+        <form noValidate={true}
+            onSubmit={(e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                submit();
+            }}
+            className={"text-surface-900 dark:text-white"}>
+            <div
+                className={cls(defaultBorderMixin, "py-4 px-6 typography-label border-b")}>
+                {column.title ?? id}
+            </div>
+            {filterField && <div className="m-4 w-[400px]">
+                {filterField}
+            </div>}
+            <div className="flex justify-end m-4">
+                <Button
+                    className="mr-4"
+                    disabled={!filterIsSet}
+                    variant={"text"}
+                    type="reset"
+                    aria-label="filter clear"
+                    onClick={reset}>Clear</Button>
+                <Button
+                    type="submit">Filter</Button>
+            </div>
+        </form>
+    );
+
+}

package/src/components/VirtualTable/VirtualTableHeaderRow.tsx

@@ -0,0 +1,249 @@
+import React, { createRef, useCallback, useEffect, useMemo, useState } from "react";
+
+import { VirtualTableColumn, VirtualTableWhereFilterOp } from "./VirtualTableProps";
+import { ErrorBoundary } from "../ErrorBoundary";
+import { VirtualTableHeader } from "./VirtualTableHeader";
+import { VirtualTableContextProps } from "./types";
+import { cls, defaultBorderMixin } from "@rebasepro/ui";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+
+// Sortable column header wrapper
+const SortableColumnHeader = ({
+    column,
+    columnIndex,
+    columnRefs,
+    isResizing,
+    onFilterUpdate,
+    filter,
+    sortByProperty,
+    currentSort,
+    onColumnSort,
+    onClickResizeColumn,
+    createFilterField,
+    isDragging,
+    isDraggable
+}: {
+    column: VirtualTableColumn;
+    columnIndex: number;
+    columnRefs: React.Ref<HTMLDivElement>[];
+    isResizing: number;
+    onFilterUpdate: any;
+    filter: [VirtualTableWhereFilterOp, any] | undefined;
+    sortByProperty: string | undefined;
+    currentSort: "asc" | "desc" | undefined;
+    onColumnSort: any;
+    onClickResizeColumn: (index: number) => void;
+    createFilterField: any;
+    isDragging: boolean;
+    isDraggable: boolean;
+}) => {
+    const [isPressing, setIsPressing] = useState(false);
+
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+    } = useSortable({
+        id: column.key,
+        disabled: !isDraggable || column.frozen
+    });
+
+    const style = {
+        // Only use translate, ignore any scale transforms
+        transform: transform ? `translateX(${transform.x}px)` : undefined,
+        // Don't transition the dragged item - only other items should animate
+        transition: isDragging ? undefined : transition,
+        minWidth: column.width,
+        maxWidth: column.width,
+        width: column.width,
+    };
+
+    // Combine our press handlers with dnd-kit listeners
+    const combinedListeners = isDraggable ? {
+        ...listeners,
+        onPointerDown: (e: React.PointerEvent) => {
+            setIsPressing(true);
+            listeners?.onPointerDown?.(e);
+        },
+        onPointerUp: () => setIsPressing(false),
+        onPointerCancel: () => setIsPressing(false),
+    } : {};
+
+    // Reset pressing state when drag ends
+    React.useEffect(() => {
+        if (!isDragging) {
+            setIsPressing(false);
+        }
+    }, [isDragging]);
+
+    return (
+        <div
+            ref={setNodeRef}
+            style={style}
+            className={cls(
+                "flex-shrink-0 h-full",
+                column.frozen && "sticky left-0 z-10"
+            )}
+            {...attributes}
+            {...combinedListeners}
+        >
+            <VirtualTableHeader
+                resizeHandleRef={columnRefs[columnIndex]}
+                columnIndex={columnIndex}
+                isResizingIndex={isResizing}
+                onFilterUpdate={onFilterUpdate}
+                filter={filter}
+                sort={sortByProperty === column.key ? currentSort : undefined}
+                onColumnSort={onColumnSort}
+                onClickResizeColumn={onClickResizeColumn}
+                column={column}
+                createFilterField={createFilterField}
+                AdditionalHeaderWidget={column.AdditionalHeaderWidget}
+                isDragging={isDragging || isPressing}
+                isDraggable={isDraggable} />
+        </div>
+    );
+};
+
+export const VirtualTableHeaderRow = ({
+    columns,
+    currentSort,
+    onColumnSort,
+    onFilterUpdate,
+    sortByProperty,
+    filter,
+    onColumnResize,
+    onColumnResizeEnd,
+    createFilterField,
+    AddColumnComponent,
+    onColumnsOrderChange,
+    data,
+    cellRenderer: CellRenderer,
+    rowHeight = 54,
+    draggingColumnId,
+    headerHeight = 48
+}: VirtualTableContextProps<any>) => {
+
+    const columnRefs = useMemo(() => columns.map(() => createRef<HTMLDivElement>()), [columns.length]);
+    const [isResizing, setIsResizing] = useState(-1);
+
+    const adjustWidthColumn = useCallback((index: number, width: number, end: boolean) => {
+        const column = columns[index];
+        const minWidth = 100;
+        const maxWidth = 800;
+        const newWidth = width > maxWidth ? maxWidth : (width < minWidth ? minWidth : width);
+        const params = {
+            width: newWidth,
+            key: column.key as string,
+            column: {
+                ...column,
+                width: newWidth
+            } as VirtualTableColumn
+        };
+        if (!end)
+            onColumnResize(params);
+        else
+            onColumnResizeEnd(params);
+    }, [columns, onColumnResize, onColumnResizeEnd]);
+
+    const getEventNewWidth = useCallback((e: MouseEvent) => {
+        if (isResizing >= 0) {
+            const left = columnRefs[isResizing].current?.parentElement?.getBoundingClientRect().left;
+            if (!left) return;
+            return e.clientX - left;
+        }
+        return undefined;
+    }, [columnRefs, isResizing]);
+
+    const setCursorDocument = useCallback((isResizing: boolean) => {
+        document.body.style.cursor = isResizing ? "col-resize" : "auto";
+    }, []);
+
+    const handleOnMouseMove = useCallback((e: MouseEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+        const newWidth = getEventNewWidth(e);
+        if (newWidth)
+            adjustWidthColumn(isResizing, newWidth, false);
+    }, [adjustWidthColumn, getEventNewWidth, isResizing]);
+
+    const handleOnMouseUp = useCallback((e: MouseEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+        const newWidth = getEventNewWidth(e);
+        if (newWidth)
+            adjustWidthColumn(isResizing, newWidth, true);
+        setIsResizing(-1);
+        setCursorDocument(false);
+    }, [adjustWidthColumn, getEventNewWidth, isResizing, setCursorDocument]);
+
+    const removeResizingListeners = useCallback(() => {
+        document.removeEventListener("mousemove", handleOnMouseMove);
+        document.removeEventListener("mouseup", handleOnMouseUp);
+    }, [handleOnMouseMove, handleOnMouseUp]);
+
+    const attachResizeListeners = useCallback(() => {
+        document.addEventListener("mousemove", handleOnMouseMove);
+        document.addEventListener("mouseup", handleOnMouseUp);
+    }, [handleOnMouseMove, handleOnMouseUp]);
+
+    useEffect(() => {
+        if (isResizing >= 0) {
+            attachResizeListeners();
+        } else {
+            removeResizingListeners();
+        }
+        return () => {
+            removeResizingListeners();
+        };
+    }, [attachResizeListeners, isResizing, removeResizingListeners]);
+
+    const onClickResizeColumn = useCallback((index: number) => {
+        setIsResizing(index);
+        setCursorDocument(true);
+    }, [setCursorDocument]);
+
+    return (
+        <>
+            <div
+                className={cls(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 border-b bg-surface-50 dark:bg-surface-900")}
+                style={{ height: headerHeight }}>
+                {columns.map((column, columnIndex) => {
+                    const filterForThisProperty: [VirtualTableWhereFilterOp, any] | undefined =
+                        column && filter && filter[column.key]
+                            ? filter[column.key]
+                            : undefined;
+
+                    const isDraggable = !column.frozen && !!onColumnsOrderChange;
+                    const isDragging = draggingColumnId === column.key;
+
+                    return (
+                        <ErrorBoundary key={"header_" + column.key}>
+                            <SortableColumnHeader
+                                column={column}
+                                columnIndex={columnIndex}
+                                columnRefs={columnRefs}
+                                isResizing={isResizing}
+                                onFilterUpdate={onFilterUpdate}
+                                filter={filterForThisProperty}
+                                sortByProperty={sortByProperty}
+                                currentSort={currentSort}
+                                onColumnSort={onColumnSort}
+                                onClickResizeColumn={onClickResizeColumn}
+                                createFilterField={createFilterField}
+                                isDragging={isDragging}
+                                isDraggable={isDraggable}
+                            />
+                        </ErrorBoundary>
+                    );
+                })}
+
+                {AddColumnComponent && <AddColumnComponent />}
+
+            </div>
+        </>
+    );
+};