@firecms/core 3.0.0-3.0.0-beta.4.pre.1.0

package/src/form/field_bindings/MultiSelectBinding.tsx

@@ -0,0 +1,114 @@
+import React, { useCallback } from "react";
+
+import { EnumType, FieldProps, ResolvedProperty } from "../../types";
+import { FieldHelperText, LabelWithIcon } from "../components";
+import { EnumValuesChip } from "../../preview";
+import { enumToObjectEntries, getIconForProperty, getLabelOrConfigFrom } from "../../util";
+import { CloseIcon, MultiSelect, MultiSelectItem } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+
+/**
+ * This fields renders a dropdown with multiple selection.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * 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>) {
+
+    const of: ResolvedProperty<any> | ResolvedProperty<any>[] = property.of;
+    if (!of) {
+        throw Error("Using wrong component ArrayEnumSelect");
+    }
+
+    if (Array.isArray(of)) {
+        throw Error("Using array properties instead of single one in `of` in ArrayProperty");
+    }
+
+    if (of.dataType !== "string" && of.dataType !== "number") {
+        throw Error("Field misconfiguration: array field of type string or number");
+    }
+
+    const enumValues = enumToObjectEntries(of.enumValues);
+    if (!enumValues) {
+        console.error(property);
+        throw Error("Field misconfiguration: array field of type string or number needs to have enumValues");
+    }
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const validValue = !!value && Array.isArray(value);
+
+    const renderValue = useCallback((enumKey: string, list: boolean) => {
+        const enumValue = enumKey !== undefined ? getLabelOrConfigFrom(enumValues, enumKey) : undefined;
+        return <EnumValuesChip
+            enumKey={enumKey}
+            enumValues={enumValues}
+            size={"medium"}
+            key={enumKey}>
+            {enumValue?.label ?? enumKey}
+            {!list && <button
+                className="ml-1 ring-offset-background rounded-full outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+                onMouseDown={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }}
+                onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setValue(value.filter(v => v !== enumKey));
+                }}
+            >
+                <CloseIcon size="smallest"/>
+            </button>}
+        </EnumValuesChip>;
+    }, [enumValues, setValue, value]);
+
+    return (
+        <div className="mt-0.5 ml-0.5  mt-2">
+            <MultiSelect
+                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[]) => {
+                    let newValue: EnumType[] | null;
+                    if (of && (of as ResolvedProperty)?.dataType === "number") {
+                        newValue = updatedValue ? (updatedValue as string[]).map((e) => parseFloat(e)) : [];
+                    } else {
+                        newValue = updatedValue;
+                    }
+                    return setValue(newValue);
+                }}>
+                {enumValues.map((enumValue) => String(enumValue.id)).map((enumKey) => (
+                    <MultiSelectItem key={enumKey} value={enumKey}>
+                        {renderValue(enumKey, true)}
+                    </MultiSelectItem>))}
+            </MultiSelect>
+
+            <FieldHelperText includeDescription={includeDescription}
+                             showError={showError}
+                             error={error}
+                             disabled={disabled}
+                             property={property}/>
+
+        </div>
+    );
+}

package/src/form/field_bindings/ReadOnlyFieldBinding.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+
+import { Entity, FieldProps } from "../../types";
+
+import { PropertyPreview } from "../../preview";
+import { FieldHelperText, LabelWithIcon } from "../components";
+import { ErrorBoundary } from "../../components";
+import { getIconForProperty } from "../../util";
+import { cn, paperMixin } from "@firecms/ui";
+
+/**
+ *
+ * Simply render the non-editable preview of a field
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function ReadOnlyFieldBinding({
+                                         propertyKey,
+                                         value,
+                                         error,
+                                         showError,
+                                         tableMode,
+                                         property,
+                                         includeDescription,
+                                         context
+                                     }: FieldProps<any>) {
+
+    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"}/>
+            }
+
+            <div
+                className={cn(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>
+
+            </div>
+
+            <FieldHelperText includeDescription={includeDescription}
+                             showError={showError}
+                             error={error}
+                             property={property}/>
+
+        </>
+    );
+}

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -0,0 +1,123 @@
+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 { ErrorView } from "../../components";
+import { ReferencePreview } from "../../preview";
+import { getIconForProperty, getReferenceFrom } from "../../util";
+import { Button } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+
+/**
+ * Field that opens a reference selection dialog.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function ReferenceFieldBinding<M extends Record<string, any>>(props: FieldProps<EntityReference>) {
+
+    if (typeof props.property.path !== "string") {
+        return <ReadOnlyFieldBinding {...props}/>
+    }
+
+    return <ReferenceFieldBindingInternal {...props}/>;
+
+}
+
+function ReferenceFieldBindingInternal<M extends Record<string, any>>({
+                                                                          value,
+                                                                          setValue,
+                                                                          error,
+                                                                          showError,
+                                                                          isSubmitting,
+                                                                          disabled,
+                                                                          touched,
+                                                                          autoFocus,
+                                                                          property,
+                                                                          includeDescription,
+                                                                          context
+                                                                      }: FieldProps<EntityReference>) {
+    if (!property.path) {
+        throw new Error("Property path is required for ReferenceFieldBinding");
+    }
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const validValue = value && value.isEntityReference && value.isEntityReference();
+
+    const navigationController = useNavigationController();
+    const collection: EntityCollection | undefined = useMemo(() => {
+        return property.path ? navigationController.getCollection(property.path) : undefined;
+    }, [property.path]);
+
+    if (!collection) {
+        throw Error(`Couldn't find the corresponding collection for the path: ${property.path}`);
+    }
+
+    const onSingleEntitySelected = useCallback((e: Entity<any> | null) => {
+        setValue(e ? getReferenceFrom(e) : null);
+    }, [setValue]);
+
+    const referenceDialogController = useReferenceDialog({
+            multiselect: false,
+            path: property.path,
+            collection,
+            onSingleEntitySelected,
+            selectedEntityIds: validValue ? [value.id] : undefined,
+            forceFilter: property.forceFilter
+        }
+    );
+
+    const onEntryClick = useCallback((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"}/>
+
+            {!collection && <ErrorView
+                error={"The specified collection does not exist. Check console"}/>}
+
+            {collection && <>
+
+                {value && <ReferencePreview
+                    disabled={!property.path}
+                    previewProperties={property.previewProperties}
+                    hover={!disabled}
+                    size={"medium"}
+                    onClick={disabled || isSubmitting ? undefined : onEntryClick}
+                    reference={value}
+                />}
+
+                {!value && <div className="justify-center text-left">
+                    <Button variant="outlined"
+                            color="primary"
+                            disabled={disabled || isSubmitting}
+                            onClick={onEntryClick}>
+                        Edit {property.name}
+                    </Button>
+                </div>}
+            </>}
+
+            <FieldHelperText includeDescription={includeDescription}
+                             showError={showError}
+                             error={error}
+                             disabled={disabled}
+                             property={property}/>
+
+        </>
+    );
+
+}

package/src/form/field_bindings/RepeatFieldBinding.tsx

@@ -0,0 +1,105 @@
+import React, { useState } from "react";
+import { CMSType, FieldProps, ResolvedProperty } from "../../types";
+import { FieldHelperText, FormikArrayContainer, LabelWithIcon } from "../components";
+import { ErrorBoundary } from "../../components";
+import { getIconForProperty } from "../../util";
+import { PropertyFieldBinding } from "../PropertyFieldBinding";
+import { ExpandablePanel } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+
+/**
+ * Generic array field that allows reordering and renders the child property
+ * as nodes.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function RepeatFieldBinding<T extends Array<any>>({
+                                                             propertyKey,
+                                                             value,
+                                                             error,
+                                                             showError,
+                                                             isSubmitting,
+                                                             setValue,
+                                                             setFieldValue,
+                                                             tableMode,
+                                                             property,
+                                                             includeDescription,
+                                                             underlyingValueHasChanged,
+                                                             context,
+                                                             disabled
+                                                         }: FieldProps<T>) {
+
+    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'");
+
+    const expanded = property.expanded === undefined ? true : property.expanded;
+    const ofProperty: ResolvedProperty<CMSType[]> = property.of as ResolvedProperty<CMSType[]>;
+
+    const [lastAddedId, setLastAddedId] = useState<number | undefined>();
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const buildEntry = (index: number, internalId: number) => {
+        const childProperty = property.resolvedProperties[index] ?? ofProperty;
+        const fieldProps = {
+            propertyKey: `${propertyKey}.${index}`,
+            disabled,
+            property: childProperty,
+            includeDescription,
+            underlyingValueHasChanged,
+            context,
+            tableMode: false,
+            partOfArray: true,
+            partOfBlock: false,
+            autoFocus: internalId === lastAddedId
+        };
+        return <ErrorBoundary>
+            <PropertyFieldBinding {...fieldProps}/>
+        </ErrorBoundary>;
+    };
+
+    const arrayContainer = <FormikArrayContainer value={value}
+                                                 addLabel={property.name ? "Add entry to " + property.name : "Add entry"}
+                                                 name={propertyKey}
+                                                 setFieldValue={setFieldValue}
+                                                 buildEntry={buildEntry}
+                                                 onInternalIdAdded={setLastAddedId}
+                                                 disabled={isSubmitting || Boolean(property.disabled)}
+                                                 includeAddButton={!property.disabled}
+                                                 newDefaultEntry={property.of.defaultValue}/>;
+
+    const title = (<LabelWithIcon icon={getIconForProperty(property, "small")}
+                                  required={property.validation?.required}
+                                  title={property.name}
+                                  className={"text-text-secondary dark:text-text-secondary-dark"}/>);
+
+    return (
+
+        <>
+
+            {!tableMode && <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}
+
+            <FieldHelperText includeDescription={includeDescription}
+                             showError={showError}
+                             error={error}
+                             disabled={disabled}
+                             property={property}/>
+
+        </>
+    );
+}

package/src/form/field_bindings/SelectFieldBinding.tsx

@@ -0,0 +1,99 @@
+import React, { useCallback } from "react";
+
+import { EnumType, FieldProps } from "../../types";
+import { FieldHelperText, LabelWithIcon } from "../components";
+import { EnumValuesChip } from "../../preview";
+import { getIconForProperty } from "../../util";
+import { ClearIcon, cn, IconButton, Select, SelectItem } from "@firecms/ui";
+import { useClearRestoreValue } from "../useClearRestoreValue";
+
+type SelectProps<T extends EnumType> = FieldProps<T>;
+
+/**
+ * If `enumValues` are set in the string config, this field renders a select
+ * where each option is a colored chip.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function SelectFieldBinding<T extends EnumType>({
+                                                           propertyKey,
+                                                           value,
+                                                           setValue,
+                                                           error,
+                                                           showError,
+                                                           disabled,
+                                                           autoFocus,
+                                                           touched,
+                                                           property,
+                                                           includeDescription
+                                                       }: SelectProps<T>) {
+
+    const enumValues = property.enumValues;
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const handleClearClick = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+        setValue(null);
+    }, [setValue]);
+
+    return (
+        <>
+
+            <Select
+                value={value ? value.toString() : ""}
+                disabled={disabled}
+                position="item-aligned"
+                inputClassName={cn("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"}
+                />}
+                endAdornment={
+                    property.clearable && <IconButton
+                        onClick={handleClearClick}>
+                        <ClearIcon/>
+                    </IconButton>
+                }
+                onValueChange={(updatedValue: string) => {
+                    const newValue = updatedValue
+                        ? (property.dataType === "number" ? parseFloat(updatedValue) : updatedValue)
+                        : null;
+                    return setValue(newValue as T);
+                }}
+                renderValue={(enumKey: any) => {
+                    return <EnumValuesChip
+                        enumKey={enumKey}
+                        enumValues={enumValues}
+                        size={"medium"}/>;
+                }}
+            >
+                {enumValues && enumValues.map((option) => {
+                    return <SelectItem
+                        key={option.id}
+                        value={String(option.id)}>
+                        <EnumValuesChip
+                            enumKey={String(option.id)}
+                            enumValues={enumValues}
+                            size={"medium"}/>
+                    </SelectItem>
+                })}
+            </Select>
+
+            <FieldHelperText includeDescription={includeDescription}
+                             showError={showError}
+                             error={error}
+                             disabled={disabled}
+                             property={property}/>
+
+        </>
+    );
+}