@firecms/core 3.0.0-alpha.8 → 3.0.0-alpha.80

package/src/form/field_bindings/StorageUploadFieldBinding.tsx

@@ -0,0 +1,438 @@
+import React, { useCallback } from "react";
+
+import {
+    ArrayProperty,
+    Entity,
+    FieldProps,
+    ResolvedArrayProperty,
+    ResolvedStringProperty,
+    StorageConfig
+} from "../../types";
+import { useDropzone } from "react-dropzone";
+import { PreviewSize } from "../../preview";
+import { FieldHelperText } from "../components";
+import { LabelWithIcon } from "../../components";
+
+import { getIconForProperty, isReadOnly } from "../../util";
+import { useClearRestoreValue, useSnackbarController, useStorageSource } from "../../hooks";
+import { DragDropContext, Draggable, Droppable } from "@hello-pangea/dnd";
+import { StorageFieldItem, useStorageUploadController } from "../../util/useStorageUploadController";
+import { StorageUploadProgress } from "../components/StorageUploadProgress";
+import { StorageItemPreview } from "../components/StorageItemPreview";
+import {
+    cn,
+    fieldBackgroundDisabledMixin,
+    fieldBackgroundHoverMixin,
+    fieldBackgroundMixin,
+    focusedMixin,
+    Typography
+} from "@firecms/ui";
+
+const dropZoneClasses = "box-border relative pt-[2px] items-center border border-transparent min-h-[254px] outline-none rounded-md duration-200 ease-[cubic-bezier(0.4,0,0.2,1)] focus:border-primary-solid";
+const disabledClasses = "border-dotted-gray"
+const nonActiveDropClasses = "hover:bg-field-hover dark:hover:bg-field-hover-dark"
+const activeDropClasses = "pt-0 border-2 border-solid"
+const acceptDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-2 border-solid border-green-500"
+const rejectDropClasses = "transition-colors duration-200 ease-[cubic-bezier(0,0,0.2,1)] border-2 border-solid border-red-500"
+
+type StorageUploadFieldProps = FieldProps<string | string[]>;
+
+/**
+ * Field that allows to upload files to Google Cloud Storage.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function StorageUploadFieldBinding({
+                                              propertyKey,
+                                              value,
+                                              setValue,
+                                              error,
+                                              showError,
+                                              autoFocus,
+                                              tableMode,
+                                              property,
+                                              includeDescription,
+                                              context,
+                                              isSubmitting
+                                          }: StorageUploadFieldProps) {
+
+    if (!context.entityId)
+        throw new Error("StorageUploadFieldBinding: Entity id is null");
+
+    const storageSource = useStorageSource();
+    const disabled = isReadOnly(property) || !!property.disabled || isSubmitting;
+
+    const {
+        internalValue,
+        setInternalValue,
+        onFilesAdded,
+        storage,
+        onFileUploadComplete,
+        storagePathBuilder,
+        multipleFilesSupported
+    } = useStorageUploadController({
+        entityValues: context.values,
+        entityId: context.entityId,
+        path: context.path,
+        property,
+        propertyKey,
+        value,
+        storageSource,
+        disabled,
+        onChange: setValue
+    });
+
+    useClearRestoreValue<string | string[]>({
+        property,
+        value,
+        setValue
+    });
+
+    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"}/>}
+
+            <StorageUpload
+                value={internalValue}
+                name={propertyKey}
+                disabled={disabled}
+                autoFocus={autoFocus}
+                property={property}
+                onChange={setValue}
+                setInternalValue={setInternalValue}
+                onFilesAdded={onFilesAdded}
+                entity={entity}
+                onFileUploadComplete={onFileUploadComplete}
+                storagePathBuilder={storagePathBuilder}
+                storage={storage}
+                multipleFilesSupported={multipleFilesSupported}/>
+
+            <FieldHelperText includeDescription={includeDescription}
+                             showError={showError}
+                             error={error}
+                             disabled={disabled}
+                             property={property}/>
+
+        </>
+    );
+}
+
+function FileDropComponent({
+                               storage,
+                               disabled,
+                               isDraggingOver,
+                               onFilesAdded,
+                               multipleFilesSupported,
+                               droppableProvided,
+                               autoFocus,
+                               internalValue,
+                               property,
+                               entity,
+                               onClear,
+                               metadata,
+                               storagePathBuilder,
+                               onFileUploadComplete,
+                               size,
+                               name,
+                               helpText
+                           }: {
+    storage: StorageConfig,
+    disabled: boolean,
+    isDraggingOver: boolean,
+    droppableProvided: any,
+    onFilesAdded: (acceptedFiles: File[]) => void,
+    multipleFilesSupported: boolean,
+    autoFocus: boolean,
+    internalValue: StorageFieldItem[],
+    property: ResolvedStringProperty,
+    onClear: (clearedStoragePathOrDownloadUrl: string) => void,
+    metadata: any,
+    entity: Entity<any>;
+    storagePathBuilder: (file: File) => string,
+    onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: any) => Promise<void>,
+    size: PreviewSize,
+    name: string,
+    helpText: string
+}) {
+
+    const snackbarContext = useSnackbarController();
+
+    const {
+        getRootProps,
+        getInputProps,
+        isDragActive,
+        isDragAccept,
+        isDragReject
+    } = useDropzone({
+            accept: storage.acceptedFiles ? storage.acceptedFiles.map(e => ({ [e]: [] })).reduce((a, b) => ({ ...a, ...b }), {}) : undefined,
+            disabled: disabled || isDraggingOver,
+            noDragEventsBubbling: true,
+            maxSize: storage.maxSize,
+            onDrop: onFilesAdded,
+            onDropRejected: (fileRejections, event) => {
+                for (const fileRejection of fileRejections) {
+                    for (const error of fileRejection.errors) {
+                        snackbarContext.open({
+                            type: "error",
+                            message: `Error uploading file: File is larger than ${storage.maxSize} bytes`
+                        });
+                    }
+                }
+            }
+        }
+    );
+
+    return (
+        <div
+            {...getRootProps()}
+            className={cn(
+                fieldBackgroundMixin,
+                disabled ? fieldBackgroundDisabledMixin : fieldBackgroundHoverMixin,
+                dropZoneClasses,
+                multipleFilesSupported && internalValue.length ? "" : "flex",
+                focusedMixin,
+                {
+                    [nonActiveDropClasses]: !isDragActive,
+                    [activeDropClasses]: isDragActive,
+                    [rejectDropClasses]: isDragReject,
+                    [acceptDropClasses]: isDragAccept,
+                    [disabledClasses]: disabled
+                })}
+        >
+            <div
+                {...droppableProvided.droppableProps}
+                ref={droppableProvided.innerRef}
+                className={cn("flex items-center p-1 no-scrollbar",
+                    multipleFilesSupported && internalValue.length ? "overflow-auto" : "",
+                    multipleFilesSupported && internalValue.length ? "min-h-[180px]" : "min-h-[250px]"
+                )}
+            >
+
+                <input
+                    autoFocus={autoFocus}
+                    {...getInputProps()} />
+
+                {internalValue.map((entry, index) => {
+                    let child: any;
+                    if (entry.storagePathOrDownloadUrl) {
+                        child = (
+                            <StorageItemPreview
+                                name={`storage_preview_${entry.storagePathOrDownloadUrl}`}
+                                property={property}
+                                disabled={disabled}
+                                entity={entity}
+                                value={entry.storagePathOrDownloadUrl}
+                                onRemove={onClear}
+                                size={entry.size}/>
+                        );
+                    } else if (entry.file) {
+                        child = (
+                            <StorageUploadProgress
+                                entry={entry}
+                                metadata={metadata}
+                                storagePath={storagePathBuilder(entry.file)}
+                                onFileUploadComplete={onFileUploadComplete}
+                                imageSize={size === "medium" ? 220 : 118}
+                                simple={false}
+                            />
+                        );
+                    }
+
+                    return (
+                        <Draggable
+                            key={`array_field_${name}_${entry.id}`}
+                            draggableId={`array_field_${name}_${entry.id}`}
+                            index={index}>
+                            {(provided, snapshot) => (
+                                <div
+                                    tabIndex={-1}
+                                    ref={provided.innerRef}
+                                    {...provided.draggableProps}
+                                    {...provided.dragHandleProps}
+                                    className={cn(focusedMixin, "rounded-md")}
+                                    style={{
+                                        ...provided.draggableProps.style
+                                    }}
+                                >
+                                    {child}
+                                </div>
+                            )}
+                        </Draggable>
+                    );
+                })
+                }
+
+                {droppableProvided.placeholder}
+
+            </div>
+
+            <div
+                className="flex-grow min-h-[38px] box-border m-2 text-center">
+                <Typography align={"center"}
+                            variant={"label"}>
+                    {helpText}
+                </Typography>
+            </div>
+
+        </div>
+    );
+}
+
+export interface StorageUploadProps {
+    value: StorageFieldItem[];
+    setInternalValue: (v: StorageFieldItem[]) => void;
+    name: string;
+    property: ResolvedStringProperty | ResolvedArrayProperty<string[]>;
+    onChange: (value: string | string[] | null) => void;
+    multipleFilesSupported: boolean;
+    autoFocus: boolean;
+    disabled: boolean;
+    entity: Entity<any>;
+    storage: StorageConfig;
+    onFilesAdded: (acceptedFiles: File[]) => void;
+    storagePathBuilder: (file: File) => string;
+    onFileUploadComplete: (uploadedPath: string, entry: StorageFieldItem, fileMetadata?: any) => Promise<void>;
+}
+
+export function StorageUpload({
+                                  property,
+                                  name,
+                                  value,
+                                  setInternalValue,
+                                  onChange,
+                                  multipleFilesSupported,
+                                  onFileUploadComplete,
+                                  disabled,
+                                  onFilesAdded,
+                                  autoFocus,
+                                  storage,
+                                  entity,
+                                  storagePathBuilder
+                              }: StorageUploadProps) {
+
+    if (multipleFilesSupported) {
+        const arrayProperty = property as ResolvedArrayProperty<string[]>;
+        if (arrayProperty.of) {
+            if (Array.isArray(arrayProperty.of)) {
+                throw Error("Storage field using array must be of data type string");
+            }
+            if (arrayProperty.of.dataType !== "string") {
+                throw Error("Storage field using array must be of data type string");
+            }
+        } else {
+            throw Error("Storage field using array must be of data type string");
+        }
+    }
+
+    const metadata: Record<string, unknown> | undefined = storage?.metadata;
+    const size = multipleFilesSupported ? "small" : "medium";
+
+    const moveItem = useCallback((fromIndex: number, toIndex: number) => {
+        if (!multipleFilesSupported) return;
+        const newValue = [...value];
+        const item = newValue[fromIndex];
+        newValue.splice(fromIndex, 1);
+        newValue.splice(toIndex, 0, item);
+        setInternalValue(newValue);
+        const fieldValue = newValue
+            .filter(e => !!e.storagePathOrDownloadUrl)
+            .map(e => e.storagePathOrDownloadUrl as string);
+        onChange(fieldValue);
+    }, [multipleFilesSupported, onChange, setInternalValue, value]);
+
+    const onDragEnd = useCallback((result: any) => {
+        // dropped outside the list
+        if (!result.destination) {
+            return;
+        }
+
+        moveItem(result.source.index, result.destination.index);
+
+    }, [moveItem])
+
+    const onClear = useCallback((clearedStoragePathOrDownloadUrl: string) => {
+        if (multipleFilesSupported) {
+            const newValue: StorageFieldItem[] = value.filter(v => v.storagePathOrDownloadUrl !== clearedStoragePathOrDownloadUrl);
+            onChange(newValue.filter(v => !!v.storagePathOrDownloadUrl).map(v => v.storagePathOrDownloadUrl as string));
+            setInternalValue(newValue);
+        } else {
+            onChange(null);
+            setInternalValue([]);
+        }
+    }, [value, multipleFilesSupported, onChange]);
+
+    const helpText = multipleFilesSupported
+        ? "Drag 'n' drop some files here, or click to select files"
+        : "Drag 'n' drop a file here, or click to select one";
+
+    const renderProperty: ResolvedStringProperty = multipleFilesSupported
+        ? (property as ArrayProperty<string[]>).of as ResolvedStringProperty
+        : property as ResolvedStringProperty;
+
+    return (
+        <DragDropContext onDragEnd={onDragEnd}>
+            <Droppable
+                droppableId={`droppable_${name}`}
+                direction="horizontal"
+                renderClone={(provided, snapshot, rubric) => {
+                    const entry = value[rubric.source.index];
+                    return (
+                        <div
+                            ref={provided.innerRef}
+                            {...provided.draggableProps}
+                            {...provided.dragHandleProps}
+                            style={
+                                provided.draggableProps.style
+                            }
+                            className="rounded"
+                        >
+                            <StorageItemPreview
+                                name={`storage_preview_${entry.storagePathOrDownloadUrl}`}
+                                property={renderProperty}
+                                disabled={true}
+                                entity={entity}
+                                value={entry.storagePathOrDownloadUrl as string}
+                                onRemove={onClear}
+                                size={entry.size}/>
+                        </div>
+                    );
+                }}
+            >
+                {(provided, snapshot) => {
+                    return <FileDropComponent storage={storage}
+                                              disabled={disabled}
+                                              isDraggingOver={snapshot.isDraggingOver}
+                                              droppableProvided={provided}
+                                              onFilesAdded={onFilesAdded}
+                                              multipleFilesSupported={multipleFilesSupported}
+                                              autoFocus={autoFocus}
+                                              internalValue={value}
+                                              property={renderProperty}
+                                              entity={entity}
+                                              onClear={onClear}
+                                              metadata={metadata}
+                                              storagePathBuilder={storagePathBuilder}
+                                              onFileUploadComplete={onFileUploadComplete}
+                                              size={size}
+                                              name={name}
+                                              helpText={helpText}/>
+                }}
+            </Droppable>
+        </DragDropContext>
+    );
+
+}

package/src/form/field_bindings/SwitchFieldBinding.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+
+import { FieldProps } from "../../types";
+import { useClearRestoreValue } from "../../hooks";
+import { getIconForProperty } from "../../util";
+import { FieldHelperText } from "../components/FieldHelperText";
+import { BooleanSwitchWithLabel } from "@firecms/ui";
+import { LabelWithIcon } from "../../components";
+
+type SwitchFieldProps = FieldProps<boolean>;
+
+/**
+ * Simple boolean switch biding to a boolean property.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export const SwitchFieldBinding = React.forwardRef(function SwitchFieldBinding({
+                                                                                   propertyKey,
+                                                                                   value,
+                                                                                   setValue,
+                                                                                   error,
+                                                                                   showError,
+                                                                                   autoFocus,
+                                                                                   disabled,
+                                                                                   touched,
+                                                                                   property,
+                                                                                   includeDescription
+                                                                               }: SwitchFieldProps, ref) {
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    return (
+        <>
+
+            <BooleanSwitchWithLabel
+                value={value}
+                onValueChange={(v) => setValue(v)}
+                error={showError}
+                label={<LabelWithIcon icon={getIconForProperty(property, "small")}
+                                      required={property.validation?.required}
+                                      title={property.name}/>}
+                disabled={disabled}
+                autoFocus={autoFocus}
+                size={"medium"}
+            />
+
+            <FieldHelperText includeDescription={includeDescription}
+                             showError={showError}
+                             error={error}
+                             disabled={disabled}
+                             property={property}/>
+        </>
+
+    );
+});

package/src/form/field_bindings/TextFieldBinding.tsx

@@ -0,0 +1,108 @@
+import React, { useCallback } from "react";
+
+import { FieldProps, PreviewType } from "../../types";
+import { FieldHelperText } from "../components";
+import { useClearRestoreValue } from "../../hooks";
+import { getIconForProperty } from "../../util";
+import { ClearIcon, Collapse, IconButton, TextField } from "@firecms/ui";
+import { PropertyPreview } from "../../preview";
+import { LabelWithIcon } from "../../components";
+
+interface TextFieldProps<T extends string | number> extends FieldProps<T> {
+    allowInfinity?: boolean
+}
+
+/**
+ * Generic text 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 TextFieldBinding<T extends string | number>({
+                                                                propertyKey,
+                                                                value,
+                                                                setValue,
+                                                                error,
+                                                                showError,
+                                                                disabled,
+                                                                autoFocus,
+                                                                property,
+                                                                includeDescription,
+                                                            }: TextFieldProps<T>) {
+
+    let multiline: boolean | undefined;
+    let url: boolean | PreviewType | undefined;
+    if (property.dataType === "string") {
+        multiline = property.multiline;
+        url = property.url;
+    }
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const handleClearClick = useCallback((e: React.MouseEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+        setValue(null);
+    }, [setValue]);
+
+    const onChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        if (inputType === "number") {
+            const numberValue = event.target.value ? parseFloat(event.target.value) : undefined;
+            if (numberValue && isNaN(numberValue)) {
+                setValue(null);
+            } else if (numberValue !== undefined && numberValue !== null) {
+                setValue(numberValue as T);
+            } else {
+                setValue(null);
+            }
+        } else {
+            setValue(event.target.value as T);
+        }
+    };
+
+    const isMultiline = Boolean(multiline);
+
+    const inputType = property.dataType === "number" ? "number" : undefined;
+    return (
+        <>
+            <TextField
+                value={value}
+                onChange={onChange}
+                autoFocus={autoFocus}
+                label={<LabelWithIcon icon={getIconForProperty(property, "small")}
+                                      required={property.validation?.required}
+                                      title={property.name}/>}
+                type={inputType}
+                multiline={isMultiline}
+                disabled={disabled}
+                endAdornment={
+                    property.clearable && <IconButton
+                        onClick={handleClearClick}>
+                        <ClearIcon/>
+                    </IconButton>
+                }
+                error={showError ? error : undefined}
+                inputClassName={error ? "text-red-500 dark:text-red-600" : ""}/>
+
+            <FieldHelperText includeDescription={includeDescription}
+                             showError={showError}
+                             error={error}
+                             disabled={disabled}
+                             property={property}/>
+
+            {url && <Collapse
+                className="mt-1 ml-1"
+                in={Boolean(value)}>
+                <PropertyPreview value={value}
+                                 property={property}
+                                 size={"medium"}/>
+            </Collapse>}
+
+        </>
+    );
+
+}

package/src/form/index.tsx

@@ -0,0 +1,42 @@
+import { SelectFieldBinding } from "./field_bindings/SelectFieldBinding";
+import { MultiSelectBinding } from "./field_bindings/MultiSelectBinding";
+import { ArrayOfReferencesFieldBinding } from "./field_bindings/ArrayOfReferencesFieldBinding";
+import { StorageUploadFieldBinding } from "./field_bindings/StorageUploadFieldBinding";
+import { TextFieldBinding } from "./field_bindings/TextFieldBinding";
+import { SwitchFieldBinding } from "./field_bindings/SwitchFieldBinding";
+import { DateTimeFieldBinding } from "./field_bindings/DateTimeFieldBinding";
+import { ReferenceFieldBinding } from "./field_bindings/ReferenceFieldBinding";
+import { MapFieldBinding } from "./field_bindings/MapFieldBinding";
+import { KeyValueFieldBinding } from "./field_bindings/KeyValueFieldBinding";
+import { RepeatFieldBinding } from "./field_bindings/RepeatFieldBinding";
+import { BlockFieldBinding } from "./field_bindings/BlockFieldBinding";
+import { ReadOnlyFieldBinding } from "./field_bindings/ReadOnlyFieldBinding";
+import { MarkdownFieldBinding } from "./field_bindings/MarkdownFieldBinding";
+import { ArrayCustomShapedFieldBinding } from "./field_bindings/ArrayCustomShapedFieldBinding";
+
+export {
+    ArrayCustomShapedFieldBinding,
+    RepeatFieldBinding,
+    MultiSelectBinding,
+    ArrayOfReferencesFieldBinding,
+    BlockFieldBinding,
+    DateTimeFieldBinding,
+    ReadOnlyFieldBinding,
+    MapFieldBinding,
+    KeyValueFieldBinding,
+    ReferenceFieldBinding,
+    SelectFieldBinding,
+    StorageUploadFieldBinding,
+    SwitchFieldBinding,
+    MarkdownFieldBinding,
+    TextFieldBinding
+};
+
+export * from "./components";
+
+export type { EntityFormProps } from "./EntityForm";
+export {
+    EntityForm
+} from "./EntityForm";
+
+export { PropertyFieldBinding } from "./PropertyFieldBinding";

package/src/form/useClearRestoreValue.tsx

@@ -0,0 +1,35 @@
+import { useEffect, useRef } from "react";
+import { CMSType, ResolvedProperty } from "../types";
+
+/**
+ * Hook we use to restore a value after it has been cleared
+ * @param property
+ * @param value
+ * @param setValue
+ * @ignore
+ */
+export function useClearRestoreValue<T extends CMSType>({
+                                                            property,
+                                                            value,
+                                                            setValue
+                                                        }:
+                                                            {
+                                                                property: ResolvedProperty<T>,
+                                                                value: T,
+                                                                setValue: (value: T | null, shouldValidate?: boolean) => void
+                                                            }) {
+
+    const clearedValueRef = useRef<T | null>(null);
+    useEffect(() => {
+        const shouldClearValueIfDisabled = typeof property.disabled === "object" && Boolean(property.disabled.clearOnDisabled);
+        if (shouldClearValueIfDisabled) {
+            if (value != null) {
+                clearedValueRef.current = value;
+                setValue(null);
+            }
+        } else if (clearedValueRef.current) {
+            setValue(clearedValueRef.current);
+            clearedValueRef.current = null;
+        }
+    }, [property]);
+}