@firecms/core 3.0.0-alpha.16 → 3.0.0-alpha.18

package/src/core/components/VirtualTable/VirtualTableHeaderRow.tsx

@@ -0,0 +1,127 @@
+import React, { createRef, useCallback, useEffect, useState } from "react";
+
+import { VirtualTableColumn, VirtualTableWhereFilterOp } from "./VirtualTableProps";
+import { ErrorBoundary } from "../ErrorBoundary";
+import { VirtualTableHeader } from "./VirtualTableHeader";
+import { VirtualTableContextProps } from "./types";
+import { defaultBorderMixin } from "../../../styles";
+import { cn } from "../../../components";
+
+export const VirtualTableHeaderRow = ({
+                                          columns,
+                                          currentSort,
+                                          onColumnSort,
+                                          onFilterUpdate,
+                                          sortByProperty,
+                                          filter,
+                                          onColumnResize,
+                                          onColumnResizeEnd,
+                                          createFilterField
+                                      }: VirtualTableContextProps<any>) => {
+
+    const columnRefs = columns.map(() => createRef<HTMLDivElement>());
+    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={cn(defaultBorderMixin, "z-20 sticky min-w-full flex w-fit flex-row top-0 left-0 h-12 border-b bg-gray-50 dark:bg-gray-900")}>
+            {columns.map((c, columnIndex) => {
+                const column = columns[columnIndex];
+
+                const filterForThisProperty: [VirtualTableWhereFilterOp, any] | undefined =
+                    column && filter && filter[column.key]
+                        ? filter[column.key]
+                        : undefined;
+                return <ErrorBoundary key={"header_" + column.key}>
+                    <VirtualTableHeader
+                        resizeHandleRef={columnRefs[columnIndex]}
+                        columnIndex={columnIndex}
+                        isResizingIndex={isResizing}
+                        onFilterUpdate={onFilterUpdate}
+                        filter={filterForThisProperty}
+                        sort={sortByProperty === column.key ? currentSort : undefined}
+                        onColumnSort={onColumnSort}
+                        onClickResizeColumn={onClickResizeColumn}
+                        column={column}
+                        createFilterField={createFilterField}/>
+                </ErrorBoundary>;
+            })}
+        </div>
+    );
+};

package/src/core/components/VirtualTable/VirtualTableProps.tsx

@@ -0,0 +1,256 @@
+import React from "react";
+import { WhereFilterOp } from "../../../types";
+import { FilterFormFieldProps } from "./VirtualTableHeader";
+
+export type OnRowClickParams<T extends Record<string, any>> = {
+    rowData: T;
+    rowIndex: number;
+    event: React.SyntheticEvent
+};
+
+/**
+ * @see Table
+ * @category Components
+ */
+export interface VirtualTableProps<T extends Record<string, any>> {
+
+    /**
+     * Array of arbitrary data
+     */
+    data?: T[];
+
+    /**
+     * Properties displayed in this collection. If this property is not set
+     * every property is displayed, you can filter
+     */
+    columns: VirtualTableColumn[];
+
+    /**
+     * Custom cell renderer
+     * The renderer receives props `{ cellData, columns, column, columnIndex, rowData, rowIndex, container, isScrolling }`
+     */
+    cellRenderer: (params: CellRendererParams<T>) => React.ReactNode;
+
+    /**
+     * If enabled, content is loaded in batch
+     */
+    paginationEnabled?: boolean;
+
+    /**
+     * Set this callback if you want to support some combinations
+     * of filter combinations only.
+     * @param filterValues
+     * @param sortBy
+     */
+    checkFilterCombination?: (filterValues: VirtualTableFilterValues<Extract<keyof T, string>>,
+                              sortBy?: [string, "asc" | "desc"]) => boolean;
+
+    /**
+     * A callback function when scrolling the table to near the end
+     */
+    onEndReached?: () => void;
+
+    /**
+     * When the pagination should be reset. E.g. the filters or sorting
+     * has been reset.
+     */
+    onResetPagination?: () => void;
+
+    /**
+     * Callback when a row is clicked
+     */
+    onRowClick?: (props: OnRowClickParams<T>) => void;
+
+    /**
+     * Callback when a column is resized
+     */
+    onColumnResize?: (params: OnVirtualTableColumnResizeParams) => void;
+
+    /**
+     * Size of the table
+     */
+    size?: VirtualTableSize,
+
+    /**
+     * In case this table should have some filters set by default
+     */
+    filter?: VirtualTableFilterValues<any>;
+
+    /**
+     * Callback used when filters are updated
+     * @param filter
+     */
+    onFilterUpdate?: (filter?: VirtualTableFilterValues<any> | undefined) => void;
+
+    /**
+     * Default sort applied to this collection
+     */
+    sortBy?: [string, "asc" | "desc"];
+
+    /**
+     * Callback used when sorting is updated
+     * @param sortBy
+     */
+    onSortByUpdate?: (sortBy?: [string, "asc" | "desc"]) => void;
+
+    /**
+     * If there is an error loading data you can pass it here, so it gets
+     * displayed instead of the content
+     */
+    error?: Error;
+
+    /**
+     * Message displayed when there is no data
+     */
+    emptyMessage?: string;
+
+    /**
+     * Is the table in a loading state
+     */
+    loading?: boolean;
+
+    /**
+     * Should apply a different style when hovering
+     */
+    hoverRow?: boolean;
+
+    /**
+     * Apply a custom class name to the row
+     * @param rowData
+     */
+    rowClassName?: (rowData: T) => string | undefined;
+
+    /**
+     * Callback to create a filter field, displayed in the header as a dropdown
+     * @param props
+     */
+    createFilterField?: (props: FilterFormFieldProps<any>) => React.ReactNode;
+
+    /**
+     * Class name applied to the table
+     */
+    className?: string;
+
+    /**
+     * Component rendered at the end of the table, after scroll
+     */
+    endAdornment?: React.ReactNode;
+
+}
+
+export type CellRendererParams<T extends any> = {
+    cellData?: any;
+    column: VirtualTableColumn;
+    columns: VirtualTableColumn[];
+    columnIndex: number;
+    rowData?: T;
+    rowIndex: number;
+    width: number;
+    isScrolling?: boolean;
+};
+
+/**
+ * @see Table
+ * @category Components
+ */
+export interface VirtualTableColumn<CustomProps extends any = any> {
+
+    /**
+     * Data key for the cell value, could be "a.b.c"
+     */
+    key: string;
+
+    /**
+     * The width of the column, gutter width is not included
+     */
+    width: number;
+
+    /**
+     * Label displayed in the header
+     */
+    title?: string;
+
+    /**
+     * This column is frozen to the left
+     */
+    frozen?: boolean;
+
+    /**
+     * How is the
+     */
+    headerAlign?: "left" | "center" | "right";
+
+    /**
+     * Icon displayed in the header
+     */
+    icon?: (hoverOrOpen: boolean) => React.ReactNode;
+
+    /**
+     *
+     */
+    filter?: boolean;
+
+    /**
+     * Alignment of the column cell
+     */
+
+    align?: "left" | "right" | "center";
+
+    /**
+     * Whether the column is sortable, defaults to false
+     */
+    sortable?: boolean;
+
+    /**
+     * Can it be resized
+     */
+    resizable?: boolean;
+
+    custom?: CustomProps;
+}
+
+/**
+ * @see Table
+ * @category Collection components
+ */
+export type OnVirtualTableColumnResizeParams = {
+    width: number,
+    key: string,
+    column: VirtualTableColumn
+};
+
+/**
+ * @see Table
+ * @category Components
+ */
+export type VirtualTableSize = "xs" | "s" | "m" | "l" | "xl";
+
+/**
+ * @see Table
+ * @category Components
+ */
+export type VirtualTableSort = "asc" | "desc" | undefined;
+
+/**
+ * @see Table
+ * @category Components
+ */
+export type VirtualTableFilterValues<Key extends string> = Partial<Record<Key, [WhereFilterOp, any]>>;
+
+/**
+ * Filter conditions in a `Query.where()` clause are specified using the
+ * strings '<', '<=', '==', '>=', '>', 'array-contains', 'in', 'not-in', and 'array-contains-any'.
+ * @see Table
+ * @category Models
+ */
+export type VirtualTableWhereFilterOp =
+    | "<"
+    | "<="
+    | "=="
+    | "!="
+    | ">="
+    | ">"
+    | "array-contains"
+    | "in"
+    | "not-in"
+    | "array-contains-any";

package/src/core/components/VirtualTable/VirtualTableRow.tsx

@@ -0,0 +1,52 @@
+import React, { useCallback } from "react";
+
+import equal from "react-fast-compare"
+
+import { getRowHeight } from "./common";
+import { VirtualTableRowProps } from "./types";
+import { cn } from "../../../components/util/cn";
+
+export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
+    function VirtualTableRow<T>({
+                                    rowData,
+                                    rowIndex,
+                                    children,
+                                    onRowClick,
+                                    size,
+                                    style,
+                                    hoverRow,
+                                    rowClassName
+                                }: VirtualTableRowProps<T>) {
+
+        const onClick = useCallback((event: React.SyntheticEvent) => onRowClick
+            ? onRowClick({
+                rowData,
+                rowIndex,
+                event
+            })
+            : undefined, [onRowClick, rowData, rowIndex]);
+
+        return (
+            <div
+                className={cn(
+                    "flex min-w-full text-sm border-b border-gray-200 dark:border-gray-800 border-opacity-40 dark:border-opacity-40",
+                    rowClassName ? rowClassName(rowData) : "",
+                    {
+                        "hover:bg-opacity-95": hoverRow,
+                        "cursor-pointer": onRowClick
+                    }
+                )}
+                onClick={onClick}
+                style={{
+                    ...(style),
+                    height: getRowHeight(size),
+                    width: "fit-content"
+                }}
+            >
+                {children}
+            </div>
+        );
+
+    },
+    equal
+);

package/src/core/components/VirtualTable/common.tsx

@@ -0,0 +1,18 @@
+import { VirtualTableSize } from "./VirtualTableProps";
+
+export function getRowHeight(size: VirtualTableSize): number {
+    switch (size) {
+        case "xl":
+            return 400;
+        case "l":
+            return 280;
+        case "m":
+            return 140;
+        case "s":
+            return 80;
+        case "xs":
+            return 54;
+        default:
+            throw Error("Missing mapping for collection size -> height");
+    }
+}

package/src/core/components/VirtualTable/fields/VirtualTableDateField.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { DateTimeField } from "../../../../components";
+
+export function VirtualTableDateField(props: {
+    name: string;
+    error: Error | undefined;
+    mode?: "date" | "date_time";
+    internalValue: Date | undefined | null;
+    updateValue: (newValue: (Date | null)) => void;
+    focused: boolean;
+    disabled: boolean;
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+}) {
+
+    const {
+        disabled,
+        error,
+        mode,
+        internalValue,
+        updateValue
+    } = props;
+
+    return (
+        <DateTimeField
+            value={internalValue ?? undefined}
+            onChange={(dateValue) => updateValue(dateValue)}
+            size={"medium"}
+            invisible={true}
+            className={"w-full h-full"}
+            inputClassName={"w-full h-full"}
+            mode={mode}
+        />
+    );
+}

package/src/core/components/VirtualTable/fields/VirtualTableInput.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect, useRef, useState } from "react";
+
+import { useDebounce } from "../../../util";
+import { TextareaAutosize } from "../../../../components/TextareaAutosize";
+
+export function VirtualTableInput(props: {
+    error: Error | undefined;
+    value: string;
+    multiline: boolean;
+    focused: boolean;
+    disabled: boolean;
+    updateValue: (newValue: (string | null)) => void;
+}) {
+
+    const ref = React.useRef<HTMLTextAreaElement>(null);
+
+    const {
+        disabled,
+        value,
+        multiline,
+        updateValue,
+        focused
+    } = props;
+
+    const prevValue = useRef<string | null>(value);
+
+    const [internalValue, setInternalValue] = useState<typeof value>(value);
+    const focusedState = useRef<boolean>(false);
+
+    useEffect(() => {
+        if (prevValue.current !== value && value !== internalValue)
+            setInternalValue(value);
+        prevValue.current = value;
+    }, [value]);
+
+    const doUpdate = React.useCallback(() => {
+        const emptyInitialValue = !value;
+        if (emptyInitialValue && !internalValue)
+            return;
+        if (internalValue !== value) {
+            prevValue.current = internalValue;
+            updateValue(internalValue);
+        }
+    }, [internalValue, updateValue, value]);
+
+    useDebounce(internalValue, doUpdate, !focused, 2000);
+
+    useEffect(() => {
+        if (ref.current && focused && !focusedState.current) {
+            focusedState.current = true;
+            ref.current.focus({ preventScroll: true });
+            ref.current.selectionStart = ref.current.value.length;
+            ref.current.selectionEnd = ref.current.value.length;
+        } else {
+            focusedState.current = focused;
+        }
+    }, [focused, ref]);
+
+    return (
+        <TextareaAutosize
+            ref={ref}
+            style={{
+                padding: 0,
+                margin: 0,
+                width: "100%",
+                color: "unset",
+                fontWeight: "unset",
+                lineHeight: "unset",
+                fontSize: "unset",
+                fontFamily: "unset",
+                background: "unset",
+                border: "unset",
+                resize: "none",
+                outline: "none"
+            }}
+            value={internalValue ?? ""}
+            onChange={(evt) => {
+                const newValue = evt.target.value as string;
+                if (multiline || !newValue.endsWith("\n"))
+                    setInternalValue(newValue);
+            }}
+            onFocus={() => {
+                focusedState.current = true;
+            }}
+            onBlur={() => {
+                focusedState.current = false;
+                doUpdate();
+            }}
+        />
+    );
+}

package/src/core/components/VirtualTable/fields/VirtualTableNumberInput.tsx

@@ -0,0 +1,82 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useDebounce } from "../../../util";
+
+export function VirtualTableNumberInput(props: {
+    error: Error | undefined;
+    value: number;
+    align: "right" | "left" | "center";
+    updateValue: (newValue: (number | null)) => void;
+    focused: boolean;
+    disabled: boolean;
+}) {
+
+    const {
+        align,
+        value,
+        updateValue,
+        focused,
+    } = props;
+    const propStringValue = (value && typeof value === "number") ? value.toString() : "";
+    const [internalValue, setInternalValue] = useState<string | null>(propStringValue);
+
+    const prevValue = useRef<number | null>(value);
+
+    useEffect(() => {
+        if (prevValue.current !== value && String(value) !== internalValue)
+            setInternalValue(value ? value.toString() : null);
+        prevValue.current = value;
+    }, [value]);
+
+    const doUpdate = React.useCallback(() => {
+        if (internalValue !== propStringValue) {
+            if (internalValue !== undefined && internalValue !== null) {
+                const numberValue = parseFloat(internalValue);
+                if (isNaN(numberValue))
+                    return;
+                if (numberValue !== undefined && numberValue !== null)
+                    updateValue(numberValue);
+            } else {
+                updateValue(null);
+            }
+        }
+
+    }, [internalValue, value]);
+
+    useDebounce(internalValue, doUpdate, !focused, 2000);
+
+    useEffect(
+        () => {
+            if (!focused && propStringValue !== internalValue)
+                setInternalValue(value !== undefined && value !== null ? value.toString() : null);
+        },
+        [value, focused]
+    );
+
+    const ref = React.useRef<HTMLInputElement>(null);
+
+    useEffect(() => {
+        if (ref.current && focused) {
+            ref.current.focus({ preventScroll: true });
+        }
+    }, [focused, ref]);
+
+    const regexp = /^-?[0-9]+[,.]?[0-9]*$/;
+
+    return (
+        <input
+            ref={ref}
+            className="w-full text-right p-0 m-0 bg-transparent border-none resize-none outline-none font-normal leading-normal text-unset"
+            style={{
+                textAlign: align
+            }}
+            value={internalValue ?? ""}
+            onChange={(evt) => {
+                const newValue = evt.target.value.replace(",", ".");
+                if (newValue.length === 0)
+                    setInternalValue(null);
+                if (regexp.test(newValue) || newValue.startsWith("-"))
+                    setInternalValue(newValue);
+            }}
+        />
+    );
+}