@firecms/core 3.0.0-beta.14 → 3.0.0-beta.15

package/src/form/EntityFormActions.tsx

@@ -1,10 +1,19 @@
 import React from "react";
-import { Entity, EntityAction, FireCMSContext, ResolvedEntityCollection, SideEntityController } from "../types";
+import {
+    Entity,
+    EntityAction,
+    FireCMSContext,
+    FormContext,
+    ResolvedEntityCollection,
+    SideEntityController
+} from "../types";
 import { Button, cls, defaultBorderMixin, DialogActions, IconButton, LoadingButton, Typography } from "@firecms/ui";
 import { FormexController } from "@firecms/formex";
 import { useFireCMSContext, useSideEntityController } from "../hooks";
 
 export interface EntityFormActionsProps {
+    fullPath: string;
+    fullIdPath?: string;
     collection: ResolvedEntityCollection;
     path: string;
     entity?: Entity;
@@ -16,9 +25,13 @@ export interface EntityFormActionsProps {
     pluginActions: React.ReactNode[];
     openEntityMode: "side_panel" | "full_screen";
     showDefaultActions?: boolean;
+    navigateBack: () => void;
+    formContext: FormContext
 }
 
 export function EntityFormActions({
+                                      fullPath,
+                                      fullIdPath,
                                       collection,
                                       entity,
                                       layout,
@@ -27,7 +40,9 @@ export function EntityFormActions({
                                       disabled,
                                       status,
                                       pluginActions,
-                                      openEntityMode
+                                      openEntityMode,
+                                      navigateBack,
+                                      formContext
                                   }: EntityFormActionsProps) {
 
     const context = useFireCMSContext();
@@ -35,6 +50,8 @@ export function EntityFormActions({
 
     return layout === "bottom"
         ? buildBottomActions({
+            fullPath,
+            fullIdPath,
             savingError,
             entity,
             collection,
@@ -44,9 +61,13 @@ export function EntityFormActions({
             disabled,
             status,
             pluginActions,
-            openEntityMode
+            openEntityMode,
+            navigateBack,
+            formContext
         })
         : buildSideActions({
+            fullPath,
+            fullIdPath,
             savingError,
             entity,
             collection,
@@ -56,11 +77,15 @@ export function EntityFormActions({
             disabled,
             status,
             pluginActions,
-            openEntityMode
+            openEntityMode,
+            navigateBack,
+            formContext
         });
 }
 
 type ActionsViewProps<M extends object> = {
+    fullPath: string,
+    fullIdPath?: string,
     savingError: Error | undefined,
     entity: Entity<M> | undefined,
     formActions?: EntityAction[],
@@ -72,11 +97,15 @@ type ActionsViewProps<M extends object> = {
     status: "new" | "existing" | "copy",
     pluginActions?: React.ReactNode[],
     openEntityMode: "side_panel" | "full_screen";
+    navigateBack: () => void;
+    formContext: FormContext
 };
 
 function buildBottomActions<M extends object>({
                                                   savingError,
                                                   entity,
+                                                  fullPath,
+                                                  fullIdPath,
                                                   formActions,
                                                   collection,
                                                   context,
@@ -85,7 +114,9 @@ function buildBottomActions<M extends object>({
                                                   disabled,
                                                   status,
                                                   pluginActions,
-                                                  openEntityMode
+                                                  openEntityMode,
+                                                  navigateBack,
+                                                  formContext
                                               }: ActionsViewProps<M>) {
 
     return <DialogActions position={"absolute"}>
@@ -103,12 +134,16 @@ function buildBottomActions<M extends object>({
                         event.stopPropagation();
                         if (entity)
                             action.onClick({
+                                view: "form",
                                 entity,
-                                fullPath: collection.path,
+                                fullPath: fullPath ?? collection.path,
+                                fullIdPath: fullIdPath ?? collection.id,
                                 collection: collection,
                                 context,
                                 sideEntityController,
-                                openEntityMode: openEntityMode
+                                openEntityMode: openEntityMode,
+                                navigateBack,
+                                formContext
                             });
                     }}>
                     {action.icon}
@@ -116,10 +151,14 @@ function buildBottomActions<M extends object>({
             ))}
         </div>}
         {pluginActions}
-        <Button variant="text" disabled={disabled || isSubmitting} type="reset">
+        <Button variant="text" disabled={disabled || isSubmitting}
+                color={"primary"}
+                type="reset">
             {status === "existing" ? "Discard" : "Clear"}
         </Button>
-        <Button variant={"filled"} color="primary" type="submit"
+        <Button variant={"filled"}
+                color="primary"
+                type="submit"
                 disabled={disabled || isSubmitting}>
             {status === "existing" && "Save"}
             {status === "copy" && "Create copy"}
@@ -133,6 +172,9 @@ function buildSideActions<M extends object>({
                                                 savingError,
                                                 entity,
                                                 formActions,
+                                                fullPath,
+                                                fullIdPath,
+                                                openEntityMode,
                                                 collection,
                                                 context,
                                                 sideEntityController,

package/src/form/components/StorageItemPreview.tsx

@@ -30,7 +30,7 @@ export function StorageItemPreview({
 
     return (
         <div className={cls(paperMixin,
-            "relative m-4 border-box flex items-center justify-center",
+            "relative border-box flex items-center justify-center",
             size === "large" ? "min-w-[220px] min-h-[220px] max-w-[220px]" : "min-w-[118px] min-h-[118px] max-w-[118px]",
             className)}>
 

package/src/form/components/StorageUploadProgress.tsx

@@ -79,7 +79,7 @@ export function StorageUploadProgress({
     }, [entry.file, entry.fileName, upload]);
 
     if (simple) {
-        return <div className={`m-4 w-${imageSize} h-${imageSize}`}>
+        return <div className={`w-${imageSize} h-${imageSize}`}>
 
             {loading && <Skeleton className={`w-${imageSize} h-${imageSize}`}/>}
 
@@ -88,11 +88,11 @@ export function StorageUploadProgress({
     return (
 
         <div className={cls(paperMixin,
-            "relative m-4 border-box flex items-center justify-center",
+            "p-4 relative border-box flex items-center justify-center",
             `min-w-[${imageSize}px] min-h-[${imageSize}px]`)}>
 
             {loading &&
-                <Skeleton className="m-4 w-full h-full"/>}
+                <Skeleton className="w-full h-full"/>}
 
             {error && <ErrorView title={"Error uploading file"}
                                  error={error}/>}

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -46,11 +46,13 @@ export function MarkdownEditorFieldBinding({
     const entityId = context.entityId;
     const path = context.path;
 
-    // const fieldVersion = useRef(0);
     const [fieldVersion, setFieldVersion] = useState(0);
-    const internalValue = useRef(value);
+    const internalValue = useRef<string | null>(value);
 
     const onContentChange = useCallback((content: string) => {
+        if (content === value || (value === null && content === "")) {
+            return;
+        }
         internalValue.current = content;
         setValue(content);
     }, [setValue]);

package/src/form/field_bindings/ReferenceAsStringFieldBinding.tsx

@@ -0,0 +1,135 @@
+import React, { useCallback, useMemo } from "react";
+import { Entity, EntityCollection, EntityReference, FieldProps } from "../../types";
+import { useNavigationController, useReferenceDialog } from "../../hooks";
+import { ReadOnlyFieldBinding } from "./ReadOnlyFieldBinding";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { ErrorView } from "../../components";
+import { ReferencePreview } from "../../preview";
+import { getIconForProperty, IconForView } from "../../util";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+import { EntityPreviewContainer } from "../../components/EntityPreview";
+import { cls } from "@firecms/ui";
+
+/**
+ * Field that opens a reference selection dialog and stores the entity ID as a string.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function ReferenceAsStringFieldBinding(props: FieldProps<string>) {
+    if (typeof props.property.reference?.path !== "string") {
+        return <ReadOnlyFieldBinding {...props}/>;
+    }
+
+    return <ReferenceAsStringFieldBindingInternal {...props}/>;
+}
+
+function ReferenceAsStringFieldBindingInternal({
+                                                   propertyKey,
+                                                   value,
+                                                   setValue,
+                                                   error,
+                                                   showError,
+                                                   isSubmitting,
+                                                   disabled,
+                                                   minimalistView,
+                                                   property,
+                                                   includeDescription,
+                                                   size = "medium"
+                                               }: FieldProps<string>) {
+    if (!property.reference?.path) {
+        throw new Error("Property path is required for ReferenceAsStringFieldBinding");
+    }
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const navigationController = useNavigationController();
+    const path = property.reference.path;
+    const collection: EntityCollection | undefined = useMemo(() => {
+        return path ? navigationController.getCollection(path) : undefined;
+    }, [path]);
+
+    const referenceValue: EntityReference | undefined = useMemo(() => {
+        if (value && path) {
+            return new EntityReference(value, path);
+        }
+        return undefined;
+    }, [value, path]);
+
+    if (!collection) {
+        throw Error(`Couldn't find the corresponding collection for the path: ${path}`);
+    }
+
+    const onSingleEntitySelected = useCallback((e: Entity<any> | null) => {
+        setValue(e ? e.id : null);
+    }, [setValue]);
+
+    const referenceDialogController = useReferenceDialog({
+            multiselect: false,
+            path: path,
+            collection,
+            onSingleEntitySelected,
+            selectedEntityIds: value ? [value] : undefined,
+            forceFilter: property.reference.forceFilter
+        }
+    );
+
+    const onEntryClick = (e: React.SyntheticEvent) => {
+        e.preventDefault();
+        referenceDialogController.open();
+    };
+
+    return (
+        <>
+            {!minimalistView && <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name}
+                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+
+            {!collection && <ErrorView
+                error={"The specified collection does not exist. Check console"}/>}
+
+            {collection && <>
+
+                {referenceValue && <ReferencePreview
+                    disabled={!path}
+                    previewProperties={property.reference?.previewProperties}
+                    hover={!disabled}
+                    size={size}
+                    onClick={disabled || isSubmitting ? undefined : onEntryClick}
+                    reference={referenceValue}
+                    includeEntityLink={property.reference?.includeEntityLink}
+                    includeId={property.reference?.includeId}
+                />}
+
+                {!value && <div className="justify-center text-left">
+                    <EntityPreviewContainer
+                        className={cls("px-6 h-16 text-sm font-medium flex items-center gap-6",
+                            disabled || isSubmitting
+                                ? "text-surface-accent-500"
+                                : "cursor-pointer text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800")}
+                        onClick={onEntryClick}
+                        size={"medium"}>
+                        <IconForView collectionOrView={collection}
+                                     className={"text-surface-300 dark:text-surface-600"}/>
+                        {`Edit ${property.name}`.toUpperCase()}
+                    </EntityPreviewContainer>
+                </div>}
+            </>}
+
+            <FieldHelperText includeDescription={includeDescription}
+                             showError={showError}
+                             error={error}
+                             disabled={disabled}
+                             property={property}/>
+
+        </>
+    );
+}

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -79,7 +79,6 @@ export function RepeatFieldBinding<T extends Array<any>>({
             minimalistView: false,
             autoFocus: internalId === lastAddedId,
         };
-        console.debug("Building entry for", index, fieldProps);
         return <ErrorBoundary>
             <PropertyFieldBinding {...fieldProps} index={index}/>
         </ErrorBoundary>;

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -114,7 +114,7 @@ export function StorageUploadFieldBinding({
                     icon={getIconForProperty(property, "small")}
                     required={property.validation?.required}
                     title={property.name}
-                    className={"h-8text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+                    className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
 
             <StorageUpload
                 value={internalValue}
@@ -157,13 +157,11 @@ function SortableStorageItem({
                                  id,
                                  entry,
                                  property,
-                                 name,
                                  metadata,
                                  storagePathBuilder,
                                  onFileUploadComplete,
                                  onClear,
                                  disabled,
-                                 isSortable // This prop might be redundant if SortableContext is always used for multiple items
                              }: SortableStorageItemProps) {
 
     const {
@@ -178,8 +176,7 @@ function SortableStorageItem({
     const style: React.CSSProperties = {
         transform: CSS.Transform.toString(transform),
         transition,
-        zIndex: isDragging ? 100 : undefined, // Higher z-index when dragging
-        opacity: isDragging ? 0.8 : 1 // Slight opacity for dragged item
+        zIndex: isDragging ? 100 : undefined
     };
 
     const getImageSizeNumber = (previewSize: PreviewSize): number => {
@@ -187,9 +184,9 @@ function SortableStorageItem({
             case "small":
                 return 40;
             case "medium":
-                return 118; // As per original logic for multiple items
+                return 118;
             case "large":
-                return 220; // As per original logic for single item
+                return 220;
             default:
                 return 118;
         }
@@ -225,7 +222,7 @@ function SortableStorageItem({
             style={style}
             {...attributes}
             {...listeners}
-            className={cls("rounded-md m-1")} // Added margin for spacing between items
+            className={cls("rounded-md m-1")}
             tabIndex={-1}
         >
             {child}
@@ -247,11 +244,11 @@ function FileDropComponent({
                                onFileUploadComplete,
                                name,
                                helpText,
-                               isDndItemDragging // New prop to disable dropzone when internal D&D is active
+                               isDndItemDragging
                            }: {
     storage: StorageConfig,
     disabled: boolean,
-    onFilesAdded: (acceptedFiles: File[]) => Promise<void>, // useStorageUploadController returns Promise<void>
+    onFilesAdded: (acceptedFiles: File[]) => Promise<void>,
     multipleFilesSupported: boolean,
     autoFocus: boolean,
     internalValue: StorageFieldItem[],
@@ -278,7 +275,7 @@ function FileDropComponent({
                 ...acc,
                 [ext]: []
             }), {}) : undefined,
-            disabled: disabled || isDndItemDragging, // Disable if form field is disabled OR an internal item is being dragged
+            disabled: disabled || isDndItemDragging,
             noDragEventsBubbling: true,
             maxSize: storage.maxSize,
             onDrop: onFilesAdded,
@@ -311,7 +308,7 @@ function FileDropComponent({
                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
                 disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : "",
                 dropZoneClasses,
-                multipleFilesSupported && internalValue.length === 0 && "flex", // Keep flex for empty state centering
+                multipleFilesSupported && internalValue.length ? "" : "flex",
                 {
                     [nonActiveDropClasses]: !isDragActive,
                     [activeDropClasses]: isDragActive, // OS file drag active
@@ -321,11 +318,9 @@ function FileDropComponent({
                 })}
         >
             <div
-                className={cls("flex items-center p-1 no-scrollbar",
-                    multipleFilesSupported && internalValue.length ? "flex-row overflow-x-auto" : "flex-col", // flex-col for single or empty
-                    internalValue.length === 0 && "min-h-[250px] justify-center", // Centering for empty dropzone
-                    multipleFilesSupported && internalValue.length > 0 && "min-h-[180px]", // Min height for multiple items
-                    !multipleFilesSupported && internalValue.length > 0 && "min-h-[250px]" // Min height for single item
+                className={cls("flex items-center p-1 px-4 no-scrollbar",
+                    multipleFilesSupported && internalValue.length ? "overflow-auto" : "",
+                    multipleFilesSupported && internalValue.length ? "min-h-[180px]" : "min-h-[250px]"
                 )}
             >
                 <input

package/src/form/index.tsx

@@ -8,6 +8,7 @@ export { TextFieldBinding } from "./field_bindings/TextFieldBinding";
 export { SwitchFieldBinding } from "./field_bindings/SwitchFieldBinding";
 export { DateTimeFieldBinding } from "./field_bindings/DateTimeFieldBinding";
 export { ReferenceFieldBinding } from "./field_bindings/ReferenceFieldBinding";
+export { ReferenceAsStringFieldBinding } from "./field_bindings/ReferenceAsStringFieldBinding";
 export { MapFieldBinding } from "./field_bindings/MapFieldBinding";
 export { KeyValueFieldBinding } from "./field_bindings/KeyValueFieldBinding";
 export { RepeatFieldBinding } from "./field_bindings/RepeatFieldBinding";