@firecms/core 3.0.0-alpha.8 → 3.0.0-alpha.80

package/src/components/VirtualTable/VirtualTable.tsx

@@ -0,0 +1,402 @@
+import React, { createContext, forwardRef, RefObject, useCallback, useEffect, useRef, useState } from "react";
+
+import equal from "react-fast-compare"
+
+// @ts-ignore
+import { FixedSizeList as List } from "react-window";
+import useMeasure from "react-use-measure";
+
+import { CircularProgressCenter } from "../CircularProgressCenter";
+import {
+    OnVirtualTableColumnResizeParams,
+    VirtualTableColumn,
+    VirtualTableFilterValues,
+    VirtualTableProps,
+    VirtualTableWhereFilterOp
+} from "./VirtualTableProps";
+
+import { getRowHeight } from "./common";
+import { VirtualTableContextProps } from "./types";
+import { VirtualTableHeaderRow } from "./VirtualTableHeaderRow";
+import { VirtualTableRow } from "./VirtualTableRow";
+import { VirtualTableCell } from "./VirtualTableCell";
+import { AssignmentIcon, cn, Markdown, Typography } from "@firecms/ui";
+
+const VirtualListContext = createContext<VirtualTableContextProps<any>>({} as any);
+VirtualListContext.displayName = "VirtualListContext";
+
+type InnerElementProps = {
+    children: React.ReactNode,
+    style: any
+};
+
+// eslint-disable-next-line react/display-name
+const innerElementType = forwardRef<HTMLDivElement, InnerElementProps>(({
+                                                                            children,
+                                                                            ...rest
+                                                                        }: InnerElementProps, ref) => {
+
+        return (
+            <VirtualListContext.Consumer>
+                {(virtualTableProps) => {
+                    const customView = virtualTableProps.customView;
+                    return (
+                        <>
+                            <div
+                                id={"virtual-table"}
+                                style={{
+                                    position: "relative",
+                                    height: "100%"
+                                }}>
+                                <div
+                                    ref={ref}
+                                    {...rest}
+                                    style={{
+                                        ...rest?.style,
+                                        minHeight: "100%",
+                                        position: "relative"
+                                    }}>
+                                    <VirtualTableHeaderRow {...virtualTableProps}/>
+                                    {!customView && children}
+                                </div>
+
+                            </div>
+
+                            {customView && <div style={{
+                                position: "sticky",
+                                top: "56px",
+                                flexGrow: 1,
+                                height: "calc(100% - 56px)",
+                                marginTop: "calc(56px - 100vh)",
+                                left: 0
+                            }}>{customView}</div>}
+
+                        </>
+                    );
+                }}
+            </VirtualListContext.Consumer>
+        );
+    })
+;
+
+/**
+ * This is a Table component that allows displaying arbitrary data, not
+ * necessarily related to entities or properties. It is the component
+ * that powers the entity collections but has a generic API, so it
+ * can be reused.
+ *
+ * @group Components
+ */
+export const VirtualTable = React.memo<VirtualTableProps<any>>(
+    function VirtualTable<T extends Record<string, any>>({
+                                                             data,
+                                                             onResetPagination,
+                                                             onEndReached,
+                                                             size = "m",
+                                                             columns: columnsProp,
+                                                             onRowClick,
+                                                             onColumnResize,
+                                                             filter: filterInput,
+                                                             checkFilterCombination,
+                                                             onFilterUpdate,
+                                                             sortBy,
+                                                             error,
+                                                             emptyComponent,
+                                                             onSortByUpdate,
+                                                             loading,
+                                                             cellRenderer,
+                                                             hoverRow,
+                                                             createFilterField,
+                                                             rowClassName,
+                                                             className,
+                                                             endAdornment,
+                                                             AddColumnComponent
+                                                         }: VirtualTableProps<T>) {
+
+        const sortByProperty: string | undefined = sortBy ? sortBy[0] : undefined;
+        const currentSort: "asc" | "desc" | undefined = sortBy ? sortBy[1] : undefined;
+
+        const [columns, setColumns] = useState(columnsProp);
+
+        const tableRef = useRef<HTMLDivElement>(null);
+        const endReachCallbackThreshold = useRef<number>(0);
+
+        useEffect(() => {
+            setColumns(columnsProp);
+        }, [columnsProp]);
+
+        const [measureRef, bounds] = useMeasure();
+
+        const onColumnResizeInternal = useCallback((params: OnVirtualTableColumnResizeParams) => {
+            setColumns(columns.map((column) => column.key === params.column.key ? params.column : column));
+        }, [columns]);
+
+        const onColumnResizeEndInternal = useCallback((params: OnVirtualTableColumnResizeParams) => {
+            setColumns(columns.map((column) => column.key === params.column.key ? params.column : column));
+            if (onColumnResize) {
+                onColumnResize(params);
+            }
+        }, [columns, onColumnResize]);
+
+        // saving the current filter as a ref as a workaround for header closure
+        const filterRef = useRef<VirtualTableFilterValues<any> | undefined>();
+
+        useEffect(() => {
+            filterRef.current = filterInput;
+        }, [filterInput]);
+
+        const scrollToTop = useCallback(() => {
+            endReachCallbackThreshold.current = 0;
+            if (tableRef.current) {
+                // scrollRef.current = [scrollRef.current[0], 0];
+                tableRef.current.scrollTo(tableRef.current?.scrollLeft, 0);
+            }
+        }, []);
+
+        const onColumnSort = useCallback((key: string) => {
+
+            const isDesc = sortByProperty === key && currentSort === "desc";
+            const isAsc = sortByProperty === key && currentSort === "asc";
+            const newSort = isAsc ? "desc" : (isDesc ? undefined : "asc");
+            const newSortProperty: string | undefined = isDesc ? undefined : key;
+
+            const filter = filterRef.current;
+
+            const newSortBy: [string, "asc" | "desc"] | undefined = newSort && newSortProperty ? [newSortProperty, newSort] : undefined;
+            if (filter) {
+                if (checkFilterCombination && !checkFilterCombination(filter, newSortBy)) {
+                    if (onFilterUpdate)
+                        onFilterUpdate(undefined);
+                }
+            }
+
+            if (onResetPagination) {
+                onResetPagination();
+            }
+
+            if (onSortByUpdate) {
+                onSortByUpdate(newSortBy);
+            }
+
+            scrollToTop();
+        }, [checkFilterCombination, currentSort, onFilterUpdate, onResetPagination, onSortByUpdate, scrollToTop, sortByProperty]);
+
+        const resetSort = useCallback(() => {
+            endReachCallbackThreshold.current = 0;
+            if (onSortByUpdate)
+                onSortByUpdate(undefined);
+        }, [onSortByUpdate]);
+
+        const maxScroll = Math.max((data?.length ?? 0) * getRowHeight(size) - bounds.height, 0);
+        const onEndReachedInternal = useCallback((scrollOffset: number) => {
+            if (onEndReached && (data?.length ?? 0) > 0 && scrollOffset > endReachCallbackThreshold.current + 600) {
+                endReachCallbackThreshold.current = scrollOffset;
+                onEndReached();
+            }
+        }, [data?.length, onEndReached]);
+
+        const onScroll = useCallback(({
+                                          scrollOffset,
+                                          scrollUpdateWasRequested
+                                      }: {
+            scrollDirection: "forward" | "backward",
+            scrollOffset: number,
+            scrollUpdateWasRequested: boolean;
+        }) => {
+            if (!scrollUpdateWasRequested && (scrollOffset >= maxScroll - 600))
+                onEndReachedInternal(scrollOffset);
+        }, [maxScroll, onEndReachedInternal]);
+
+        const onFilterUpdateInternal = useCallback((column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, any]) => {
+
+            endReachCallbackThreshold.current = 0;
+            const filter = filterRef.current;
+            let newFilterValue: VirtualTableFilterValues<any> = filter ? { ...filter } : {};
+
+            if (!filterForProperty) {
+                delete newFilterValue[column.key];
+            } else {
+                newFilterValue[column.key] = filterForProperty;
+            }
+            const newSortBy: [string, "asc" | "desc"] | undefined = sortByProperty && currentSort ? [sortByProperty, currentSort] : undefined;
+            const isNewFilterCombinationValid = !checkFilterCombination || checkFilterCombination(newFilterValue, newSortBy);
+            if (!isNewFilterCombinationValid) {
+                newFilterValue = filterForProperty ? { [column.key]: filterForProperty } as VirtualTableFilterValues<Extract<keyof T, string>> : {};
+            }
+
+            if (onFilterUpdate) onFilterUpdate(newFilterValue);
+
+            if (column.key !== sortByProperty) {
+                resetSort();
+            }
+        }, [checkFilterCombination, currentSort, onFilterUpdate, resetSort, sortByProperty]);
+
+        const buildErrorView = useCallback(() => (
+            <div
+                className="h-full flex flex-col items-center justify-center sticky left-0">
+
+                <Typography variant={"h6"}>
+                    {"Error fetching data from the data source"}
+                </Typography>
+
+                {error?.message && <Markdown className={"px-4 break-all"} source={error.message}/>}
+
+            </div>
+        ), [error?.message]);
+
+        const buildEmptyView = useCallback(() => {
+            if (loading)
+                return <CircularProgressCenter/>;
+            return <div
+                className="flex flex-col overflow-auto items-center justify-center p-2 gap-2 h-full">
+                <AssignmentIcon/>
+                {emptyComponent}
+            </div>;
+        }, [emptyComponent, loading]);
+
+        const empty = !loading && (data?.length ?? 0) === 0;
+        const customView = error ? buildErrorView() : (empty ? buildEmptyView() : undefined);
+
+        return (
+            <div
+                ref={measureRef}
+                className={cn("h-full w-full", className)}>
+                <VirtualListContext.Provider
+                    value={{
+                        data,
+                        size,
+                        cellRenderer,
+                        columns,
+                        currentSort,
+                        onRowClick,
+                        customView,
+                        onColumnResize: onColumnResizeInternal,
+                        onColumnResizeEnd: onColumnResizeEndInternal,
+                        filter: filterRef.current,
+                        onColumnSort,
+                        onFilterUpdate: onFilterUpdateInternal,
+                        sortByProperty,
+                        hoverRow: hoverRow ?? false,
+                        createFilterField,
+                        rowClassName,
+                        endAdornment,
+                        AddColumnComponent
+                    }}>
+
+                    <MemoizedList
+                        outerRef={tableRef}
+                        key={size}
+                        width={bounds.width}
+                        height={bounds.height}
+                        itemCount={(data?.length ?? 0) + (endAdornment ? 1 : 0)}
+                        onScroll={onScroll}
+                        includeAddColumn={Boolean(AddColumnComponent)}
+                        itemSize={getRowHeight(size)}/>
+
+                </VirtualListContext.Provider>
+            </div>
+        );
+    },
+    equal
+);
+
+function MemoizedList({
+                          outerRef,
+                          width,
+                          height,
+                          itemCount,
+                          onScroll,
+                          itemSize,
+                          includeAddColumn
+                      }: {
+    outerRef: RefObject<HTMLDivElement>;
+    width: number;
+    height: number;
+    itemCount: number;
+    onScroll: (params: {
+        scrollDirection: "forward" | "backward",
+        scrollOffset: number,
+        scrollUpdateWasRequested: boolean;
+    }) => void;
+    itemSize: number;
+    includeAddColumn?: boolean;
+}) {
+
+    const Row = useCallback(({
+                                 index,
+                                 style
+                             }: any) => {
+        return <VirtualListContext.Consumer>
+            {({
+                  onRowClick,
+                  data,
+                  columns,
+                  size = "m",
+                  cellRenderer,
+                  hoverRow,
+                  rowClassName,
+                  endAdornment
+              }) => {
+
+                if (endAdornment && index === (data ?? []).length) {
+                    return <div style={{
+                        ...style,
+                        height: "auto",
+                        position: "sticky",
+                        bottom: 0,
+                        zIndex: 1
+                    }}>
+                        {endAdornment}
+                    </div>;
+                }
+
+                const rowData = data && data[index];
+                return (
+                    <VirtualTableRow
+                        key={`row_${index}`}
+                        rowData={rowData}
+                        rowIndex={index}
+                        onRowClick={onRowClick}
+                        columns={columns}
+                        hoverRow={hoverRow}
+                        rowClassName={rowClassName}
+                        style={{
+                            ...style,
+                            top: `calc(${style.top}px + 48px)`
+                        }}
+                        size={size}>
+
+                        {columns.map((column: VirtualTableColumn, columnIndex: number) => {
+                            const cellData = rowData && rowData[column.key];
+                            return <VirtualTableCell
+                                key={`cell_${column.key}`}
+                                dataKey={column.key}
+                                cellRenderer={cellRenderer}
+                                column={column}
+                                columns={columns}
+                                rowData={rowData}
+                                cellData={cellData}
+                                rowIndex={index}
+                                columnIndex={columnIndex}/>;
+                        })}
+
+                        {includeAddColumn && <div className={"w-20"}/>}
+
+                    </VirtualTableRow>
+                );
+            }}
+        </VirtualListContext.Consumer>;
+    }, []);
+
+    return <List
+        outerRef={outerRef}
+        innerElementType={innerElementType}
+        width={width}
+        height={height}
+        overscanCount={4}
+        itemCount={itemCount}
+        onScroll={onScroll}
+        itemSize={itemSize}>
+        {Row}
+    </List>;
+}

package/src/components/VirtualTable/VirtualTableCell.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import equal from "react-fast-compare"
+
+import { CellRendererParams, VirtualTableColumn } from "./VirtualTableProps";
+
+type VirtualTableCellProps<T extends any> = {
+    dataKey: string;
+    column: VirtualTableColumn;
+    columns: VirtualTableColumn[];
+    rowData: any;
+    cellData: any;
+    rowIndex: any;
+    columnIndex: number;
+    cellRenderer: React.ComponentType<CellRendererParams<T>>;
+};
+
+export const VirtualTableCell = React.memo<VirtualTableCellProps<any>>(
+    function VirtualTableCell<T extends any>(props: VirtualTableCellProps<T>) {
+        return props.rowData && <props.cellRenderer
+            rowData={props.rowData}
+            rowIndex={props.rowIndex}
+            isScrolling={false}
+            column={props.column}
+            columns={props.columns}
+            columnIndex={props.columnIndex}
+            width={props.column.width}/>
+    },
+    (a, b) => {
+        return equal(a, b);
+    }
+);

package/src/components/VirtualTable/VirtualTableHeader.tsx

@@ -0,0 +1,260 @@
+import React, { RefObject, useCallback, useEffect, useState } from "react";
+import equal from "react-fast-compare";
+
+import { VirtualTableColumn, VirtualTableSort, VirtualTableWhereFilterOp } from "./VirtualTableProps";
+import { ErrorBoundary } from "../ErrorBoundary";
+import {
+    ArrowUpwardIcon,
+    Badge,
+    Button,
+    cn,
+    defaultBorderMixin,
+    FilterListIcon,
+    IconButton,
+    Popover
+} from "@firecms/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: RefObject<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;
+};
+
+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
+                                                               }: VirtualTableHeaderProps<M>) {
+
+        const [onHover, setOnHover] = useState(false);
+
+        const [openFilter, setOpenFilter] = React.useState(false);
+        const [hidden, setHidden] = React.useState(false);
+
+        const handleSettingsClick = useCallback((event: any) => {
+            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={cn("flex py-0 px-3 h-full text-xs uppercase font-semibold relative select-none items-center bg-gray-50 dark:bg-gray-900",
+                        "text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 ",
+                        "hover:bg-gray-100 dark:hover:bg-gray-800 hover:bg-opacity-50 dark:hover:bg-opacity-50",
+                        column.frozen ? "sticky left-0 z-10" : "relative z-0"
+                    )}
+                    style={{
+                        // transition: "color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
+                        // fontSize: "0.750rem",
+                        left: column.frozen ? 0 : undefined,
+                        minWidth: column.width,
+                        maxWidth: column.width
+                    }}
+                    onMouseEnter={() => setOnHover(true)}
+                    onMouseMove={() => setOnHover(true)}
+                    onMouseLeave={() => setOnHover(false)}
+                >
+
+                    <div className="overflow-hidden flex-grow">
+                        <div
+                            className={`flex items-center justify-${column.headerAlign} flex-row`}>
+
+                            {column.icon && column.icon(onHover || openFilter)}
+
+                            <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-gray-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-gray-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}
+                        className={cn(
+                            "absolute h-full w-[6px] top-0 right-0 cursor-col-resize",
+                            hovered && "bg-gray-300 dark:bg-gray-700"
+                        )}
+                        onMouseDown={onClickResizeColumn ? () => onClickResizeColumn(columnIndex, column) : undefined}
+                    />}
+                </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: any) => {
+        onFilterUpdate(undefined, false);
+    };
+
+    const filterIsSet = !!filter;
+
+    const filterField = createFilterField({
+        id,
+        filterValue: filterInternal,
+        setFilterValue: setFilterInternal,
+        column,
+        hidden,
+        setHidden
+    });
+
+    if (!filterField) return null;
+    return (
+        <div className={"text-gray-900 dark:text-white"}>
+            <div
+                className={cn(defaultBorderMixin, "py-4 px-6 text-xs font-semibold uppercase border-b")}>
+                {column.title ?? id}
+            </div>
+            {filterField && <div className="m-4">
+                {filterField}
+            </div>}
+            <div className="flex justify-end m-4">
+                <Button
+                    className="mr-4"
+                    disabled={!filterIsSet}
+                    variant={"text"}
+                    color="primary"
+                    type="reset"
+                    aria-label="filter clear"
+                    onClick={reset}>Clear</Button>
+                <Button
+                    variant="outlined"
+                    color="primary"
+                    onClick={submit}>Filter</Button>
+            </div>
+        </div>
+    );
+
+}