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

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -1,17 +1,9 @@
 import React from "react";
-import {
-    CMSType,
-    FieldProps,
-    FormContext,
-    MapProperty,
-    Properties,
-    ResolvedProperties,
-    ResolvedProperty
-} from "../../types";
+import { FieldProps, Properties, ResolvedProperties } from "../../types";
 
 import { ErrorBoundary } from "../../components";
 import { getIconForProperty, isHidden, pick } from "../../util";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, InputLabel, Select, SelectItem } from "@firecms/ui";
 
@@ -29,8 +21,7 @@ export function MapFieldBinding({
                                     error,
                                     disabled,
                                     property,
-                                    partOfBlock,
-                                    tableMode,
+                                    minimalistView,
                                     includeDescription,
                                     underlyingValueHasChanged,
                                     autoFocus,
@@ -63,16 +54,15 @@ export function MapFieldBinding({
             {Object.entries(mapProperties)
                 .filter(([_, property]) => !isHidden(property))
                 .map(([entryKey, childProperty], index) => {
-                        const fieldProps = {
+                        const fieldBindingProps = {
                             propertyKey: `${propertyKey}.${entryKey}`,
                             disabled,
                             property: childProperty,
                             includeDescription,
                             underlyingValueHasChanged,
                             context,
-                            tableMode: false,
                             partOfArray: false,
-                            partOfBlock: false,
+                            minimalistView: false,
                             autoFocus: autoFocus && index === 0
                         };
 
@@ -80,7 +70,7 @@ export function MapFieldBinding({
                             <div key={`map-${propertyKey}-${index}`}>
                                 <ErrorBoundary>
                                     <PropertyFieldBinding
-                                        {...fieldProps}/>
+                                        {...fieldBindingProps}/>
                                 </ErrorBoundary>
                             </div>
                         );
@@ -93,20 +83,22 @@ export function MapFieldBinding({
     </>;
 
     const title = (
-        <LabelWithIcon icon={getIconForProperty(property, "small")}
-                       required={property.validation?.required}
-                       title={property.name}
-                       className={"text-text-secondary dark:text-text-secondary-dark"}/>
+        <LabelWithIconAndTooltip
+            propertyKey={propertyKey}
+            icon={getIconForProperty(property, "small")}
+            required={property.validation?.required}
+            title={property.name}
+            className={"text-text-secondary dark:text-text-secondary-dark"}/>
     );
 
     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>}
+            {!minimalistView && !minimalistView && <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 || minimalistView) && mapFormView}
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError ?? false}

package/src/form/field_bindings/MarkdownEditorFieldBinding.tsx

@@ -0,0 +1,150 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import {
+    FieldHelperText,
+    FieldProps,
+    getIconForProperty,
+    LabelWithIconAndTooltip, PropertyOrBuilder,
+    randomString,
+    ResolvedArrayProperty,
+    ResolvedStringProperty,
+    useStorageSource
+} from "../../index";
+import { cls, 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,
+                                               isSubmitting,
+                                               context,
+                                               customProps,
+                                           }: FieldProps<string, MarkdownEditorFieldProps>) {
+
+    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 = useRef(0);
+    const [fieldVersion, setFieldVersion] = useState(0);
+    const internalValue = useRef(value);
+
+    const onContentChange = useCallback((content: string) => {
+        internalValue.current = content;
+        setValue(content);
+    }, [setValue]);
+
+    useEffect(() => {
+        if (internalValue.current !== value) {
+            internalValue.current = value;
+            setFieldVersion(fieldVersion + 1);
+            // fieldVersion.current = fieldVersion.current + 1;
+        }
+    }, [value]);
+
+
+    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 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
+        }) 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}
+        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={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+            <div className={cls("rounded-md", fieldBackgroundMixin, fieldBackgroundHoverMixin)}>
+                {editor}
+            </div>
+            <FieldHelperText includeDescription={includeDescription}
+                             showError={showError}
+                             error={error}
+                             property={property}/>
+        </>
+
+    );
+
+}

package/src/form/field_bindings/{MultiSelectBinding.tsx → MultiSelectFieldBinding.tsx}

@@ -1,7 +1,7 @@
 import React, { useCallback } from "react";
 
 import { EnumType, FieldProps, ResolvedProperty } from "../../types";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { EnumValuesChip } from "../../preview";
 import { enumToObjectEntries, getIconForProperty, getLabelOrConfigFrom } from "../../util";
 import { CloseIcon, MultiSelect, MultiSelectItem } from "@firecms/ui";
@@ -14,17 +14,18 @@ import { useClearRestoreValue } from "../useClearRestoreValue";
  * and tables to the specified properties.
  * @group Form fields
  */
-export function MultiSelectBinding({
-                                       propertyKey,
-                                       value,
-                                       setValue,
-                                       error,
-                                       showError,
-                                       disabled,
-                                       property,
-                                       includeDescription,
-                                       autoFocus
-                                   }: FieldProps<EnumType[], any, any>) {
+export function MultiSelectFieldBinding({
+                                            propertyKey,
+                                            value,
+                                            setValue,
+                                            error,
+                                            showError,
+                                            disabled,
+                                            property,
+                                            includeDescription,
+                                            size = "medium",
+                                            autoFocus
+                                        }: FieldProps<EnumType[], any, any>) {
 
     const of: ResolvedProperty<any> | ResolvedProperty<any>[] = property.of;
     if (!of) {
@@ -79,16 +80,20 @@ export function MultiSelectBinding({
     }, [enumValues, setValue, value]);
 
     return (
-        <div className="mt-0.5 ml-0.5  mt-2">
+        <>
             <MultiSelect
+                className={"w-full mt-2"}
+                size={size === "medium" ? "medium" : "small"}
                 value={validValue ? value.map((v) => v.toString()) : []}
                 disabled={disabled}
-                label={<LabelWithIcon icon={getIconForProperty(property, "small")}
-                                      required={property.validation?.required}
-                                      title={property.name}
-                                      className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
-                renderValue={useCallback((v: string) => renderValue(v, false), [renderValue])}
-                onMultiValueChange={(updatedValue: string[]) => {
+                modalPopover={true}
+                label={<LabelWithIconAndTooltip
+                    propertyKey={propertyKey}
+                    icon={getIconForProperty(property, "small")}
+                    required={property.validation?.required}
+                    title={property.name}
+                    className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
+                onValueChange={(updatedValue: string[]) => {
                     let newValue: EnumType[] | null;
                     if (of && (of as ResolvedProperty)?.dataType === "number") {
                         newValue = updatedValue ? (updatedValue as string[]).map((e) => parseFloat(e)) : [];
@@ -109,6 +114,6 @@ export function MultiSelectBinding({
                              disabled={disabled}
                              property={property}/>
 
-        </div>
+        </>
     );
 }

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -1,9 +1,9 @@
 import React from "react";
 
-import { Entity, FieldProps } from "../../types";
+import { FieldProps } from "../../types";
 
 import { PropertyPreview } from "../../preview";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { ErrorBoundary } from "../../components";
 import { getIconForProperty } from "../../util";
 import { cls, paperMixin } from "@firecms/ui";
@@ -21,7 +21,7 @@ export function ReadOnlyFieldBinding({
                                          value,
                                          error,
                                          showError,
-                                         tableMode,
+                                         minimalistView,
                                          property,
                                          includeDescription,
                                          context
@@ -34,10 +34,12 @@ export function ReadOnlyFieldBinding({
 
         <>
 
-            {!tableMode && <LabelWithIcon icon={getIconForProperty(property, "small")}
-                                          required={property.validation?.required}
-                                          title={property.name}
-                                          className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+            {!minimalistView && <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name}
+                className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
             }
 
             <div

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -3,12 +3,13 @@ import React, { useCallback, useMemo } from "react";
 import { Entity, EntityCollection, EntityReference, FieldProps } from "../../types";
 import { useNavigationController, useReferenceDialog } from "../../hooks";
 import { ReadOnlyFieldBinding } from "./ReadOnlyFieldBinding";
-import { FieldHelperText, LabelWithIcon } from "../components";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { ErrorView } from "../../components";
-import { ReferencePreview } from "../../preview";
-import { getIconForProperty, getReferenceFrom } from "../../util";
-import { Button } from "@firecms/ui";
+import { EmptyValue, ReferencePreview } from "../../preview";
+import { getIconForProperty, getReferenceFrom, IconForView } from "../../util";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { EntityPreviewContainer } from "../../components/EntityPreview";
+import { cls } from "@firecms/ui";
 
 /**
  * Field that opens a reference selection dialog.
@@ -28,17 +29,19 @@ export function ReferenceFieldBinding<M extends Record<string, any>>(props: Fiel
 }
 
 function ReferenceFieldBindingInternal({
+                                           propertyKey,
                                            value,
                                            setValue,
                                            error,
                                            showError,
                                            isSubmitting,
                                            disabled,
+                                           minimalistView,
                                            touched,
                                            autoFocus,
                                            property,
                                            includeDescription,
-                                           context
+                                           size = "medium"
                                        }: FieldProps<EntityReference>) {
     if (!property.path) {
         throw new Error("Property path is required for ReferenceFieldBinding");
@@ -75,17 +78,19 @@ function ReferenceFieldBindingInternal({
         }
     );
 
-    const onEntryClick = useCallback((e: React.SyntheticEvent) => {
+    const onEntryClick = (e: React.SyntheticEvent) => {
         e.preventDefault();
         referenceDialogController.open();
-    }, [referenceDialogController]);
+    };
 
     return (
         <>
-            <LabelWithIcon icon={getIconForProperty(property, "small")}
-                           required={property.validation?.required}
-                           title={property.name}
-                           className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>
+            {!minimalistView && <LabelWithIconAndTooltip
+                propertyKey={propertyKey}
+                icon={getIconForProperty(property, "small")}
+                required={property.validation?.required}
+                title={property.name}
+                className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}/>}
 
             {!collection && <ErrorView
                 error={"The specified collection does not exist. Check console"}/>}
@@ -96,7 +101,7 @@ function ReferenceFieldBindingInternal({
                     disabled={!property.path}
                     previewProperties={property.previewProperties}
                     hover={!disabled}
-                    size={"medium"}
+                    size={size}
                     onClick={disabled || isSubmitting ? undefined : onEntryClick}
                     reference={value}
                     includeEntityLink={property.includeEntityLink}
@@ -104,12 +109,16 @@ function ReferenceFieldBindingInternal({
                 />}
 
                 {!value && <div className="justify-center text-left">
-                    <Button variant="outlined"
-                            color="primary"
-                            disabled={disabled || isSubmitting}
-                            onClick={onEntryClick}>
-                        Edit {property.name}
-                    </Button>
+                    <EntityPreviewContainer className={cls("px-6 h-16 text-sm font-medium flex items-center gap-6",
+                        disabled || isSubmitting
+                            ? "text-slate-500"
+                            : "cursor-pointer text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800")}
+                                            onClick={onEntryClick}
+                                            size={"medium"}>
+                        <IconForView collectionOrView={collection}
+                                     className={"text-gray-300 dark:text-gray-600"}/>
+                        {`Edit ${property.name}`.toUpperCase()}
+                    </EntityPreviewContainer>
                 </div>}
             </>}
 

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, LabelWithIcon } from "../components";
+import { FieldHelperText, FormikArrayContainer, LabelWithIconAndTooltip } from "../components";
 import { ErrorBoundary } from "../../components";
-import { getDefaultValueFor, getIconForProperty } from "../../util";
+import { getArrayResolvedProperties, getDefaultValueFor, getIconForProperty } from "../../util";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
 import { ExpandablePanel, Typography } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
@@ -23,7 +23,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
                                                              isSubmitting,
                                                              setValue,
                                                              setFieldValue,
-                                                             tableMode,
+                                                             minimalistView,
                                                              property,
                                                              includeDescription,
                                                              underlyingValueHasChanged,
@@ -34,8 +34,17 @@ export function RepeatFieldBinding<T extends Array<any>>({
     if (!property.of)
         throw Error("RepeatFieldBinding misconfiguration. Property `of` not set");
 
-    if (!property.resolvedProperties || !Array.isArray(property.resolvedProperties))
-        throw Error("RepeatFieldBinding - Internal error: Expected array in 'property.resolvedProperties'");
+    let resolvedProperties = "resolvedProperties" in property ? property.resolvedProperties : undefined;
+    if (!resolvedProperties) {
+        resolvedProperties = getArrayResolvedProperties({
+            propertyValue: value,
+            propertyKey,
+            property,
+            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[]>;
@@ -49,7 +58,7 @@ export function RepeatFieldBinding<T extends Array<any>>({
     });
 
     const buildEntry = (index: number, internalId: number) => {
-        const childProperty = property.resolvedProperties[index] ?? ofProperty;
+        const childProperty = resolvedProperties[index] ?? ofProperty;
         const fieldProps = {
             propertyKey: `${propertyKey}.${index}`,
             disabled,
@@ -57,13 +66,12 @@ export function RepeatFieldBinding<T extends Array<any>>({
             includeDescription,
             underlyingValueHasChanged,
             context,
-            tableMode: false,
             partOfArray: true,
-            partOfBlock: false,
+            minimalistView: false,
             autoFocus: internalId === lastAddedId
         };
         return <ErrorBoundary>
-            <PropertyFieldBinding {...fieldProps}/>
+            <PropertyFieldBinding {...fieldProps} index={index}/>
         </ErrorBoundary>;
     };
 
@@ -78,10 +86,12 @@ export function RepeatFieldBinding<T extends Array<any>>({
                                                  newDefaultEntry={getDefaultValueFor(property.of)}/>;
 
     const title = (<>
-        <LabelWithIcon icon={getIconForProperty(property, "small")}
-                       required={property.validation?.required}
-                       title={property.name}
-                       className={"flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
+        <LabelWithIconAndTooltip
+            propertyKey={propertyKey}
+            icon={getIconForProperty(property, "small")}
+            required={property.validation?.required}
+            title={property.name}
+            className={"flex flex-grow text-text-secondary dark:text-text-secondary-dark"}/>
         {Array.isArray(value) && <Typography variant={"caption"} className={"px-4"}>({value.length})</Typography>}
     </>);
 
@@ -89,13 +99,13 @@ export function RepeatFieldBinding<T extends Array<any>>({
 
         <>
 
-            {!tableMode && <ExpandablePanel initiallyExpanded={expanded}
-                                            className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
-                                            title={title}>
+            {!minimalistView && <ExpandablePanel initiallyExpanded={expanded}
+                                                 className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
+                                                 title={title}>
                 {arrayContainer}
             </ExpandablePanel>}
 
-            {tableMode && arrayContainer}
+            {minimalistView && arrayContainer}
 
             <FieldHelperText includeDescription={includeDescription}
                              showError={showError}

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -3,9 +3,10 @@ import React, { useCallback } from "react";
 import { EnumType, FieldProps } from "../../types";
 import { FieldHelperText, LabelWithIcon } from "../components";
 import { EnumValuesChip } from "../../preview";
-import { getIconForProperty } from "../../util";
+import { getIconForProperty, resolveEnumValues } from "../../util";
 import { ClearIcon, cls, IconButton, Select, SelectItem } from "@firecms/ui";
 import { useClearRestoreValue } from "../useClearRestoreValue";
+import { PropertyIdCopyTooltip } from "../../components";
 
 type SelectProps<T extends EnumType> = FieldProps<T>;
 
@@ -27,10 +28,11 @@ export function SelectFieldBinding<T extends EnumType>({
                                                            autoFocus,
                                                            touched,
                                                            property,
-                                                           includeDescription
+                                                           includeDescription,
+                                                           size = "medium"
                                                        }: SelectProps<T>) {
 
-    const enumValues = property.enumValues;
+    const enumValues = resolveEnumValues(property.enumValues ?? []);
 
     useClearRestoreValue({
         property,
@@ -48,15 +50,20 @@ export function SelectFieldBinding<T extends EnumType>({
         <>
 
             <Select
+                size={size === "medium" ? "medium" : "small"}
                 value={value !== undefined && value != null ? value.toString() : ""}
                 disabled={disabled}
                 position="item-aligned"
                 inputClassName={cls("w-full")}
-                label={<LabelWithIcon icon={getIconForProperty(property, "small")}
-                                      required={property.validation?.required}
-                                      title={property.name}
-                                      className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}
-                />}
+                label={
+                    <PropertyIdCopyTooltip propertyKey={propertyKey}>
+                        <LabelWithIcon
+                            icon={getIconForProperty(property, "small")}
+                            required={property.validation?.required}
+                            title={property.name}
+                            className={"text-text-secondary dark:text-text-secondary-dark ml-3.5"}
+                        />
+                    </PropertyIdCopyTooltip>}
                 endAdornment={
                     property.clearable && <IconButton
                         onClick={handleClearClick}>
@@ -73,7 +80,7 @@ export function SelectFieldBinding<T extends EnumType>({
                     return <EnumValuesChip
                         enumKey={enumKey}
                         enumValues={enumValues}
-                        size={"medium"}/>;
+                        size={size}/>;
                 }}
             >
                 {enumValues && enumValues.map((option) => {
@@ -83,7 +90,7 @@ export function SelectFieldBinding<T extends EnumType>({
                         <EnumValuesChip
                             enumKey={String(option.id)}
                             enumValues={enumValues}
-                            size={"medium"}/>
+                            size={size}/>
                     </SelectItem>
                 })}
             </Select>