@firecms/core 3.0.0-3.0.0-beta.4.pre.1.0

package/src/components/ReferenceWidget.tsx

@@ -0,0 +1,145 @@
+import React, { useCallback, useMemo } from "react";
+
+import { Entity, EntityCollection, EntityReference, FilterValues } from "../types";
+import { getReferenceFrom } from "../util";
+import { PreviewSize, ReferencePreview } from "../preview";
+import { useNavigationController, useReferenceDialog } from "../hooks";
+import { Button, cn } from "@firecms/ui";
+
+export type ReferenceWidgetProps<M extends Record<string, any>> = {
+    name?: string,
+    multiselect?: boolean,
+    value: EntityReference | EntityReference[] | null,
+    onReferenceSelected?: (params: {
+        reference: EntityReference | null,
+        entity: Entity<M> | null
+    }) => void,
+    onMultipleReferenceSelected?: (params: {
+        references: EntityReference[] | null,
+        entities: Entity<M>[] | null
+    }) => void,
+    path: string,
+    disabled?: boolean,
+    previewProperties?: string[];
+    /**
+     * Allow selection of entities that pass the given filter only.
+     */
+    forceFilter?: FilterValues<string>;
+    size: PreviewSize;
+    className?: string;
+};
+
+/**
+ * This field allows selecting reference/s.
+ */
+export function ReferenceWidget<M extends Record<string, any>>({
+                                                                   name,
+                                                                   multiselect = false,
+                                                                   path,
+                                                                   disabled,
+                                                                   value,
+                                                                   onReferenceSelected,
+                                                                   onMultipleReferenceSelected,
+                                                                   previewProperties,
+                                                                   forceFilter,
+                                                                   size,
+                                                                   className
+                                                               }: ReferenceWidgetProps<M>) {
+
+    const navigationController = useNavigationController();
+
+    const collection: EntityCollection | undefined = useMemo(() => {
+        return navigationController.getCollection(path);
+    }, [path, navigationController]);
+
+    // if (!collection) {
+    //     throw Error(`Couldn't find the corresponding collection for the path: ${path}`);
+    // }
+
+    const onSingleEntitySelected = useCallback((entity: Entity<M> | null) => {
+        if (disabled)
+            return;
+        if (onReferenceSelected) {
+            const reference = entity ? getReferenceFrom(entity) : null;
+            onReferenceSelected?.({ reference, entity });
+        }
+    }, [disabled, onReferenceSelected]);
+
+    const onMultipleEntitiesSelected = useCallback((entities: Entity<M>[]) => {
+        if (disabled)
+            return;
+        if (onMultipleReferenceSelected) {
+            const references = entities ? entities.map(e => getReferenceFrom(e)) : null;
+            onMultipleReferenceSelected({ references, entities });
+        }
+    }, [disabled, onReferenceSelected]);
+
+    const referenceDialogController = useReferenceDialog({
+            multiselect,
+            path,
+            collection,
+            onSingleEntitySelected,
+            onMultipleEntitiesSelected,
+            forceFilter
+        }
+    );
+
+    const clearValue = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+        if (multiselect) {
+            onMultipleEntitiesSelected([]);
+        } else {
+            onSingleEntitySelected(null);
+        }
+    }, [onReferenceSelected]);
+
+    let child: React.ReactNode;
+
+    const onEntryClick = () => {
+        if (disabled)
+            return;
+        referenceDialogController.open();
+    };
+
+    if (Array.isArray(value)) {
+        child = <div className={"flex flex-col gap-4"}>
+            {value.map((ref, index) => {
+                return <ReferencePreview
+                    key={`reference_preview_${index}`}
+                    onClick={onEntryClick}
+                    reference={ref}
+                    disabled={disabled}
+                    previewProperties={previewProperties}
+                    size={size}/>
+            })}
+        </div>
+    } else if (value?.isEntityReference && value?.isEntityReference()) {
+        child = <ReferencePreview
+            reference={value}
+            onClick={onEntryClick}
+            disabled={disabled}
+            previewProperties={previewProperties}
+            size={size}/>
+
+    }
+    return <div className={cn("text-sm font-medium text-gray-500",
+        "min-w-80 flex flex-col gap-4",
+        "relative transition-colors duration-200 ease-in rounded font-medium",
+        disabled ? "bg-opacity-50" : "hover:bg-opacity-75",
+        "text-opacity-50 dark:text-white dark:text-opacity-50",
+        className
+    )}
+    >
+
+        {child}
+        {!value && <div className="justify-center text-left">
+            <Button variant="outlined"
+                    color="primary"
+                    disabled={disabled}
+                    onClick={onEntryClick}>
+                Edit {name}
+            </Button>
+        </div>}
+
+    </div>;
+}

package/src/components/SearchIconsView.tsx

@@ -0,0 +1,75 @@
+import React from "react";
+
+import { coolIconKeys, debounce, Icon, IconButton, iconKeys, SearchBar, Tooltip } from "@firecms/ui";
+import { icon_synonyms, iconsSearch } from "../util";
+
+const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
+
+if (process.env.NODE_ENV !== "production") {
+    Object.keys(icon_synonyms).forEach((icon: string) => {
+        if (!iconKeys.includes(icon)) {
+            console.warn(`The icon ${icon} no longer exists. Remove it from \`icon_synonyms\``);
+        }
+    });
+}
+
+export interface SearchIconsProps {
+    selectedIcon?: string;
+    onIconSelected?: (icon: string) => void;
+}
+
+export function SearchIconsView({
+                                selectedIcon = "",
+                                onIconSelected
+                            }: SearchIconsProps) {
+    const [keys, setKeys] = React.useState<string[] | null>(null);
+    const [query, setQuery] = React.useState<string>("");
+
+    const updateSearchResults = React.useMemo(() =>
+        debounce((value: string) => {
+            if (!value || value === "") {
+                setKeys(null);
+            } else {
+                const searchResult = iconsSearch.search(value);
+                setKeys(searchResult.map((e: any) => e.key));
+            }
+        }, UPDATE_SEARCH_INDEX_WAIT_MS), []
+    );
+
+    React.useEffect(() => {
+        updateSearchResults(query);
+        return () => {
+            updateSearchResults.clear();
+        };
+    }, [query, updateSearchResults]);
+
+    const icons = keys === null ? coolIconKeys : keys;
+
+    return (
+        <>
+            <SearchBar
+                autoFocus
+                innerClassName={"w-full sticky top-0 z-10"}
+                onTextSearch={(value?: string) => setQuery(value ?? "")}
+                placeholder="Search for more icons…"
+            />
+
+            <div className={"flex max-w-full flex-wrap mt-4"}>
+                {icons.map((icon: string) => {
+                    return (
+                        <Tooltip title={icon} key={icon}>
+                            <IconButton
+                                shape={"square"}
+                                toggled={selectedIcon === icon}
+                                onClick={onIconSelected ? () => onIconSelected(icon) : undefined}
+                                className="box-content m-1"
+                            >
+                                <Icon iconKey={icon} size={24}/>
+                            </IconButton>
+                        </Tooltip>
+                    );
+                })}
+            </div>
+        </>
+    );
+}

package/src/components/SelectableTable/SelectableTable.tsx

@@ -0,0 +1,329 @@
+import React, { useCallback, useEffect, useRef } from "react";
+import equal from "react-fast-compare";
+import {
+    CollectionSize,
+    Entity,
+    EntityTableController,
+    FilterValues,
+    ResolvedProperty,
+    SelectedCellProps
+} from "../../types";
+import { CellRendererParams, VirtualTable, VirtualTableColumn } from "../VirtualTable";
+import { enumToObjectEntries } from "../../util";
+import { OnCellValueChange, OnColumnResizeParams } from "../common/types";
+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 "@firecms/ui";
+import { SelectableTableContext } from "./SelectableTableContext";
+
+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 useDataSourceEntityCollectionTableController}
+     * {@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;
+
+    emptyComponent?: React.ReactNode;
+
+    endAdornment?: React.ReactNode;
+
+    AddColumnComponent?: React.ComponentType;
+}
+
+/**
+ * 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 useDataSourceEntityCollectionTableController}
+ *
+ * @see EntityCollectionTableProps
+ * @see EntityCollectionView
+ * @see VirtualTable
+ * @group Components
+ */
+export const SelectableTable = React.memo<SelectableTableProps<any>>(
+    function SelectableTable<M extends Record<string, any>>
+    ({
+         onValueChange,
+         cellRenderer,
+         onEntityClick,
+         onColumnResize,
+         hoverRow = true,
+         size,
+         inlineEditing = false,
+         tableController:
+             {
+                 data,
+                 dataLoading,
+                 noMoreToLoad,
+                 dataLoadingError,
+                 filterValues,
+                 setFilterValues,
+                 sortBy,
+                 setSortBy,
+                 setSearchString,
+                 clearFilter,
+                 itemCount,
+                 setItemCount,
+                 pageSize = 50,
+                 paginationEnabled,
+                 checkFilterCombination,
+                 setPopupCell
+             },
+         filterable = true,
+         emptyComponent,
+         columns,
+         forceFilter,
+         highlightedRow,
+         endAdornment,
+         AddColumnComponent
+     }: 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));
+
+        // on ESC key press
+        useEffect(() => {
+            const escFunction = (event: any) => {
+                if (event.keyCode === 27) {
+                    unselect();
+                }
+            };
+            document.addEventListener("keydown", escFunction, false);
+            return () => {
+                document.removeEventListener("keydown", escFunction, false);
+            };
+        });
+
+        const select = useCallback((cell?: SelectedCellProps<M>) => {
+            setSelectedCell(cell);
+        }, []);
+
+        const unselect = useCallback(() => {
+            setSelectedCell(undefined);
+        }, []);
+
+        const onFilterUpdate = useCallback((updatedFilterValues?: FilterValues<any>) => {
+            setFilterValues?.({ ...updatedFilterValues, ...forceFilter } as FilterValues<any>);
+        }, [forceFilter]);
+
+        return (
+            <SelectableTableContext.Provider
+                value={{
+                    setPopupCell: setPopupCell as ((cell?: SelectedCellProps<M>) => void),
+                    select,
+                    onValueChange,
+                    size: size ?? "m",
+                    selectedCell,
+                }}
+            >
+                <div className="h-full w-full flex flex-col bg-white dark:bg-gray-950"
+                     ref={ref}>
+
+                    <VirtualTable
+                        data={data}
+                        columns={columns}
+                        cellRenderer={cellRenderer}
+                        onRowClick={inlineEditing ? undefined : (onEntityClick ? onRowClick : undefined)}
+                        onEndReached={loadNextPage}
+                        onResetPagination={resetPagination}
+                        error={dataLoadingError}
+                        paginationEnabled={paginationEnabled}
+                        onColumnResize={onColumnResize}
+                        size={size}
+                        loading={dataLoading}
+                        filter={filterValues}
+                        onFilterUpdate={setFilterValues ? onFilterUpdate : undefined}
+                        sortBy={sortBy}
+                        onSortByUpdate={setSortBy as ((sortBy?: [string, "asc" | "desc"]) => void)}
+                        hoverRow={hoverRow}
+                        checkFilterCombination={checkFilterCombination}
+                        createFilterField={filterable ? createFilterField : undefined}
+                        rowClassName={useCallback((entity: Entity<M>) => {
+                            return highlightedRow?.(entity) ? "bg-gray-100 bg-opacity-75 dark:bg-gray-800 dark:bg-opacity-75" : "";
+                        }, [highlightedRow])}
+                        className="flex-grow"
+                        emptyComponent={emptyComponent}
+                        endAdornment={endAdornment}
+                        AddColumnComponent={AddColumnComponent}
+                    />
+
+                </div>
+            </SelectableTableContext.Provider>
+        );
+
+    },
+    equal
+);
+
+function createFilterField({
+                               id,
+                               filterValue,
+                               setFilterValue,
+                               column,
+                               hidden,
+                               setHidden
+                           }: FilterFormFieldProps<{
+    resolvedProperty: ResolvedProperty,
+    disabled: boolean,
+}>): React.ReactNode {
+
+    if (!column.custom) {
+        return null;
+    }
+
+    const { resolvedProperty } = column.custom;
+
+    const isArray = resolvedProperty?.dataType === "array";
+    const baseProperty: ResolvedProperty = isArray ? resolvedProperty.of : resolvedProperty;
+    if (!baseProperty) {
+        return null;
+    }
+    if (baseProperty.dataType === "reference") {
+        return <ReferenceFilterField value={filterValue}
+                                     setValue={setFilterValue}
+                                     name={id as string}
+                                     isArray={isArray}
+                                     path={baseProperty.path}
+                                     title={resolvedProperty?.name}
+                                     previewProperties={baseProperty?.previewProperties}
+                                     hidden={hidden}
+                                     setHidden={setHidden}/>;
+    } else if (baseProperty.dataType === "number" || baseProperty.dataType === "string") {
+        const name = baseProperty.name;
+        const enumValues = baseProperty.enumValues ? enumToObjectEntries(baseProperty.enumValues) : undefined;
+        return <StringNumberFilterField value={filterValue}
+                                        setValue={setFilterValue}
+                                        name={id as string}
+                                        dataType={baseProperty.dataType}
+                                        isArray={isArray}
+                                        enumValues={enumValues}
+                                        title={name}/>;
+    } else if (baseProperty.dataType === "boolean") {
+        const name = baseProperty.name;
+        return <BooleanFilterField value={filterValue}
+                                   setValue={setFilterValue}
+                                   name={id as string}
+                                   title={name}/>;
+
+    } else if (baseProperty.dataType === "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.dataType} is not supported`}</div>
+    );
+}
+
+function filterableProperty(property: ResolvedProperty, partOfArray = false): boolean {
+    if (partOfArray) {
+        return ["string", "number", "date", "reference"].includes(property.dataType);
+    }
+    if (property.dataType === "array") {
+        if (property.of)
+            return filterableProperty(property.of, true);
+        else
+            return false;
+    }
+    return ["string", "number", "boolean", "date", "reference", "array"].includes(property.dataType);
+}

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 "@firecms/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-[200px]">
+            <BooleanSwitchWithLabel
+                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>
+    )
+        ;
+}