@firecms/core 3.0.0-alpha.7 → 3.0.0-alpha.70

package/src/components/VirtualTable/VirtualTableRow.tsx

@@ -0,0 +1,54 @@
+import React, { useCallback } from "react";
+
+import equal from "react-fast-compare"
+
+import { getRowHeight } from "./common";
+import { VirtualTableRowProps } from "./types";
+import { cn } from "@firecms/ui";
+
+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) => {
+            console.debug("VirtualTableRow click");
+            if (onRowClick)
+                onRowClick({
+                    rowData,
+                    rowIndex,
+                    event
+                })
+        }, [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/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/components/VirtualTable/fields/VirtualTableDateField.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { DateTimeField } from "@firecms/ui";
+import { useFireCMSContext } from "../../../hooks";
+
+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 { locale } = useFireCMSContext();
+    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}
+            locale={locale}
+        />
+    );
+}

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

@@ -0,0 +1,91 @@
+import React, { useEffect, useRef, useState } from "react";
+
+import { useDebounce } from "../../../util";
+import { TextareaAutosize } from "@firecms/ui";
+
+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/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);
+            }}
+        />
+    );
+}

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

@@ -0,0 +1,130 @@
+import { EnumValueConfig } from "../../../types";
+import { ArrayEnumPreview, EnumValuesChip } from "../../../preview";
+import React, { useCallback, useEffect } from "react";
+import { MultiSelect, MultiSelectItem, Select, SelectItem } from "@firecms/ui";
+
+export function VirtualTableSelect(props: {
+    name: string;
+    enumValues: EnumValueConfig[];
+    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 {
+        name,
+        enumValues,
+        error,
+        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[]) => {
+        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 renderValue = (enumKey: string | number, index: number) => {
+        if (multiple && Array.isArray(enumKey)) {
+            return <ArrayEnumPreview
+                key={`${enumKey}-${index}`}
+                value={enumKey}
+                name={name}
+                enumValues={enumValues}
+                size={small ? "small" : "medium"}/>;
+        } else {
+            return <EnumValuesChip
+                key={`${enumKey}-${index}`}
+                enumKey={enumKey}
+                enumValues={enumValues}
+                size={small ? "small" : "medium"}/>;
+        }
+    };
+    return (
+        multiple
+            ? <MultiSelect
+                inputRef={ref}
+                containerClassName="w-full h-full"
+                className="w-full h-full p-0 bg-transparent"
+                position={"item-aligned"}
+                disabled={disabled}
+                padding={false}
+                includeFocusOutline={false}
+                value={validValue
+                    ? ((internalValue as any[]).map(v => v.toString()))
+                    : ([])}
+                onMultiValueChange={onChange}
+                renderValue={renderValue}>
+                {enumValues?.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}
+                className="w-full h-full p-0 bg-transparent"
+                position={"item-aligned"}
+                disabled={disabled}
+                multiple={multiple}
+                padding={false}
+                includeFocusOutline={false}
+                value={validValue
+                    ? (multiple ? (internalValue as any[]).map(v => v.toString()) : internalValue?.toString())
+                    : (multiple ? [] : "")}
+                onValueChange={onChange}
+                onMultiValueChange={onChange}
+                renderValue={renderValue}>
+                {enumValues?.map((enumConfig) => (
+                    <SelectItem
+                        key={enumConfig.id}
+                        value={String(enumConfig.id)}>
+                        <EnumValuesChip
+                            enumKey={enumConfig.id}
+                            enumValues={enumValues}
+                            size={small ? "small" : "medium"}/>
+                    </SelectItem>
+                ))}
+            </Select>
+
+    );
+}

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

@@ -0,0 +1,32 @@
+import React, { useEffect } from "react";
+import { BooleanSwitch } from "@firecms/ui";
+
+export function VirtualTableSwitch(props: {
+    error: Error | undefined;
+    internalValue?: boolean;
+    focused: boolean;
+    disabled: boolean;
+    updateValue: (newValue: (boolean | null)) => void;
+}) {
+    const {
+        internalValue,
+        updateValue,
+        focused
+    } = props;
+    const ref = React.useRef<HTMLButtonElement>(null);
+
+    useEffect(() => {
+        if (ref.current && focused) {
+            ref.current.focus({ preventScroll: true });
+        }
+    }, [focused, ref]);
+
+    return (
+        <BooleanSwitch
+            ref={ref}
+            size={"small"}
+            value={Boolean(internalValue)}
+            onValueChange={updateValue}
+        />
+    );
+}

package/src/components/VirtualTable/index.tsx

@@ -0,0 +1,2 @@
+export { VirtualTable } from "./VirtualTable";
+export * from "./VirtualTableProps";

package/src/components/VirtualTable/types.tsx

@@ -0,0 +1,44 @@
+import React from "react";
+import {
+    CellRendererParams,
+    OnRowClickParams,
+    OnVirtualTableColumnResizeParams,
+    VirtualTableColumn,
+    VirtualTableFilterValues,
+    VirtualTableSize,
+    VirtualTableWhereFilterOp
+} from "./VirtualTableProps";
+import { FilterFormFieldProps } from "./VirtualTableHeader";
+
+export type VirtualTableRowProps<T> = {
+    style: any,
+    size: VirtualTableSize,
+    rowData: T;
+    rowIndex: number;
+    onRowClick?: (props: OnRowClickParams<any>) => void;
+    children: React.ReactNode[];
+    columns: VirtualTableColumn[];
+    hoverRow?: boolean;
+    rowClassName?: (rowData: T) => string | undefined;
+};
+
+export type VirtualTableContextProps<T extends any> = {
+    data?: T[];
+    size?: VirtualTableSize,
+    columns: VirtualTableColumn[];
+    cellRenderer: (params: CellRendererParams<T>) => React.ReactNode;
+    currentSort: "asc" | "desc" | undefined;
+    filter?: VirtualTableFilterValues<any>;
+    onRowClick?: (props: OnRowClickParams<any>) => void;
+    onColumnSort: (key: string) => any;
+    onColumnResize: (params: OnVirtualTableColumnResizeParams) => void;
+    onColumnResizeEnd: (params: OnVirtualTableColumnResizeParams) => void;
+    onFilterUpdate: (column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, any]) => void;
+    sortByProperty?: string;
+    customView?: React.ReactNode,
+    hoverRow: boolean;
+    createFilterField?: (props: FilterFormFieldProps<any>) => React.ReactNode;
+    rowClassName?: (rowData: T) => string | undefined;
+    endAdornment?: React.ReactNode;
+    AddColumnComponent?: React.ComponentType;
+};

package/src/components/index.tsx

@@ -0,0 +1,30 @@
+export type { ErrorViewProps } from "./ErrorView";
+export { ErrorView } from "./ErrorView";
+
+export type { EntityPreviewProps } from "./EntityPreview";
+export { EntityPreview } from "./EntityPreview";
+
+export type { ReferenceSelectionInnerProps } from "./ReferenceSelectionInner";
+export { ReferenceSelectionInner } from "./ReferenceSelectionInner";
+
+export { CircularProgressCenter } from "./CircularProgressCenter";
+
+export * from "./HomePage";
+export * from "./EntityCollectionView/EntityCollectionView";
+
+export * from "./FieldConfigBadge";
+
+export * from "./EntityCollectionTable";
+export * from "./NotFoundPage";
+
+export * from "./VirtualTable";
+export * from "./ErrorBoundary";
+export * from "./DeleteConfirmationDialog";
+
+export * from "./FireCMSLogo";
+
+export * from "./FireCMSAppBar";
+
+export * from "./ArrayContainer";
+export * from "./ReferenceWidget";
+export * from "./LabelWithIcon";

package/src/contexts/AuthControllerContext.tsx

@@ -0,0 +1,4 @@
+import React from "react";
+import { AuthController } from "../types";
+
+export const AuthControllerContext = React.createContext<AuthController>({} as AuthController);

package/src/contexts/DataSourceContext.tsx

@@ -0,0 +1,4 @@
+import React from "react";
+import { DataSource } from "../types";
+
+export const DataSourceContext = React.createContext<DataSource>({} as DataSource);

package/src/contexts/DialogsProvider.tsx

@@ -0,0 +1,52 @@
+import React, { PropsWithChildren, useCallback, useRef, useState } from "react";
+import { DialogControllerEntryProps, DialogsController } from "../types/dialogs_controller";
+
+export const DialogsControllerContext = React.createContext<DialogsController>({} as DialogsController);
+
+export const DialogsProvider: React.FC<PropsWithChildren<{}>> = ({ children }) => {
+
+    const [dialogEntries, setDialogEntries] = useState<DialogControllerEntryProps[]>([]);
+    const dialogEntriesRef = useRef<DialogControllerEntryProps[]>(dialogEntries);
+
+    const updateDialogEntries = (newPanels: DialogControllerEntryProps[]) => {
+        dialogEntriesRef.current = newPanels;
+        setDialogEntries(newPanels);
+    };
+
+    const close = useCallback(() => {
+
+        if (dialogEntries.length === 0)
+            return;
+
+        const updatedPanels = [...dialogEntries.slice(0, -1)];
+        updateDialogEntries(updatedPanels);
+
+    }, [dialogEntries]);
+
+    const open = useCallback((dialogEntry: DialogControllerEntryProps) => {
+
+        const updatedPanels = [...dialogEntries, dialogEntry];
+        updateDialogEntries(updatedPanels);
+
+        return {
+            closeDialog: () => {
+                const updatedPanels = dialogEntriesRef.current.filter(e => e.key !== dialogEntry.key);
+                updateDialogEntries(updatedPanels);
+            }
+        }
+    }, [dialogEntries]);
+
+    return (
+        <DialogsControllerContext.Provider value={{
+            open,
+            close
+        }}>
+            {children}
+            {dialogEntries.map((entry, i) => <entry.Component
+                key={`dialog_${i}`}
+                open={true}
+                closeDialog={close}
+            />)}
+        </DialogsControllerContext.Provider>
+    );
+};

package/src/contexts/ModeController.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import { ModeController } from "../hooks";
+
+const DEFAULT_MODE_STATE: ModeController = {
+    mode: "light",
+    setMode: (mode: "light" | "dark") => {
+    },
+    toggleMode: () => {
+    }
+};
+export const ModeControllerContext = React.createContext<ModeController>(DEFAULT_MODE_STATE);
+
+export const ModeControllerProvider = ModeControllerContext.Provider;

package/src/contexts/NavigationContext.tsx

@@ -0,0 +1,4 @@
+import React from "react";
+import { NavigationController } from "../types";
+
+export const NavigationContext = React.createContext<NavigationController>({} as NavigationController);

package/src/contexts/SideDialogsControllerContext.tsx

@@ -0,0 +1,4 @@
+import React from "react";
+import { SideDialogsController } from "../types";
+
+export const SideDialogsControllerContext = React.createContext<SideDialogsController>({} as SideDialogsController);

package/src/contexts/SideEntityControllerContext.tsx

@@ -0,0 +1,4 @@
+import React from "react";
+import { SideEntityController } from "../types";
+
+export const SideEntityControllerContext = React.createContext<SideEntityController>({} as SideEntityController);

package/src/contexts/SnackbarProvider.tsx

@@ -0,0 +1,12 @@
+import React, { PropsWithChildren } from "react";
+import { SnackbarProvider as NotistackSnackbarProvider } from "notistack";
+
+export const SnackbarProvider: React.FC<PropsWithChildren<{}>> = ({ children }) => {
+
+    return (
+        <NotistackSnackbarProvider maxSnack={3}
+                                   autoHideDuration={3500}>
+            {children}
+        </NotistackSnackbarProvider>
+    );
+};

package/src/contexts/StorageSourceContext.tsx

@@ -0,0 +1,4 @@
+import React from "react";
+import { StorageSource } from "../types";
+
+export const StorageSourceContext = React.createContext<StorageSource>({} as StorageSource);

package/src/contexts/UserConfigurationPersistenceContext.tsx

@@ -0,0 +1,4 @@
+import React from "react";
+import { UserConfigurationPersistence } from "../types";
+
+export const UserConfigurationPersistenceContext = React.createContext<UserConfigurationPersistence | undefined>(undefined);

package/src/contexts/index.ts

@@ -0,0 +1,3 @@
+export * from "./SnackbarProvider";
+export * from "./ModeController";
+export * from "./AuthControllerContext";