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

package/src/form/EntityFormActions.tsx

@@ -0,0 +1,226 @@
+import React from "react";
+import {
+    Entity,
+    EntityAction,
+    FireCMSContext,
+    FormContext,
+    ResolvedEntityCollection,
+    SideEntityController
+} from "../types";
+import {
+    Button,
+    cls,
+    defaultBorderMixin,
+    DialogActions,
+    ErrorIcon,
+    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;
+    layout: "bottom" | "side";
+    savingError?: Error;
+    formex: FormexController<any>;
+    disabled: boolean;
+    status: "new" | "existing" | "copy";
+    pluginActions: React.ReactNode[];
+    openEntityMode: "side_panel" | "full_screen";
+    showDefaultActions?: boolean;
+    navigateBack: () => void;
+    formContext: FormContext
+}
+
+export function EntityFormActions({
+                                      fullPath,
+                                      fullIdPath,
+                                      collection,
+                                      entity,
+                                      layout,
+                                      savingError,
+                                      formex,
+                                      disabled,
+                                      status,
+                                      pluginActions,
+                                      openEntityMode,
+                                      navigateBack,
+                                      formContext
+                                  }: EntityFormActionsProps) {
+
+    const context = useFireCMSContext();
+    const sideEntityController = useSideEntityController();
+
+    return layout === "bottom"
+        ? buildBottomActions({
+            fullPath,
+            fullIdPath,
+            savingError,
+            entity,
+            collection,
+            context,
+            sideEntityController,
+            disabled,
+            status,
+            pluginActions,
+            openEntityMode,
+            navigateBack,
+            formContext,
+            formex
+        })
+        : buildSideActions({
+            fullPath,
+            fullIdPath,
+            savingError,
+            entity,
+            collection,
+            context,
+            sideEntityController,
+            disabled,
+            status,
+            pluginActions,
+            openEntityMode,
+            navigateBack,
+            formContext,
+            formex
+        });
+}
+
+type ActionsViewProps<M extends object> = {
+    fullPath: string,
+    fullIdPath?: string,
+    savingError: Error | undefined,
+    entity: Entity<M> | undefined,
+    formActions?: EntityAction[],
+    collection: ResolvedEntityCollection,
+    context: FireCMSContext,
+    sideEntityController: SideEntityController,
+    disabled: boolean,
+    status: "new" | "existing" | "copy",
+    pluginActions?: React.ReactNode[],
+    openEntityMode: "side_panel" | "full_screen";
+    navigateBack: () => void;
+    formContext: FormContext,
+    formex: FormexController<any>;
+};
+
+function buildBottomActions<M extends object>({
+                                                  savingError,
+                                                  entity,
+                                                  fullPath,
+                                                  fullIdPath,
+                                                  formActions,
+                                                  collection,
+                                                  context,
+                                                  sideEntityController,
+                                                  disabled,
+                                                  status,
+                                                  pluginActions,
+                                                  openEntityMode,
+                                                  navigateBack,
+                                                  formContext,
+                                                  formex
+                                              }: ActionsViewProps<M>) {
+
+    const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
+
+    return <DialogActions position={"absolute"}>
+        {savingError &&
+            <div className="text-right">
+                <Typography color={"error"}>{savingError.message}</Typography>
+            </div>
+        }
+        {entity && (formActions ?? []).length > 0 && <div className="flex-grow flex overflow-auto no-scrollbar">
+            {(formActions ?? []).map(action => (
+                <IconButton
+                    key={action.name}
+                    color="primary"
+                    onClick={(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+                        event.stopPropagation();
+                        if (entity)
+                            action.onClick({
+                                view: "form",
+                                entity,
+                                fullPath: fullPath ?? collection.path,
+                                fullIdPath: fullIdPath ?? collection.id,
+                                collection: collection,
+                                context,
+                                sideEntityController,
+                                openEntityMode: openEntityMode,
+                                navigateBack,
+                                formContext
+                            });
+                    }}>
+                    {action.icon}
+                </IconButton>
+            ))}
+        </div>}
+        {pluginActions}
+        <Button variant="text" disabled={disabled || formex.isSubmitting}
+                color={"primary"}
+                type="reset">
+            {status === "existing" ? "Discard" : "Clear"}
+        </Button>
+        <Button variant={"filled"}
+                color="primary"
+                type="submit"
+                disabled={disabled || formex.isSubmitting}
+                startIcon={hasErrors ? <ErrorIcon/> : undefined}>
+            {status === "existing" && "Save"}
+            {status === "copy" && "Create copy"}
+            {status === "new" && "Create"}
+        </Button>
+
+    </DialogActions>;
+}
+
+function buildSideActions<M extends object>({
+                                                savingError,
+                                                entity,
+                                                formActions,
+                                                fullPath,
+                                                fullIdPath,
+                                                openEntityMode,
+                                                collection,
+                                                context,
+                                                sideEntityController,
+                                                disabled,
+                                                status,
+                                                pluginActions,
+                                                formex
+                                            }: ActionsViewProps<M>) {
+
+    const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
+
+    return <div
+        className={cls("overflow-auto h-full flex flex-col gap-2 w-80 2xl:w-96 px-4 py-16 sticky top-0 border-l", defaultBorderMixin)}>
+        <LoadingButton fullWidth={true}
+                       variant="filled"
+                       color="primary"
+                       type="submit"
+                       size={"large"}
+                       startIcon={hasErrors ? <ErrorIcon/> : undefined}
+                       disabled={disabled || formex.isSubmitting}>
+            {status === "existing" && "Save"}
+            {status === "copy" && "Create copy"}
+            {status === "new" && "Create"}
+        </LoadingButton>
+        <Button fullWidth={true} variant="text" disabled={disabled || formex.isSubmitting} type="reset">
+            {status === "existing" ? "Discard" : "Clear"}
+        </Button>
+
+        {pluginActions}
+
+        {savingError &&
+            <div className="text-right">
+                <Typography color={"error"}>{savingError.message}</Typography>
+            </div>
+        }
+    </div>;
+}

package/src/form/PropertyFieldBinding.tsx

@@ -5,19 +5,19 @@ import { Field, FieldProps as FormexFieldProps, getIn } from "@firecms/formex";
 
 import {
     CMSType,
-    EntityCollection,
     FieldProps,
     FireCMSPlugin,
     PluginFieldBuilderParams,
     Property,
     PropertyFieldBindingProps,
     PropertyOrBuilder,
+    ResolvedEntityCollection,
     ResolvedProperty
 } from "../types";
 import { ReadOnlyFieldBinding } from "./field_bindings/ReadOnlyFieldBinding";
 
 import { isHidden, isPropertyBuilder, isReadOnly, resolveProperty } from "../util";
-import { useCustomizationController } from "../hooks";
+import { useAuthController, useCustomizationController } from "../hooks";
 import { Typography } from "@firecms/ui";
 import { getFieldConfig, getFieldId } from "../core";
 import { ErrorBoundary } from "../components";
@@ -51,6 +51,13 @@ export const PropertyFieldBinding = React.memo(PropertyFieldBindingInternal, (a:
     if (a.propertyKey !== b.propertyKey) {
         return false;
     }
+    if (a.index !== b.index) {
+        return false;
+    }
+
+    if (a.size !== b.size) {
+        return false;
+    }
     const aIsBuilder = isPropertyBuilder(a.property) || a.property.fromBuilder;
     const bIsBuilder = isPropertyBuilder(b.property) || b.property.fromBuilder;
 
@@ -67,24 +74,29 @@ export const PropertyFieldBinding = React.memo(PropertyFieldBindingInternal, (a:
     return false;
 }) as typeof PropertyFieldBindingInternal;
 
-function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Record<string, any> = Record<string, any>>
+function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Record<string, any> = any>
 ({
      propertyKey,
      property,
      context,
      includeDescription,
      underlyingValueHasChanged,
-     disabled,
-     tableMode,
+     disabled: disabledProp,
      partOfArray,
      partOfBlock,
+     minimalistView,
      autoFocus,
+     index,
+     size,
+     onPropertyChange,
  }: PropertyFieldBindingProps<T, M>): ReactElement<PropertyFieldBindingProps<T, M>> {
 
+    const authController = useAuthController();
     const customizationController = useCustomizationController();
 
     return (
         <Field
+            key={propertyKey}
             name={propertyKey}
         >
             {(fieldProps) => {
@@ -92,14 +104,17 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                 let Component: ComponentType<FieldProps<T>> | undefined;
                 const resolvedProperty: ResolvedProperty<T> | null = resolveProperty({
                     propertyKey,
-                    propertyValue: fieldProps.field.value,
                     propertyOrBuilder: property,
                     values: fieldProps.form.values,
                     path: context.path,
                     entityId: context.entityId,
-                    fields: customizationController.propertyConfigs
+                    propertyConfigs: customizationController.propertyConfigs,
+                    index,
+                    authController
                 });
 
+                const disabled = disabledProp || isReadOnly(resolvedProperty) || Boolean(resolvedProperty?.disabled) || context.disabled;
+
                 if (resolvedProperty === null || isHidden(resolvedProperty)) {
                     return <></>;
                 } else if (isReadOnly(resolvedProperty)) {
@@ -111,16 +126,24 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                 } else {
                     const propertyConfig = getFieldConfig(resolvedProperty, customizationController.propertyConfigs);
                     if (!propertyConfig) {
-                        console.log("INTERNAL: Could not find field config for property", { propertyKey, resolvedProperty, fields: customizationController.propertyConfigs, propertyConfig });
+                        console.log("INTERNAL: Could not find field config for property", {
+                            propertyKey,
+                            property,
+                            resolvedProperty,
+                            fields: customizationController.propertyConfigs,
+                            propertyConfig
+                        });
                         throw new Error(`INTERNAL: Could not find field config for property ${propertyKey}`);
                     }
                     const configProperty = resolveProperty({
+                        propertyKey,
                         propertyOrBuilder: propertyConfig.property,
-                        propertyValue: fieldProps.field.value,
                         values: fieldProps.form.values,
                         path: context.path,
                         entityId: context.entityId,
-                        fields: customizationController.propertyConfigs
+                        propertyConfigs: customizationController.propertyConfigs,
+                        index,
+                        authController
                     });
                     Component = configProperty.Field as ComponentType<FieldProps<T>>;
                 }
@@ -128,7 +151,9 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                     console.warn(`No field component found for property ${propertyKey}`);
                     console.warn("Property:", property);
                     return (
-                        <div>{`Currently the field ${resolvedProperty.dataType} is not supported`}</div>
+                        <div className={"w-full"}>
+                            {`Currently the field ${resolvedProperty.dataType} is not supported`}
+                        </div>
                     );
                 }
 
@@ -139,23 +164,25 @@ function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Rec
                     underlyingValueHasChanged,
                     context,
                     disabled,
-                    tableMode,
                     partOfArray,
                     partOfBlock,
-                    autoFocus
+                    minimalistView,
+                    autoFocus,
+                    size,
+                    onPropertyChange
                 };
 
                 return <FieldInternal
                     Component={Component as ComponentType<FieldProps>}
                     componentProps={componentProps}
-                    fieldProps={fieldProps}/>;
+                    formexFieldProps={fieldProps}/>;
             }}
         </Field>
     );
 
 }
 
-type ResolvedPropertyFieldBindingProps<T extends CMSType = CMSType, M extends Record<string, any> = Record<string, any>> =
+type ResolvedPropertyFieldBindingProps<T extends CMSType = CMSType, M extends Record<string, any> = any> =
     Omit<PropertyFieldBindingProps<T, M>, "property">
     & {
     property: ResolvedProperty<T>
@@ -169,52 +196,59 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
          property,
          includeDescription,
          underlyingValueHasChanged,
-         tableMode,
          partOfArray,
          partOfBlock,
+         minimalistView,
          autoFocus,
          context,
-         disabled
+         disabled,
+         size,
+         onPropertyChange
      },
-     fieldProps
+     formexFieldProps
  }:
-     {
-         Component: ComponentType<FieldProps<T, any, M>>,
-         componentProps: ResolvedPropertyFieldBindingProps<T, M>,
-         fieldProps: FormexFieldProps<T, any>
-     }) {
+ {
+     Component: ComponentType<FieldProps<T, any, M>>,
+     componentProps: ResolvedPropertyFieldBindingProps<T, M>,
+     formexFieldProps: FormexFieldProps<T, any>
+ }) {
 
     const { plugins } = useCustomizationController();
 
     const customFieldProps: any = property.customProps;
-    const value = fieldProps.field.value;
-    // const initialValue = fieldProps.meta.initialValue;
-    const error = getIn(fieldProps.form.errors, propertyKey);
-    const touched = getIn(fieldProps.form.touched, propertyKey);
+    const value = formexFieldProps.field.value;
+    const error = getIn(formexFieldProps.form.errors, propertyKey);
+    const touched = getIn(formexFieldProps.form.touched, propertyKey);
 
     const showError: boolean = error &&
-        (fieldProps.form.submitCount > 0 || property.validation?.unique) &&
+        (formexFieldProps.form.submitCount > 0 || property.validation?.unique) &&
         (!Array.isArray(error) || !!error.filter((e: any) => !!e).length);
 
-    const WrappedComponent: ComponentType<FieldProps<T, any, M>> | null = useWrappedComponent(context.path, context.collection, propertyKey, property, Component, plugins);
+    const WrappedComponent: ComponentType<FieldProps<T, any, M>> | null = useWrappedComponent({
+        path: context.path,
+        collection: context.collection,
+        propertyKey: propertyKey,
+        property: property,
+        Component: Component,
+        plugins: plugins
+    });
     const UsedComponent: ComponentType<FieldProps<T>> = WrappedComponent ?? Component;
 
-    const isSubmitting = fieldProps.form.isSubmitting;
+    const isSubmitting = formexFieldProps.form.isSubmitting;
 
     const setValue = useCallback((value: T | null, shouldValidate?: boolean) => {
-        fieldProps.form.setFieldTouched(propertyKey, true, false);
-        fieldProps.form.setFieldValue(propertyKey, value, shouldValidate);
+        formexFieldProps.form.setFieldTouched(propertyKey, true, false);
+        formexFieldProps.form.setFieldValue(propertyKey, value, shouldValidate);
     }, []);
 
     const setFieldValue = useCallback((otherPropertyKey: string, value: CMSType | null, shouldValidate?: boolean) => {
-        fieldProps.form.setFieldTouched(propertyKey, true, false);
-        fieldProps.form.setFieldValue(otherPropertyKey, value, shouldValidate);
+        formexFieldProps.form.setFieldTouched(propertyKey, true, false);
+        formexFieldProps.form.setFieldValue(otherPropertyKey, value, shouldValidate);
     }, []);
 
     const cmsFieldProps: FieldProps<T, CustomProps, M> = {
         propertyKey,
         value: value as T,
-        // initialValue,
         setValue,
         setFieldValue,
         error,
@@ -225,12 +259,14 @@ function FieldInternal<T extends CMSType, CustomProps, M extends Record<string,
         property: property as ResolvedProperty<T>,
         disabled: disabled ?? false,
         underlyingValueHasChanged: underlyingValueHasChanged ?? false,
-        tableMode: tableMode ?? false,
         partOfArray: partOfArray ?? false,
         partOfBlock: partOfBlock ?? false,
+        minimalistView: minimalistView ?? false,
         autoFocus: autoFocus ?? false,
         customProps: customFieldProps,
-        context
+        context,
+        size,
+        onPropertyChange
     };
 
     return (
@@ -266,13 +302,24 @@ const shouldPropertyReRender = (property: PropertyOrBuilder | ResolvedProperty,
     }
 }
 
-function useWrappedComponent<T extends CMSType = CMSType, M extends Record<string, any> = any>(
-    path: string,
-    collection: EntityCollection<M>,
+interface UseWrappedComponentParams<T extends CMSType = CMSType, M extends Record<string, any> = any> {
+    path?: string,
+    collection?: ResolvedEntityCollection<M>,
     propertyKey: string,
     property: ResolvedProperty<T>,
     Component: ComponentType<FieldProps<T, any, M>>,
     plugins?: FireCMSPlugin[]
+}
+
+function useWrappedComponent<T extends CMSType = CMSType, M extends Record<string, any> = any>(
+    {
+        path,
+        collection,
+        propertyKey,
+        property,
+        Component,
+        plugins
+    }: UseWrappedComponentParams<T, M>
 ): ComponentType<FieldProps<T, any, M>> | null {
 
     const wrapperRef = useRef<ComponentType<FieldProps<T, any, M>> | null>((() => {
@@ -288,7 +335,7 @@ function useWrappedComponent<T extends CMSType = CMSType, M extends Record<strin
                         Field: Component,
                         plugin,
                         path,
-                        collection
+                        collection,
                     };
                     const enabled = plugin.form?.fieldBuilderEnabled?.(params);
                     if (enabled === undefined || enabled)

package/src/form/components/CustomIdField.tsx

@@ -68,7 +68,8 @@ export function CustomIdField<M extends Record<string, any>>({
                 ? (
                     <>
 
-                        <Tooltip title={"Copy"}>
+                        <Tooltip title={"Copy"}
+                                 asChild={true}>
                             <IconButton onClick={(e) => copy(entity.id)}
                                         aria-label="copy-id">
                                 <ContentCopyIcon size={"small"}/>
@@ -76,7 +77,8 @@ export function CustomIdField<M extends Record<string, any>>({
                         </Tooltip>
 
                         {customizationController?.entityLinkBuilder &&
-                            <Tooltip title={"Open in the console"}>
+                            <Tooltip title={"Open in the console"}
+                                     asChild={true}>
                                 <IconButton component={"a"}
                                             href={customizationController.entityLinkBuilder({ entity })}
                                             rel="noopener noreferrer"
@@ -98,8 +100,12 @@ export function CustomIdField<M extends Record<string, any>>({
 
             {enumValues &&
                 <Select
+                    size={"large"}
                     error={error}
-                    onValueChange={(v) => onChange(v as string)}
+                    fullWidth={true}
+                    onValueChange={(v) => {
+                        onChange(v as string);
+                    }}
                     {...fieldProps}
                     renderValue={(option) => {
                         const enumConfig = enumValues.find(e => e.id === option);

package/src/form/components/ErrorFocus.tsx

@@ -1,51 +1,44 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useRef } from "react";
 import { useFormex } from "@firecms/formex";
 
 export const ErrorFocus = ({ containerRef }:
                                {
                                    containerRef?: React.RefObject<HTMLDivElement>
                                }) => {
-    const { isSubmitting, isValidating, errors } = useFormex();
+    const {
+        isValidating,
+        errors,
+        version
+    } = useFormex();
+
+    const prevVersion = useRef(version);
 
     useEffect(() => {
+
+        if (version === prevVersion.current) {
+            return;
+        }
+
         const keys = Object.keys(errors);
 
-        // Whenever there are errors and the form is submitting but finished validating.
-        if (keys.length > 0 && isSubmitting && !isValidating) {
+        // Whenever there are errors and the form has been submitted and is not validating
+        if (!isValidating && keys.length > 0) {
             const errorElement = containerRef?.current?.querySelector<HTMLDivElement>(
                 `#form_field_${keys[0]}`
             );
 
-            if (errorElement && containerRef?.current) {
-                const scrollableParent = getScrollableParent(containerRef.current);
-                if (scrollableParent) {
-                    const top = errorElement.getBoundingClientRect().top;
-                    scrollableParent.scrollTo({
-                        top: scrollableParent.scrollTop + top - 196,
-                        behavior: "smooth"
-                    });
-                }
+            if (errorElement) {
+                errorElement.scrollIntoView({
+                    behavior: "smooth",
+                    block: "center"
+                });
                 const input = errorElement.querySelector("input");
                 if (input) input.focus();
             }
+            prevVersion.current = version;
         }
-    }, [isSubmitting, isValidating, errors, containerRef]);
+    }, [isValidating, errors, containerRef, version]);
 
     // This component does not render anything by itself.
     return null;
 };
-
-const isScrollable = (ele: HTMLElement | null) => {
-    const hasScrollableContent = ele && ele.scrollHeight > ele.clientHeight;
-
-    const overflowYStyle = ele ? window.getComputedStyle(ele).overflowY : null;
-    const isOverflowHidden = overflowYStyle && overflowYStyle.indexOf("hidden") !== -1;
-
-    return hasScrollableContent && !isOverflowHidden;
-};
-
-const getScrollableParent = (ele: HTMLElement | null): HTMLElement | null => {
-    return (!ele || ele === document.body)
-        ? document.body
-        : (isScrollable(ele) ? ele : getScrollableParent(ele.parentNode as HTMLElement));
-};

package/src/form/components/FieldHelperText.tsx

@@ -1,4 +1,4 @@
-import { ResolvedProperty } from "../../types";
+import { Property, ResolvedProperty } from "../../types";
 import { IconButton, InfoIcon, Tooltip, Typography } from "@firecms/ui";
 
 /**
@@ -13,8 +13,8 @@ export function FieldHelperText({
                                     disabled
                                 }: {
                                     error?: string,
-                                    showError: boolean,
-                                    property: ResolvedProperty,
+                                    showError?: boolean,
+                                    property: ResolvedProperty | Property,
                                     includeDescription?: boolean,
                                     disabled?: boolean,
                                 }
@@ -44,7 +44,7 @@ export function FieldHelperText({
         {property.longDescription &&
             <Tooltip title={property.longDescription}
                      side="bottom"
-            >
+                     asChild={true}>
                 <IconButton
                     size={"small"}
                     className="self-start">

package/src/form/components/FormEntry.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { ErrorBoundary } from "../../components";
+
+export function FormEntry({
+                              propertyKey,
+                              widthPercentage = 100,
+                              children
+                          }: {
+    propertyKey: string;
+    widthPercentage?: number;
+    children: React.ReactNode;
+}) {
+    return (
+        <div id={`form_field_${propertyKey}`}
+             className={"relative"}
+             style={{ width: widthPercentage === 100 ? "100%" : `calc(${widthPercentage}% - 8px)` }}>
+            <ErrorBoundary>
+                {children}
+            </ErrorBoundary>
+        </div>
+    );
+}