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

package/src/form/PropertyFieldBinding.tsx

@@ -0,0 +1,306 @@
+import React, { ComponentType, ReactElement, useCallback, useRef } from "react";
+import equal from "react-fast-compare"
+
+import { Field, FieldProps as FormexFieldProps, getIn } from "@firecms/formex";
+
+import {
+    CMSType,
+    EntityCollection,
+    FieldProps,
+    FireCMSPlugin,
+    PluginFieldBuilderParams,
+    Property,
+    PropertyFieldBindingProps,
+    PropertyOrBuilder,
+    ResolvedProperty
+} from "../types";
+import { ReadOnlyFieldBinding } from "./field_bindings/ReadOnlyFieldBinding";
+
+import { isHidden, isPropertyBuilder, isReadOnly, resolveProperty } from "../util";
+import { useCustomizationController } from "../hooks";
+import { Typography } from "@firecms/ui";
+import { getFieldConfig, getFieldId } from "../core";
+import { ErrorBoundary } from "../components";
+
+/**
+ * This component renders a form field creating the corresponding configuration
+ * from a property. For example if bound to a string property, it will generate
+ * a text field.
+ *
+ * You can use it when you are creating a custom field, and need to
+ * render additional fields mapped to properties. This is useful if you
+ * need to build a complex property mapping, like an array where each index
+ * is a different property.
+ *
+ * Please note that if you build a custom field in a component, the
+ * **validation** passed in the property will have no effect. You need to set
+ * the validation in the `EntityCollection` definition.
+ *
+ * @param propertyKey You can use nested names such as `address.street` or `friends[2]`
+ * @param property
+ * @param context
+ * @param includeDescription
+ * @param underlyingValueHasChanged
+ * @param disabled
+ * @param tableMode
+ * @param partOfArray
+ * @param autoFocus
+ * @group Form custom fields
+ */
+export const PropertyFieldBinding = React.memo(PropertyFieldBindingInternal, (a: PropertyFieldBindingProps<any>, b: PropertyFieldBindingProps<any>) => {
+    if (a.propertyKey !== b.propertyKey) {
+        return false;
+    }
+    const aIsBuilder = isPropertyBuilder(a.property) || a.property.fromBuilder;
+    const bIsBuilder = isPropertyBuilder(b.property) || b.property.fromBuilder;
+
+    const baseCheck = (aIsBuilder === bIsBuilder || equal(a.property, b.property)) &&
+        a.disabled === b.disabled;
+    if (!baseCheck) {
+        return false;
+    }
+
+    if (shouldPropertyReRender(b.property)) {
+        return false;
+    }
+
+    return false;
+}) as typeof PropertyFieldBindingInternal;
+
+function PropertyFieldBindingInternal<T extends CMSType = CMSType, M extends Record<string, any> = Record<string, any>>
+({
+     propertyKey,
+     property,
+     context,
+     includeDescription,
+     underlyingValueHasChanged,
+     disabled,
+     tableMode,
+     partOfArray,
+     partOfBlock,
+     autoFocus,
+ }: PropertyFieldBindingProps<T, M>): ReactElement<PropertyFieldBindingProps<T, M>> {
+
+    const customizationController = useCustomizationController();
+
+    return (
+        <Field
+            name={propertyKey}
+        >
+            {(fieldProps) => {
+
+                let Component: ComponentType<FieldProps<T>> | undefined;
+                const resolvedProperty: ResolvedProperty<T> | null = resolveProperty({
+                    propertyKey,
+                    propertyValue: fieldProps.field.value,
+                    propertyOrBuilder: property,
+                    values: fieldProps.form.values,
+                    path: context.path,
+                    entityId: context.entityId,
+                    fields: customizationController.propertyConfigs
+                });
+
+                if (resolvedProperty === null || isHidden(resolvedProperty)) {
+                    return <></>;
+                } else if (isReadOnly(resolvedProperty)) {
+                    Component = ReadOnlyFieldBinding;
+                } else if (resolvedProperty.Field) {
+                    if (typeof resolvedProperty.Field === "function") {
+                        Component = resolvedProperty.Field as ComponentType<FieldProps<any>>;
+                    }
+                } else {
+                    const propertyConfig = getFieldConfig(resolvedProperty, customizationController.propertyConfigs);
+                    if (!propertyConfig) {
+                        console.log("INTERNAL: Could not find field config for property", { propertyKey, resolvedProperty, fields: customizationController.propertyConfigs, propertyConfig });
+                        throw new Error(`INTERNAL: Could not find field config for property ${propertyKey}`);
+                    }
+                    const configProperty = resolveProperty({
+                        propertyOrBuilder: propertyConfig.property,
+                        propertyValue: fieldProps.field.value,
+                        values: fieldProps.form.values,
+                        path: context.path,
+                        entityId: context.entityId,
+                        fields: customizationController.propertyConfigs
+                    });
+                    Component = configProperty.Field as ComponentType<FieldProps<T>>;
+                }
+                if (!Component) {
+                    console.warn(`No field component found for property ${propertyKey}`);
+                    console.warn("Property:", property);
+                    return (
+                        <div>{`Currently the field ${resolvedProperty.dataType} is not supported`}</div>
+                    );
+                }
+
+                const componentProps: ResolvedPropertyFieldBindingProps<T, M> = {
+                    propertyKey,
+                    property: resolvedProperty,
+                    includeDescription,
+                    underlyingValueHasChanged,
+                    context,
+                    disabled,
+                    tableMode,
+                    partOfArray,
+                    partOfBlock,
+                    autoFocus
+                };
+
+                return <FieldInternal
+                    Component={Component as ComponentType<FieldProps>}
+                    componentProps={componentProps}
+                    fieldProps={fieldProps}/>;
+            }}
+        </Field>
+    );
+
+}
+
+type ResolvedPropertyFieldBindingProps<T extends CMSType = CMSType, M extends Record<string, any> = Record<string, any>> =
+    Omit<PropertyFieldBindingProps<T, M>, "property">
+    & {
+    property: ResolvedProperty<T>
+};
+
+function FieldInternal<T extends CMSType, CustomProps, M extends Record<string, any>>
+({
+     Component,
+     componentProps: {
+         propertyKey,
+         property,
+         includeDescription,
+         underlyingValueHasChanged,
+         tableMode,
+         partOfArray,
+         partOfBlock,
+         autoFocus,
+         context,
+         disabled
+     },
+     fieldProps
+ }:
+     {
+         Component: ComponentType<FieldProps<T, any, M>>,
+         componentProps: ResolvedPropertyFieldBindingProps<T, M>,
+         fieldProps: FormexFieldProps<T, any>
+     }) {
+
+    const { plugins } = useCustomizationController();
+
+    const customFieldProps: any = property.customProps;
+    const value = fieldProps.field.value;
+    // const initialValue = fieldProps.meta.initialValue;
+    const error = getIn(fieldProps.form.errors, propertyKey);
+    const touched = getIn(fieldProps.form.touched, propertyKey);
+
+    const showError: boolean = error &&
+        (fieldProps.form.submitCount > 0 || property.validation?.unique) &&
+        (!Array.isArray(error) || !!error.filter((e: any) => !!e).length);
+
+    const WrappedComponent: ComponentType<FieldProps<T, any, M>> | null = useWrappedComponent(context.path, context.collection, propertyKey, property, Component, plugins);
+    const UsedComponent: ComponentType<FieldProps<T>> = WrappedComponent ?? Component;
+
+    const isSubmitting = fieldProps.form.isSubmitting;
+
+    const setValue = useCallback((value: T | null, shouldValidate?: boolean) => {
+        fieldProps.form.setFieldTouched(propertyKey, true, false);
+        fieldProps.form.setFieldValue(propertyKey, value, shouldValidate);
+    }, []);
+
+    const setFieldValue = useCallback((otherPropertyKey: string, value: CMSType | null, shouldValidate?: boolean) => {
+        fieldProps.form.setFieldTouched(propertyKey, true, false);
+        fieldProps.form.setFieldValue(otherPropertyKey, value, shouldValidate);
+    }, []);
+
+    const cmsFieldProps: FieldProps<T, CustomProps, M> = {
+        propertyKey,
+        value: value as T,
+        // initialValue,
+        setValue,
+        setFieldValue,
+        error,
+        touched,
+        showError,
+        isSubmitting,
+        includeDescription: includeDescription ?? true,
+        property: property as ResolvedProperty<T>,
+        disabled: disabled ?? false,
+        underlyingValueHasChanged: underlyingValueHasChanged ?? false,
+        tableMode: tableMode ?? false,
+        partOfArray: partOfArray ?? false,
+        partOfBlock: partOfBlock ?? false,
+        autoFocus: autoFocus ?? false,
+        customProps: customFieldProps,
+        context
+    };
+
+    return (
+        <ErrorBoundary>
+
+            <UsedComponent {...cmsFieldProps}/>
+
+            {underlyingValueHasChanged && !isSubmitting &&
+                <Typography variant={"caption"} className={"ml-3.5"}>
+                    This value has been updated elsewhere
+                </Typography>}
+
+        </ErrorBoundary>);
+
+}
+
+const shouldPropertyReRender = (property: PropertyOrBuilder | ResolvedProperty, plugins?: FireCMSPlugin[]): boolean => {
+    if (plugins?.some((plugin) => plugin.form?.fieldBuilder)) {
+        return true;
+    }
+    if (isPropertyBuilder(property)) {
+        return true;
+    }
+    const defAProperty = property as Property | ResolvedProperty;
+    const rerenderThisProperty = Boolean(defAProperty.Field) || ("fromBuilder" in defAProperty && defAProperty.fromBuilder);
+    if (defAProperty.dataType === "map" && defAProperty.properties) {
+        return rerenderThisProperty || Object.values(defAProperty.properties).some((childProperty) => shouldPropertyReRender(childProperty, plugins));
+    } else if (defAProperty.dataType === "array" && "resolvedProperties" in defAProperty) {
+        // @ts-ignore
+        return rerenderThisProperty || defAProperty.resolvedProperties?.some((childProperty) => childProperty && shouldPropertyReRender(childProperty, plugins));
+    } else {
+        return rerenderThisProperty;
+    }
+}
+
+function useWrappedComponent<T extends CMSType = CMSType, M extends Record<string, any> = any>(
+    path: string,
+    collection: EntityCollection<M>,
+    propertyKey: string,
+    property: ResolvedProperty<T>,
+    Component: ComponentType<FieldProps<T, any, M>>,
+    plugins?: FireCMSPlugin[]
+): ComponentType<FieldProps<T, any, M>> | null {
+
+    const wrapperRef = useRef<ComponentType<FieldProps<T, any, M>> | null>((() => {
+        let Wrapper: ComponentType<FieldProps<T, any, M>> | null = null;
+        if (plugins) {
+            plugins.forEach((plugin) => {
+                const fieldId = getFieldId(property);
+                if (fieldId && plugin.form?.fieldBuilder) {
+                    const params: PluginFieldBuilderParams<T> = {
+                        fieldConfigId: fieldId,
+                        propertyKey,
+                        property,
+                        Field: Component,
+                        plugin,
+                        path,
+                        collection
+                    };
+                    const enabled = plugin.form?.fieldBuilderEnabled?.(params);
+                    if (enabled === undefined || enabled)
+                        Wrapper = plugin.form.fieldBuilder(params) || Wrapper;
+                }
+                if (!fieldId) {
+                    console.warn("INTERNAL: Field id not found for property", property);
+                }
+            });
+        }
+        return Wrapper;
+    })());
+
+    return wrapperRef.current;
+}

package/src/form/components/CustomIdField.tsx

@@ -0,0 +1,139 @@
+import React, { useMemo } from "react";
+
+// import { ErrorMessage } from "@firecms/formex";
+import { Entity, EntityStatus, EnumValueConfig, EnumValues } from "../../types";
+
+import { useClipboard, useSnackbarController } from "../../hooks";
+import { enumToObjectEntries } from "../../util";
+import {
+    CircularProgress,
+    ContentCopyIcon,
+    IconButton,
+    OpenInNewIcon,
+    Select,
+    SelectItem,
+    TextField,
+    Tooltip,
+    Typography
+} from "@firecms/ui";
+import { EnumValuesChip } from "../../preview";
+import { useCustomizationController } from "../../hooks/useCustomizationController";
+import { CustomizationController } from "../../types/customization_controller";
+import { useFormex } from "@firecms/formex";
+
+export function CustomIdField<M extends Record<string, any>>({
+                                                                 customId,
+                                                                 entityId,
+                                                                 status,
+                                                                 onChange,
+                                                                 error,
+                                                                 entity,
+                                                                 loading
+                                                             }: {
+    customId?: boolean | EnumValues | "optional"
+    entityId?: string
+    status: EntityStatus,
+    onChange: (id?: string) => void,
+    error: boolean,
+    entity: Entity<M> | undefined,
+    loading: boolean
+}) {
+
+    const { errors } = useFormex();
+    const disabled = status === "existing" || !customId;
+    const idSetAutomatically = status !== "existing" && !customId;
+
+    const enumValues: EnumValueConfig[] | undefined = useMemo(() => {
+        if (!customId || typeof customId === "boolean" || customId === "optional")
+            return undefined;
+        return enumToObjectEntries(customId);
+    }, [customId]);
+
+    const snackbarController = useSnackbarController();
+    const { copy } = useClipboard({
+        onSuccess: (text) => snackbarController.open({
+            type: "success",
+            message: `Copied ${text}`
+        })
+    });
+
+    const customizationController: CustomizationController = useCustomizationController();
+
+    const fieldProps = {
+        label: idSetAutomatically ? "ID is set automatically" : "ID",
+        disabled: disabled || loading,
+        name: "id",
+        value: (entity && status === "existing" ? entity.id : entityId) ?? "",
+        endAdornment: loading ? <CircularProgress size={"small"}/> : (entity
+                ? (
+                    <>
+
+                        <Tooltip title={"Copy"}>
+                            <IconButton onClick={(e) => copy(entity.id)}
+                                        aria-label="copy-id">
+                                <ContentCopyIcon size={"small"}/>
+                            </IconButton>
+                        </Tooltip>
+
+                        {customizationController?.entityLinkBuilder &&
+                            <Tooltip title={"Open in the console"}>
+                                <IconButton component={"a"}
+                                            href={customizationController.entityLinkBuilder({ entity })}
+                                            rel="noopener noreferrer"
+                                            target="_blank"
+                                            onClick={(e) => e.stopPropagation()}
+                                            aria-label="go-to-datasource">
+                                    <OpenInNewIcon size={"small"}/>
+                                </IconButton>
+                            </Tooltip>}
+
+                    </>
+                )
+                : undefined
+        )
+    };
+
+    return (
+        <>
+
+            {enumValues &&
+                <Select
+                    error={error}
+                    onValueChange={(v) => onChange(v as string)}
+                    {...fieldProps}
+                    renderValue={(option) => {
+                        const enumConfig = enumValues.find(e => e.id === option);
+                        if (!enumConfig) return option;
+                        return `${enumConfig.id} - ${enumConfig.label}`;
+                    }}
+                >
+                    {enumValues.map((enumConfig) => (
+                        <SelectItem
+                            key={enumConfig.id}
+                            value={String(enumConfig.id)}>
+                            <EnumValuesChip
+                                enumKey={enumConfig.id}
+                                enumValues={enumValues}
+                                size={"medium"}/>
+                        </SelectItem>)
+                    )}
+                </Select>}
+
+            {!enumValues &&
+                <TextField {...fieldProps}
+                           error={error}
+                           placeholder={customId === "optional" ? "Autogenerated ID, it can be manually changed" : (status === "new" || status === "copy" ? "ID of the new document" : "ID of the document")}
+                           onChange={(event) => {
+                               let value = event.target.value;
+                               if (value) value = value.trim();
+                               return onChange(value.length ? value : undefined);
+                           }}/>}
+
+            {errors.id && <Typography variant={"caption"}
+                                      className={"ml-3.5 text-red-500 dark:text-red-500"}>
+                {errors.id}
+            </Typography>}
+
+        </>
+    );
+}

package/src/form/components/ErrorFocus.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect } from "react";
+import { useFormex } from "@firecms/formex";
+
+export const ErrorFocus = ({ containerRef }:
+                               {
+                                   containerRef?: React.RefObject<HTMLDivElement>
+                               }) => {
+    const { isSubmitting, isValidating, errors } = useFormex();
+
+    useEffect(() => {
+        const keys = Object.keys(errors);
+
+        // Whenever there are errors and the form is submitting but finished validating.
+        if (keys.length > 0 && isSubmitting && !isValidating) {
+            const errorElement = containerRef?.current?.querySelector<HTMLDivElement>(
+                `#form_field_${keys[0]}`
+            );
+
+            if (errorElement && containerRef?.current) {
+                const scrollableParent = getScrollableParent(containerRef.current);
+                if (scrollableParent) {
+                    const top = errorElement.getBoundingClientRect().top;
+                    scrollableParent.scrollTo({
+                        top: scrollableParent.scrollTop + top - 196,
+                        behavior: "smooth"
+                    });
+                }
+                const input = errorElement.querySelector("input");
+                if (input) input.focus();
+            }
+        }
+    }, [isSubmitting, isValidating, errors, containerRef]);
+
+    // This component does not render anything by itself.
+    return null;
+};
+
+const isScrollable = (ele: HTMLElement | null) => {
+    const hasScrollableContent = ele && ele.scrollHeight > ele.clientHeight;
+
+    const overflowYStyle = ele ? window.getComputedStyle(ele).overflowY : null;
+    const isOverflowHidden = overflowYStyle && overflowYStyle.indexOf("hidden") !== -1;
+
+    return hasScrollableContent && !isOverflowHidden;
+};
+
+const getScrollableParent = (ele: HTMLElement | null): HTMLElement | null => {
+    return (!ele || ele === document.body)
+        ? document.body
+        : (isScrollable(ele) ? ele : getScrollableParent(ele.parentNode as HTMLElement));
+};

package/src/form/components/FieldHelperText.tsx

@@ -0,0 +1,58 @@
+import { ResolvedProperty } from "../../types";
+import { IconButton, InfoIcon, Tooltip, Typography } from "@firecms/ui";
+
+/**
+ * Component in charge of rendering the description of a field
+ * as well as the error message if any.
+ */
+export function FieldHelperText({
+                                    error,
+                                    showError,
+                                    property,
+                                    includeDescription = true,
+                                    disabled
+                                }: {
+                                    error?: string,
+                                    showError: boolean,
+                                    property: ResolvedProperty,
+                                    includeDescription?: boolean,
+                                    disabled?: boolean,
+                                }
+) {
+
+    const hasDescription = property.description || property.longDescription;
+
+    if (!(showError && error) && (!includeDescription || !hasDescription))
+        return null;
+
+    if (showError && error) {
+        return <Typography variant={"caption"}
+                           className={"ml-3.5 text-red-500 dark:text-red-500"}>
+            {error}
+        </Typography>
+    }
+
+    const disabledTooltip: string | undefined = typeof property.disabled === "object" ? property.disabled.disabledMessage : undefined;
+
+    return <div className={"flex ml-3.5 mt-1"}>
+        <Typography variant={"caption"}
+                    color={disabled ? "disabled" : "secondary"}
+                    className={"flex-grow"}>
+            {disabledTooltip || property.description}
+        </Typography>
+
+        {property.longDescription &&
+            <Tooltip title={property.longDescription}
+                     side="bottom"
+            >
+                <IconButton
+                    size={"small"}
+                    className="self-start">
+
+                    <InfoIcon color={"disabled"}
+                              size={"small"}/>
+                </IconButton>
+            </Tooltip>}
+
+    </div>
+}

package/src/form/components/FormikArrayContainer.tsx

@@ -0,0 +1,44 @@
+import { ArrayContainer } from "../../components";
+import React from "react";
+
+interface ArrayContainerProps<T> {
+    value: T[];
+    name: string;
+    addLabel: string;
+    buildEntry: (index: number, internalId: number) => React.ReactNode;
+    disabled?: boolean;
+    small?: boolean;
+    onInternalIdAdded?: (id: number) => void;
+    includeAddButton?: boolean;
+    newDefaultEntry?: T | null;
+    setFieldValue: (field: string, value: any, shouldValidate?: boolean | undefined) => void;
+}
+
+/**
+ * @group Form custom fields
+ */
+export function FormikArrayContainer<T>({
+                                            name,
+                                            addLabel,
+                                            value,
+                                            disabled = false,
+                                            buildEntry,
+                                            small,
+                                            onInternalIdAdded,
+                                            includeAddButton,
+                                            newDefaultEntry = null,
+                                            setFieldValue
+                                        }: ArrayContainerProps<T>) {
+
+    return <ArrayContainer droppableId={name}
+                           addLabel={addLabel}
+                           value={value}
+                           disabled={disabled}
+                           buildEntry={buildEntry}
+                           size={small ? "small" : "medium"}
+                           onInternalIdAdded={onInternalIdAdded}
+                           includeAddButton={includeAddButton}
+                           newDefaultEntry={newDefaultEntry}
+                           onValueChange={(value) => setFieldValue(name, value)}
+    />;
+}

package/src/form/components/LabelWithIcon.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+interface LabelWithIconProps {
+    icon: React.ReactNode;
+    title?: string;
+    small?: boolean;
+    className?: string;
+    required?: boolean;
+}
+
+/**
+ * Render the label of with an icon and the title of a property
+ * @group Form custom fields
+ */
+export function LabelWithIcon({
+                                  icon,
+                                  title,
+                                  small,
+                                  className,
+                                  required
+                              }: LabelWithIconProps) {
+    return (
+        <span
+            className={`inline-flex items-center my-0.5  ${small ? "gap-1" : "gap-2"} ${className ?? ""}`}>
+
+            {icon}
+
+            <span
+                className={`text-start font-medium text-${small ? "base" : "sm"} origin-top-left transform ${small ? "translate-x-2 scale-75" : ""}`}>{(title ?? "") + (required ? " *" : "")}</span>
+
+        </span>
+    );
+}