@firecms/core 3.0.0-beta.8 → 3.0.0-beta.9

package/src/util/resolutions.ts

@@ -217,6 +217,38 @@ export function resolveProperty<T extends CMSType = CMSType, M extends Record<st
         : null;
 }
 
+export function getArrayResolvedProperties<M>({
+                                           propertyKey,
+                                           propertyValue,
+                                           property,
+                                           ...props
+                                       }: {
+    propertyValue: any,
+    propertyKey?: string,
+    property: ArrayProperty<any> | ResolvedArrayProperty<any>,
+    ignoreMissingFields: boolean,
+    values?: Partial<M>;
+    previousValues?: Partial<M>;
+    path?: string;
+    entityId?: string;
+    index?: number;
+    fromBuilder?: boolean;
+    fields?: Record<string, PropertyConfig>
+}) {
+
+    const of = property.of;
+    return Array.isArray(propertyValue)
+        ? propertyValue.map((v: any, index: number) => {
+            return resolveProperty({
+                propertyKey: `${propertyKey}.${index}`,
+                propertyOrBuilder: of,
+                ...props,
+                index
+            });
+        }).filter(e => Boolean(e)) as ResolvedProperty[]
+        : [];
+}
+
 export function resolveArrayProperty<T extends any[], M>({
                                                              propertyKey,
                                                              property,
@@ -254,17 +286,14 @@ export function resolveArrayProperty<T extends any[], M>({
             } as ResolvedArrayProperty;
         } else {
             const of = property.of;
-            const resolvedProperties: ResolvedProperty[] = Array.isArray(propertyValue)
-                ? propertyValue.map((v: any, index: number) => resolveProperty({
-                    propertyKey: `${propertyKey}.${index}`,
-                    propertyOrBuilder: of,
-                    ignoreMissingFields,
-                    ...props,
-                    index
-                })).filter(e => Boolean(e)) as ResolvedProperty[]
-                : [];
+            const resolvedProperties = getArrayResolvedProperties({
+                propertyValue,
+                propertyKey,
+                property,
+                ignoreMissingFields,
+                ...props
+            });
             const ofProperty = resolveProperty({
-                propertyKey: `${propertyKey}`,
                 propertyOrBuilder: of,
                 ignoreMissingFields,
                 ...props
@@ -295,6 +324,7 @@ export function resolveArrayProperty<T extends any[], M>({
             }).filter(e => Boolean(e)) as ResolvedProperty[]
             : [];
         const properties = resolveProperties<any>({
+            propertyKey,
             properties: property.oneOf.properties,
             ignoreMissingFields,
             ...props
@@ -327,10 +357,12 @@ export function resolveArrayProperty<T extends any[], M>({
  * @param value
  */
 export function resolveProperties<M extends Record<string, any>>({
+                                                                     propertyKey,
                                                                      properties,
                                                                      ignoreMissingFields,
                                                                      ...props
                                                                  }: {
+    propertyKey?: string,
     properties: PropertiesOrBuilders<M>,
     values?: Partial<M>,
     previousValues?: Partial<M>,
@@ -344,7 +376,7 @@ export function resolveProperties<M extends Record<string, any>>({
     return Object.entries<PropertyOrBuilder>(properties as Record<string, PropertyOrBuilder>)
         .map(([key, property]) => {
             const childResolvedProperty = resolveProperty({
-                propertyKey: key,
+                propertyKey: propertyKey ? `${propertyKey}.${key}` : undefined,
                 propertyOrBuilder: property,
                 ignoreMissingFields,
                 ...props

package/src/util/storage.ts

@@ -1,8 +1,11 @@
 import {
+    ArrayProperty,
     EntityValues,
+    PropertyOrBuilder,
     ResolvedArrayProperty,
     ResolvedStringProperty,
     StorageConfig,
+    StringProperty,
     UploadedFileContext
 } from "../types";
 import { randomString } from "./strings";
@@ -13,12 +16,12 @@ interface ResolveFilenameStringParams<M extends object> {
     values: EntityValues<M>;
     entityId: string;
     path?: string;
-    property: ResolvedStringProperty | ResolvedArrayProperty<string[]>;
+    property: ResolvedStringProperty | ResolvedArrayProperty<string[]>,
     file: File;
     propertyKey: string;
 }
 
-export async function resolveFilenameString<M extends object>(
+export async function resolveStorageFilenameString<M extends object>(
     {
         input,
         storage,
@@ -30,6 +33,7 @@ export async function resolveFilenameString<M extends object>(
         propertyKey
     }: ResolveFilenameStringParams<M>): Promise<string> {
     let result;
+
     if (typeof input === "function") {
         result = await input({
             path,

package/src/util/useStorageUploadController.tsx

@@ -2,9 +2,11 @@ import Resizer from "react-image-file-resizer";
 import equal from "react-fast-compare";
 
 import {
+    ArrayProperty,
     EntityValues,
     ImageCompression,
     Property,
+    PropertyOrBuilder,
     ResolvedArrayProperty,
     ResolvedStringProperty,
     StorageConfig,
@@ -14,7 +16,8 @@ import {
 import { useCallback, useEffect, useState } from "react";
 import { PreviewSize } from "../preview";
 import { randomString } from "./strings";
-import { resolveFilenameString, resolveStoragePathString } from "./storage";
+import { resolveStorageFilenameString, resolveStoragePathString } from "./storage";
+import { resolveProperty } from "./resolutions";
 
 /**
  * Internal representation of an item in the storage
@@ -48,7 +51,7 @@ export function useStorageUploadController<M extends object>({
                                                                      value: string | string[] | null;
                                                                      path?: string,
                                                                      propertyKey: string,
-                                                                     property: ResolvedStringProperty | ResolvedArrayProperty<string[]>,
+                                                                     property: StringProperty | ArrayProperty<string[]> | ResolvedStringProperty | ResolvedArrayProperty<string[]>,
                                                                      storageSource: StorageSource,
                                                                      disabled: boolean,
                                                                      onChange: (value: string | string[] | null) => void
@@ -93,15 +96,20 @@ export function useStorageUploadController<M extends object>({
         }
     }, [internalInitialValue, value, initialValue]);
 
+    const resolvedProperty = resolveProperty({
+        propertyOrBuilder: property as PropertyOrBuilder,
+        values: entityValues
+    }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
+
     const fileNameBuilder = useCallback(async (file: File) => {
         if (storage.fileName) {
-            const fileName = await resolveFilenameString({
+            const fileName = await resolveStorageFilenameString({
                 input: storage.fileName,
                 storage,
                 values: entityValues,
                 entityId,
                 path,
-                property,
+                property: resolvedProperty,
                 file,
                 propertyKey
             });
@@ -111,7 +119,7 @@ export function useStorageUploadController<M extends object>({
             return fileName;
         }
         return randomString() + "_" + file.name;
-    }, [entityId, entityValues, path, property, propertyKey, storage]);
+    }, [entityId, entityValues, path, resolvedProperty, propertyKey, storage]);
 
     const storagePathBuilder = useCallback((file: File) => {
         return resolveStoragePathString({
@@ -120,11 +128,11 @@ export function useStorageUploadController<M extends object>({
             values: entityValues,
             entityId,
             path,
-            property,
+            property: resolvedProperty,
             file,
             propertyKey
         }) ?? "/";
-    }, [entityId, entityValues, path, property, propertyKey, storage]);
+    }, [entityId, entityValues, path, resolvedProperty, propertyKey, storage]);
 
     const onFileUploadComplete = useCallback(async (uploadedPath: string,
                                                     entry: StorageFieldItem,

package/dist/components/PropertyIdCopyTooltipContent.d.ts

@@ -1,3 +0,0 @@
-export declare function PropertyIdCopyTooltipContent({ propertyId }: {
-    propertyId: string;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/form/PropertiesForm.d.ts

@@ -1,8 +0,0 @@
-import { PropertiesOrBuilders } from "../types";
-import { FormexController } from "@firecms/formex";
-export type PropertiesFormProps<M extends Record<string, any> = Record<string, any>> = {
-    properties: PropertiesOrBuilders<M>;
-    propertiesOrder?: string[];
-    formex: FormexController<M>;
-};
-export declare function PropertiesForm<M extends Record<string, any> = Record<string, any>>({ properties, propertiesOrder, formex }: PropertiesFormProps<M>): import("react/jsx-runtime").JSX.Element;

package/dist/form/field_bindings/MarkdownFieldBinding.d.ts

@@ -1,9 +0,0 @@
-import { FieldProps } from "../../types";
-/**
- * Render a markdown field that allows edition and seeing the preview.
- *
- * This is one of the internal components that get mapped natively inside forms
- * and tables to the specified properties.
- * @group Form fields
- */
-export declare function MarkdownFieldBinding({ propertyKey, value, setValue, error, showError, disabled, autoFocus, touched, property, tableMode, includeDescription, context }: FieldProps<string>): import("react/jsx-runtime").JSX.Element;

package/src/components/PropertyIdCopyTooltipContent.tsx

@@ -1,27 +0,0 @@
-import { ContentCopyIcon, IconButton, Typography } from "@firecms/ui";
-import { useCallback, useState } from "react";
-
-export function PropertyIdCopyTooltipContent({ propertyId }: { propertyId: string }) {
-
-    const [copied, setCopied] = useState(false);
-
-    return (
-        <div className={"flex flex-row gap-2 items-center justify-center text-white"}>
-            <div>
-                <Typography variant={"caption"} className={"min-w-20 text-slate-400"}
-                            color={"disabled"}>{copied ? "Copied" : "Property ID"}</Typography>
-                <Typography variant={"caption"} className={"text-white"}><code>{propertyId}</code></Typography>
-            </div>
-            <IconButton size={"small"}>
-                <ContentCopyIcon size={"smallest"}
-                                  className={"text-white"}
-                                  onClick={useCallback(() => {
-                                      navigator.clipboard.writeText(propertyId);
-                                      setCopied(true);
-                                      setTimeout(() => setCopied(false), 2000);
-                                  }, [propertyId])}
-                />
-            </IconButton>
-        </div>
-    );
-}

package/src/form/PropertiesForm.tsx

@@ -1,81 +0,0 @@
-import { FormContext, PropertiesOrBuilders, PropertyFieldBindingProps } from "../types";
-import { Tooltip } from "@firecms/ui";
-import { PropertyIdCopyTooltipContent } from "../components/PropertyIdCopyTooltipContent";
-import { PropertyFieldBinding } from "./PropertyFieldBinding";
-import { ErrorBoundary } from "../components";
-import { isHidden, isReadOnly, resolveProperties } from "../util";
-import { FormexController } from "@firecms/formex";
-
-export type PropertiesFormProps<M extends Record<string, any> = Record<string, any>> = {
-    properties: PropertiesOrBuilders<M>;
-    propertiesOrder?: string[];
-    formex: FormexController<M>;
-}
-
-export function PropertiesForm<M extends Record<string, any> = Record<string, any>>({
-                                                                                        properties,
-                                                                                        propertiesOrder,
-                                                                                        formex
-                                                                                    }: PropertiesFormProps<M>) {
-
-    const resolvedProperties = resolveProperties({ properties });
-
-    const formContext: FormContext<M> = {
-        // @ts-ignore
-        setFieldValue: useCallback(formex.setFieldValue, []),
-        values: formex.values ?? {},
-        // @ts-ignore
-        save: useCallback(() => {
-            throw new Error("Not implemented. You currently can't call save from a custom field, within a PropertiesForm (it works in standard Entity forms)");
-        }, []),
-        formex
-    };
-
-    const formFields = (
-        <div className={"flex flex-col gap-8"}>
-            {(propertiesOrder ?? Object.keys(resolvedProperties))
-                .map((key) => {
-
-                    const property = resolvedProperties[key];
-                    if (!property) {
-                        console.warn(`Property ${key} not found in collection PropertiesForm`);
-                        return null;
-                    }
-
-                    const disabled = formex.isSubmitting || isReadOnly(property) || Boolean(property.disabled);
-                    const hidden = isHidden(property);
-                    if (hidden) return null;
-                    const cmsFormFieldProps: PropertyFieldBindingProps<any, M> = {
-                        propertyKey: key,
-                        disabled,
-                        property,
-                        includeDescription: property.description || property.longDescription,
-                        context: formContext,
-                        tableMode: false,
-                        partOfArray: false,
-                        partOfBlock: false,
-                        autoFocus: false
-                    };
-
-                    return (
-                        <div id={`form_field_${key}`}
-                             key={`field_${key}`}>
-                            <ErrorBoundary>
-                                <Tooltip title={<PropertyIdCopyTooltipContent propertyId={key}/>}
-                                         delayDuration={800}
-                                         side={"left"}
-                                         align={"start"}
-                                         sideOffset={16}>
-                                    <PropertyFieldBinding {...cmsFormFieldProps}/>
-                                </Tooltip>
-                            </ErrorBoundary>
-                        </div>
-                    );
-                })
-                .filter(Boolean)}
-
-        </div>
-    );
-
-    return <div></div>
-}