@firecms/core 3.0.0-canary.140 → 3.0.0-canary.142

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback, useMemo } from "react";
 import { Entity, EntityCollection, EntityReference, FieldProps, ResolvedProperty } from "../../types";
 import { ReferencePreview } from "../../preview";
-import { FieldHelperText, FormikArrayContainer, LabelWithIconAndTooltip } from "../components";
-import { ErrorView } from "../../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { ArrayContainer, ArrayEntryParams, ErrorView } from "../../components";
 import { getIconForProperty, getReferenceFrom } from "../../util";
 
 import { useNavigationController, useReferenceDialog } from "../../hooks";
@@ -74,7 +74,12 @@ export function ArrayOfReferencesFieldBinding({
         referenceDialogController.open();
     };
 
-    const buildEntry = useCallback((index: number, internalId: number) => {
+    const buildEntry = useCallback(({
+                                        index,
+                                        internalId,
+                                        storedProps,
+                                        storeProps
+                                    }: ArrayEntryParams) => {
         const entryValue = value && value.length > index ? value[index] : undefined;
         if (!entryValue)
             return <div>Internal ERROR</div>;
@@ -109,13 +114,14 @@ export function ArrayOfReferencesFieldBinding({
 
         {collection && <div className={"group"}>
 
-            <FormikArrayContainer value={value}
-                                  addLabel={property.name ? "Add reference to " + property.name : "Add reference"}
-                                  name={propertyKey}
-                                  buildEntry={buildEntry}
-                                  disabled={isSubmitting}
-                                  setFieldValue={setFieldValue}
-                                  newDefaultEntry={property.of.defaultValue}/>
+            <ArrayContainer droppableId={propertyKey}
+                            value={value}
+                            disabled={isSubmitting}
+                            buildEntry={buildEntry}
+                            addLabel={property.name ? "Add reference to " + property.name : "Add reference"}
+                            newDefaultEntry={property.of.defaultValue}
+                            onValueChange={(value) => setFieldValue(propertyKey, value)}
+            />
 
             <Button
                 className="my-4 justify-center text-left"

package/src/form/field_bindings/BlockFieldBinding.tsx

@@ -6,11 +6,11 @@ import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { EnumValuesChip } from "../../preview";
 import { FieldProps, FormContext, PropertyFieldBindingProps, PropertyOrBuilder } from "../../types";
-import { getDefaultValueFor, getIconForProperty, } from "../../util";
+import { getDefaultValueFor, getIconForProperty, mergeDeep, } from "../../util";
 import { DEFAULT_ONE_OF_TYPE, DEFAULT_ONE_OF_VALUE } from "../../util/common";
 import { cls, ExpandablePanel, paperMixin, Select, SelectItem, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
-import { ArrayContainer } from "../../components";
+import { ArrayContainer, ArrayEntryParams } from "../../components";
 
 /**
  * If the `oneOf` property is specified, this fields render each array entry as
@@ -48,7 +48,13 @@ export function BlockFieldBinding<T extends Array<any>>({
 
     const [lastAddedId, setLastAddedId] = useState<number | undefined>();
 
-    const buildEntry = useCallback((index: number, internalId: number, isDragging:boolean) => {
+    const buildEntry = ({
+                            index,
+                            internalId,
+                            storedProps,
+                            storeProps
+                        }: ArrayEntryParams) => {
+
         return <BlockEntry
             key={`array_one_of_${internalId}`}
             name={`${propertyKey}.${index}`}
@@ -58,8 +64,10 @@ export function BlockFieldBinding<T extends Array<any>>({
             valueField={property.oneOf!.valueField ?? DEFAULT_ONE_OF_VALUE}
             properties={property.oneOf!.properties}
             autoFocus={internalId === lastAddedId}
-            context={context}/>;
-    }, [context, lastAddedId, property.oneOf, propertyKey, value]);
+            context={context}
+            storeProps={storeProps}
+            storedProps={storedProps}/>;
+    };
 
     const title = (
         <LabelWithIconAndTooltip
@@ -135,6 +143,9 @@ interface BlockEntryProps {
      */
     context: FormContext<any>;
 
+    storedProps?: object,
+    storeProps: (props: object) => void
+
 }
 
 function BlockEntry({
@@ -145,7 +156,9 @@ function BlockEntry({
                         valueField,
                         properties,
                         autoFocus,
-                        context
+                        context,
+                        storedProps,
+                        storeProps
                     }: BlockEntryProps) {
 
     const type = value && value[typeField];
@@ -165,7 +178,9 @@ function BlockEntry({
         }
     }, [type]);
 
-    const property = typeInternal ? properties[typeInternal] : undefined;
+    const propertyInternal = typeInternal ? properties[typeInternal] : undefined;
+
+    const property = storedProps && typeof propertyInternal === "object" ? mergeDeep(propertyInternal, storedProps) : propertyInternal;
 
     const enumValuesConfigs = Object.entries(properties)
         .map(([key, property]) => ({
@@ -183,7 +198,8 @@ function BlockEntry({
             context,
             autoFocus,
             partOfArray: false,
-            minimalistView: true
+            minimalistView: true,
+            onPropertyChange: storeProps,
         }
         : undefined;
 

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -336,7 +336,10 @@ function MapKeyValueRow<T extends Record<string, any>>({
                                         [fieldKey]: newValue
                                     });
                                 }}
-                                buildEntry={(index, internalId) => {
+                                buildEntry={({
+                                                 index,
+                                                 internalId
+                                             }) => {
                                     return <ArrayKeyValueRow
                                         index={index}
                                         id={internalId}

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { FieldProps, Properties, ResolvedProperties } from "../../types";
+import { FieldProps, MapProperty, Properties, PropertyFieldBindingProps, ResolvedProperties } from "../../types";
 
 import { ErrorBoundary } from "../../components";
 import { getIconForProperty, isHidden, isReadOnly, pick } from "../../util";
@@ -25,11 +25,12 @@ export function MapFieldBinding({
                                     includeDescription,
                                     underlyingValueHasChanged,
                                     autoFocus,
-                                    context
+                                    context,
+                                    onPropertyChange
                                 }: FieldProps<Record<string, any>>) {
 
     const pickOnlySomeKeys = property.pickOnlySomeKeys || false;
-    const expanded = (property.expanded === undefined ? true : property.expanded) || autoFocus;
+    const expanded = property.expanded === undefined ? true : property.expanded;
 
     if (!property.properties) {
         throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property ${propertyKey}`);
@@ -50,38 +51,48 @@ export function MapFieldBinding({
     }
 
     const mapFormView = <>
-        <div className="py-1 flex flex-col space-y-2">
-            {Object.entries(mapProperties)
-                .filter(([_, property]) => !isHidden(property))
-                .map(([entryKey, childProperty], index) => {
-                    const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.disabled);
-                    const fieldBindingProps = {
-                            propertyKey: `${propertyKey}.${entryKey}`,
-                            disabled: disabled || thisDisabled,
-                            property: childProperty,
-                            includeDescription,
-                            underlyingValueHasChanged,
-                            context,
-                            partOfArray: false,
-                            minimalistView: false,
-                            autoFocus: autoFocus && index === 0
-                        };
-
-                        return (
-                            <div key={`map-${propertyKey}-${index}`}>
-                                <ErrorBoundary>
-                                    <PropertyFieldBinding
-                                        {...fieldBindingProps}/>
-                                </ErrorBoundary>
-                            </div>
-                        );
-                    }
-                )}
-        </div>
-
-        {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value)}*/}
-
-    </>;
+            <div className="py-1 flex flex-col space-y-2">
+                {Object.entries(mapProperties)
+                    .filter(([_, property]) => !isHidden(property))
+                    .map(([entryKey, childProperty], index) => {
+                            const thisDisabled = isReadOnly(childProperty) || Boolean(childProperty.disabled);
+                            const fieldBindingProps: PropertyFieldBindingProps<any> = {
+                                propertyKey: `${propertyKey}.${entryKey}`,
+                                disabled: disabled || thisDisabled,
+                                property: childProperty,
+                                includeDescription,
+                                underlyingValueHasChanged,
+                                context,
+                                partOfArray: false,
+                                minimalistView: false,
+                                autoFocus: autoFocus && index === 0,
+                                onPropertyChange: function (updatedProperty) {
+                                    onPropertyChange?.({
+                                        properties: {
+                                            [entryKey]: updatedProperty
+                                        }
+                                    } as Partial<MapProperty>);
+                                }
+                            };
+
+                            return (
+                                <div key={`map-${propertyKey}-${index}`}>
+                                    <ErrorBoundary>
+                                        <PropertyFieldBinding
+                                            {...fieldBindingProps}/>
+                                    </ErrorBoundary>
+                                </div>
+                            )
+                                ;
+                        }
+                    )
+                }
+            </div>
+
+            {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value)}*/}
+
+        </>
+    ;
 
     const title = (
         <LabelWithIconAndTooltip
@@ -95,11 +106,16 @@ export function MapFieldBinding({
     return (
         <ErrorBoundary>
 
-            {!minimalistView && !minimalistView && <ExpandablePanel initiallyExpanded={expanded}
-                                                                    innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-white dark:bg-gray-900"}
-                                                                    title={title}>{mapFormView}</ExpandablePanel>}
+            {!minimalistView && <ExpandablePanel initiallyExpanded={expanded}
+                                                 onExpandedChange={(expanded) => {
+                                                     onPropertyChange?.({
+                                                         expanded
+                                                     });
+                                                 }}
+                                                 innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-white dark:bg-gray-900"}
+                                                 title={title}>{mapFormView}</ExpandablePanel>}
 
-            {(minimalistView || minimalistView) && mapFormView}
+            {minimalistView && mapFormView}
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError ?? false}

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -18,7 +18,7 @@ import { cls } from "@firecms/ui";
  * and tables to the specified properties.
  * @group Form fields
  */
-export function ReferenceFieldBinding<M extends Record<string, any>>(props: FieldProps<EntityReference>) {
+export function ReferenceFieldBinding(props: FieldProps) {
 
     if (typeof props.property.path !== "string") {
         return <ReadOnlyFieldBinding {...props}/>

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
-import { CMSType, FieldProps, ResolvedProperty } from "../../types";
-import { FieldHelperText, FormikArrayContainer, LabelWithIconAndTooltip } from "../components";
-import { ErrorBoundary } from "../../components";
-import { getArrayResolvedProperties, getDefaultValueFor, getIconForProperty } from "../../util";
+import { CMSType, FieldProps, PropertyFieldBindingProps, ResolvedProperty } from "../../types";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { ArrayContainer, ArrayEntryParams, ErrorBoundary } from "../../components";
+import { getArrayResolvedProperties, getDefaultValueFor, getIconForProperty, mergeDeep } from "../../util";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
@@ -43,8 +43,6 @@ export function RepeatFieldBinding<T extends Array<any>>({
             ignoreMissingFields: false
         })
     }
-    // if (!resolvedProperties || !Array.isArray(resolvedProperties))
-    //     throw Error("RepeatFieldBinding - Internal error: Expected array in 'property.resolvedProperties'");
 
     const expanded = property.expanded === undefined ? true : property.expanded;
     const ofProperty: ResolvedProperty<CMSType[]> = property.of as ResolvedProperty<CMSType[]>;
@@ -57,33 +55,40 @@ export function RepeatFieldBinding<T extends Array<any>>({
         setValue
     });
 
-    const buildEntry = (index: number, internalId: number) => {
+    const buildEntry = ({
+                            index,
+                            internalId,
+                            storedProps,
+                            storeProps
+                        }: ArrayEntryParams) => {
         const childProperty = resolvedProperties[index] ?? ofProperty;
-        const fieldProps = {
+        const fieldProps: PropertyFieldBindingProps<any, any> = {
             propertyKey: `${propertyKey}.${index}`,
             disabled,
-            property: childProperty,
+            property: storedProps ? mergeDeep(childProperty, storedProps) : childProperty,
+            onPropertyChange: storeProps,
             includeDescription,
             underlyingValueHasChanged,
             context,
             partOfArray: true,
             minimalistView: false,
-            autoFocus: internalId === lastAddedId
+            autoFocus: internalId === lastAddedId,
         };
         return <ErrorBoundary>
             <PropertyFieldBinding {...fieldProps} index={index}/>
         </ErrorBoundary>;
     };
 
-    const arrayContainer = <FormikArrayContainer value={value}
-                                                 addLabel={property.name ? "Add entry to " + property.name : "Add entry"}
-                                                 name={propertyKey}
-                                                 setFieldValue={setFieldValue}
-                                                 buildEntry={buildEntry}
-                                                 onInternalIdAdded={setLastAddedId}
-                                                 disabled={isSubmitting || Boolean(property.disabled)}
-                                                 includeAddButton={!property.disabled}
-                                                 newDefaultEntry={getDefaultValueFor(property.of)}/>;
+    const arrayContainer = <ArrayContainer droppableId={propertyKey}
+                                           addLabel={property.name ? "Add entry to " + property.name : "Add entry"}
+                                           value={value}
+                                           buildEntry={buildEntry}
+                                           onInternalIdAdded={setLastAddedId}
+                                           disabled={isSubmitting || Boolean(property.disabled)}
+                                           includeAddButton={!property.disabled}
+                                           newDefaultEntry={getDefaultValueFor(property.of)}
+                                           onValueChange={(value) => setFieldValue(propertyKey, value)}
+    />;
 
     const title = (<>
         <LabelWithIconAndTooltip
@@ -109,7 +114,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}
-                             error={error}
+                             error={error ? (typeof error === "string" ? error : "A property of this array/repeat has an error") : undefined}
                              disabled={disabled}
                              property={property}/>
 

package/src/hooks/data/save.ts

@@ -1,7 +1,6 @@
 import {
     DataSource,
     Entity,
-    EntityCallbacks,
     EntityCollection,
     EntityValues,
     FireCMSContext,

package/src/types/collections.ts

@@ -585,5 +585,6 @@ export type SelectedCellProps<M extends Record<string, any>> = {
     cellRect: DOMRect;
     width: number;
     height: number;
-    entity: Entity<M>;
+    entityPath: string;
+    entityId: string;
 };

package/src/types/fields.tsx

@@ -110,6 +110,15 @@ export interface FieldProps<T extends CMSType = any, CustomProps = any, M extend
      */
     size?: "smallest" | "small" | "medium";
 
+    /**
+     * Some properties might change internal state (like expanding a panel).
+     * This function should be called when the internal state changes.
+     * This is used to preserve state in array containers.
+     *
+     * @param property
+     */
+    onPropertyChange?: (property: Partial<Property<any>>) => void;
+
 }
 
 /**
@@ -223,4 +232,13 @@ export interface PropertyFieldBindingProps<T extends CMSType, M extends Record<s
      * The size of the field
      */
     size?: "smallest" | "small" | "medium",
+
+    /**
+     * Some properties might change internal state (like expanding a panel).
+     * This function should be called when the internal state changes.
+     * This is used to preserve state in array containers.
+     *
+     * @param property
+     */
+    onPropertyChange?: (property: Partial<Property<any>>) => void;
 }

package/src/util/objects.ts

@@ -125,6 +125,26 @@ export function removeUndefined(value: any, removeEmptyStrings?: boolean): any {
     return value;
 }
 
+export function removeNulls(value: any): any {
+    if (typeof value === "function") {
+        return value;
+    }
+    if (Array.isArray(value)) {
+        return value.map((v: any) => removeNulls(v));
+    }
+    if (typeof value === "object") {
+        const res: object = {};
+        if (value === null)
+            return value;
+        Object.keys(value).forEach((key) => {
+            if (value[key] !== null)
+                (res as any)[key] = removeNulls(value[key]);
+        });
+        return res;
+    }
+    return value;
+}
+
 export function isEmptyObject(obj: object) {
     return obj &&
         Object.getPrototypeOf(obj) === Object.prototype &&

package/src/util/property_utils.tsx

@@ -1,6 +1,13 @@
 import React from "react";
 
-import { EntityCollection, PropertiesOrBuilders, PropertyConfig, PropertyOrBuilder, ResolvedProperty } from "../types";
+import {
+    EntityCollection,
+    PropertiesOrBuilders,
+    PropertyConfig,
+    PropertyOrBuilder,
+    ResolvedProperties,
+    ResolvedProperty
+} from "../types";
 import { isPropertyBuilder } from "./entities";
 import { resolveProperty } from "./resolutions";
 import { CircleIcon, FunctionsIcon } from "@firecms/ui";
@@ -63,7 +70,7 @@ export function getColorForProperty(property: PropertyOrBuilder, fields: Record<
  * @param properties
  * @param path
  */
-export function getPropertyInPath<M extends Record<string, any>>(properties: PropertiesOrBuilders<M>, path: string): PropertyOrBuilder<any, M> | undefined {
+export function getPropertyInPath<M extends Record<string, any>>(properties: PropertiesOrBuilders<M> | ResolvedProperties, path: string): PropertyOrBuilder<any, M> | undefined {
     if (typeof properties === "object") {
         if (path in properties) {
             return properties[path];

package/dist/form/components/FormikArrayContainer.d.ts

@@ -1,19 +0,0 @@
-import React from "react";
-interface ArrayContainerProps<T> {
-    value: T[];
-    name: string;
-    addLabel: string;
-    buildEntry: (index: number, internalId: number) => React.ReactNode;
-    disabled?: boolean;
-    small?: boolean;
-    onInternalIdAdded?: (id: number) => void;
-    includeAddButton?: boolean;
-    newDefaultEntry?: T | null;
-    setFieldValue: (field: string, value: any, shouldValidate?: boolean | undefined) => void;
-    className?: string;
-}
-/**
- * @group Form custom fields
- */
-export declare function FormikArrayContainer<T>({ name, addLabel, value, disabled, buildEntry, small, onInternalIdAdded, includeAddButton, newDefaultEntry, setFieldValue, className }: ArrayContainerProps<T>): import("react/jsx-runtime").JSX.Element;
-export {};

package/src/form/components/FormikArrayContainer.tsx

@@ -1,47 +0,0 @@
-import { ArrayContainer } from "../../components";
-import React from "react";
-
-interface ArrayContainerProps<T> {
-    value: T[];
-    name: string;
-    addLabel: string;
-    buildEntry: (index: number, internalId: number) => React.ReactNode;
-    disabled?: boolean;
-    small?: boolean;
-    onInternalIdAdded?: (id: number) => void;
-    includeAddButton?: boolean;
-    newDefaultEntry?: T | null;
-    setFieldValue: (field: string, value: any, shouldValidate?: boolean | undefined) => void;
-    className?: string;
-}
-
-/**
- * @group Form custom fields
- */
-export function FormikArrayContainer<T>({
-                                            name,
-                                            addLabel,
-                                            value,
-                                            disabled = false,
-                                            buildEntry,
-                                            small,
-                                            onInternalIdAdded,
-                                            includeAddButton,
-                                            newDefaultEntry = null,
-                                            setFieldValue,
-                                            className
-                                        }: ArrayContainerProps<T>) {
-
-    return <ArrayContainer droppableId={name}
-                           addLabel={addLabel}
-                           value={value}
-                           disabled={disabled}
-                           buildEntry={buildEntry}
-                           size={small ? "small" : "medium"}
-                           onInternalIdAdded={onInternalIdAdded}
-                           includeAddButton={includeAddButton}
-                           newDefaultEntry={newDefaultEntry}
-                           className={className}
-                           onValueChange={(value) => setFieldValue(name, value)}
-    />;
-}