@firecms/core 3.0.0-canary.2 → 3.0.0-canary.200

package/src/form/components/StorageItemPreview.tsx

@@ -1,41 +1,45 @@
 import React from "react";
 
-import { Entity, ResolvedStringProperty } from "../../types";
+import { ResolvedStringProperty } from "../../types";
 import { PreviewSize, PropertyPreview } from "../../preview";
 
-import { cn, IconButton, paperMixin, RemoveIcon, Tooltip } from "@firecms/ui";
+import { cls, DescriptionIcon, 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;
+    placeholder?: boolean;
+    className?: string;
 }
 
 export function StorageItemPreview({
                                        name,
                                        property,
                                        value,
-                                       entity,
                                        onRemove,
                                        disabled,
-                                       size
+                                       size,
+                                       placeholder,
+                                       className
                                    }: StorageItemPreviewProps) {
 
     return (
-        <div className={cn(paperMixin,
+        <div className={cls(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]")}>
+            size === "large" ? "min-w-[220px] min-h-[220px] max-w-[220px]" : "min-w-[118px] min-h-[118px] max-w-[118px]",
+            className)}>
 
-            {!disabled &&
+            {!placeholder && !disabled &&
                 <div
-                    className="absolute rounded-full -top-2 -right-2 z-10 bg-white dark:bg-gray-900">
+                    className="absolute rounded-full -top-2 -right-2 z-10 bg-white dark:bg-surface-900">
 
                     <Tooltip
+                        asChild={true}
                         title="Remove">
                         <IconButton
                             size={"small"}
@@ -49,16 +53,24 @@ export function StorageItemPreview({
                 </div>
             }
 
-            {value &&
+            {!placeholder && value &&
                 <ErrorBoundary>
                     <PropertyPreview propertyKey={name}
                                      value={value}
                                      property={property}
-                                     // entity={entity}
+                                     interactive={false}
                                      size={size}/>
                 </ErrorBoundary>
             }
 
+            {placeholder &&
+                <div
+                    onClick={(e) => e.stopPropagation()}
+                    className="flex flex-col items-center justify-center w-full h-full">
+                    <DescriptionIcon className="text-surface-700 dark:text-surface-300"/>
+                </div>
+            }
+
 
         </div>
     );

package/src/form/components/StorageUploadProgress.tsx

@@ -3,7 +3,7 @@ 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 { cls, paperMixin, Skeleton } from "@firecms/ui";
 
 export interface StorageUploadItemProps {
     storagePath: string;
@@ -22,10 +22,10 @@ export function StorageUploadProgress({
                                           metadata,
                                           onFileUploadComplete,
                                           imageSize,
-                                          simple
+                                          simple,
                                       }: StorageUploadItemProps) {
 
-    const storage = useStorageSource();
+    const storageSource = useStorageSource();
 
     const snackbarController = useSnackbarController();
 
@@ -41,14 +41,14 @@ export function StorageUploadProgress({
         setError(undefined);
         setLoading(true);
 
-        storage.uploadFile({
+        storageSource.uploadFile({
             file,
             fileName,
             path: storagePath,
             metadata
         })
             .then(async ({ path }) => {
-                console.debug("Upload successful");
+                console.debug("Upload successful", path);
                 await onFileUploadComplete(path, entry, metadata);
                 if (mounted.current)
                     setLoading(false);
@@ -67,7 +67,7 @@ export function StorageUploadProgress({
             .finally(() => {
                 uploading.current = false;
             });
-    }, [entry, metadata, onFileUploadComplete, storage, storagePath]);
+    }, [entry, metadata, onFileUploadComplete, storageSource, storagePath]);
 
     React.useEffect(() => {
         mounted.current = true;
@@ -87,12 +87,12 @@ export function StorageUploadProgress({
     }
     return (
 
-        <div className={cn(paperMixin,
+        <div className={cls(paperMixin,
             "relative m-4 border-box flex items-center justify-center",
-             `min-w-[${imageSize}px] min-h-[${imageSize}px]`)}>
+            `min-w-[${imageSize}px] min-h-[${imageSize}px]`)}>
 
             {loading &&
-                <Skeleton className="w-full h-full"/>}
+                <Skeleton className="m-4 w-full h-full"/>}
 
             {error && <ErrorView title={"Error uploading file"}
                                  error={error}/>}

package/src/form/components/index.tsx

@@ -1,2 +1,5 @@
-export * from "./FormikArrayContainer";
 export * from "./FieldHelperText";
+export * from "./LabelWithIcon";
+export * from "./LabelWithIconAndTooltip";
+export * from "./FormEntry";
+export * from "./FormLayout";

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -1,11 +1,10 @@
 import React from "react";
 import { FieldProps } from "../../types";
-import { FieldHelperText } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { useClearRestoreValue } from "../../hooks";
-import { ExpandablePanel } from "@firecms/ui";
-import { getIconForProperty } from "../../util";
-import { LabelWithIcon } from "../../components";
+import { ExpandablePanel, Typography } from "@firecms/ui";
+import { getArrayResolvedProperties, getIconForProperty, isReadOnly } from "../../util";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 /**
  * Array field used for custom
@@ -21,16 +20,24 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
                                                                         showError,
                                                                         isSubmitting,
                                                                         setValue,
-                                                                        tableMode,
+                                                                        minimalistView: minimalistViewProp,
                                                                         property,
                                                                         includeDescription,
-                                                                        underlyingValueHasChanged,
                                                                         context,
                                                                         disabled
                                                                     }: FieldProps<T, any, any>) {
 
-    if (!Array.isArray(property.resolvedProperties))
-        throw Error("ArrayCustomShapedFieldBinding misconfiguration. Property `of` not set");
+    const minimalistView = minimalistViewProp || property.minimalistView;
+
+    let resolvedProperties = "resolvedProperties" in property ? property.resolvedProperties : undefined;
+    if (!resolvedProperties) {
+        resolvedProperties = getArrayResolvedProperties({
+            propertyValue: value,
+            propertyKey,
+            property,
+            ignoreMissingFields: false
+        })
+    }
 
     const expanded = property.expanded === undefined ? true : property.expanded;
 
@@ -40,22 +47,26 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
         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 title = (<>
+        <LabelWithIconAndTooltip
+            propertyKey={propertyKey}
+            icon={getIconForProperty(property, "small")}
+            required={property.validation?.required}
+            title={property.name}
+            className={"h-8 flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
+        {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
+    </>);
 
-    const body = property.resolvedProperties.map((childProperty, index) => {
+    const body = resolvedProperties.map((childProperty, index) => {
+        const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.disabled);
         const fieldProps = {
             propertyKey: `${propertyKey}[${index}]`,
-            disabled,
+            disabled: disabled || thisDisabled,
             property: childProperty,
             includeDescription,
-            underlyingValueHasChanged,
             context,
-            tableMode: false,
             partOfArray: true,
-            partOfBlock: false,
+            minimalistView: false,
             autoFocus: false
         };
         return <div key={`custom_shaped_array_${index}`} className="pb-4">
@@ -67,14 +78,14 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
 
         <>
 
-            {!tableMode &&
+            {!minimalistView &&
                 <ExpandablePanel initiallyExpanded={expanded}
                                  title={title}
-                                 className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>
+                                 innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>
                     {body}
                 </ExpandablePanel>}
 
-            {tableMode && body}
+            {minimalistView && body}
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -1,12 +1,13 @@
 import React, { useCallback, useMemo } from "react";
 import { Entity, EntityCollection, EntityReference, FieldProps, ResolvedProperty } from "../../types";
 import { ReferencePreview } from "../../preview";
-import { FieldHelperText, FormikArrayContainer } from "../components";
-import { ErrorView, LabelWithIcon } from "../../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { ArrayContainer, ArrayEntryParams, ErrorView } from "../../components";
 import { getIconForProperty, getReferenceFrom } from "../../util";
 
-import { useClearRestoreValue, useNavigationController, useReferenceDialog } from "../../hooks";
-import { Button, ExpandablePanel } from "@firecms/ui";
+import { useNavigationController, useReferenceDialog } from "../../hooks";
+import { Button, cls, ExpandablePanel, fieldBackgroundMixin, Typography } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
 
 type ArrayOfReferencesFieldProps = FieldProps<EntityReference[]>;
 
@@ -24,20 +25,21 @@ export function ArrayOfReferencesFieldBinding({
                                                   showError,
                                                   disabled,
                                                   isSubmitting,
-                                                  tableMode,
+                                                  minimalistView: minimalistViewProp,
                                                   property,
                                                   includeDescription,
                                                   setValue,
                                                   setFieldValue
                                               }: ArrayOfReferencesFieldProps) {
 
+    const minimalistView = minimalistViewProp || property.minimalistView;
+
     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 [onHover, setOnHover] = React.useState(false);
     const selectedEntityIds = value && Array.isArray(value) ? value.map((ref) => ref.id) : [];
 
     useClearRestoreValue({
@@ -56,7 +58,6 @@ export function ArrayOfReferencesFieldBinding({
     }
 
     const onMultipleEntitiesSelected = useCallback((entities: Entity<any>[]) => {
-        console.debug("onMultipleEntitiesSelected", entities);
         setValue(entities.map(e => getReferenceFrom(e)));
     }, [setValue]);
 
@@ -70,76 +71,84 @@ export function ArrayOfReferencesFieldBinding({
         }
     );
 
-    const onEntryClick = useCallback((e: React.SyntheticEvent) => {
+    const onEntryClick = (e: React.SyntheticEvent) => {
         e.preventDefault();
         referenceDialogController.open();
-    }, [referenceDialogController]);
-
-    const buildEntry = useCallback((index: number, internalId: number) => {
+    };
+
+    const buildEntry = useCallback(({
+                                        index,
+                                        internalId,
+                                        storedProps,
+                                        storeProps
+                                    }: ArrayEntryParams) => {
         const entryValue = value && value.length > index ? value[index] : undefined;
         if (!entryValue)
             return <div>Internal ERROR</div>;
         return (
-            <div
-                onMouseEnter={() => setOnHover(true)}
-                onMouseMove={() => setOnHover(true)}
-                onMouseLeave={() => setOnHover(false)}>
-                <ReferencePreview
-                    disabled={!ofProperty.path}
-                    previewProperties={ofProperty.previewProperties}
-                    size={"medium"}
-                    onClick={onEntryClick}
-                    reference={entryValue}
-                    onHover={onHover}
-                />
-            </div>
+            <ReferencePreview
+                key={internalId}
+                disabled={!ofProperty.path}
+                previewProperties={ofProperty.previewProperties}
+                size={"medium"}
+                onClick={onEntryClick}
+                hover={!disabled}
+                reference={entryValue}
+                includeId={ofProperty.includeId}
+                includeEntityLink={ofProperty.includeEntityLink}
+            />
         );
-    }, [ofProperty.path, ofProperty.previewProperties, onHover, value]);
-
-    const title = (
-        <LabelWithIcon icon={getIconForProperty(property, "small")}
-                       required={property.validation?.required}
-                       title={property.name}
-                       className={"text-text-secondary dark:text-text-secondary-dark"}/>
-    );
+    }, [ofProperty.path, ofProperty.previewProperties, value]);
+
+    const title = (<>
+        <LabelWithIconAndTooltip
+            propertyKey={propertyKey}
+            icon={getIconForProperty(property, "small")}
+            required={property.validation?.required}
+            title={property.name}
+            className={"h-8 flex flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
+        {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
+    </>);
 
     const body = <>
         {!collection && <ErrorView
             error={"The specified collection does not exist. Check console"}/>}
 
-        {collection && <>
+        {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}/>
+            <ArrayContainer droppableId={propertyKey}
+                            value={value}
+                            disabled={isSubmitting}
+                            buildEntry={buildEntry}
+                            addLabel={property.name ? "Add reference to " + property.name : "Add reference"}
+                            newDefaultEntry={property.of.defaultValue}
+                            onValueChange={(value) => setFieldValue(propertyKey, value)}
+            />
 
             <Button
                 className="my-4 justify-center text-left"
-                variant="outlined"
+                variant="text"
                 color="primary"
                 disabled={isSubmitting}
                 onClick={onEntryClick}>
                 Edit {property.name}
             </Button>
-        </>}
+        </div>}
     </>;
 
     return (
         <>
 
-            {!tableMode &&
+            {!minimalistView &&
                 <ExpandablePanel
-                    className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
+                    titleClassName={fieldBackgroundMixin}
+                    innerClassName={cls("px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2", fieldBackgroundMixin)}
                     initiallyExpanded={expanded}
                     title={title}>
                     {body}
                 </ExpandablePanel>}
 
-            {tableMode && body}
+            {minimalistView && body}
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -1,16 +1,16 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useEffect, useState } from "react";
 
 import { Field, useFormex } from "@firecms/formex";
 
-import { FieldHelperText, FormikArrayContainer } from "../components";
-import { LabelWithIcon } from "../../components";
-import { useClearRestoreValue } from "../../hooks";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { EnumValuesChip } from "../../preview";
 import { FieldProps, FormContext, PropertyFieldBindingProps, PropertyOrBuilder } from "../../types";
-import { getDefaultValueFor, getIconForProperty, } from "../../util";
+import { getDefaultValueFor, getIconForProperty, mergeDeep, } 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 { cls, ExpandablePanel, paperMixin, Select, SelectItem, Typography } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+import { ArrayContainer, ArrayEntryParams } from "../../components";
 
 /**
  * If the `oneOf` property is specified, this fields render each array entry as
@@ -28,7 +28,7 @@ export function BlockFieldBinding<T extends Array<any>>({
                                                             isSubmitting,
                                                             setValue,
                                                             setFieldValue,
-                                                            tableMode,
+                                                            minimalistView: minimalistViewProp,
                                                             property,
                                                             includeDescription,
                                                             underlyingValueHasChanged,
@@ -36,6 +36,8 @@ export function BlockFieldBinding<T extends Array<any>>({
                                                             disabled
                                                         }: FieldProps<T>) {
 
+    const minimalistView = minimalistViewProp || property.minimalistView;
+
     if (!property.oneOf)
         throw Error("ArrayOneOfField misconfiguration. Property `oneOf` not set");
 
@@ -48,9 +50,15 @@ export function BlockFieldBinding<T extends Array<any>>({
 
     const [lastAddedId, setLastAddedId] = useState<number | undefined>();
 
-    const buildEntry = useCallback((index: number, internalId: number) => {
+    const buildEntry = ({
+                            index,
+                            internalId,
+                            storedProps,
+                            storeProps
+                        }: ArrayEntryParams) => {
+
         return <BlockEntry
-            key={`array_one_of_${index}`}
+            key={`array_one_of_${internalId}`}
             name={`${propertyKey}.${index}`}
             index={index}
             value={value[index]}
@@ -58,42 +66,47 @@ export function BlockFieldBinding<T extends Array<any>>({
             valueField={property.oneOf!.valueField ?? DEFAULT_ONE_OF_VALUE}
             properties={property.oneOf!.properties}
             autoFocus={internalId === lastAddedId}
-            context={context}/>;
-    }, [context, lastAddedId, property.oneOf, propertyKey, value]);
+            context={context}
+            storeProps={storeProps}
+            storedProps={storedProps}/>;
+    };
 
     const title = (
-        <LabelWithIcon icon={getIconForProperty(property, "small")}
-                       required={property.validation?.required}
-                       title={property.name}
-                       className={"text-text-secondary dark:text-text-secondary-dark"}/>
+        <LabelWithIconAndTooltip
+            propertyKey={propertyKey}
+            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])
-                                       }}/>;
+    const body = <ArrayContainer value={value}
+                                 className={"flex flex-col gap-3"}
+                                 droppableId={propertyKey}
+                                 addLabel={property.name ? "Add entry to " + property.name : "Add entry"}
+                                 buildEntry={buildEntry}
+                                 onInternalIdAdded={setLastAddedId}
+                                 disabled={isSubmitting || Boolean(property.disabled)}
+                                 includeAddButton={!property.disabled}
+                                 onValueChange={(value) => setFieldValue(propertyKey, value)}
+                                 newDefaultEntry={{
+                                     [property.oneOf!.typeField ?? DEFAULT_ONE_OF_TYPE]: firstOneOfKey,
+                                     [property.oneOf!.valueField ?? DEFAULT_ONE_OF_VALUE]: getDefaultValueFor(property.oneOf.properties[firstOneOfKey])
+                                 }}/>;
     return (
 
         <>
 
-            {!tableMode &&
+            {!minimalistView &&
                 <ExpandablePanel
-                    className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
+                    innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
                     initiallyExpanded={expanded}
                     title={title}>
                     {body}
                 </ExpandablePanel>}
 
-            {tableMode && body}
+            {minimalistView && body}
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}
@@ -132,6 +145,9 @@ interface BlockEntryProps {
      */
     context: FormContext<any>;
 
+    storedProps?: object,
+    storeProps: (props: object) => void
+
 }
 
 function BlockEntry({
@@ -142,7 +158,9 @@ function BlockEntry({
                         valueField,
                         properties,
                         autoFocus,
-                        context
+                        context,
+                        storedProps,
+                        storeProps
                     }: BlockEntryProps) {
 
     const type = value && value[typeField];
@@ -162,7 +180,9 @@ function BlockEntry({
         }
     }, [type]);
 
-    const property = typeInternal ? properties[typeInternal] : undefined;
+    const propertyInternal = typeInternal ? properties[typeInternal] : undefined;
+
+    const property = storedProps && typeof propertyInternal === "object" ? mergeDeep(propertyInternal, storedProps) : propertyInternal;
 
     const enumValuesConfigs = Object.entries(properties)
         .map(([key, property]) => ({
@@ -180,8 +200,8 @@ function BlockEntry({
             context,
             autoFocus,
             partOfArray: false,
-            partOfBlock: true,
-            tableMode: false
+            minimalistView: true,
+            onPropertyChange: storeProps,
         }
         : undefined;
 
@@ -194,7 +214,7 @@ function BlockEntry({
     };
 
     return (
-        <div className={cn(paperMixin, "bg-transparent p-4 my-4 py-8")}>
+        <div className={cls(paperMixin, "bg-transparent p-2")}>
 
             <Field
                 name={typeFieldName}
@@ -207,7 +227,8 @@ function BlockEntry({
                                 className="mb-2"
                                 placeholder={<Typography variant={"caption"}
                                                          className={"px-4 py-2 font-medium"}>Type</Typography>}
-                                size={"small"}
+                                size={"medium"}
+                                fullWidth={true}
                                 position={"item-aligned"}
                                 value={value1}
                                 renderValue={(enumKey: any) =>