@firecms/core 3.0.0-canary.17 → 3.0.0-canary.170

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -1,9 +1,9 @@
 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";
 
@@ -21,17 +21,16 @@ export function MapFieldBinding({
                                     error,
                                     disabled,
                                     property,
-                                    setValue,
-                                    partOfBlock,
-                                    tableMode,
+                                    minimalistView,
                                     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}`);
@@ -52,56 +51,74 @@ 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)}*/}
-
-    </>;
+            <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 = (
-        <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 && <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-surface-900"}
+                                                 title={title}>{mapFormView}</ExpandablePanel>}
 
-            {(tableMode || partOfBlock) && mapFormView}
+            {minimalistView && mapFormView}
 
             <FieldHelperText includeDescription={includeDescription}
-                             showError={showError}
+                             showError={showError ?? false}
                              error={error ? (typeof error === "string" ? error : "A property of this map has an error") : undefined}
                              disabled={disabled}
                              property={property}/>
@@ -128,6 +145,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,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,12 +1,12 @@
 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 { cn, paperMixin } from "@firecms/ui";
+import { cls, paperMixin } from "@firecms/ui";
 
 /**
  *
@@ -21,7 +21,7 @@ export function ReadOnlyFieldBinding({
                                          value,
                                          error,
                                          showError,
-                                         tableMode,
+                                         minimalistView,
                                          property,
                                          includeDescription,
                                          context
@@ -30,30 +30,25 @@ export function ReadOnlyFieldBinding({
     if (!context.entityId)
         throw new Error("ReadOnlyFieldBinding: Entity id is null");
 
-    const entity: Entity<any> = {
-        id: context.entityId!,
-        values: context.values,
-        path: context.path
-    };
-
     return (
 
         <>
 
-            {!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
-                className={cn(paperMixin, "min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
+                className={cls(paperMixin, "min-h-14 p-4 md:p-6 overflow-x-scroll no-scrollbar")}>
 
                 <ErrorBoundary>
                     <PropertyPreview propertyKey={propertyKey}
                                      value={value}
                                      property={property}
-                        // entity={entity}
                                      size={"medium"}/>
                 </ErrorBoundary>
 

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.
@@ -17,7 +18,7 @@ import { useClearRestoreValue } from "../useClearRestoreValue";
  * 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}/>
@@ -27,19 +28,21 @@ export function ReferenceFieldBinding<M extends Record<string, any>>(props: Fiel
 
 }
 
-function ReferenceFieldBindingInternal<M extends Record<string, any>>({
-                                                                          value,
-                                                                          setValue,
-                                                                          error,
-                                                                          showError,
-                                                                          isSubmitting,
-                                                                          disabled,
-                                                                          touched,
-                                                                          autoFocus,
-                                                                          property,
-                                                                          includeDescription,
-                                                                          context
-                                                                      }: FieldProps<EntityReference>) {
+function ReferenceFieldBindingInternal({
+                                           propertyKey,
+                                           value,
+                                           setValue,
+                                           error,
+                                           showError,
+                                           isSubmitting,
+                                           disabled,
+                                           minimalistView,
+                                           touched,
+                                           autoFocus,
+                                           property,
+                                           includeDescription,
+                                           size = "medium"
+                                       }: FieldProps<EntityReference>) {
     if (!property.path) {
         throw new Error("Property path is required for ReferenceFieldBinding");
     }
@@ -75,17 +78,19 @@ function ReferenceFieldBindingInternal<M extends Record<string, any>>({
         }
     );
 
-    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,18 +101,24 @@ function ReferenceFieldBindingInternal<M extends Record<string, any>>({
                     disabled={!property.path}
                     previewProperties={property.previewProperties}
                     hover={!disabled}
-                    size={"medium"}
+                    size={size}
                     onClick={disabled || isSubmitting ? undefined : onEntryClick}
                     reference={value}
+                    includeEntityLink={property.includeEntityLink}
+                    includeId={property.includeId}
                 />}
 
                 {!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-surface-accent-500"
+                            : "cursor-pointer text-surface-accent-700 dark:text-surface-accent-300 hover:bg-surface-accent-50 dark:hover:bg-surface-800 group-hover:bg-surface-accent-50 dark:group-hover:bg-surface-800")}
+                                            onClick={onEntryClick}
+                                            size={"medium"}>
+                        <IconForView collectionOrView={collection}
+                                     className={"text-surface-300 dark:text-surface-600"}/>
+                        {`Edit ${property.name}`.toUpperCase()}
+                    </EntityPreviewContainer>
                 </div>}
             </>}