@firecms/core 3.0.0-alpha.7 → 3.0.0-alpha.71

package/src/form/components/StorageItemPreview.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+
+import { Entity, ResolvedStringProperty } from "../../types";
+import { PreviewSize, PropertyPreview } from "../../preview";
+
+import { cn, IconButton, paperMixin, RemoveIcon, Tooltip } from "@firecms/ui";
+import { ErrorBoundary } from "../../components";
+
+interface StorageItemPreviewProps {
+    name: string;
+    property: ResolvedStringProperty;
+    value: string,
+    entity: Entity<any>,
+    onRemove: (value: string) => void;
+    size: PreviewSize;
+    disabled: boolean;
+}
+
+export function StorageItemPreview({
+                                       name,
+                                       property,
+                                       value,
+                                       entity,
+                                       onRemove,
+                                       disabled,
+                                       size
+                                   }: StorageItemPreviewProps) {
+
+    return (
+        <div className={cn(paperMixin,
+            "relative m-4 border-box flex items-center justify-center",
+            size === "medium" ? "min-w-[220px] min-h-[220px] max-w-[220px]" : "min-w-[118px] min-h-[118px] max-w-[118px]")}>
+
+            {!disabled &&
+                <div
+                    className="absolute rounded-full -top-2 -right-2 z-10 bg-white dark:bg-gray-900">
+
+                    <Tooltip
+                        title="Remove">
+                        <IconButton
+                            size={"small"}
+                            onClick={(event) => {
+                                event.stopPropagation();
+                                onRemove(value);
+                            }}>
+                            <RemoveIcon size={"small"}/>
+                        </IconButton>
+                    </Tooltip>
+                </div>
+            }
+
+            {value &&
+                <ErrorBoundary>
+                    <PropertyPreview propertyKey={name}
+                                     value={value}
+                                     property={property}
+                                     // entity={entity}
+                                     size={size}/>
+                </ErrorBoundary>
+            }
+
+
+        </div>
+    );
+
+}

package/src/form/components/StorageUploadProgress.d.ts

@@ -0,0 +1,10 @@
+import { StorageFieldItem } from "../../util/useStorageUploadController";
+export interface StorageUploadItemProps {
+    storagePath: string;
+    metadata?: any;
+    entry: StorageFieldItem;
+    onFileUploadComplete: (value: string, entry: StorageFieldItem, metadata?: any) => Promise<void>;
+    imageSize: number;
+    simple: boolean;
+}
+export declare function StorageUploadProgress({ storagePath, entry, metadata, onFileUploadComplete, imageSize, simple }: StorageUploadItemProps): import("react/jsx-runtime").JSX.Element;

package/src/form/components/StorageUploadProgress.tsx

@@ -0,0 +1,104 @@
+import React, { useCallback } from "react";
+
+import { useSnackbarController, useStorageSource } from "../../hooks";
+import { StorageFieldItem } from "../../util/useStorageUploadController";
+import { ErrorView } from "../../components";
+import { cn, paperMixin, Skeleton } from "@firecms/ui";
+
+export interface StorageUploadItemProps {
+    storagePath: string;
+    metadata?: any,
+    entry: StorageFieldItem,
+    onFileUploadComplete: (value: string,
+                           entry: StorageFieldItem,
+                           metadata?: any) => Promise<void>;
+    imageSize: number;
+    simple: boolean;
+}
+
+export function StorageUploadProgress({
+                                          storagePath,
+                                          entry,
+                                          metadata,
+                                          onFileUploadComplete,
+                                          imageSize,
+                                          simple
+                                      }: StorageUploadItemProps) {
+
+    const storage = useStorageSource();
+
+    const snackbarController = useSnackbarController();
+
+    const [error, setError] = React.useState<Error | undefined>();
+    const [loading, setLoading] = React.useState<boolean>(false);
+    const mounted = React.useRef(false);
+    const uploading = React.useRef(false);
+
+    const upload = useCallback((file: File, fileName?: string) => {
+
+        if (uploading.current) return;
+        uploading.current = true;
+        setError(undefined);
+        setLoading(true);
+
+        storage.uploadFile({
+            file,
+            fileName,
+            path: storagePath,
+            metadata
+        })
+            .then(async ({ path }) => {
+                console.debug("Upload successful");
+                await onFileUploadComplete(path, entry, metadata);
+                if (mounted.current)
+                    setLoading(false);
+            })
+            .catch((e) => {
+                console.warn("Upload error", e);
+                if (mounted.current) {
+                    setError(e);
+                    setLoading(false);
+                    snackbarController.open({
+                        type: "error",
+                        message: "Error uploading file: " + e.message
+                    });
+                }
+            })
+            .finally(() => {
+                uploading.current = false;
+            });
+    }, [entry, metadata, onFileUploadComplete, storage, storagePath]);
+
+    React.useEffect(() => {
+        mounted.current = true;
+        if (entry.file)
+            upload(entry.file, entry.fileName);
+        return () => {
+            mounted.current = false;
+        };
+    }, [entry.file, entry.fileName, upload]);
+
+    if (simple) {
+        return <div className={`m-4 w-${imageSize} h-${imageSize}`}>
+
+            {loading && <Skeleton className={`w-${imageSize} h-${imageSize}`}/>}
+
+        </div>
+    }
+    return (
+
+        <div className={cn(paperMixin,
+            "relative m-4 border-box flex items-center justify-center",
+             `min-w-[${imageSize}px] min-h-[${imageSize}px]`)}>
+
+            {loading &&
+                <Skeleton className="w-full h-full"/>}
+
+            {error && <ErrorView title={"Error uploading file"}
+                                 error={error}/>}
+
+        </div>
+
+    );
+
+}

package/src/form/components/SubmitListener.tsx

@@ -0,0 +1,32 @@
+import React from "react";
+
+import { useFormikContext } from "formik";
+import equal from "react-fast-compare";
+
+export function SubmitListener() {
+
+    const formik = useFormikContext()
+    const [lastValues, setLastValues] = React.useState(formik.values);
+
+    React.useEffect(() => {
+        const valuesEqualLastValues = equal(lastValues, formik.values)
+        const valuesEqualInitialValues = equal(formik.values, formik.initialValues)
+
+        if (!valuesEqualLastValues) {
+            setLastValues(formik.values)
+        }
+
+        const doSubmit = () => {
+            if (!valuesEqualLastValues && !valuesEqualInitialValues && formik.isValid) {
+                formik.submitForm();
+            }
+        }
+
+        const handler = setTimeout(doSubmit, 300);
+        return () => {
+            clearTimeout(handler);
+        };
+    }, [formik.values, formik.isValid])
+
+    return null;
+}

package/src/form/components/SwitchControl.d.ts

@@ -0,0 +1,8 @@
+import { FieldProps } from "formik";
+export declare function SwitchControl({ field, form, label, tooltip, disabled, size, allowIndeterminate }: FieldProps & {
+    label: string;
+    tooltip?: string;
+    disabled?: boolean;
+    size: "small" | "medium";
+    allowIndeterminate?: boolean;
+}): import("react/jsx-runtime").JSX.Element;

package/src/form/components/SwitchControl.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+import { FieldProps } from "formik";
+import { BooleanSwitchWithLabel, Tooltip } from "@firecms/ui";
+
+export function SwitchControl({
+                                  field,
+                                  form,
+                                  label,
+                                  tooltip,
+                                  disabled,
+                                  size = "small",
+                                  allowIndeterminate
+                              }: FieldProps & {
+    label: string,
+    tooltip?: string,
+    disabled?: boolean,
+    size: "small" | "medium",
+    allowIndeterminate?: boolean
+}) {
+
+    const formControlLabel = <BooleanSwitchWithLabel
+        label={label}
+        size={size}
+        position={"start"}
+        value={field.value}
+        disabled={disabled}
+        allowIndeterminate={allowIndeterminate}
+        onValueChange={(checked:boolean | null) => form.setFieldValue(field.name, checked)}/>;
+
+    if (tooltip)
+        return (
+            <Tooltip
+                title={tooltip}>
+                {formControlLabel}
+            </Tooltip>
+        );
+    return formControlLabel;
+}

package/src/form/components/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./FormikArrayContainer";
+export * from "./SwitchControl";
+export * from "./FieldHelperText";

package/src/form/components/index.tsx

@@ -0,0 +1,3 @@
+export * from "./FormikArrayContainer";
+export * from "./SwitchControl";
+export * from "./FieldHelperText";

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.d.ts

@@ -0,0 +1,9 @@
+import { FieldProps } from "../../types";
+/**
+ * Array field used for custom
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export declare function ArrayCustomShapedFieldBinding<T extends Array<any>>({ propertyKey, value, error, showError, isSubmitting, setValue, tableMode, property, includeDescription, underlyingValueHasChanged, context, disabled }: FieldProps<T, any, any>): import("react/jsx-runtime").JSX.Element;

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import { FieldProps } from "../../types";
+import { FieldHelperText } from "../components";
+import { PropertyFieldBinding } from "../PropertyFieldBinding";
+import { useClearRestoreValue, useFireCMSContext } from "../../hooks";
+import { ExpandablePanel } from "@firecms/ui";
+import { getIconForProperty } from "../../util";
+import { LabelWithIcon } from "../../components";
+
+/**
+ * Array field used for custom
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
+                                                                        propertyKey,
+                                                                        value,
+                                                                        error,
+                                                                        showError,
+                                                                        isSubmitting,
+                                                                        setValue,
+                                                                        tableMode,
+                                                                        property,
+                                                                        includeDescription,
+                                                                        underlyingValueHasChanged,
+                                                                        context,
+                                                                        disabled
+                                                                    }: FieldProps<T, any, any>) {
+
+    const { propertyConfigs } = useFireCMSContext();
+    if (!Array.isArray(property.resolvedProperties))
+        throw Error("ArrayCustomShapedFieldBinding misconfiguration. Property `of` not set");
+
+    const expanded = property.expanded === undefined ? true : property.expanded;
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const title = <LabelWithIcon icon={getIconForProperty(property, "small")}
+                                 required={property.validation?.required}
+                                 className={"text-text-secondary dark:text-text-secondary-dark"}
+                                 title={property.name}/>;
+
+    const body = property.resolvedProperties.map((childProperty, index) => {
+        const fieldProps = {
+            propertyKey: `${propertyKey}[${index}]`,
+            disabled,
+            property: childProperty,
+            includeDescription,
+            underlyingValueHasChanged,
+            context,
+            tableMode: false,
+            partOfArray: true,
+            partOfBlock: false,
+            autoFocus: false
+        };
+        return <div key={`custom_shaped_array_${index}`} className="pb-4">
+            <PropertyFieldBinding {...fieldProps}/>
+        </div>;
+    });
+
+    return (
+
+        <>
+
+            {!tableMode &&
+                <ExpandablePanel initiallyExpanded={expanded}
+                                 title={title}
+                                 className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}>
+                    {body}
+                </ExpandablePanel>}
+
+            {tableMode && body}
+
+            <FieldHelperText includeDescription={includeDescription}
+                             showError={showError}
+                             error={error}
+                             disabled={disabled}
+                             property={property}/>
+
+        </>
+    );
+}

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.d.ts

@@ -0,0 +1,11 @@
+import { EntityReference, FieldProps } from "../../types";
+type ArrayOfReferencesFieldProps = FieldProps<EntityReference[]>;
+/**
+ * This field allows selecting multiple references.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export declare function ArrayOfReferencesFieldBinding({ propertyKey, value, error, showError, disabled, isSubmitting, tableMode, property, includeDescription, setValue, setFieldValue }: ArrayOfReferencesFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/src/form/field_bindings/ArrayOfReferencesFieldBinding.tsx

@@ -0,0 +1,153 @@
+import React, { useCallback, useMemo } from "react";
+import { Entity, EntityCollection, EntityReference, FieldProps, ResolvedProperty } from "../../types";
+import { ReferencePreview } from "../../preview";
+import { FieldHelperText, FormikArrayContainer } from "../components";
+import { LabelWithIcon } from "../../components";
+import { getIconForProperty, getReferenceFrom } from "../../util";
+
+import { useClearRestoreValue, useNavigationController, useReferenceDialog } from "../../hooks";
+import { Button, ExpandablePanel } from "@firecms/ui";
+import { ErrorView } from "../../components";
+
+type ArrayOfReferencesFieldProps = FieldProps<EntityReference[]>;
+
+/**
+ * This field allows selecting multiple references.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export function ArrayOfReferencesFieldBinding({
+                                                  propertyKey,
+                                                  value,
+                                                  error,
+                                                  showError,
+                                                  disabled,
+                                                  isSubmitting,
+                                                  tableMode,
+                                                  property,
+                                                  includeDescription,
+                                                  setValue,
+                                                  setFieldValue
+                                              }: ArrayOfReferencesFieldProps) {
+
+    const ofProperty = property.of as ResolvedProperty;
+    if (ofProperty.dataType !== "reference") {
+        throw Error("ArrayOfReferencesField expected a property containing references");
+    }
+
+    const expanded = property.expanded === undefined ? true : property.expanded;
+    const [onHover, setOnHover] = React.useState(false);
+    const selectedEntityIds = value && Array.isArray(value) ? value.map((ref) => ref.id) : [];
+
+    useClearRestoreValue({
+        property,
+        value,
+        setValue
+    });
+
+    const navigationController = useNavigationController();
+    const collection: EntityCollection | undefined = useMemo(() => {
+        return ofProperty.path ? navigationController.getCollection(ofProperty.path) : undefined;
+    }, [ofProperty.path]);
+
+    if (!collection) {
+        throw Error(`Couldn't find the corresponding collection for the path: ${ofProperty.path}`);
+    }
+
+    const onMultipleEntitiesSelected = useCallback((entities: Entity<any>[]) => {
+        console.debug("onMultipleEntitiesSelected", entities);
+        setValue(entities.map(e => getReferenceFrom(e)));
+    }, [setValue]);
+
+    const referenceDialogController = useReferenceDialog({
+            multiselect: true,
+            path: ofProperty.path,
+            collection,
+            onMultipleEntitiesSelected,
+            selectedEntityIds,
+            forceFilter: ofProperty.forceFilter
+        }
+    );
+
+    const onEntryClick = useCallback((e: React.SyntheticEvent) => {
+        e.preventDefault();
+        referenceDialogController.open();
+    }, [referenceDialogController]);
+
+    const buildEntry = useCallback((index: number, internalId: number) => {
+        const entryValue = value && value.length > index ? value[index] : undefined;
+        if (!entryValue)
+            return <div>Internal ERROR</div>;
+        return (
+            <div
+                onMouseEnter={() => setOnHover(true)}
+                onMouseMove={() => setOnHover(true)}
+                onMouseLeave={() => setOnHover(false)}>
+                <ReferencePreview
+                    disabled={!ofProperty.path}
+                    previewProperties={ofProperty.previewProperties}
+                    size={"medium"}
+                    onClick={onEntryClick}
+                    reference={entryValue}
+                    onHover={onHover}
+                />
+            </div>
+        );
+    }, [ofProperty.path, ofProperty.previewProperties, onHover, value]);
+
+    const title = (
+        <LabelWithIcon icon={getIconForProperty(property, "small")}
+                       required={property.validation?.required}
+                       title={property.name}
+                       className={"text-text-secondary dark:text-text-secondary-dark"}/>
+    );
+
+    const body = <>
+        {!collection && <ErrorView
+            error={"The specified collection does not exist. Check console"}/>}
+
+        {collection && <>
+
+            <FormikArrayContainer value={value}
+                                  addLabel={property.name ? "Add reference to " + property.name : "Add reference"}
+                                  name={propertyKey}
+                                  buildEntry={buildEntry}
+                                  disabled={isSubmitting}
+                                  setFieldValue={setFieldValue}
+                                  newDefaultEntry={property.of.defaultValue}/>
+
+            <Button
+                className="my-4 justify-center text-left"
+                variant="outlined"
+                color="primary"
+                disabled={isSubmitting}
+                onClick={onEntryClick}>
+                Edit {property.name}
+            </Button>
+        </>}
+    </>;
+
+    return (
+        <>
+
+            {!tableMode &&
+                <ExpandablePanel
+                    className={"px-2 md:px-4 pb-2 md:pb-4 pt-1 md:pt-2"}
+                    initiallyExpanded={expanded}
+                    title={title}>
+                    {body}
+                </ExpandablePanel>}
+
+            {tableMode && body}
+
+            <FieldHelperText includeDescription={includeDescription}
+                             showError={showError}
+                             error={error}
+                             disabled={disabled}
+                             property={property}/>
+
+        </>
+    );
+}

package/src/form/field_bindings/BlockFieldBinding.d.ts

@@ -0,0 +1,10 @@
+import { FieldProps } from "../../types";
+/**
+ * If the `oneOf` property is specified, this fields render each array entry as
+ * a `type` select and the corresponding field widget to the selected `type.
+ *
+ * This is one of the internal components that get mapped natively inside forms
+ * and tables to the specified properties.
+ * @group Form fields
+ */
+export declare function BlockFieldBinding<T extends Array<any>>({ propertyKey, value, error, showError, isSubmitting, setValue, setFieldValue, tableMode, property, includeDescription, underlyingValueHasChanged, context, disabled }: FieldProps<T>): import("react/jsx-runtime").JSX.Element;