@rebasepro/core 0.0.1-canary.0

package/src/components/SelectableTable/SelectableTable.tsx

@@ -0,0 +1,344 @@
+import React, { useCallback, useEffect, useMemo, useRef } from "react";
+import {
+    CollectionSize,
+    Entity,
+    EntityTableController,
+    FilterValues,
+    Property,
+    SelectedCellProps
+} from "@rebasepro/types";
+import { CellRendererParams, VirtualTable, VirtualTableColumn } from "../VirtualTable";
+import { enumToObjectEntries } from "@rebasepro/common";
+import { DEFAULT_PAGE_SIZE, EntityCollectionTableController, OnCellValueChange, OnColumnResizeParams } from "../common";
+import { FilterFormFieldProps } from "../VirtualTable/VirtualTableHeader";
+import { ReferenceFilterField } from "./filters/ReferenceFilterField";
+import { StringNumberFilterField } from "./filters/StringNumberFilterField";
+import { BooleanFilterField } from "./filters/BooleanFilterField";
+import { DateTimeFilterField } from "./filters/DateTimeFilterField";
+import { useOutsideAlerter } from "@rebasepro/ui";
+import { SelectableTableContext } from "./SelectableTableContext";
+import { getRowHeight } from "../common/table_height";
+import { RelationFilterField } from "./filters/RelationFilterField";
+
+export type SelectableTableProps<M extends Record<string, any>> = {
+
+    /**
+     * Callback when a cell value changes.
+     */
+    onValueChange?: OnCellValueChange<any, M>;
+
+    columns: VirtualTableColumn[];
+
+    cellRenderer: React.ComponentType<CellRendererParams<Entity<M>>>;
+
+    /**
+     * Builder for creating the buttons in each row
+     * @param entity
+     * @param size
+     */
+    tableRowActionsBuilder?: (params: {
+        entity: Entity<M>,
+        size: CollectionSize,
+        width: number,
+        frozen?: boolean
+    }) => React.ReactNode;
+
+    /**
+     * Callback when anywhere on the table is clicked
+     */
+    onEntityClick?(entity: Entity<M>): void;
+
+    /**
+     * Callback when a column is resized
+     */
+    onColumnResize?(params: OnColumnResizeParams): void;
+
+    /**
+     * Should apply a different style to a row when hovering
+     */
+    hoverRow?: boolean;
+
+    /**
+     * Controller holding the logic for the table
+     * {@link useDataSourceTableController}
+     * {@link EntityTableController}
+     */
+    tableController: EntityTableController<M>;
+
+    filterable?: boolean;
+
+    sortable?: boolean;
+
+    inlineEditing?: boolean;
+
+    forceFilter?: FilterValues<keyof M extends string ? keyof M : never>;
+
+    highlightedRow?: (data: Entity<M>) => boolean;
+
+    size?: CollectionSize;
+
+    initialScroll?: number;
+
+    /**
+     * Callback when the table is scrolled
+     * @param props
+     */
+    onScroll?: (props: {
+        scrollDirection: "forward" | "backward",
+        scrollOffset: number,
+        scrollUpdateWasRequested: boolean
+    }) => void;
+
+    emptyComponent?: React.ReactNode;
+
+    endAdornment?: React.ReactNode;
+
+    AddColumnComponent?: React.ComponentType;
+
+    /**
+     * Callback when columns are reordered via drag-and-drop
+     */
+    onColumnsOrderChange?: (columns: VirtualTableColumn[]) => void;
+}
+
+/**
+ * This component is in charge of rendering a collection table with a high
+ * degree of customization.
+ *
+ * This component is used internally by {@link EntityCollectionView} and
+ * {@link useReferenceDialog}
+ *
+ * Please note that you only need to use this component if you are building
+ * a custom view. If you just need to create a default view you can do it
+ * exclusively with config options.
+ *
+ * If you want to bind a {@link EntityCollection} to a table with the default
+ * options you see in collections in the top level navigation, you can
+ * check {@link EntityCollectionView}.
+ *
+ * The data displayed in the table is managed by a {@link EntityTableController}.
+ * You can build the default, bound to a path in the datasource, by using the hook
+ * {@link useDataSourceTableController}
+ *
+ * @see EntityCollectionTableProps
+ * @see EntityCollectionView
+ * @see VirtualTable
+ * @group Components
+ */
+export const SelectableTable = function SelectableTable<M extends Record<string, any>>
+    ({
+        onValueChange,
+        cellRenderer,
+        onEntityClick,
+        onColumnResize,
+        hoverRow = true,
+        size = "m",
+        inlineEditing = false,
+        tableController:
+        {
+            data,
+            dataLoading,
+            noMoreToLoad,
+            dataLoadingError,
+            filterValues,
+            setFilterValues,
+            sortBy,
+            setSortBy,
+            itemCount,
+            setItemCount,
+            pageSize = DEFAULT_PAGE_SIZE,
+            paginationEnabled,
+            checkFilterCombination,
+            setPopupCell
+        },
+        filterable = true,
+        onScroll,
+        initialScroll,
+        emptyComponent,
+        columns,
+        forceFilter,
+        highlightedRow,
+        endAdornment,
+        AddColumnComponent,
+        onColumnsOrderChange
+    }: SelectableTableProps<M>) {
+
+    const ref = useRef<HTMLDivElement>(null);
+
+    const [selectedCell, setSelectedCell] = React.useState<SelectedCellProps<M> | undefined>(undefined);
+
+    const loadNextPage = () => {
+        if (!paginationEnabled || dataLoading || noMoreToLoad)
+            return;
+        if (itemCount !== undefined)
+            setItemCount?.(itemCount + pageSize);
+    };
+
+    const resetPagination = useCallback(() => {
+        setItemCount?.(pageSize);
+    }, [pageSize]);
+
+    const onRowClick = useCallback(({ rowData }: {
+        rowData: Entity<M>
+    }) => {
+        if (inlineEditing)
+            return;
+        return onEntityClick && onEntityClick(rowData);
+    }, [onEntityClick, inlineEditing]);
+
+    useOutsideAlerter(ref,
+        () => {
+            if (selectedCell) {
+                unselect();
+            }
+        },
+        Boolean(selectedCell));
+
+    const select = useCallback((cell?: SelectedCellProps<M>) => {
+        setSelectedCell(cell);
+    }, []);
+
+    const unselect = useCallback(() => {
+        setSelectedCell(undefined);
+    }, []);
+
+    // on ESC key press
+    useEffect(() => {
+        const escFunction = (event: KeyboardEvent) => {
+            if (event.keyCode === 27) {
+                unselect();
+            }
+        };
+        document.addEventListener("keydown", escFunction, false);
+        return () => {
+            document.removeEventListener("keydown", escFunction, false);
+        };
+    }, [unselect]);
+
+    const onFilterUpdate = useCallback((updatedFilterValues?: FilterValues<any>) => {
+        setFilterValues?.({ ...updatedFilterValues, ...forceFilter } as FilterValues<any>);
+    }, [forceFilter]);
+
+    const contextValue = useMemo(() => ({
+        setPopupCell: setPopupCell as ((cell?: SelectedCellProps<M>) => void),
+        select,
+        onValueChange,
+        size: size ?? "m",
+        selectedCell
+    } satisfies EntityCollectionTableController<any>), [setPopupCell, select, onValueChange, size, selectedCell]);
+
+    return (
+        <SelectableTableContext.Provider
+            value={contextValue}>
+            <div className="h-full w-full flex flex-col bg-white dark:bg-surface-950"
+                ref={ref}>
+
+                <VirtualTable
+                    data={data}
+                    columns={columns}
+                    cellRenderer={cellRenderer}
+                    onRowClick={inlineEditing ? undefined : (onEntityClick ? onRowClick : undefined)}
+                    onEndReached={loadNextPage}
+                    onResetPagination={resetPagination}
+                    error={dataLoadingError}
+                    onColumnResize={onColumnResize}
+                    rowHeight={getRowHeight(size)}
+                    loading={dataLoading}
+                    filter={filterValues}
+                    onFilterUpdate={setFilterValues ? onFilterUpdate : undefined}
+                    sortBy={sortBy}
+                    onSortByUpdate={setSortBy as ((sortBy?: [string, "asc" | "desc"]) => void)}
+                    hoverRow={hoverRow}
+                    initialScroll={initialScroll}
+                    onScroll={onScroll}
+                    checkFilterCombination={checkFilterCombination}
+                    createFilterField={filterable ? createFilterField : undefined}
+                    rowClassName={useCallback((entity: Entity<M>) => {
+                        return highlightedRow?.(entity) ? "bg-surface-50/75 bg-surface-100/75 dark:bg-surface-800/75 dark:bg-surface-800/75" : "";
+                    }, [highlightedRow])}
+                    className="grow"
+                    emptyComponent={emptyComponent}
+                    endAdornment={endAdornment}
+                    AddColumnComponent={AddColumnComponent}
+                    onColumnsOrderChange={onColumnsOrderChange}
+                />
+
+            </div>
+        </SelectableTableContext.Provider>
+    );
+
+};
+
+function createFilterField({
+    id,
+    filterValue,
+    setFilterValue,
+    column,
+    hidden,
+    setHidden
+}: FilterFormFieldProps<{
+    resolvedProperty: Property,
+    disabled: boolean,
+}>): React.ReactNode {
+
+    if (!column.custom) {
+        return null;
+    }
+
+    const { resolvedProperty } = column.custom;
+
+    const isArray = resolvedProperty?.type === "array";
+    const baseProperty: Property | undefined = isArray ? resolvedProperty.of : resolvedProperty;
+    if (!baseProperty) {
+        return null;
+    }
+    if (baseProperty.type === "reference") {
+        return <ReferenceFilterField value={filterValue}
+            setValue={setFilterValue}
+            name={id as string}
+            isArray={isArray}
+            path={baseProperty.path}
+            title={resolvedProperty?.name}
+            includeId={baseProperty.includeId}
+            previewProperties={baseProperty?.previewProperties}
+            hidden={hidden}
+            setHidden={setHidden} />;
+    } else if (baseProperty.type === "relation" && baseProperty.relation) {
+        return <RelationFilterField value={filterValue}
+            setValue={setFilterValue}
+            name={id as string}
+            relation={baseProperty.relation}
+            hidden={hidden}
+            setHidden={setHidden} />;
+    } else if (baseProperty.type === "number" || baseProperty.type === "string") {
+        const name = baseProperty.name;
+        const enumValues = baseProperty.enum ? enumToObjectEntries(baseProperty.enum) : undefined;
+        return <StringNumberFilterField value={filterValue}
+            setValue={setFilterValue}
+            name={id as string}
+            type={baseProperty.type}
+            isArray={isArray}
+            enumValues={enumValues}
+            title={name} />;
+    } else if (baseProperty.type === "boolean") {
+        const name = baseProperty.name;
+        return <BooleanFilterField value={filterValue}
+            setValue={setFilterValue}
+            name={id as string}
+            title={name} />;
+
+    } else if (baseProperty.type === "date") {
+        const title = baseProperty.name;
+        return <DateTimeFilterField value={filterValue}
+            setValue={setFilterValue}
+            name={id as string}
+            mode={baseProperty.mode}
+            isArray={isArray}
+            title={title} />;
+    }
+
+    return (
+        <div>{`Currently the filter field ${resolvedProperty.type} is not supported`}</div>
+    );
+}
+

package/src/components/SelectableTable/SelectableTableContext.tsx

@@ -0,0 +1,6 @@
+import React, { useContext } from "react";
+import { EntityCollectionTableController } from "../common/types";
+
+export const SelectableTableContext = React.createContext<EntityCollectionTableController<any>>({} as any);
+
+export const useSelectableTableController = () => useContext<EntityCollectionTableController<any>>(SelectableTableContext);

package/src/components/SelectableTable/filters/BooleanFilterField.tsx

@@ -0,0 +1,49 @@
+import React from "react";
+import { VirtualTableWhereFilterOp } from "../../VirtualTable";
+import { BooleanSwitchWithLabel } from "@rebasepro/ui";
+
+interface BooleanFieldProps {
+    name: string,
+    value?: [op: VirtualTableWhereFilterOp, fieldValue: any];
+    setValue: (value?: [op: VirtualTableWhereFilterOp, newValue: any]) => void;
+    title?: string;
+}
+
+export function BooleanFilterField({
+    name,
+    title,
+    value,
+    setValue
+}: BooleanFieldProps) {
+
+    function updateFilter(val?: boolean) {
+        if (val !== undefined) {
+            setValue(
+                ["==", val]
+            );
+        } else {
+            setValue(
+                undefined
+            );
+        }
+    }
+
+    const valueSetToTrue = value && value[1];
+    const valueSet = !!value;
+
+    return (
+        <div className="w-full">
+            <BooleanSwitchWithLabel
+                size={"medium"}
+                value={valueSetToTrue}
+                allowIndeterminate={true}
+                onValueChange={(v: boolean | null) => updateFilter(v === null ? undefined : v)}
+                label={!valueSet
+                    ? "No filter"
+                    : valueSetToTrue
+                        ? `${title} is true`
+                        : `${title} is false`}
+            />
+        </div>
+    );
+}

package/src/components/SelectableTable/filters/DateTimeFilterField.tsx

@@ -0,0 +1,126 @@
+import React, { useState } from "react";
+import { VirtualTableWhereFilterOp } from "../../VirtualTable";
+import { DateTimeField, Select, SelectItem } from "@rebasepro/ui";
+import { useCustomizationController } from "../../../hooks";
+
+interface DateTimeFilterFieldProps {
+    name: string,
+    mode?: "date" | "date_time",
+    value?: [op: VirtualTableWhereFilterOp, fieldValue: any];
+    setValue: (value?: [op: VirtualTableWhereFilterOp, newValue: any]) => void;
+    isArray?: boolean;
+    title?: string;
+    timezone?: string;
+}
+
+const operationLabels: Record<VirtualTableWhereFilterOp | "is-null", string> = {
+    "==": "==",
+    "!=": "!=",
+    ">": ">",
+    "<": "<",
+    ">=": ">=",
+    "<=": "<=",
+    "not-in": "not in",
+    in: "in",
+    "array-contains": "Contains",
+    "array-contains-any": "Any",
+    "is-null": "Is null"
+};
+
+const multipleSelectOperations = ["array-contains-any", "in"];
+
+export function DateTimeFilterField({
+    name,
+    isArray,
+    mode,
+    value,
+    setValue,
+    title,
+    timezone
+}: DateTimeFilterFieldProps) {
+
+    const { locale } = useCustomizationController();
+    const possibleOperations: (keyof typeof operationLabels)[] = isArray
+        ? ["array-contains"]
+        : ["==", "!=", ">", "<", ">=", "<=", "is-null"];
+
+    const [fieldOperation, fieldValue] = value || [possibleOperations[0], undefined];
+    const [operation, setOperation] = useState<VirtualTableWhereFilterOp | "is-null">(fieldOperation === "==" && fieldValue === null ? "is-null" : fieldOperation);
+    const [internalValue, setInternalValue] = useState<Date | null | undefined>(fieldValue);
+
+    const isNullOperation = operation === "is-null";
+
+    function updateFilter(op: VirtualTableWhereFilterOp | "is-null", val: Date | undefined | null) {
+        // Handle "is null" operation
+        if (op === "is-null") {
+            setOperation(op);
+            setInternalValue(null);
+            setValue(["==", null]);
+            return;
+        }
+
+        let newValue: Date | null | undefined = val;
+        const prevOpIsArray = multipleSelectOperations.includes(operation);
+        const newOpIsArray = multipleSelectOperations.includes(op);
+        if (prevOpIsArray !== newOpIsArray) {
+            // @ts-ignore
+            newValue = newOpIsArray ? (val ? [val] : []) : "";
+        }
+
+        setOperation(op);
+        setInternalValue(newValue);
+
+        const hasNewValue = newValue !== null && Array.isArray(newValue)
+            ? newValue.length > 0
+            : newValue !== undefined;
+        if (op && hasNewValue) {
+            setValue(
+                [op, newValue]
+            );
+        } else {
+            setValue(
+                undefined
+            );
+        }
+    }
+
+    return (
+
+        <div className="flex w-full">
+            <div className="w-[100px]">
+                <Select value={operation}
+                    size={"medium"}
+                    fullWidth={true}
+                    onValueChange={(value) => {
+                        updateFilter(value as VirtualTableWhereFilterOp | "is-null", internalValue);
+                    }}
+                    renderValue={(op) => operationLabels[op as keyof typeof operationLabels]}>
+                    {possibleOperations.map((op) => (
+                        <SelectItem key={op} value={op}>
+                            {operationLabels[op]}
+                        </SelectItem>
+                    ))}
+                </Select>
+            </div>
+
+            <div className="grow ml-2 flex flex-col gap-2">
+
+                <DateTimeField
+                    mode={mode}
+                    size={"medium"}
+                    locale={locale}
+                    timezone={timezone}
+                    disabled={isNullOperation}
+                    value={isNullOperation ? undefined : (internalValue ?? undefined)}
+                    onChange={(dateValue: Date | null) => {
+                        updateFilter(operation, dateValue === null ? undefined : dateValue);
+                    }}
+                    clearable={true}
+                />
+
+            </div>
+
+        </div>
+    );
+
+}