@firecms/core 3.0.0-canary.29 → 3.0.0-canary.292

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}/>
+        </>
+
+    );
+
+}

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 = "large",
+                                            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
-                value={validValue ? value.map((v) => v.toString()) : []}
+                className={"w-full mt-2"}
+                size={size}
+                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={"h-8 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={"h-8 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, "w-full 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/ReferenceAsStringFieldBinding.tsx

@@ -0,0 +1,135 @@
+import React, { useCallback, useMemo } from "react";
+import { Entity, EntityCollection, EntityReference, FieldProps } from "../../types";
+import { useNavigationController, useReferenceDialog } from "../../hooks";
+import { ReadOnlyFieldBinding } from "./ReadOnlyFieldBinding";
+import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
+import { ErrorView } from "../../components";
+import { ReferencePreview } from "../../preview";
+import { getIconForProperty, IconForView } from "../../util";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+import { EntityPreviewContainer } from "../../components/EntityPreview";
+import { cls } from "@firecms/ui";
+
+/**
+ * Field that opens a reference selection dialog and stores the entity ID as a string.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function ReferenceAsStringFieldBinding(props: FieldProps<string>) {
+    if (typeof props.property.reference?.path !== "string") {
+        return <ReadOnlyFieldBinding {...props}/>;
+    }
+
+    return <ReferenceAsStringFieldBindingInternal {...props}/>;
+}
+
+function ReferenceAsStringFieldBindingInternal({
+                                                   propertyKey,
+                                                   value,
+                                                   setValue,
+                                                   error,
+                                                   showError,
+                                                   isSubmitting,
+                                                   disabled,
+                                                   minimalistView,
+                                                   property,
+                                                   includeDescription,
+                                                   size = "medium"
+                                               }: FieldProps<string>) {
+    if (!property.reference?.path) {
+        throw new Error("Property path is required for ReferenceAsStringFieldBinding");
+    }
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const navigationController = useNavigationController();
+    const path = property.reference.path;
+    const collection: EntityCollection | undefined = useMemo(() => {
+        return path ? navigationController.getCollection(path) : undefined;
+    }, [path]);
+
+    const referenceValue: EntityReference | undefined = useMemo(() => {
+        if (value && path) {
+            return new EntityReference(value, path);
+        }
+        return undefined;
+    }, [value, path]);
+
+    if (!collection) {
+        throw Error(`Couldn't find the corresponding collection for the path: ${path}`);
+    }
+
+    const onSingleEntitySelected = useCallback((e: Entity<any> | null) => {
+        setValue(e ? e.id : null);
+    }, [setValue]);
+
+    const referenceDialogController = useReferenceDialog({
+            multiselect: false,
+            path: path,
+            collection,
+            onSingleEntitySelected,
+            selectedEntityIds: value ? [value] : undefined,
+            forceFilter: property.reference.forceFilter
+        }
+    );
+
+    const onEntryClick = (e: React.SyntheticEvent) => {
+        e.preventDefault();
+        referenceDialogController.open();
+    };
+
+    return (
+        <>
+            {!minimalistView && <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"}/>}
+
+            {!collection && <ErrorView
+                error={"The specified collection does not exist. Check console"}/>}
+
+            {collection && <>
+
+                {referenceValue && <ReferencePreview
+                    disabled={!path}
+                    previewProperties={property.reference?.previewProperties}
+                    hover={!disabled}
+                    size={size}
+                    onClick={disabled || isSubmitting ? undefined : onEntryClick}
+                    reference={referenceValue}
+                    includeEntityLink={property.reference?.includeEntityLink}
+                    includeId={property.reference?.includeId}
+                />}
+
+                {!value && <div className="justify-center text-left">
+                    <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>}
+            </>}
+
+            <FieldHelperText includeDescription={includeDescription}
+                             showError={showError}
+                             error={error}
+                             disabled={disabled}
+                             property={property}/>
+
+        </>
+    );
+}