@firecms/core 3.0.0-beta.1 → 3.0.0-beta.11

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";
 
@@ -14,24 +13,25 @@ import {
     ResolvedProperties,
     ResolvedProperty
 } from "../../../../types";
-import { Form, Formik, FormikProps } from "formik";
+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, OnCellValueChangeParams } from "../../../../components";
 import { getPropertyInPath, isReadOnly, resolveCollection } from "../../../../util";
-import { Button, ClearIcon, DialogActions, IconButton, Typography } from "@firecms/ui";
+import { Button, CloseIcon, DialogActions, IconButton, Typography } from "@firecms/ui";
 import { PropertyFieldBinding } from "../../../../form";
-import { useCustomizationController, useFireCMSContext } from "../../../../hooks";
+import { useCustomizationController, useDataSource, useFireCMSContext } from "../../../../hooks";
+import { OnCellValueChangeParams } from "../../../common";
+import { yupToFormErrors } from "../../../../core/EntityEditView";
 
 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;
@@ -40,18 +40,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,
@@ -60,10 +101,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();
 
@@ -73,34 +116,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;
 
@@ -204,153 +226,143 @@ 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 <></>;
+    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;
+                    return yupToFormErrors(e);
+                });
+        },
+        validateOnInitialRender: true,
+        onSubmit: (values, actions) => {
+            saveValue(values)
+                .then(() => {
+                    formex.resetForm({
+                        values: values
+                    })
+                    onClose();
+                })
+                .finally(() => actions.setSubmitting(false));
+        }
+    });
 
-    const form = entity && (
+    const {
+        values,
+        isSubmitting,
+        setFieldValue,
+        handleSubmit
+    } = formex;
+
+    const disabled = isSubmitting;
+
+    const formContext: FormContext<M> = {
+        collection,
+        entityId,
+        values,
+        path,
+        setFieldValue,
+        save: saveValue,
+        formex
+    };
+
+    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,
+            disabled: isSubmitting || isReadOnly(property) || !!property.disabled,
+            property,
+            includeDescription: false,
+            underlyingValueHasChanged: false,
+            context: formContext,
+            partOfArray: false,
+            minimalistView: false,
+            autoFocus: open
+        }
+        : undefined;
+
+    let internalForm = <>
         <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]`}>
-            <Formik
-                initialValues={(entity?.values ?? {}) as EntityValues<M>}
-                enableReinitialize={true}
-                validationSchema={validationSchema}
-                validateOnMount={true}
-                validate={(values) => console.debug("Validating", values)}
-                onSubmit={(values, actions) => {
-                    saveValue(values)
-                        .then(() => onClose())
-                        .finally(() => actions.setSubmitting(false));
-                }}
-            >
-                {({
-                      values,
-                      setFieldValue,
-                      handleSubmit,
-                      isSubmitting
-                  }: FormikProps<EntityValues<M>>) => {
-
-                    // 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 disabled = isSubmitting;
-
-                    const formContext: FormContext<M> = {
-                        collection,
-                        entityId,
-                        values,
-                        path,
-                        setFieldValue,
-                        save: saveValue
-                    };
-
-                    const property: ResolvedProperty<any> | undefined = propertyKey && getPropertyInPath(collection.properties, propertyKey as string);
-                    const fieldProps: PropertyFieldBindingProps<any, M> | undefined = propertyKey && property
-                        ? {
-                            propertyKey: propertyKey as string,
-                            disabled: isSubmitting || isReadOnly(property) || !!property.disabled,
-                            property,
-                            includeDescription: false,
-                            underlyingValueHasChanged: false,
-                            context: formContext,
-                            tableMode: true,
-                            partOfArray: false,
-                            partOfBlock: false,
-                            autoFocus: open
-                        }
-                        : undefined;
-
-                    let internalForm = <>
-                        <div
-                            key={`popup_form_${tableKey}_${entityId}_${propertyKey}`}
-                            className="w-[560px] max-w-full max-h-[85vh]">
-                            <Form
-                                onSubmit={handleSubmit}
-                                noValidate>
-
-                                <div
-                                    className="mb-1 p-4 flex flex-col relative">
-                                    <div
-                                        ref={innerRef}
-                                        className="cursor-auto"
-                                        style={{ cursor: "auto !important" }}>
-                                        {fieldProps &&
-                                            <PropertyFieldBinding {...fieldProps}/>}
-                                    </div>
-                                </div>
-
-                                <DialogActions>
-                                    <Button
-                                        variant="filled"
-                                        color="primary"
-                                        type="submit"
-                                        disabled={disabled}
-                                    >
-                                        Save
-                                    </Button>
-                                </DialogActions>
-
-                            </Form>
-
-                        </div>
-                    </>;
-
-                    const plugins = customizationController.plugins;
-                    if (plugins) {
-                        // const formController: FormContext<M> = {
-                        //     values,
-                        //     setFieldValue
-                        // }
-                        plugins.forEach((plugin: FireCMSPlugin) => {
-                            if (plugin.form?.provider) {
-                                internalForm = (
-                                    <plugin.form.provider.Component
-                                        status={"existing"}
-                                        path={path}
-                                        collection={collection}
-                                        entity={entity}
-                                        context={fireCMSContext}
-                                        currentEntityId={entityId}
-                                        formContext={formContext}
-                                        {...plugin.form.provider.props}>
-                                        {internalForm}
-                                    </plugin.form.provider.Component>
-                                );
-                            }
-                        });
-                    }
-                    return internalForm;
-                }}
-            </Formik>
-
-            {savingError &&
-                <Typography color={"error"}>
-                    {savingError.message}
-                </Typography>
-            }
+            key={`popup_form_${tableKey}_${entityId}_${propertyKey}`}
+            className="w-[700px] max-w-full max-h-[85vh]">
+            <form
+                onSubmit={handleSubmit}
+                noValidate>
+
+                <div
+                    className="mb-1 p-4 flex flex-col relative">
+                    <div
+                        ref={innerRef}
+                        className="cursor-auto"
+                        style={{ cursor: "auto !important" }}>
+                        {fieldProps &&
+                            <PropertyFieldBinding {...fieldProps}/>}
+                    </div>
+                </div>
+
+                <DialogActions>
+                    <Button
+                        variant="filled"
+                        color="primary"
+                        type="submit"
+                        disabled={disabled}
+                    >
+                        Save
+                    </Button>
+                </DialogActions>
+
+            </form>
+
         </div>
-    );
+
+    </>;
+
+    const plugins = customizationController.plugins;
+    if (plugins) {
+        plugins.forEach((plugin: FireCMSPlugin) => {
+            if (plugin.form?.provider) {
+                internalForm = (
+                    <plugin.form.provider.Component
+                        status={"existing"}
+                        path={path}
+                        collection={collection}
+                        entity={entity}
+                        context={fireCMSContext}
+                        currentEntityId={entityId}
+                        formContext={formContext}
+                        {...plugin.form.provider.props}>
+                        {internalForm}
+                    </plugin.form.provider.Component>
+                );
+            }
+        });
+    }
+    const form = <div
+        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}
+
+        {savingError &&
+            <Typography color={"error"}>
+                {savingError.message}
+            </Typography>
+        }
+    </div>;
 
     const draggable = (
         <div
@@ -358,7 +370,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}>
@@ -371,7 +383,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"
@@ -382,7 +394,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
                             event.stopPropagation();
                             onClose();
                         }}>
-                        <ClearIcon className="text-white"
+                        <CloseIcon className="text-white"
                                    size={"small"}/>
                     </IconButton>
                 </div>
@@ -393,9 +405,10 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
 
     return (
         <Portal.Root asChild
-                     container={container}
-        >
-            {draggable}
+                     container={container}>
+            <Formex value={formex}>
+                {draggable}
+            </Formex>
         </Portal.Root>
     );