@firecms/core 3.0.0-canary.21 → 3.0.0-canary.210

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";
 
@@ -19,20 +18,19 @@ 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 { 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;
@@ -41,18 +39,59 @@ interface PopupFormFieldProps<M extends Record<string, any>> {
      * Callback when the value of a cell has been edited
      * @param params
      */
-    onCellValueChange?: (params: OnCellValueChangeParams<any, M>) => Promise<void> | void;
+    onCellValueChange?: (params: OnCellValueChangeParams<any, any>) => Promise<void> | void;
 }
 
 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]);
+
+    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,10 +100,12 @@ 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 customizationController = useCustomizationController();
 
@@ -74,34 +115,13 @@ 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
         })
         : undefined;
 
@@ -205,58 +225,41 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
             return onCellValueChange({
                 value: values[propertyKey as string],
                 propertyKey: propertyKey as string,
-                entity,
+                data: entity,
                 setError: setSavingError,
                 onValueUpdated: () => {
                 },
-                fullPath: path,
-                context: fireCMSContext
             });
         }
         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;
 
@@ -266,10 +269,13 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
         values,
         path,
         setFieldValue,
-        save: saveValue
+        save: saveValue,
+        formex,
+        status: "existing",
+        openEntityMode: "side_panel",
     };
 
-    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,
@@ -278,9 +284,8 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
             includeDescription: false,
             underlyingValueHasChanged: false,
             context: formContext,
-            tableMode: true,
             partOfArray: false,
-            partOfBlock: false,
+            minimalistView: false,
             autoFocus: open
         }
         : undefined;
@@ -288,7 +293,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>
@@ -323,10 +328,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 = (
@@ -346,7 +347,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}
 
@@ -363,7 +364,7 @@ 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}>
@@ -376,7 +377,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"
@@ -387,7 +388,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
                             event.stopPropagation();
                             onClose();
                         }}>
-                        <ClearIcon className="text-white"
+                        <CloseIcon className="text-white"
                                    size={"small"}/>
                     </IconButton>
                 </div>