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

package/src/form/components/StorageItemPreview.tsx

@@ -0,0 +1,68 @@
+import React from "react";
+
+import { Entity, EntityCollection, ResolvedStringProperty } from "../../types";
+import { PreviewSize, PropertyPreview } from "../../preview";
+
+import { cn, IconButton, paperMixin, RemoveIcon, Tooltip } from "@firecms/ui";
+import { ErrorBoundary } from "../../components";
+
+interface StorageItemPreviewProps {
+    name: string;
+    property: ResolvedStringProperty;
+    value: string,
+    entity: Entity<any>,
+    onRemove: (value: string) => void;
+    size: PreviewSize;
+    disabled: boolean;
+    collection: EntityCollection;
+}
+
+export function StorageItemPreview({
+                                       name,
+                                       property,
+                                       value,
+                                       entity,
+                                       onRemove,
+                                       disabled,
+                                       size,
+                                       collection
+                                   }: StorageItemPreviewProps) {
+
+    return (
+        <div className={cn(paperMixin,
+            "relative m-4 border-box flex items-center justify-center",
+            size === "medium" ? "min-w-[220px] min-h-[220px] max-w-[220px]" : "min-w-[118px] min-h-[118px] max-w-[118px]")}>
+
+            {!disabled &&
+                <div
+                    className="absolute rounded-full -top-2 -right-2 z-10 bg-white dark:bg-gray-900">
+
+                    <Tooltip
+                        title="Remove">
+                        <IconButton
+                            size={"small"}
+                            onClick={(event) => {
+                                event.stopPropagation();
+                                onRemove(value);
+                            }}>
+                            <RemoveIcon size={"small"}/>
+                        </IconButton>
+                    </Tooltip>
+                </div>
+            }
+
+            {value &&
+                <ErrorBoundary>
+                    <PropertyPreview propertyKey={name}
+                                     value={value}
+                                     property={property}
+                        // entity={entity}
+                                     size={size}/>
+                </ErrorBoundary>
+            }
+
+
+        </div>
+    );
+
+}

package/src/form/components/StorageUploadProgress.tsx

@@ -0,0 +1,105 @@
+import React, { useCallback } from "react";
+
+import { useSnackbarController, useStorageSource } from "../../hooks";
+import { StorageFieldItem } from "../../util/useStorageUploadController";
+import { ErrorView } from "../../components";
+import { cn, paperMixin, Skeleton } from "@firecms/ui";
+import { EntityCollection, StorageSource } from "../../types";
+
+export interface StorageUploadItemProps {
+    storagePath: string;
+    metadata?: any,
+    entry: StorageFieldItem,
+    onFileUploadComplete: (value: string,
+                           entry: StorageFieldItem,
+                           metadata?: any) => Promise<void>;
+    imageSize: number;
+    simple: boolean;
+}
+
+export function StorageUploadProgress({
+                                          storagePath,
+                                          entry,
+                                          metadata,
+                                          onFileUploadComplete,
+                                          imageSize,
+                                          simple,
+                                      }: StorageUploadItemProps) {
+
+    const storageSource = useStorageSource();
+
+    const snackbarController = useSnackbarController();
+
+    const [error, setError] = React.useState<Error | undefined>();
+    const [loading, setLoading] = React.useState<boolean>(false);
+    const mounted = React.useRef(false);
+    const uploading = React.useRef(false);
+
+    const upload = useCallback((file: File, fileName?: string) => {
+
+        if (uploading.current) return;
+        uploading.current = true;
+        setError(undefined);
+        setLoading(true);
+
+        storageSource.uploadFile({
+            file,
+            fileName,
+            path: storagePath,
+            metadata
+        })
+            .then(async ({ path }) => {
+                console.debug("Upload successful");
+                await onFileUploadComplete(path, entry, metadata);
+                if (mounted.current)
+                    setLoading(false);
+            })
+            .catch((e) => {
+                console.warn("Upload error", e);
+                if (mounted.current) {
+                    setError(e);
+                    setLoading(false);
+                    snackbarController.open({
+                        type: "error",
+                        message: "Error uploading file: " + e.message
+                    });
+                }
+            })
+            .finally(() => {
+                uploading.current = false;
+            });
+    }, [entry, metadata, onFileUploadComplete, storageSource, storagePath]);
+
+    React.useEffect(() => {
+        mounted.current = true;
+        if (entry.file)
+            upload(entry.file, entry.fileName);
+        return () => {
+            mounted.current = false;
+        };
+    }, [entry.file, entry.fileName, upload]);
+
+    if (simple) {
+        return <div className={`m-4 w-${imageSize} h-${imageSize}`}>
+
+            {loading && <Skeleton className={`w-${imageSize} h-${imageSize}`}/>}
+
+        </div>
+    }
+    return (
+
+        <div className={cn(paperMixin,
+            "relative m-4 border-box flex items-center justify-center",
+            `min-w-[${imageSize}px] min-h-[${imageSize}px]`)}>
+
+            {loading &&
+                <Skeleton className="w-full h-full"/>}
+
+            {error && <ErrorView title={"Error uploading file"}
+                                 error={error}/>}
+
+        </div>
+
+    );
+
+}

package/src/form/components/index.tsx

@@ -0,0 +1,3 @@
+export * from "./FormikArrayContainer";
+export * from "./FieldHelperText";
+export * from "./LabelWithIcon";

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { FieldProps } from "../../types";
+import { FieldHelperText, LabelWithIcon } from "../components";
+import { PropertyFieldBinding } from "../PropertyFieldBinding";
+import { ExpandablePanel } from "@firecms/ui";
+import { getIconForProperty } from "../../util";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+
+/**
+ * Array field used for custom
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
+                                                                        propertyKey,
+                                                                        value,
+                                                                        error,
+                                                                        showError,
+                                                                        isSubmitting,
+                                                                        setValue,
+                                                                        tableMode,
+                                                                        property,
+                                                                        includeDescription,
+                                                                        underlyingValueHasChanged,
+                                                                        context,
+                                                                        disabled
+                                                                    }: FieldProps<T, any, any>) {
+
+    if (!Array.isArray(property.resolvedProperties))
+        throw Error("ArrayCustomShapedFieldBinding misconfiguration. Property `of` not set");
+
+    const expanded = property.expanded === undefined ? true : property.expanded;
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const title = <LabelWithIcon icon={getIconForProperty(property, "small")}
+                                 required={property.validation?.required}
+                                 className={"text-text-secondary dark:text-text-secondary-dark"}
+                                 title={property.name}/>;
+
+    const body = property.resolvedProperties.map((childProperty, index) => {
+        const fieldProps = {
+            propertyKey: `${propertyKey}[${index}]`,
+            disabled,
+            property: childProperty,
+            includeDescription,
+            underlyingValueHasChanged,
+            context,
+            tableMode: false,
+            partOfArray: true,
+            partOfBlock: false,
+            autoFocus: false
+        };
+        return <div key={`custom_shaped_array_${index}`} className="pb-4">
+            <PropertyFieldBinding {...fieldProps}/>
+        </div>;
+    });
+
+    return (
+
+        <>
+
+            {!tableMode &&
+                <ExpandablePanel initiallyExpanded={expanded}
+                                 title={title}
+                                 className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>
+                    {body}
+                </ExpandablePanel>}
+
+            {tableMode && body}
+
+            <FieldHelperText includeDescription={includeDescription}
+                             showError={showError}
+                             error={error}
+                             disabled={disabled}
+                             property={property}/>
+
+        </>
+    );
+}

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -0,0 +1,149 @@
+import React, { useCallback, useMemo } from "react";
+import { Entity, EntityCollection, EntityReference, FieldProps, ResolvedProperty } from "../../types";
+import { ReferencePreview } from "../../preview";
+import { FieldHelperText, FormikArrayContainer, LabelWithIcon } from "../components";
+import { ErrorView } from "../../components";
+import { getIconForProperty, getReferenceFrom } from "../../util";
+
+import { useNavigationController, useReferenceDialog } from "../../hooks";
+import { Button, cn, ExpandablePanel, fieldBackgroundMixin } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+
+type ArrayOfReferencesFieldProps = FieldProps<EntityReference[]>;
+
+/**
+ * This field allows selecting multiple references.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function ArrayOfReferencesFieldBinding({
+                                                  propertyKey,
+                                                  value,
+                                                  error,
+                                                  showError,
+                                                  disabled,
+                                                  isSubmitting,
+                                                  tableMode,
+                                                  property,
+                                                  includeDescription,
+                                                  setValue,
+                                                  setFieldValue
+                                              }: ArrayOfReferencesFieldProps) {
+
+    const ofProperty = property.of as ResolvedProperty;
+    if (ofProperty.dataType !== "reference") {
+        throw Error("ArrayOfReferencesField expected a property containing references");
+    }
+
+    const expanded = property.expanded === undefined ? true : property.expanded;
+    const selectedEntityIds = value && Array.isArray(value) ? value.map((ref) => ref.id) : [];
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const navigationController = useNavigationController();
+    const collection: EntityCollection | undefined = useMemo(() => {
+        return ofProperty.path ? navigationController.getCollection(ofProperty.path) : undefined;
+    }, [ofProperty.path]);
+
+    if (!collection) {
+        throw Error(`Couldn't find the corresponding collection for the path: ${ofProperty.path}`);
+    }
+
+    const onMultipleEntitiesSelected = useCallback((entities: Entity<any>[]) => {
+        console.debug("onMultipleEntitiesSelected", entities);
+        setValue(entities.map(e => getReferenceFrom(e)));
+    }, [setValue]);
+
+    const referenceDialogController = useReferenceDialog({
+            multiselect: true,
+            path: ofProperty.path,
+            collection,
+            onMultipleEntitiesSelected,
+            selectedEntityIds,
+            forceFilter: ofProperty.forceFilter
+        }
+    );
+
+    const onEntryClick = useCallback((e: React.SyntheticEvent) => {
+        e.preventDefault();
+        referenceDialogController.open();
+    }, [referenceDialogController]);
+
+    const buildEntry = useCallback((index: number, internalId: number) => {
+        const entryValue = value && value.length > index ? value[index] : undefined;
+        if (!entryValue)
+            return <div>Internal ERROR</div>;
+        return (
+                <ReferencePreview
+                    key={internalId}
+                    disabled={!ofProperty.path}
+                    previewProperties={ofProperty.previewProperties}
+                    size={"medium"}
+                    onClick={onEntryClick}
+                    hover={!disabled}
+                    reference={entryValue}
+                />
+        );
+    }, [ofProperty.path, ofProperty.previewProperties, value]);
+
+    const title = (
+        <LabelWithIcon icon={getIconForProperty(property, "small")}
+                       required={property.validation?.required}
+                       title={property.name}
+                       className={"text-text-secondary dark:text-text-secondary-dark"}/>
+    );
+
+    const body = <>
+        {!collection && <ErrorView
+            error={"The specified collection does not exist. Check console"}/>}
+
+        {collection && <div className={"group"}>
+
+            <FormikArrayContainer value={value}
+                                  addLabel={property.name ? "Add reference to " + property.name : "Add reference"}
+                                  name={propertyKey}
+                                  buildEntry={buildEntry}
+                                  disabled={isSubmitting}
+                                  setFieldValue={setFieldValue}
+                                  newDefaultEntry={property.of.defaultValue}/>
+
+            <Button
+                className="my-4 justify-center text-left"
+                variant="outlined"
+                color="primary"
+                disabled={isSubmitting}
+                onClick={onEntryClick}>
+                Edit {property.name}
+            </Button>
+        </div>}
+    </>;
+
+    return (
+        <>
+
+            {!tableMode &&
+                <ExpandablePanel
+                    titleClassName={fieldBackgroundMixin}
+                    className={cn("px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2", fieldBackgroundMixin)}
+                    initiallyExpanded={expanded}
+                    title={title}>
+                    {body}
+                </ExpandablePanel>}
+
+            {tableMode && body}
+
+            <FieldHelperText includeDescription={includeDescription}
+                             showError={showError}
+                             error={error}
+                             disabled={disabled}
+                             property={property}/>
+
+        </>
+    );
+}

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -0,0 +1,245 @@
+import React, { useCallback, useEffect, useState } from "react";
+
+import { Field, useFormex } from "@firecms/formex";
+
+import { FieldHelperText, FormikArrayContainer, LabelWithIcon } from "../components";
+import { PropertyFieldBinding } from "../PropertyFieldBinding";
+import { EnumValuesChip } from "../../preview";
+import { FieldProps, FormContext, PropertyFieldBindingProps, PropertyOrBuilder } from "../../types";
+import { getDefaultValueFor, getIconForProperty, } from "../../util";
+import { DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE } from "../../util/common";
+import { cn, ExpandablePanel, paperMixin, Select, SelectItem, Typography } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+
+/**
+ * If the `oneOf` property is specified, this fields render each array entry as
+ * a `type` select and the corresponding field widget to the selected `type.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function BlockFieldBinding<T extends Array<any>>({
+                                                            propertyKey,
+                                                            value,
+                                                            error,
+                                                            showError,
+                                                            isSubmitting,
+                                                            setValue,
+                                                            setFieldValue,
+                                                            tableMode,
+                                                            property,
+                                                            includeDescription,
+                                                            underlyingValueHasChanged,
+                                                            context,
+                                                            disabled
+                                                        }: FieldProps<T>) {
+
+    if (!property.oneOf)
+        throw Error("ArrayOneOfField misconfiguration. Property `oneOf` not set");
+
+    const expanded = property.expanded === undefined ? true : property.expanded;
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const [lastAddedId, setLastAddedId] = useState<number | undefined>();
+
+    const buildEntry = useCallback((index: number, internalId: number) => {
+        return <BlockEntry
+            key={`array_one_of_${index}`}
+            name={`${propertyKey}.${index}`}
+            index={index}
+            value={value[index]}
+            typeField={property.oneOf!.typeField ?? DEFAULT_ONE_OF_TYPE}
+            valueField={property.oneOf!.valueField ?? DEFAULT_ONE_OF_VALUE}
+            properties={property.oneOf!.properties}
+            autoFocus={internalId === lastAddedId}
+            context={context}/>;
+    }, [context, lastAddedId, property.oneOf, propertyKey, value]);
+
+    const title = (
+        <LabelWithIcon icon={getIconForProperty(property, "small")}
+                       required={property.validation?.required}
+                       title={property.name}
+                       className={"text-text-secondary dark:text-text-secondary-dark"}/>
+    );
+
+    const firstOneOfKey = Object.keys(property.oneOf.properties)[0];
+    const body = <FormikArrayContainer value={value}
+                                       name={propertyKey}
+                                       addLabel={property.name ? "Add entry to " + property.name : "Add entry"}
+                                       buildEntry={buildEntry}
+                                       onInternalIdAdded={setLastAddedId}
+                                       disabled={isSubmitting || Boolean(property.disabled)}
+                                       includeAddButton={!property.disabled}
+                                       setFieldValue={setFieldValue}
+                                       newDefaultEntry={{
+                                           [property.oneOf!.typeField ?? DEFAULT_ONE_OF_TYPE]: firstOneOfKey,
+                                           [property.oneOf!.valueField ?? DEFAULT_ONE_OF_VALUE]: getDefaultValueFor(property.oneOf.properties[firstOneOfKey])
+                                       }}/>;
+    return (
+
+        <>
+
+            {!tableMode &&
+                <ExpandablePanel
+                    className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
+                    initiallyExpanded={expanded}
+                    title={title}>
+                    {body}
+                </ExpandablePanel>}
+
+            {tableMode && body}
+
+            <FieldHelperText includeDescription={includeDescription}
+                             showError={showError}
+                             error={error}
+                             disabled={disabled}
+                             property={property}/>
+
+        </>
+    );
+}
+
+interface BlockEntryProps {
+    name: string;
+    index: number;
+    value: any;
+    /**
+     * Name of the field to use as the discriminator for type
+     * Defaults to `type`
+     */
+    typeField: string;
+    /**
+     * Name of the  field to use as the value
+     * Defaults to `value`
+     */
+    valueField: string;
+
+    autoFocus: boolean;
+    /**
+     * Record of properties, where the key is the `type` and the value
+     * is the corresponding property
+     */
+    properties: Record<string, PropertyOrBuilder>;
+
+    /**
+     * Additional values related to the state of the form or the entity
+     */
+    context: FormContext<any>;
+
+}
+
+function BlockEntry({
+                        name,
+                        index,
+                        value,
+                        typeField,
+                        valueField,
+                        properties,
+                        autoFocus,
+                        context
+                    }: BlockEntryProps) {
+
+    const type = value && value[typeField];
+    const [typeInternal, setTypeInternal] = useState<string | undefined>(type ?? undefined);
+
+    const formex = useFormex();
+
+    useEffect(() => {
+        if (!type) {
+            updateType(Object.keys(properties)[0]);
+        }
+    }, []);
+
+    useEffect(() => {
+        if (type !== typeInternal) {
+            setTypeInternal(type);
+        }
+    }, [type]);
+
+    const property = typeInternal ? properties[typeInternal] : undefined;
+
+    const enumValuesConfigs = Object.entries(properties)
+        .map(([key, property]) => ({
+            id: key,
+            label: property.name ?? key
+        }));
+
+    const typeFieldName = `${name}.${typeField}`;
+    const valueFieldName = `${name}.${valueField}`;
+
+    const fieldProps: PropertyFieldBindingProps<any, any> | undefined = property
+        ? {
+            propertyKey: valueFieldName,
+            property,
+            context,
+            autoFocus,
+            partOfArray: false,
+            partOfBlock: true,
+            tableMode: false
+        }
+        : undefined;
+
+    const updateType = (newType: any) => {
+        const newSelectedProperty = newType ? properties[newType] : undefined;
+        setTypeInternal(newType);
+        formex.setFieldTouched(typeFieldName, true);
+        formex.setFieldValue(typeFieldName, newType);
+        formex.setFieldValue(valueFieldName, newSelectedProperty ? getDefaultValueFor(newSelectedProperty) : null);
+    };
+
+    return (
+        <div className={cn(paperMixin, "bg-transparent p-4 my-4 py-8")}>
+
+            <Field
+                name={typeFieldName}
+            >
+                {(fieldProps) => {
+                    const value1 = fieldProps.field.value !== undefined && fieldProps.field.value !== null ? fieldProps.field.value as string : "";
+                    return (
+                        <>
+                            <Select
+                                className="mb-2"
+                                placeholder={<Typography variant={"caption"}
+                                                         className={"px-4 py-2 font-medium"}>Type</Typography>}
+                                size={"small"}
+                                position={"item-aligned"}
+                                value={value1}
+                                renderValue={(enumKey: any) =>
+                                    <EnumValuesChip
+                                        enumKey={enumKey}
+                                        enumValues={enumValuesConfigs}
+                                        size={"small"}/>
+                                }
+                                onValueChange={(value) => {
+                                    updateType(value);
+                                }}>
+                                {enumValuesConfigs.map((enumConfig) => (
+                                    <SelectItem
+                                        key={enumConfig.id}
+                                        value={String(enumConfig.id)}>
+                                        <EnumValuesChip
+                                            enumKey={enumConfig.id}
+                                            enumValues={enumValuesConfigs}
+                                            size={"small"}/>
+                                    </SelectItem>)
+                                )}
+                            </Select>
+                        </>
+                    );
+                }
+                }
+            </Field>
+
+            {fieldProps && (
+                // It is important to use this key to force a re-render of the field on type change
+                <PropertyFieldBinding key={`form_control_${name}_${typeInternal}`} {...fieldProps}/>
+            )}
+
+        </div>
+    );
+}