@firecms/core 3.0.0-canary.29 → 3.0.0-canary.290

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -1,50 +1,56 @@
-import React, { useCallback } from "react";
+import React, { useCallback, useState } from "react";
 
 import {
-    ArrayProperty,
-    Entity,
-    EntityCollection,
     FieldProps,
+    PropertyOrBuilder,
     ResolvedArrayProperty,
     ResolvedStringProperty,
     StorageConfig
 } from "../../types";
 import { useDropzone } from "react-dropzone";
 import { PreviewSize } from "../../preview";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 
-import { getIconForProperty, isReadOnly } from "../../util";
-import { useSnackbarController, useStorageSource } from "../../hooks";
-import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
+import { getIconForProperty, isReadOnly, resolveProperty } from "../../util";
+import { useAuthController, useSnackbarController, useStorageSource } from "../../hooks";
+import {
+    closestCenter,
+    DndContext,
+    DragEndEvent,
+    DragStartEvent,
+    KeyboardSensor,
+    PointerSensor,
+    useSensor,
+    useSensors
+} from "@dnd-kit/core";
+import {
+    horizontalListSortingStrategy,
+    SortableContext,
+    sortableKeyboardCoordinates,
+    useSortable
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import { StorageFieldItem, useStorageUploadController } from "../../util/useStorageUploadController";
 import { StorageUploadProgress } from "../components/StorageUploadProgress";
 import { StorageItemPreview } from "../components/StorageItemPreview";
 import {
-    cn,
+    cls,
     fieldBackgroundDisabledMixin,
     fieldBackgroundHoverMixin,
     fieldBackgroundMixin,
-    focusedMixin,
     Typography
 } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 
 const dropZoneClasses = "box-border relative pt-[2px] items-center border border-transparent min-h-[254px] outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
-const disabledClasses = "border-dotted-gray"
-const nonActiveDropClasses = "hover:bg-field-hover dark:hover:bg-field-hover-dark"
+const disabledClasses = fieldBackgroundDisabledMixin;
+const nonActiveDropClasses = fieldBackgroundHoverMixin
 const activeDropClasses = "pt-0 border-2 border-solid"
 const acceptDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-2 border-solid border-green-500"
 const rejectDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-2 border-solid border-red-500"
 
 type StorageUploadFieldProps = FieldProps<string | string[]>;
 
-/**
- * Field that allows to upload files to Google Cloud Storage.
- *
- * This is one of the internal components that get mapped natively inside forms
- * and tables to the specified properties.
- * @group Form fields
- */
 export function StorageUploadFieldBinding({
                                               propertyKey,
                                               value,
@@ -52,18 +58,20 @@ export function StorageUploadFieldBinding({
                                               error,
                                               showError,
                                               autoFocus,
-                                              tableMode,
+                                              minimalistView,
                                               property,
                                               includeDescription,
                                               context,
                                               isSubmitting,
                                           }: StorageUploadFieldProps) {
 
+    const authController = useAuthController();
+
     if (!context.entityId)
         throw new Error("StorageUploadFieldBinding: Entity id is null");
 
     const storageSource = useStorageSource(context.collection);
-    const disabled = isReadOnly(property) || !!property.disabled || isSubmitting;
+    const disabled = isReadOnly(property) || !!property.disabled || isSubmitting || context.disabled;
 
     const {
         internalValue,
@@ -81,7 +89,7 @@ export function StorageUploadFieldBinding({
         propertyKey,
         value,
         storageSource,
-        disabled,
+        disabled: disabled ?? false,
         onChange: setValue
     });
 
@@ -91,33 +99,32 @@ export function StorageUploadFieldBinding({
         setValue
     });
 
-    const entity: Entity<any> = {
-        id: context.entityId,
-        values: context.values,
-        path: context.path
-    };
+    const resolvedProperty = resolveProperty({
+        propertyOrBuilder: property as PropertyOrBuilder,
+        authController
+    }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
 
     return (
 
         <>
 
-            {!tableMode &&
-                <LabelWithIcon icon={getIconForProperty(property, "small")}
-                               required={property.validation?.required}
-                               title={property.name}
-                               className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+            {!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"}/>}
 
             <StorageUpload
                 value={internalValue}
-                collection={context.collection}
                 name={propertyKey}
-                disabled={disabled}
-                autoFocus={autoFocus}
-                property={property}
+                disabled={disabled ?? false}
+                autoFocus={autoFocus ?? false}
+                property={resolvedProperty}
                 onChange={setValue}
                 setInternalValue={setInternalValue}
                 onFilesAdded={onFilesAdded}
-                entity={entity}
                 onFileUploadComplete={onFileUploadComplete}
                 storagePathBuilder={storagePathBuilder}
                 storage={storage}
@@ -133,44 +140,126 @@ export function StorageUploadFieldBinding({
     );
 }
 
+interface SortableStorageItemProps {
+    id: number;
+    entry: StorageFieldItem;
+    property: ResolvedStringProperty;
+    name: string;
+    metadata?: Record<string, unknown>;
+    storagePathBuilder: (file: File) => string;
+    onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: any) => Promise<void>;
+    onClear: (clearedStoragePathOrDownloadUrl: string) => void;
+    disabled: boolean;
+    isSortable: boolean; // Kept for consistency, though dnd-kit handles sortability via context
+}
+
+function SortableStorageItem({
+                                 id,
+                                 entry,
+                                 property,
+                                 metadata,
+                                 storagePathBuilder,
+                                 onFileUploadComplete,
+                                 onClear,
+                                 disabled,
+                             }: SortableStorageItemProps) {
+
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+        isDragging
+    } = useSortable({ id });
+
+    const style: React.CSSProperties = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+        zIndex: isDragging ? 100 : undefined
+    };
+
+    const getImageSizeNumber = (previewSize: PreviewSize): number => {
+        switch (previewSize) {
+            case "small":
+                return 40;
+            case "medium":
+                return 118;
+            case "large":
+                return 220;
+            default:
+                return 118;
+        }
+    };
+
+    let child: React.ReactNode;
+    if (entry.storagePathOrDownloadUrl) {
+        child = (
+            <StorageItemPreview
+                name={`storage_preview_${entry.storagePathOrDownloadUrl}`}
+                property={property}
+                disabled={disabled}
+                value={entry.storagePathOrDownloadUrl}
+                onRemove={() => onClear(entry.storagePathOrDownloadUrl!)}
+                size={entry.size}/>
+        );
+    } else if (entry.file) {
+        child = (
+            <StorageUploadProgress
+                entry={entry}
+                metadata={metadata}
+                storagePath={storagePathBuilder(entry.file)}
+                onFileUploadComplete={onFileUploadComplete}
+                imageSize={getImageSizeNumber(entry.size)}
+                simple={false}
+            />
+        );
+    }
+
+    return (
+        <div
+            ref={setNodeRef}
+            style={style}
+            {...attributes}
+            {...listeners}
+            className={cls("rounded-md m-1")}
+            tabIndex={-1}
+        >
+            {child}
+        </div>
+    );
+}
+
 function FileDropComponent({
                                storage,
-                               collection,
                                disabled,
-                               isDraggingOver,
                                onFilesAdded,
                                multipleFilesSupported,
-                               droppableProvided,
                                autoFocus,
                                internalValue,
                                property,
-                               entity,
                                onClear,
                                metadata,
                                storagePathBuilder,
                                onFileUploadComplete,
-                               size,
                                name,
-                               helpText
+                               helpText,
+                               isDndItemDragging
                            }: {
     storage: StorageConfig,
-    collection: EntityCollection,
     disabled: boolean,
-    isDraggingOver: boolean,
-    droppableProvided: any,
-    onFilesAdded: (acceptedFiles: File[]) => void,
+    onFilesAdded: (acceptedFiles: File[]) => Promise<void>,
     multipleFilesSupported: boolean,
     autoFocus: boolean,
     internalValue: StorageFieldItem[],
     property: ResolvedStringProperty,
     onClear: (clearedStoragePathOrDownloadUrl: string) => void,
-    metadata: any,
-    entity: Entity<any>;
+    metadata?: any,
     storagePathBuilder: (file: File) => string,
     onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: any) => Promise<void>,
-    size: PreviewSize,
     name: string,
-    helpText: string
+    helpText: string,
+    isDndItemDragging?: boolean
 }) {
 
     const snackbarContext = useSnackbarController();
@@ -178,22 +267,33 @@ function FileDropComponent({
     const {
         getRootProps,
         getInputProps,
-        isDragActive,
+        isDragActive, // This is for files dragged from OS
         isDragAccept,
         isDragReject
     } = useDropzone({
-            accept: storage.acceptedFiles ? storage.acceptedFiles.map(e => ({ [e]: [] })).reduce((a, b) => ({ ...a, ...b }), {}) : undefined,
-            disabled: disabled || isDraggingOver,
+            accept: storage.acceptedFiles ? storage.acceptedFiles.reduce((acc, ext) => ({
+                ...acc,
+                [ext]: []
+            }), {}) : undefined,
+            disabled: disabled || isDndItemDragging,
             noDragEventsBubbling: true,
             maxSize: storage.maxSize,
             onDrop: onFilesAdded,
-            onDropRejected: (fileRejections, event) => {
+            onDropRejected: (fileRejections) => {
                 for (const fileRejection of fileRejections) {
                     for (const error of fileRejection.errors) {
-                        snackbarContext.open({
-                            type: "error",
-                            message: `Error uploading file: File is larger than ${storage.maxSize} bytes`
-                        });
+                        console.error("Error uploading file: ", error);
+                        if (error.code === "file-too-large") {
+                            snackbarContext.open({
+                                type: "error",
+                                message: `Error uploading file: File is larger than ${storage.maxSize} bytes`
+                            });
+                        } else if (error.code === "file-invalid-type") {
+                            snackbarContext.open({
+                                type: "error",
+                                message: "Error uploading file: File type is not supported"
+                            });
+                        }
                     }
                 }
             }
@@ -203,103 +303,63 @@ function FileDropComponent({
     return (
         <div
             {...getRootProps()}
-            className={cn(
+            className={cls(
                 fieldBackgroundMixin,
                 disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
+                disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : "",
                 dropZoneClasses,
                 multipleFilesSupported && internalValue.length ? "" : "flex",
-                focusedMixin,
                 {
                     [nonActiveDropClasses]: !isDragActive,
-                    [activeDropClasses]: isDragActive,
-                    [rejectDropClasses]: isDragReject,
-                    [acceptDropClasses]: isDragAccept,
-                    [disabledClasses]: disabled
+                    [activeDropClasses]: isDragActive, // OS file drag active
+                    [rejectDropClasses]: isDragReject, // OS file drag reject
+                    [acceptDropClasses]: isDragAccept, // OS file drag accept
+                    [disabledClasses]: disabled || isDndItemDragging // Visually disable if internal drag
                 })}
         >
             <div
-                {...droppableProvided.droppableProps}
-                ref={droppableProvided.innerRef}
-                className={cn("flex items-center p-1 no-scrollbar",
+                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
                     autoFocus={autoFocus}
                     {...getInputProps()} />
 
-                {internalValue.map((entry, index) => {
-                    let child: any;
-                    if (entry.storagePathOrDownloadUrl) {
-                        child = (
-                            <StorageItemPreview
-                                collection={collection}
-                                name={`storage_preview_${entry.storagePathOrDownloadUrl}`}
-                                property={property}
-                                disabled={disabled}
-                                entity={entity}
-                                value={entry.storagePathOrDownloadUrl}
-                                onRemove={onClear}
-                                size={entry.size}/>
-                        );
-                    } else if (entry.file) {
-                        child = (
-                            <StorageUploadProgress
-                                entry={entry}
-                                metadata={metadata}
-                                storagePath={storagePathBuilder(entry.file)}
-                                onFileUploadComplete={onFileUploadComplete}
-                                imageSize={size === "medium" ? 220 : 118}
-                                simple={false}
-                            />
-                        );
-                    }
-
-                    return (
-                        <Draggable
-                            key={`array_field_${name}_${entry.id}`}
-                            draggableId={`array_field_${name}_${entry.id}`}
-                            index={index}>
-                            {(provided, snapshot) => (
-                                <div
-                                    tabIndex={-1}
-                                    ref={provided.innerRef}
-                                    {...provided.draggableProps}
-                                    {...provided.dragHandleProps}
-                                    className={cn(focusedMixin, "rounded-md")}
-                                    style={{
-                                        ...provided.draggableProps.style
-                                    }}
-                                >
-                                    {child}
-                                </div>
-                            )}
-                        </Draggable>
-                    );
-                })
-                }
-
-                {droppableProvided.placeholder}
-
+                {internalValue.map((entry) => (
+                    <SortableStorageItem
+                        key={entry.id}
+                        id={entry.id}
+                        entry={entry}
+                        property={property}
+                        name={name}
+                        metadata={metadata}
+                        storagePathBuilder={storagePathBuilder}
+                        onFileUploadComplete={onFileUploadComplete}
+                        onClear={onClear}
+                        disabled={disabled}
+                        isSortable={multipleFilesSupported}
+                    />
+                ))}
+
+                {/* Placeholder for empty dropzone text is handled by the outer Typography */}
             </div>
 
             <div
                 className="flex-grow min-h-[38px] box-border m-2 text-center">
                 <Typography align={"center"}
-                            variant={"label"}>
+                            variant={"label"}
+                            className={disabled ? "text-surface-accent-600 dark:text-surface-accent-500" : ""}>
                     {helpText}
                 </Typography>
             </div>
-
         </div>
     );
 }
 
 export interface StorageUploadProps {
     value: StorageFieldItem[];
-    collection: EntityCollection;
     setInternalValue: (v: StorageFieldItem[]) => void;
     name: string;
     property: ResolvedStringProperty | ResolvedArrayProperty<string[]>;
@@ -307,18 +367,16 @@ export interface StorageUploadProps {
     multipleFilesSupported: boolean;
     autoFocus: boolean;
     disabled: boolean;
-    entity: Entity<any>;
     storage: StorageConfig;
-    onFilesAdded: (acceptedFiles: File[]) => void;
+    onFilesAdded: (acceptedFiles: File[]) => Promise<void>; // Updated from useStorageUploadController
     storagePathBuilder: (file: File) => string;
     onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: any) => Promise<void>;
 }
 
 export function StorageUpload({
-                                  collection,
                                   property,
                                   name,
-                                  value,
+                                  value, // This is internalValue from useStorageUploadController
                                   setInternalValue,
                                   onChange,
                                   multipleFilesSupported,
@@ -327,7 +385,6 @@ export function StorageUpload({
                                   onFilesAdded,
                                   autoFocus,
                                   storage,
-                                  entity,
                                   storagePathBuilder,
                               }: StorageUploadProps) {
 
@@ -346,10 +403,10 @@ export function StorageUpload({
     }
 
     const metadata: Record<string, unknown> | undefined = storage?.metadata;
-    const size = multipleFilesSupported ? "small" : "medium";
+    const [isDndItemDragging, setIsDndItemDragging] = useState(false);
 
     const moveItem = useCallback((fromIndex: number, toIndex: number) => {
-        if (!multipleFilesSupported) return;
+        if (!multipleFilesSupported || fromIndex === toIndex) return;
         const newValue = [...value];
         const item = newValue[fromIndex];
         newValue.splice(fromIndex, 1);
@@ -361,87 +418,88 @@ export function StorageUpload({
         onChange(fieldValue);
     }, [multipleFilesSupported, onChange, setInternalValue, value]);
 
-    const onDragEnd = useCallback((result: any) => {
-        // dropped outside the list
-        if (!result.destination) {
-            return;
-        }
-
-        moveItem(result.source.index, result.destination.index);
+    const sensors = useSensors(
+        useSensor(PointerSensor, {
+            activationConstraint: {
+                distance: 5, // Start dragging after 5px movement
+            },
+        }),
+        useSensor(KeyboardSensor, {
+            coordinateGetter: sortableKeyboardCoordinates,
+        })
+    );
 
-    }, [moveItem])
+    const handleDragStart = useCallback((event: DragStartEvent) => {
+        setIsDndItemDragging(true);
+    }, []);
+
+    const handleDragEnd = useCallback((event: DragEndEvent) => {
+        setIsDndItemDragging(false);
+        const {
+            active,
+            over
+        } = event;
+        if (over && active.id !== over.id) {
+            const oldIndex = value.findIndex(item => item.id === active.id);
+            const newIndex = value.findIndex(item => item.id === over.id);
+            if (oldIndex !== -1 && newIndex !== -1) {
+                moveItem(oldIndex, newIndex);
+            }
+        }
+    }, [value, moveItem]);
 
     const onClear = useCallback((clearedStoragePathOrDownloadUrl: string) => {
+        let newValue: StorageFieldItem[];
         if (multipleFilesSupported) {
-            const newValue: StorageFieldItem[] = value.filter(v => v.storagePathOrDownloadUrl !== clearedStoragePathOrDownloadUrl);
+            newValue = value.filter(v => v.storagePathOrDownloadUrl !== clearedStoragePathOrDownloadUrl);
             onChange(newValue.filter(v => !!v.storagePathOrDownloadUrl).map(v => v.storagePathOrDownloadUrl as string));
-            setInternalValue(newValue);
         } else {
+            newValue = [];
             onChange(null);
-            setInternalValue([]);
         }
-    }, [value, multipleFilesSupported, onChange]);
+        setInternalValue(newValue);
+    }, [value, multipleFilesSupported, onChange, setInternalValue]);
 
     const helpText = multipleFilesSupported
-        ? "Drag 'n' drop some files here, or click to select files"
+        ? "Drag 'n' drop some files here, or click to select files. Drag to reorder."
         : "Drag 'n' drop a file here, or click to select one";
 
     const renderProperty: ResolvedStringProperty = multipleFilesSupported
-        ? (property as ArrayProperty<string[]>).of as ResolvedStringProperty
+        ? (property as ResolvedArrayProperty<string[]>).of as ResolvedStringProperty
         : property as ResolvedStringProperty;
 
-    return (
-        <DragDropContext onDragEnd={onDragEnd}>
-            <Droppable
-                droppableId={`droppable_${name}`}
-                direction="horizontal"
-                renderClone={(provided, snapshot, rubric) => {
-                    const entry = value[rubric.source.index];
-                    return (
-                        <div
-                            ref={provided.innerRef}
-                            {...provided.draggableProps}
-                            {...provided.dragHandleProps}
-                            style={
-                                provided.draggableProps.style
-                            }
-                            className="rounded"
-                        >
-                            <StorageItemPreview
-                                collection={collection}
-                                name={`storage_preview_${entry.storagePathOrDownloadUrl}`}
-                                property={renderProperty}
-                                disabled={true}
-                                entity={entity}
-                                value={entry.storagePathOrDownloadUrl as string}
-                                onRemove={onClear}
-                                size={entry.size}/>
-                        </div>
-                    );
-                }}
-            >
-                {(provided, snapshot) => {
-                    return <FileDropComponent storage={storage}
-                                              collection={collection}
-                                              disabled={disabled}
-                                              isDraggingOver={snapshot.isDraggingOver}
-                                              droppableProvided={provided}
-                                              onFilesAdded={onFilesAdded}
-                                              multipleFilesSupported={multipleFilesSupported}
-                                              autoFocus={autoFocus}
-                                              internalValue={value}
-                                              property={renderProperty}
-                                              entity={entity}
-                                              onClear={onClear}
-                                              metadata={metadata}
-                                              storagePathBuilder={storagePathBuilder}
-                                              onFileUploadComplete={onFileUploadComplete}
-                                              size={size}
-                                              name={name}
-                                              helpText={helpText}/>
-                }}
-            </Droppable>
-        </DragDropContext>
-    );
+    const fileDropProps = {
+        storage,
+        disabled,
+        onFilesAdded,
+        multipleFilesSupported,
+        autoFocus,
+        internalValue: value, // Pass current internalValue
+        property: renderProperty,
+        onClear,
+        metadata,
+        storagePathBuilder,
+        onFileUploadComplete,
+        name,
+        helpText,
+        isDndItemDragging // Pass this down
+    };
 
+    if (multipleFilesSupported) {
+        return (
+            <DndContext
+                sensors={sensors}
+                collisionDetection={closestCenter}
+                onDragStart={handleDragStart}
+                onDragEnd={handleDragEnd}
+            >
+                <SortableContext items={value.map(v => v.id)} strategy={horizontalListSortingStrategy}>
+                    <FileDropComponent {...fileDropProps} />
+                </SortableContext>
+            </DndContext>
+        );
+    } else {
+        // For single file, no D&D context is needed
+        return <FileDropComponent {...fileDropProps} isDndItemDragging={false}/>;
+    }
 }