@firecms/core 3.0.0-canary.28 → 3.0.0-canary.281

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -2,13 +2,13 @@ import React, { useEffect, useState } from "react";
 import { DataType, FieldProps, GeoPoint } from "../../types";
 
 import { ArrayContainer } from "../../components";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import {
     AddIcon,
     ArrowDropDownIcon,
     BooleanSwitchWithLabel,
     Button,
-    cn,
+    cls,
     DateTimeField,
     defaultBorderMixin,
     ExpandablePanel,
@@ -21,6 +21,7 @@ import {
 } from "@firecms/ui";
 import { getDefaultValueForDataType, getIconForProperty } from "../../util";
 import { useCustomizationController } from "../../hooks";
+import { getIn } from "@firecms/formex";
 
 type MapEditViewRowState = [number, {
     key: string,
@@ -40,7 +41,7 @@ export function KeyValueFieldBinding({
                                          disabled,
                                          property,
                                          setValue,
-                                         tableMode,
+                                         minimalistView,
                                          includeDescription,
                                          underlyingValueHasChanged,
                                          autoFocus,
@@ -52,12 +53,17 @@ export function KeyValueFieldBinding({
     if (!property.keyValue) {
         throw Error(`Your property ${propertyKey} needs to have the 'keyValue' prop in order to use this field binding`);
     }
+
+    const initialValues = getIn(context.formex.initialValues, propertyKey);
+
     const mapFormView = <MapEditView value={value}
                                      setValue={setValue}
                                      disabled={disabled}
+                                     initialValue={initialValues}
                                      fieldName={property.name ?? propertyKey}/>;
 
-    const title = <LabelWithIcon
+    const title = <LabelWithIconAndTooltip
+        propertyKey={propertyKey}
         icon={getIconForProperty(property, "small")}
         required={property.validation?.required}
         title={property.name}
@@ -66,11 +72,11 @@ export function KeyValueFieldBinding({
     return (
         <>
 
-            {!tableMode && <ExpandablePanel initiallyExpanded={expanded}
-                                            title={title}
-                                            className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>{mapFormView}</ExpandablePanel>}
+            {!minimalistView && <ExpandablePanel initiallyExpanded={expanded}
+                                                 title={title}
+                                                 innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>{mapFormView}</ExpandablePanel>}
 
-            {tableMode && mapFormView}
+            {minimalistView && mapFormView}
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}
@@ -84,6 +90,7 @@ export function KeyValueFieldBinding({
 
 interface MapEditViewParams<T extends Record<string, any>> {
     value?: T;
+    initialValue?: T;
     setValue: (value: (T | null)) => void;
     fieldName?: string,
     disabled?: boolean
@@ -91,14 +98,15 @@ interface MapEditViewParams<T extends Record<string, any>> {
 
 function MapEditView<T extends Record<string, any>>({
                                                         value,
+                                                        initialValue,
                                                         setValue,
                                                         fieldName,
                                                         disabled
                                                     }: MapEditViewParams<T>) {
     const [internalState, setInternalState] = React.useState<MapEditViewRowState[]>(
-        Object.keys(value ?? {}).map((key) => [getRandomId(), {
+        Object.keys(initialValue ?? {}).map((key) => [getRandomId(), {
             key,
-            dataType: getDataType(value?.[key]) ?? "string"
+            dataType: getDataType(initialValue?.[key]) ?? "string"
         }])
     );
 
@@ -121,8 +129,6 @@ function MapEditView<T extends Record<string, any>>({
         setInternalState(newRowIds);
     }, [value]);
 
-    const originalValue = React.useRef<T>(value ?? {} as T);
-
     const updateDataType = (rowId: number, dataType: DataType) => {
         if (!rowId) {
             console.warn("No key selected for data type update");
@@ -168,7 +174,7 @@ function MapEditView<T extends Record<string, any>>({
                         }
 
                         const newValue = { ...(value ?? {}) } as T;
-                        if (typeof originalValue.current === "object" && fieldKey in originalValue.current) {
+                        if (typeof initialValue === "object" && fieldKey in initialValue) {
                             // @ts-ignore
                             newValue[fieldKey] = undefined; // set to undefined to remove from the object, the datasource will remove it from the backend
                         } else {
@@ -186,7 +192,7 @@ function MapEditView<T extends Record<string, any>>({
                                            value={value ?? {} as T}
                                            onDeleteClick={() => {
                                                const newValue = { ...(value ?? {}) as T };
-                                               if (originalValue.current && fieldKey in originalValue.current) {
+                                               if (initialValue && fieldKey in initialValue) {
                                                    // @ts-ignore
                                                    newValue[fieldKey] = undefined;
                                                } else {
@@ -264,7 +270,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                 placeholder={"value"}
                 value={entryValue}
                 type={dataType === "number" ? "number" : "text"}
-                size={"small"}
+                size={"medium"}
                 disabled={disabled || !fieldKey}
                 onChange={(event) => {
                     if (dataType === "number") {
@@ -294,7 +300,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                 }}/>;
         } else if (dataType === "date") {
             return <DateTimeField value={entryValue}
-                                  size={"small"}
+                                  size={"medium"}
                                   locale={locale}
                                   disabled={disabled || !fieldKey}
                                   onChange={(date) => {
@@ -305,7 +311,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
                                   }}/>;
         } else if (dataType === "boolean") {
             return <BooleanSwitchWithLabel value={entryValue}
-                                           size={"small"}
+                                           size={"medium"}
                                            position={"start"}
                                            disabled={disabled || !fieldKey}
                                            onValueChange={(newValue) => {
@@ -316,21 +322,24 @@ function MapKeyValueRow<T extends Record<string, any>>({
                                            }}/>;
         } else if (dataType === "array") {
             return <div
-                className={cn(defaultBorderMixin, "ml-2 pl-2 border-l border-solid")}>
+                className={cls(defaultBorderMixin, "ml-2 pl-2 border-l border-solid")}>
                 <ArrayContainer value={entryValue}
                                 newDefaultEntry={""}
                                 droppableId={rowId.toString()}
                                 addLabel={fieldKey ? `Add to ${fieldKey}` : "Add"}
                                 size={"small"}
                                 disabled={disabled || !fieldKey}
-                                includeAddButton={true}
+                                canAddElements={true}
                                 onValueChange={(newValue) => {
                                     setValue({
                                         ...value,
                                         [fieldKey]: newValue
                                     });
                                 }}
-                                buildEntry={(index, internalId) => {
+                                buildEntry={({
+                                                 index,
+                                                 internalId
+                                             }) => {
                                     return <ArrayKeyValueRow
                                         index={index}
                                         id={internalId}
@@ -349,7 +358,7 @@ function MapKeyValueRow<T extends Record<string, any>>({
             </div>;
         } else if (dataType === "map") {
             return <div
-                className={cn(defaultBorderMixin, "ml-2 pl-2 border-l border-solid")}>
+                className={cls(defaultBorderMixin, "ml-2 pl-2 border-l border-solid")}>
                 <MapEditView value={entryValue}
                              fieldName={fieldKey}
                              setValue={(updatedValue) => {
@@ -375,12 +384,12 @@ function MapKeyValueRow<T extends Record<string, any>>({
             <Typography key={rowId.toString()}
                         component={"div"}
                         className="font-mono flex flex-row gap-1">
-                <div className="w-[200px] max-w-[25%]">
+                <div className="w-[300px] max-w-[30%]">
                     <TextField
                         value={fieldKey}
                         placeholder={"key"}
                         disabled={disabled || (entryValue !== undefined && entryValue !== null && entryValue !== "")}
-                        size={"small"}
+                        size={"medium"}
                         onChange={(event) => {
                             onFieldKeyChange(event.target.value);
                         }}/>
@@ -389,32 +398,32 @@ function MapKeyValueRow<T extends Record<string, any>>({
                 <div className="flex-grow">
                     {(dataType !== "map" && dataType !== "array") && buildInput(entryValue, fieldKey, dataType)}
                 </div>
-                <Menu
-                    trigger={<IconButton size={"small"}
-                                         className="h-7 w-7">
-                        <ArrowDropDownIcon/>
-                    </IconButton>}
-                >
-                    <MenuItem dense
-                              onClick={() => doUpdateDataType("string")}>string</MenuItem>
-                    <MenuItem dense
-                              onClick={() => doUpdateDataType("number")}>number</MenuItem>
-                    <MenuItem dense
-                              onClick={() => doUpdateDataType("boolean")}>boolean</MenuItem>
-                    <MenuItem dense
-                              onClick={() => doUpdateDataType("date")}>date</MenuItem>
-                    <MenuItem dense
-                              onClick={() => doUpdateDataType("map")}>map</MenuItem>
-                    <MenuItem dense
-                              onClick={() => doUpdateDataType("array")}>array</MenuItem>
-                </Menu>
-
-                <IconButton aria-label="delete"
-                            size={"small"}
-                            onClick={onDeleteClick}
-                            className="h-7 w-7">
-                    <RemoveIcon size={"small"}/>
-                </IconButton>
+                <div className={"flex flex-col"}>
+                    <Menu
+                        trigger={<IconButton size={"smallest"}>
+                            <ArrowDropDownIcon size={"small"}/>
+                        </IconButton>}
+                    >
+                        <MenuItem dense
+                                  onClick={() => doUpdateDataType("string")}>string</MenuItem>
+                        <MenuItem dense
+                                  onClick={() => doUpdateDataType("number")}>number</MenuItem>
+                        <MenuItem dense
+                                  onClick={() => doUpdateDataType("boolean")}>boolean</MenuItem>
+                        <MenuItem dense
+                                  onClick={() => doUpdateDataType("date")}>date</MenuItem>
+                        <MenuItem dense
+                                  onClick={() => doUpdateDataType("map")}>map</MenuItem>
+                        <MenuItem dense
+                                  onClick={() => doUpdateDataType("array")}>array</MenuItem>
+                    </Menu>
+
+                    <IconButton aria-label="delete"
+                                size={"smallest"}
+                                onClick={onDeleteClick}>
+                        <RemoveIcon size={"smallest"}/>
+                    </IconButton>
+                </div>
             </Typography>
 
             {(dataType === "map" || dataType === "array") && buildInput(entryValue, fieldKey, dataType)}
@@ -448,7 +457,7 @@ function ArrayKeyValueRow<T>({
         if (dataType === "string" || dataType === "number") {
             return <TextField value={entryValue}
                               type={dataType === "number" ? "number" : "text"}
-                              size={"small"}
+                              size={"medium"}
                               onChange={(event) => {
                                   if (dataType === "number") {
                                       const numberValue = event.target.value ? parseFloat(event.target.value) : undefined;
@@ -465,7 +474,7 @@ function ArrayKeyValueRow<T>({
                               }}/>;
         } else if (dataType === "date") {
             return <DateTimeField value={entryValue}
-                                  size={"small"}
+                                  size={"medium"}
                                   locale={locale}
                                   onChange={(date) => {
                                       setValue(date as T);
@@ -482,7 +491,7 @@ function ArrayKeyValueRow<T>({
                 Arrays of arrays are not supported.
             </Typography>;
         } else if (dataType === "map") {
-            return <div className={cn(defaultBorderMixin, "ml-2 pl-2 border-l border-solid")}>
+            return <div className={cls(defaultBorderMixin, "ml-2 pl-2 border-l border-solid")}>
                 <MapEditView value={entryValue}
                              setValue={(updatedValue) => {
                                  setValue(updatedValue);

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -1,11 +1,11 @@
 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, pick } from "../../util";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { getIconForProperty, isHidden, isReadOnly, pick } from "../../util";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { ExpandablePanel, InputLabel, Select, SelectItem } from "@firecms/ui";
+import { cls, ExpandablePanel, InputLabel, Select, SelectItem } from "@firecms/ui";
 
 /**
  * Field that renders the children property fields
@@ -21,17 +21,17 @@ export function MapFieldBinding({
                                     error,
                                     disabled,
                                     property,
-                                    setValue,
-                                    partOfBlock,
-                                    tableMode,
+                                    partOfArray,
+                                    minimalistView: minimalistViewProp,
                                     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;
+    const minimalistView = minimalistViewProp || property.minimalistView;
 
     if (!property.properties) {
         throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property ${propertyKey}`);
@@ -52,57 +52,73 @@ 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 fieldProps = {
-                            propertyKey: `${propertyKey}.${entryKey}`,
-                            disabled,
-                            property: childProperty,
-                            includeDescription,
-                            underlyingValueHasChanged,
-                            context,
-                            tableMode: false,
-                            partOfArray: false,
-                            partOfBlock: false,
-                            autoFocus: autoFocus && index === 0
-                        };
-                        return (
-                            <div key={`map-${propertyKey}-${index}`}>
-                                <ErrorBoundary>
-                                    <PropertyFieldBinding
-                                        {...fieldProps}/>
-                                </ErrorBoundary>
-                            </div>
-                        );
-                    }
-                )}
-        </div>
-
-        {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value)}*/}
-
-    </>;
-
-    const title = (
-        <LabelWithIcon icon={getIconForProperty(property, "small")}
-                       required={property.validation?.required}
-                       title={property.name}
-                       className={"text-text-secondary dark:text-text-secondary-dark"}/>
-    );
+            <div
+                className={cls("py-1 flex flex-col space-y-2", minimalistView && property.widthPercentage !== undefined ? "mt-8" : undefined)}>
+                {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,
+                                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}`} className={"relative"}>
+                                    <ErrorBoundary>
+                                        <PropertyFieldBinding
+                                            {...fieldBindingProps}/>
+                                    </ErrorBoundary>
+                                </div>
+                            )                                ;
+                        }
+                    )
+                }
+            </div>
+
+            {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value)}*/}
+
+        </>
+    ;
 
     return (
         <ErrorBoundary>
 
-            {!tableMode && !partOfBlock && <ExpandablePanel initiallyExpanded={expanded}
-                                                            className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-slate-50 bg-opacity-50 dark:bg-gray-900"}
-                                                            title={title}>{mapFormView}</ExpandablePanel>}
-
-            {(tableMode || partOfBlock) && mapFormView}
+            {!minimalistView && <ExpandablePanel initiallyExpanded={expanded}
+                                                 onExpandedChange={(expanded) => {
+                                                     onPropertyChange?.({
+                                                         expanded
+                                                     });
+                                                 }}
+                                                 className={property.widthPercentage !== undefined ? "mt-8" : undefined}
+                                                 innerClassName={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2 bg-white dark:bg-surface-900"}
+                                                 title={<LabelWithIconAndTooltip
+                                                     propertyKey={propertyKey}
+                                                     icon={getIconForProperty(property, "small")}
+                                                     required={property.validation?.required}
+                                                     title={property.name}
+                                                     className={"text-text-secondary dark:text-text-secondary-dark"}/>}>
+                {mapFormView}
+            </ExpandablePanel>}
+
+            {minimalistView && mapFormView}
 
             <FieldHelperText includeDescription={includeDescription}
-                             showError={showError}
-                             error={error ? (typeof error === "string" ? error : "A property of this map has an error") : undefined}
+                             showError={showError ?? false}
+                             error={error && !partOfArray ? (typeof error === "string" ? error : "A property of this map has an error") : undefined}
                              disabled={disabled}
                              property={property}/>
 
@@ -128,6 +144,8 @@ const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue
         <InputLabel>Add property</InputLabel>
         <Select
             value={""}
+            size={"large"}
+            fullWidth={true}
             disabled={disabled}
             onValueChange={handleAddProperty}
             renderValue={(key) => (properties as Properties)[key].name || key}>

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -0,0 +1,159 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+    FieldHelperText,
+    FieldProps,
+    getIconForProperty,
+    LabelWithIconAndTooltip,
+    PropertyOrBuilder,
+    randomString,
+    ResolvedArrayProperty,
+    ResolvedStringProperty,
+    useAuthController,
+    useStorageSource
+} from "../../index";
+import { cls, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundMixin } from "@firecms/ui";
+import { FireCMSEditor, FireCMSEditorProps } from "@firecms/editor";
+import { resolveProperty, resolveStorageFilenameString, resolveStoragePathString } from "../../util";
+
+interface MarkdownEditorFieldProps {
+    highlight?: { from: number, to: number };
+    editorProps?: Partial<FireCMSEditorProps>
+}
+
+export function MarkdownEditorFieldBinding({
+                                               property,
+                                               propertyKey,
+                                               value,
+                                               setValue,
+                                               includeDescription,
+                                               showError,
+                                               error,
+                                               minimalistView,
+                                               disabled: disabledProp,
+                                               isSubmitting,
+                                               context,
+                                               customProps,
+                                           }: FieldProps<string, MarkdownEditorFieldProps>) {
+
+    const authController = useAuthController();
+    const disabled = disabledProp || isSubmitting;
+    const highlight = customProps?.highlight;
+    const editorProps = customProps?.editorProps;
+    const storageSource = useStorageSource();
+    const storage = property.storage;
+
+    const entityValues = context.values;
+    const entityId = context.entityId;
+    const path = context.path;
+
+    const [fieldVersion, setFieldVersion] = useState(0);
+    const internalValue = useRef<string | null>(value);
+
+    const onContentChange = useCallback((content: string) => {
+        if (content === value || (value === null && content === "")) {
+            return;
+        }
+        internalValue.current = content;
+        setValue(content);
+    }, [setValue]);
+
+    useEffect(() => {
+        if (internalValue.current !== value) {
+            internalValue.current = value;
+            setFieldVersion(fieldVersion + 1);
+        }
+    }, [value]);
+
+    const resolvedProperty = resolveProperty({
+        propertyOrBuilder: property as PropertyOrBuilder,
+        values: entityValues,
+        authController
+    }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
+
+    const fileNameBuilder = useCallback(async (file: File) => {
+        if (storage?.fileName) {
+            const fileName = await resolveStorageFilenameString({
+                input: storage.fileName,
+                storage,
+                values: entityValues,
+                entityId,
+                path,
+                property: resolvedProperty,
+                file,
+                propertyKey
+            });
+            if (!fileName || fileName.length === 0) {
+                throw Error("You need to return a valid filename");
+            }
+            return fileName;
+        }
+        return randomString() + "_" + file.name;
+    }, [entityId, entityValues, path, resolvedProperty, propertyKey, storage]);
+
+    const storagePathBuilder = useCallback((file: File) => {
+        if (!storage) return "/";
+        const resolvedProperty = resolveProperty({
+            propertyOrBuilder: property,
+            values: entityValues,
+            authController
+        }) as ResolvedStringProperty | ResolvedArrayProperty<string[]>;
+        return resolveStoragePathString({
+            input: storage.storagePath,
+            storage,
+            values: entityValues,
+            entityId,
+            path,
+            property: resolvedProperty,
+            file,
+            propertyKey
+        }) ?? "/";
+    }, [entityId, entityValues, path, property, propertyKey, storage]);
+
+    const editor = <FireCMSEditor
+        content={value}
+        onMarkdownContentChange={onContentChange}
+        version={context.formex.version + fieldVersion}
+        highlight={highlight}
+        disabled={disabled}
+        handleImageUpload={async (file: File) => {
+            const storagePath = storagePathBuilder(file);
+            const fileName = await fileNameBuilder(file);
+            const result = await storageSource.uploadFile({
+                file,
+                fileName,
+                path: storagePath,
+            });
+            const downloadConfig = await storageSource.getDownloadURL(result.path);
+            const url = downloadConfig.url;
+            if (!url) {
+                throw new Error("Error uploading image");
+            }
+            return url;
+        }}
+        {...editorProps}
+    />;
+
+    if (minimalistView)
+        return editor;
+
+    return (
+        <>
+            <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name}
+                className={"h-8 text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+            <div
+                className={cls("rounded-md", fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin)}>
+                {editor}
+            </div>
+            <FieldHelperText includeDescription={includeDescription}
+                             showError={showError}
+                             error={error}
+                             property={property}/>
+        </>
+
+    );
+
+}