@rebasepro/core 0.0.1-canary.0

package/src/components/VirtualTable/VirtualTableProps.tsx

@@ -0,0 +1,298 @@
+import React from "react";
+import { WhereFilterOp } from "@rebasepro/types";
+import { FilterFormFieldProps } from "./VirtualTableHeader";
+
+export type OnRowClickParams<T extends Record<string, any>> = {
+    rowData: T;
+    rowIndex: number;
+    event: React.SyntheticEvent
+};
+
+/**
+ * @see Table
+ * @group 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: React.ComponentType<CellRendererParams<T>>;
+
+    /**
+     * 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;
+
+    /**
+     * Offset in pixels where the onEndReached callback is triggered
+     */
+    endOffset?: number;
+
+    /**
+     * 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;
+    onColumnResizeEnd?: (params: OnVirtualTableColumnResizeParams) => void;
+
+    /**
+     * Size of the table
+     */
+    rowHeight?: number,
+    headerHeight?: number,
+
+    /**
+     * 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;
+
+    /**
+     * Callback when the table is scrolled
+     * @param props
+     */
+    onScroll?: (props: {
+        scrollDirection: "forward" | "backward",
+        scrollOffset: number,
+        scrollUpdateWasRequested: boolean
+    }) => 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
+     */
+    emptyComponent?: React.ReactNode;
+
+    /**
+     * 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;
+
+    /**
+     * Style applied to the table
+     */
+    style?: React.CSSProperties;
+
+    /**
+     * Component rendered at the end of the table, after scroll
+     */
+    endAdornment?: React.ReactNode;
+
+    /**
+     * If adding this callback, a button to add a new column is displayed.
+     * @param column
+     */
+    AddColumnComponent?: React.ComponentType;
+
+    /**
+     * Initial scroll position
+     */
+    initialScroll?: number;
+
+    /**
+     * Callback when columns are reordered via drag-and-drop.
+     * @param columns The new column order
+     */
+    onColumnsOrderChange?: (columns: VirtualTableColumn[]) => void;
+
+}
+
+export type CellRendererParams<T = any> = {
+    column: VirtualTableColumn;
+    columns: VirtualTableColumn[];
+    columnIndex: number;
+    rowData?: T;
+    rowIndex: number;
+    width: number;
+    isScrolling?: boolean;
+    // Sortable props for dnd-kit integration
+    sortableNodeRef?: (node: HTMLElement | null) => void;
+    sortableStyle?: React.CSSProperties;
+    sortableAttributes?: Record<string, any>;
+    isDragging?: boolean;
+    isDraggable?: boolean;
+    frozen?: boolean;
+};
+
+/**
+ * @see Table
+ * @group Components
+ */
+export interface VirtualTableColumn<CustomProps = 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?: 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 props passed to the cell renderer
+     */
+    custom?: CustomProps;
+
+    /**
+     * Additional children to be rendered in the header when hovering
+     */
+    AdditionalHeaderWidget?: (props: { onHover: boolean }) => React.ReactNode;
+}
+
+/**
+ * @see Table
+ * @group Collection components
+ */
+export type OnVirtualTableColumnResizeParams = {
+    width: number,
+    key: string,
+    column: VirtualTableColumn
+};
+
+/**
+ * @see Table
+ * @group Components
+ */
+export type VirtualTableSort = "asc" | "desc" | undefined;
+
+/**
+ * @see Table
+ * @group 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`, and `array-contains-any`.
+ * @see Table
+ * @group Models
+ */
+export type VirtualTableWhereFilterOp =
+    | "<"
+    | "<="
+    | "=="
+    | "!="
+    | ">="
+    | ">"
+    | "array-contains"
+    | "in"
+    | "not-in"
+    | "array-contains-any";

package/src/components/VirtualTable/VirtualTableRow.tsx

@@ -0,0 +1,52 @@
+import React, { useCallback } from "react";
+
+import { deepEqual as equal } from "fast-equals"
+
+import { VirtualTableRowProps } from "./types";
+import { cls } from "@rebasepro/ui";
+
+export const VirtualTableRow = React.memo<VirtualTableRowProps<any>>(
+    function VirtualTableRow<T>({
+        rowData,
+        rowIndex,
+        children,
+        onRowClick,
+        rowHeight,
+        style,
+        hoverRow,
+        rowClassName
+    }: VirtualTableRowProps<T>) {
+
+        const onClick = useCallback((event: React.SyntheticEvent) => {
+            if (onRowClick)
+                onRowClick({
+                    rowData,
+                    rowIndex,
+                    event
+                })
+        }, [onRowClick, rowData, rowIndex]);
+
+        return (
+            <div
+                className={cls(
+                    "flex min-w-full text-sm border-b border-surface-200 dark:border-surface-800 border-opacity-40 border-surface-200/40 dark:border-opacity-40 dark:border-surface-800/40",
+                    rowClassName ? rowClassName(rowData) : "",
+                    {
+                        "hover:bg-surface-50/75 dark:hover:bg-surface-800/75": hoverRow,
+                        "cursor-pointer ": onRowClick
+                    }
+                )}
+                onClick={onClick}
+                style={{
+                    ...(style),
+                    height: rowHeight,
+                    width: "fit-content"
+                }}
+            >
+                {children}
+            </div>
+        );
+
+    },
+    equal
+);

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

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

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

@@ -0,0 +1,93 @@
+import React, { useEffect, useRef, useState } from "react";
+
+import { useDebouncedCallback } from "../../../util";
+import { focusedDisabled, TextareaAutosize } from "@rebasepro/ui";
+
+export function VirtualTableInput(props: {
+    error: Error | undefined;
+    value: string;
+    multiline: boolean;
+    focused: boolean;
+    disabled: boolean;
+    updateValue: (newValue: (string | null)) => void;
+    onBlur?: () => 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 && internalValue !== prevValue.current) {
+            prevValue.current = internalValue;
+            updateValue(internalValue);
+        }
+    }, [internalValue, updateValue, value]);
+
+    useDebouncedCallback(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
+            className={focusedDisabled}
+            ref={ref}
+            style={{
+                padding: 0,
+                margin: 0,
+                width: "100%",
+                color: "unset",
+                fontWeight: "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();
+                if (props.onBlur) props.onBlur();
+            }}
+        />
+    );
+}

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

@@ -0,0 +1,83 @@
+import React, { useEffect, useRef, useState } from "react";
+import { useDebouncedCallback } from "../../../util";
+import { cls, focusedDisabled } from "@rebasepro/ui";
+
+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]);
+
+    useDebouncedCallback(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={cls("w-full text-right p-0 m-0 bg-transparent border-none resize-none outline-hidden font-normal leading-normal text-unset", focusedDisabled)}
+            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);
+            }}
+        />
+    );
+}

package/src/components/VirtualTable/fields/VirtualTableSelect.tsx

@@ -0,0 +1,133 @@
+import { EnumValues } from "@rebasepro/types";
+import { EnumValuesChip } from "../../../preview";
+import React, { useCallback, useEffect } from "react";
+import { MultiSelect, MultiSelectItem, Select, SelectItem } from "@rebasepro/ui";
+import { resolveEnumValues } from "@rebasepro/common";
+
+export function VirtualTableSelect(props: {
+    name: string;
+    enumValues: EnumValues;
+    error: Error | undefined;
+    multiple: boolean;
+    disabled: boolean;
+    small: boolean;
+    internalValue: string | number | string[] | number[] | undefined;
+    valueType: "string" | "number";
+    updateValue: (newValue: (string | number | string[] | number[] | null)) => void;
+    focused: boolean;
+    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+}) {
+
+    const {
+        enumValues,
+        internalValue,
+        disabled,
+        small,
+        focused,
+        updateValue,
+        multiple,
+        valueType
+    } = props;
+
+    const validValue = (Array.isArray(internalValue) && multiple) ||
+        (!Array.isArray(internalValue) && !multiple);
+
+    const ref = React.useRef<HTMLButtonElement>(null);
+    useEffect(() => {
+        if (ref.current && focused) {
+            ref.current?.focus({ preventScroll: true });
+        }
+    }, [focused, ref]);
+
+    const onChange = useCallback((updatedValue: string | string[]) => {
+        console.trace("onChange");
+        if (valueType === "number") {
+            if (multiple) {
+                const newValue = (updatedValue as string[]).map((v) => parseFloat(v));
+                updateValue(newValue);
+            } else {
+                updateValue(parseFloat(updatedValue as string));
+            }
+        } else if (valueType === "string") {
+            if (!updatedValue)
+                updateValue(null)
+            else
+                updateValue(updatedValue);
+        } else {
+            throw Error("Missing mapping in TableSelect");
+        }
+    }, [multiple, updateValue, valueType]);
+
+    const resolvedEnumValues = resolveEnumValues(enumValues);
+
+    const renderValue = (enumKey?: string | number) => {
+        return <EnumValuesChip
+            key={`${enumKey}`}
+            enumKey={String(enumKey)}
+            enumValues={enumValues}
+            size={small ? "small" : "medium"} />;
+    };
+
+    // When the dropdown closes (including on escape), restore focus to the trigger
+    const handleOpenChange = useCallback((open: boolean) => {
+        if (!open && ref.current) {
+            // Use setTimeout to ensure focus is restored after Radix finishes its cleanup
+            setTimeout(() => {
+                ref.current?.focus({ preventScroll: true });
+            }, 0);
+        }
+    }, []);
+
+    return (
+        multiple
+            ? <MultiSelect
+                inputRef={ref}
+                className="w-full h-full p-0 bg-transparent outline-none"
+                position={"item-aligned"}
+                disabled={disabled}
+                includeClear={false}
+                useChips={false}
+                value={validValue
+                    ? ((internalValue as any[]).map(v => v.toString()))
+                    : ([])}
+                onValueChange={onChange}
+                onOpenChange={handleOpenChange}>
+                {resolvedEnumValues?.map((enumConfig) => (
+                    <MultiSelectItem
+                        key={enumConfig.id}
+                        value={String(enumConfig.id)}>
+                        <EnumValuesChip
+                            enumKey={enumConfig.id}
+                            enumValues={enumValues}
+                            size={small ? "small" : "medium"} />
+                    </MultiSelectItem>
+                ))}
+            </MultiSelect>
+            : <Select
+                inputRef={ref}
+                fullWidth={true}
+                className="w-full h-full p-0 bg-transparent outline-none [&_button]:ring-0 [&_button]:ring-offset-0"
+                inputClassName="ring-0 ring-offset-0 focus:ring-0 focus-visible:ring-0 outline-none focus:outline-none focus-visible:outline-none focus-visible:ring-offset-0"
+                position={"item-aligned"}
+                disabled={disabled}
+                padding={false}
+                value={validValue
+                    ? internalValue?.toString()
+                    : ""}
+                onValueChange={onChange}
+                onOpenChange={handleOpenChange}
+                renderValue={renderValue}>
+                {resolvedEnumValues?.map((enumConfig) => (
+                    <SelectItem
+                        key={enumConfig.id}
+                        value={String(enumConfig.id)}>
+                        <EnumValuesChip
+                            enumKey={enumConfig.id}
+                            enumValues={enumValues}
+                            size={small ? "small" : "medium"} />
+                    </SelectItem>
+                ))}
+            </Select>
+
+    );
+}