@firecms/core 3.0.0-canary.99 → 3.0.0-rc.2

package/src/components/EntityCollectionTable/internal/popup_field/PopupFormField.tsx

@@ -1,5 +1,4 @@
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useState } from "react";
-import equal from "react-fast-compare"
 
 import * as Portal from "@radix-ui/react-portal";
 
@@ -18,21 +17,19 @@ import { Formex, useCreateFormex } from "@firecms/formex";
 import { useDraggable } from "./useDraggable";
 import { CustomFieldValidator, getYupEntitySchema } from "../../../../form/validation";
 import { useWindowSize } from "./useWindowSize";
-import { ElementResizeListener } from "./ElementResizeListener";
-import { ErrorView } from "../../../ErrorView";
 import { getPropertyInPath, isReadOnly, resolveCollection } from "../../../../util";
-import { Button, ClearIcon, DialogActions, IconButton, Typography } from "@firecms/ui";
-import { PropertyFieldBinding } from "../../../../form";
-import { useCustomizationController, useFireCMSContext } from "../../../../hooks";
+import { Button, CloseIcon, DialogActions, IconButton, Typography } from "@firecms/ui";
+import { PropertyFieldBinding, yupToFormErrors } from "../../../../form";
+import { useAuthController, useCustomizationController, useDataSource, useFireCMSContext } from "../../../../hooks";
 import { OnCellValueChangeParams } from "../../../common";
 
 interface PopupFormFieldProps<M extends Record<string, any>> {
-    entity?: Entity<M>;
     customFieldValidator?: CustomFieldValidator;
     path: string;
+    entityId: string;
     tableKey: string;
     propertyKey?: Extract<keyof M, string>;
-    collection?: EntityCollection<M>;
+    collection?: EntityCollection<any>;
     cellRect?: DOMRect;
     open: boolean;
     onClose: () => void;
@@ -46,13 +43,54 @@ interface PopupFormFieldProps<M extends Record<string, any>> {
 
 export function PopupFormField<M extends Record<string, any>>(props: PopupFormFieldProps<M>) {
     if (!props.open) return null;
-    return <PopupFormFieldInternal {...props} />;
+    return <PopupFormFieldLoading {...props} />;
 
 }
 
+export function PopupFormFieldLoading<M extends Record<string, any>>({
+                                                                         tableKey,
+                                                                         entityId,
+                                                                         customFieldValidator,
+                                                                         propertyKey,
+                                                                         collection: inputCollection,
+                                                                         path,
+                                                                         cellRect,
+                                                                         open,
+                                                                         onClose,
+                                                                         onCellValueChange,
+                                                                         container
+                                                                     }: PopupFormFieldProps<M>) {
+    const dataSource = useDataSource();
+    const [entity, setEntity] = useState<Entity<M> | undefined>(undefined);
+    useEffect(() => {
+        if (entityId && inputCollection) {
+            dataSource.fetchEntity({
+                path,
+                entityId,
+                collection: inputCollection
+            }).then(setEntity);
+        }
+    }, [entityId, inputCollection, dataSource, path]);
+
+    if (!entity) return null;
+    return <PopupFormFieldInternal {...{
+        tableKey,
+        entityId,
+        customFieldValidator,
+        propertyKey,
+        collection: inputCollection,
+        path,
+        cellRect,
+        open,
+        onClose,
+        onCellValueChange,
+        container
+    }} entity={entity}/>;
+}
+
 export function PopupFormFieldInternal<M extends Record<string, any>>({
                                                                           tableKey,
-                                                                          entity: entityProp,
+                                                                          entityId,
                                                                           customFieldValidator,
                                                                           propertyKey,
                                                                           collection: inputCollection,
@@ -61,11 +99,14 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
                                                                           open,
                                                                           onClose,
                                                                           onCellValueChange,
-                                                                          container
-                                                                      }: PopupFormFieldProps<M>) {
+                                                                          container,
+                                                                          entity
+                                                                      }: PopupFormFieldProps<M> & {
+    entity?: Entity<M>
+}) {
 
-    // const dataSource = useDataSource();
     const fireCMSContext = useFireCMSContext();
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
 
     const [savingError, setSavingError] = React.useState<any>();
@@ -74,34 +115,14 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         y: number
     }>();
 
-    const entityId = entityProp?.id;
-    const [entity, setEntity] = useState<Entity<M> | undefined>(entityProp);
-    // useEffect(() => {
-    //     if (entityId && inputCollection) {
-    //         return dataSource.listenEntity?.({
-    //             path,
-    //             entityId,
-    //             collection: inputCollection,
-    //             onUpdate: (e) => {
-    //                 setEntity(e);
-    //                 setInternalValue(e?.values);
-    //             }
-    //         });
-    //     } else {
-    //         return () => {
-    //         };
-    //     }
-    // }, [dataSource, entityId, inputCollection, path, open]);
-
-    const [internalValue, setInternalValue] = useState<EntityValues<M> | undefined>(entity?.values);
-
     const collection: ResolvedEntityCollection<M> | undefined = inputCollection
         ? resolveCollection<M>({
             collection: inputCollection,
             path,
-            values: internalValue,
+            values: entity?.values,
             entityId,
-            fields: customizationController.propertyConfigs
+            propertyConfigs: customizationController.propertyConfigs,
+            authController
         })
         : undefined;
 
@@ -125,33 +146,35 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         };
     }, [cellRect, windowSize.height, windowSize.width]);
 
-    const normalizePosition = useCallback(({
-                                               x,
-                                               y
-                                           }: { x: number, y: number }) => {
-
-        const draggableBoundingRect = draggableRef.current?.getBoundingClientRect();
-        if (!draggableBoundingRect)
-            throw Error("normalizePosition called before draggableBoundingRect is set");
-
+    const normalizePosition = useCallback((
+        pos: { x: number, y: number },
+        draggableBoundingRect: DOMRect,
+        currentWindowSize: { width: number, height: number }
+    ) => {
+        if (!draggableBoundingRect || draggableBoundingRect.width === 0 || draggableBoundingRect.height === 0) {
+            return pos;
+        }
         return {
-            x: Math.max(0, Math.min(x, windowSize.width - draggableBoundingRect.width)),
-            y: Math.max(0, Math.min(y, windowSize.height - draggableBoundingRect.height))
+            x: Math.max(0, Math.min(pos.x, currentWindowSize.width - draggableBoundingRect.width)),
+            y: Math.max(0, Math.min(pos.y, currentWindowSize.height - draggableBoundingRect.height))
         };
-    }, [windowSize]);
+    }, []);
 
-    const updatePopupLocation = useCallback((position?: {
+    const updatePopupLocation = useCallback((newPositionCandidate?: {
         x: number,
         y: number
     }) => {
-
         const draggableBoundingRect = draggableRef.current?.getBoundingClientRect();
-        if (!cellRect || !draggableBoundingRect) return;
-        // const newPosition = normalizePosition(position ?? getInitialLocation());
-        const newPosition = position ?? normalizePosition(getInitialLocation());
-        if (!popupLocation || newPosition.x !== popupLocation.x || newPosition.y !== popupLocation.y)
-            setPopupLocation(newPosition);
-    }, [cellRect, getInitialLocation, normalizePosition, popupLocation]);
+        if (!cellRect || !draggableBoundingRect || draggableBoundingRect.width === 0 || draggableBoundingRect.height === 0) {
+            return;
+        }
+        const basePosition = newPositionCandidate ?? getInitialLocation();
+        const newNormalizedPosition = normalizePosition(basePosition, draggableBoundingRect, windowSize);
+
+        if (!popupLocation || newNormalizedPosition.x !== popupLocation.x || newNormalizedPosition.y !== popupLocation.y) {
+            setPopupLocation(newNormalizedPosition);
+        }
+    }, [cellRect, getInitialLocation, normalizePosition, popupLocation, windowSize]);
 
     useDraggable({
         containerRef: draggableRef,
@@ -170,19 +193,25 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
 
     useLayoutEffect(
         () => {
+            if (!cellRect || initialPositionSet.current) return;
+            // Ensure draggableRef is available and has dimensions before initial positioning
             const draggableBoundingRect = draggableRef.current?.getBoundingClientRect();
-            if (!cellRect || !draggableBoundingRect || initialPositionSet.current) return;
+            if (!draggableBoundingRect || draggableBoundingRect.width === 0 || draggableBoundingRect.height === 0) {
+                // If not ready, perhaps wait or log. For now, just return.
+                // This might need a retry mechanism or ensure content is rendered first.
+                return;
+            }
             updatePopupLocation();
             initialPositionSet.current = true;
         },
-        [cellRect, updatePopupLocation, initialPositionSet.current]
+        [cellRect, updatePopupLocation] // Removed initialPositionSet.current from deps as it's a ref
     );
 
     useLayoutEffect(
         () => {
             updatePopupLocation(popupLocation);
         },
-        [windowSize, cellRect]
+        [windowSize, cellRect, updatePopupLocation, popupLocation]
     );
 
     const validationSchema = useMemo(() => {
@@ -196,9 +225,28 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
     }, [collection, entityId, propertyKey, customFieldValidator]);
 
     const adaptResize = useCallback(() => {
+        // When the popup resizes, we want to re-evaluate its position
+        // based on its current location and new dimensions.
         return updatePopupLocation(popupLocation);
     }, [popupLocation, updatePopupLocation]);
 
+    // Setup ResizeObserver
+    useEffect(() => {
+        const element = draggableRef.current;
+        if (!element) return;
+
+        const observer = new ResizeObserver(() => {
+            adaptResize();
+        });
+
+        observer.observe(element);
+
+        return () => {
+            observer.unobserve(element);
+            observer.disconnect();
+        };
+    }, [adaptResize, draggableRef]);
+
     const saveValue = async (values: M) => {
         setSavingError(null);
         if (inputCollection && entity && onCellValueChange && propertyKey) {
@@ -214,47 +262,32 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         return Promise.resolve();
     };
 
-    if (!entity)
-        return <></>;
-
-    // enableReinitialize={true}
-    // eslint-disable-next-line react-hooks/rules-of-hooks
     const formex = useCreateFormex<M>({
         initialValues: (entity?.values ?? {}) as EntityValues<M>,
         validation: (values) => {
             return validationSchema?.validate(values, { abortEarly: false })
                 .then(() => ({}))
-                .catch((e) => {
-                    const errors: Record<string, string> = {};
-                    e.inner.forEach((error: any) => {
-                        errors[error.path] = error.message;
-                    });
-                    return errors;
-                });
+                .catch(yupToFormErrors);
         },
         validateOnInitialRender: true,
         onSubmit: (values, actions) => {
             saveValue(values)
-                .then(() => onClose())
+                .then(() => {
+                    formex.resetForm({
+                        values: values
+                    })
+                    onClose();
+                })
                 .finally(() => actions.setSubmitting(false));
         }
     });
 
-    const { values, isSubmitting, setFieldValue, handleSubmit } = formex;
-
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    useEffect(() => {
-        if (!equal(values, internalValue)) {
-            setInternalValue(values);
-        }
-    }, [values]);
-
-    if (!entity)
-        return <ErrorView
-            error={"PopupFormField misconfiguration"}/>;
-
-    if (!collection)
-        return <></>;
+    const {
+        values,
+        isSubmitting,
+        setFieldValue,
+        handleSubmit
+    } = formex;
 
     const disabled = isSubmitting;
 
@@ -265,10 +298,13 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         path,
         setFieldValue,
         save: saveValue,
-        formex
+        formex,
+        status: "existing",
+        openEntityMode: "side_panel",
+        disabled: false,
     };
 
-    const property: ResolvedProperty<any> | undefined = propertyKey && getPropertyInPath(collection.properties, propertyKey as string);
+    const property: ResolvedProperty<any> | undefined = propertyKey && getPropertyInPath(collection?.properties ?? {} as ResolvedProperties, propertyKey as string);
     const fieldProps: PropertyFieldBindingProps<any, M> | undefined = propertyKey && property
         ? {
             propertyKey: propertyKey as string,
@@ -277,9 +313,8 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
             includeDescription: false,
             underlyingValueHasChanged: false,
             context: formContext,
-            tableMode: true,
             partOfArray: false,
-            partOfBlock: false,
+            minimalistView: true,
             autoFocus: open
         }
         : undefined;
@@ -287,7 +322,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
     let internalForm = <>
         <div
             key={`popup_form_${tableKey}_${entityId}_${propertyKey}`}
-            className="w-[560px] max-w-full max-h-[85vh]">
+            className="w-[700px] max-w-full max-h-[85vh]">
             <form
                 onSubmit={handleSubmit}
                 noValidate>
@@ -322,10 +357,6 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
 
     const plugins = customizationController.plugins;
     if (plugins) {
-        // const formController: FormContext<M> = {
-        //     values,
-        //     setFieldValue
-        // }
         plugins.forEach((plugin: FireCMSPlugin) => {
             if (plugin.form?.provider) {
                 internalForm = (
@@ -345,7 +376,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         });
     }
     const form = <div
-        className={`text-gray-900 dark:text-white overflow-auto rounded rounded-md bg-white dark:bg-gray-950 ${!open ? "hidden" : ""} cursor-grab max-w-[100vw]`}>
+        className={`text-surface-900 dark:text-white overflow-auto rounded rounded-md bg-white dark:bg-surface-950 ${!open ? "hidden" : ""} cursor-grab max-w-[100vw]`}>
 
         {internalForm}
 
@@ -362,12 +393,12 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
             style={{
                 boxShadow: "0 0 0 2px rgba(128,128,128,0.2)",
             }}
-            className={`inline-block fixed z-20 shadow-outline rounded-md bg-white dark:bg-gray-950 ${
+            className={`inline-block fixed z-20 shadow-outline rounded-md bg-white dark:bg-surface-950 ${
                 !open ? "invisible" : "visible"
             } cursor-grab overflow-visible`}
             ref={draggableRef}>
 
-            <ElementResizeListener onResize={adaptResize}/>
+            {/* ElementResizeListener removed from here */}
 
             <div
                 className="overflow-hidden">
@@ -375,7 +406,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
                 {form}
 
                 <div
-                    className="absolute -top-3.5 -right-3.5 bg-gray-500 rounded-full"
+                    className="absolute -top-3.5 -right-3.5 bg-surface-500 rounded-full"
                     style={{
                         width: "32px",
                         height: "32px"
@@ -386,7 +417,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
                             event.stopPropagation();
                             onClose();
                         }}>
-                        <ClearIcon className="text-white"
+                        <CloseIcon className="text-white"
                                    size={"small"}/>
                     </IconButton>
                 </div>

package/src/components/EntityCollectionTable/internal/popup_field/useDraggable.tsx

@@ -1,9 +1,8 @@
-import React, { useEffect } from "react";
+import React, { useCallback, useEffect } from "react";
 
 interface DraggableProps {
     containerRef: React.RefObject<HTMLDivElement>,
     innerRef: React.RefObject<HTMLDivElement>,
-    // ref: React.RefObject<HTMLDivElement>,
     x?: number;
     y?: number;
     onMove: (params: { x: number, y: number }) => void,
@@ -22,7 +21,7 @@ export function useDraggable({
 
     const listeningRef = React.useRef(false);
 
-    const onMouseDown = (event: any) => {
+    const onMouseDown = useCallback((event: any) => {
         if (event.button !== 0 || !containerRef.current || event.defaultPrevented || event.innerClicked) {
             return;
         }
@@ -39,16 +38,17 @@ export function useDraggable({
         document.addEventListener("selectstart", onSelect);
         listeningRef.current = true;
         // event.stopPropagation();
-    };
-    const onMouseDownInner = (event: any) => {
+    }, [containerRef, onMove]);
+
+    const onMouseDownInner = useCallback((event: any) => {
         // @ts-ignore
         event.innerClicked = true;
-    };
+    }, [])
 
-    const onSelect = (event: any) => {
+    const onSelect = useCallback((event: any) => {
         event.preventDefault()
         event.stopPropagation();
-    };
+    }, [])
 
     const onMouseUp = (event: any) => {
         document.removeEventListener("mousemove", onMouseMove);
@@ -92,6 +92,6 @@ export function useDraggable({
             if (innerCurrent)
                 innerCurrent.removeEventListener("mousedown", onMouseDownInner);
         };
-    });
+    }, [containerRef, innerRef, onMouseDownInner, onMouseDown]);
 
 }