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

package/src/internal/useRestoreScroll.tsx

@@ -0,0 +1,48 @@
+import React, { useCallback, useEffect } from "react";
+import { useLocation } from "react-router-dom";
+
+const scrollsMap: Record<string, number> = {};
+
+export function useRestoreScroll() {
+
+    // const scrollsMap = React.useRef<Record<string, number>>({});
+
+    const location = useLocation();
+
+    const containerRef = React.useRef<HTMLDivElement>(null);
+    const [scroll, setScroll] = React.useState(0);
+    const [direction, setDirection] = React.useState<"up" | "down">("down");
+
+    const handleScroll = useCallback(() => {
+        if (!containerRef.current || !location.key) return;
+        scrollsMap[location.key] = containerRef.current.scrollTop;
+        setScroll(containerRef.current.scrollTop);
+        setDirection(containerRef.current.scrollTop > scroll ? "down" : "up");
+    }, [containerRef, location.key, scroll]);
+
+    useEffect(() => {
+        const container = containerRef.current;
+        if (!container) return;
+        container.addEventListener("scroll", handleScroll, { passive: true });
+
+        return () => {
+            if (container)
+                container.removeEventListener("scroll", handleScroll);
+        };
+    }, [containerRef, handleScroll, location]);
+
+    useEffect(() => {
+        if (!containerRef.current || !scrollsMap[location.key]) return;
+        containerRef.current.scrollTo(
+            {
+                top: scrollsMap[location.key],
+                behavior: "auto"
+            });
+    }, [location]);
+
+    return {
+        containerRef,
+        scroll,
+        direction
+    };
+}

package/src/internal/useUnsavedChangesDialog.tsx

@@ -0,0 +1,106 @@
+import React, { useCallback } from "react";
+import { Blocker, Transition } from "history";
+import { UNSAFE_NavigationContext, useNavigate } from "react-router-dom";
+import { Button, Dialog, DialogActions, DialogContent, Typography } from "@firecms/ui";
+
+export function useNavigationUnsavedChangesDialog(when: boolean, onSuccess: () => void):
+    {
+        navigationWasBlocked: boolean,
+        handleCancel: () => void,
+        handleOk: () => void
+    } {
+
+    const [nextLocation, setNextLocation] = React.useState<any | undefined>();
+    const { navigator } = React.useContext(UNSAFE_NavigationContext);
+
+    const navigate = useNavigate();
+
+    const handleCancel = () => {
+        setNextLocation(undefined);
+    };
+
+    const handleOk = () => {
+        onSuccess();
+        setNextLocation(undefined);
+        navigate(-1);
+    };
+
+    const blocker: Blocker = useCallback(({
+                                              action,
+                                              location: nextLocation,
+                                              retry
+                                          }) => {
+        switch (action) {
+            case "REPLACE": {
+                retry();
+                return;
+            }
+            case "POP": {
+                setNextLocation(nextLocation);
+            }
+        }
+    }, []);
+
+    React.useEffect(() => {
+        if (!when) return;
+        if (nextLocation) return;
+        if (!("block" in navigator)) return;
+        const unblock = (navigator as any).block((tx: Transition) => {
+            const autoUnblockingTx = {
+                ...tx,
+                retry() {
+                    unblock();
+                    tx.retry();
+                }
+            };
+            blocker(autoUnblockingTx);
+        });
+
+        return unblock;
+    }, [navigator, blocker, when, nextLocation]);
+
+    return {
+        navigationWasBlocked: Boolean(nextLocation),
+        handleCancel,
+        handleOk
+    };
+}
+
+export interface UnsavedChangesDialogProps {
+    open: boolean;
+    body?: React.ReactNode;
+    title?: string;
+    handleOk: () => void;
+    handleCancel: () => void;
+}
+
+export function UnsavedChangesDialog({
+                                         open,
+                                         handleOk,
+                                         handleCancel,
+                                         body,
+                                         title
+                                     }: UnsavedChangesDialogProps) {
+
+    return (
+        <Dialog
+            open={open}
+            onOpenChange={(open) => open ? handleCancel() : handleOk()}
+        >
+            <DialogContent>
+                <Typography variant={"h6"}>{title}</Typography>
+
+                {body}
+
+                <Typography>
+                    Are you sure you want to leave this page?
+                </Typography>
+
+            </DialogContent>
+            <DialogActions>
+                <Button variant="text" onClick={handleCancel} autoFocus> Cancel </Button>
+                <Button onClick={handleOk}> Ok </Button>
+            </DialogActions>
+        </Dialog>
+    );
+}

package/src/preview/PropertyPreview.tsx

@@ -0,0 +1,222 @@
+import React, { createElement } from "react";
+import equal from "react-fast-compare"
+
+import {
+    CMSType,
+    EntityReference,
+    ResolvedArrayProperty,
+    ResolvedMapProperty,
+    ResolvedNumberProperty,
+    ResolvedStringProperty
+} from "../types";
+
+import { resolveProperty } from "../util";
+
+import { PropertyPreviewProps } from "./PropertyPreviewProps";
+import { useFireCMSContext } from "../hooks";
+import { EmptyValue } from "./components/EmptyValue";
+import { UrlComponentPreview } from "./components/UrlComponentPreview";
+import { StorageThumbnail } from "./components/StorageThumbnail";
+import { Markdown } from "@firecms/ui";
+import { StringPropertyPreview } from "./property_previews/StringPropertyPreview";
+import { ArrayPropertyPreview } from "./property_previews/ArrayPropertyPreview";
+import { ArrayOfReferencesPreview } from "./property_previews/ArrayOfReferencesPreview";
+import { ArrayOfStorageComponentsPreview } from "./property_previews/ArrayOfStorageComponentsPreview";
+import { ArrayPropertyEnumPreview } from "./property_previews/ArrayPropertyEnumPreview";
+import { ArrayOfStringsPreview } from "./property_previews/ArrayOfStringsPreview";
+import { ArrayOneOfPreview } from "./property_previews/ArrayOneOfPreview";
+import { MapPropertyPreview } from "./property_previews/MapPropertyPreview";
+import { ReferencePreview } from "./components/ReferencePreview";
+import { DatePreview } from "./components/DatePreview";
+import { BooleanPreview } from "./components/BooleanPreview";
+import { NumberPropertyPreview } from "./property_previews/NumberPropertyPreview";
+import { ErrorView } from "../components";
+
+/**
+ * @group Preview components
+ */
+export const PropertyPreview = React.memo(function PropertyPreview<T extends CMSType>(props: PropertyPreviewProps<T>) {
+
+    const fireCMSContext = useFireCMSContext();
+    let content: React.ReactNode | any;
+    const {
+        property: inputProperty,
+        propertyKey,
+        value,
+        size,
+        height,
+        width,
+        // entity
+    } = props;
+
+    const property = resolveProperty({
+        propertyKey,
+        propertyOrBuilder: inputProperty,
+        propertyValue: value,
+        fields: fireCMSContext.propertyConfigs
+    });
+
+    if (value === undefined || property === null) {
+        content = <EmptyValue/>;
+    } else if (property.Preview) {
+        content = createElement(property.Preview as React.ComponentType<PropertyPreviewProps>,
+            {
+                propertyKey,
+                value,
+                property,
+                size,
+                height,
+                width,
+                // entity,
+                customProps: property.customProps
+            });
+    } else if (value === null) {
+        content = <EmptyValue/>;
+    } else if (property.dataType === "string") {
+        const stringProperty = property as ResolvedStringProperty;
+        if (typeof value === "string") {
+            if (stringProperty.url) {
+                if (typeof stringProperty.url === "boolean")
+                    content =
+                        <UrlComponentPreview size={props.size}
+                                             url={value}/>;
+                else if (typeof stringProperty.url === "string")
+                    content =
+                        <UrlComponentPreview size={props.size}
+                                             url={value}
+                                             previewType={stringProperty.url}/>;
+            } else if (stringProperty.storage) {
+                content = <StorageThumbnail
+                    storeUrl={property.storage?.storeUrl ?? false}
+                    size={props.size}
+                    storagePathOrDownloadUrl={value}/>;
+            } else if (stringProperty.markdown) {
+                content = <Markdown source={value}/>;
+            } else {
+                content = <StringPropertyPreview {...props}
+                                                 property={stringProperty}
+                                                 value={value}/>;
+            }
+        } else {
+            content = buildWrongValueType(propertyKey, property.dataType, value);
+        }
+    } else if (property.dataType === "array") {
+        if (value instanceof Array) {
+            const arrayProperty = property as ResolvedArrayProperty;
+            if (!arrayProperty.of && !arrayProperty.oneOf) {
+                throw Error(`You need to specify an 'of' or 'oneOf' prop (or specify a custom field) in your array property ${propertyKey}`);
+            }
+
+            if (arrayProperty.of) {
+                if (Array.isArray(arrayProperty.of)) {
+                    content = <ArrayPropertyPreview {...props}
+                                                    value={value}
+                                                    property={property as ResolvedArrayProperty}/>;
+                }
+                    // else if (arrayProperty.of.dataType === "map") {
+                    //     content =
+                    //         <ArrayOfMapsPreview propertyKey={propertyKey}
+                    //                             property={property as ResolvedArrayProperty}
+                    //                             value={value as Record<string, any>[]} // This might be wrong
+                    //                             entity={entity}
+                    //                             size={size}
+                    //         />;
+                // }
+                else if (arrayProperty.of.dataType === "reference") {
+                    content = <ArrayOfReferencesPreview {...props}
+                                                        value={value}
+                                                        property={property as ResolvedArrayProperty}/>;
+                } else if (arrayProperty.of.dataType === "string") {
+                    if (arrayProperty.of.enumValues) {
+                        content = <ArrayPropertyEnumPreview
+                            {...props}
+                            value={value as string[]}
+                            property={property as ResolvedArrayProperty}/>;
+                    } else if (arrayProperty.of.storage) {
+                        content = <ArrayOfStorageComponentsPreview
+                            {...props}
+                            value={value}
+                            property={property as ResolvedArrayProperty}/>;
+                    } else {
+                        content = <ArrayOfStringsPreview
+                            {...props}
+                            value={value as string[]}
+                            property={property as ResolvedArrayProperty}/>;
+                    }
+                } else if (arrayProperty.of.dataType === "number" && arrayProperty.of.enumValues) {
+                    content = <ArrayPropertyEnumPreview
+                        {...props}
+                        value={value as string[]}
+                        property={property as ResolvedArrayProperty}/>;
+                } else {
+                    content = <ArrayPropertyPreview {...props}
+                                                    value={value}
+                                                    property={property as ResolvedArrayProperty}/>;
+                }
+            } else if (arrayProperty.oneOf) {
+                content = <ArrayOneOfPreview {...props}
+                                             value={value}
+                                             property={property as ResolvedArrayProperty}/>;
+            }
+        } else {
+            content = buildWrongValueType(propertyKey, property.dataType, value);
+        }
+    } else if (property.dataType === "map") {
+        if (typeof value === "object") {
+            content =
+                <MapPropertyPreview {...props}
+                                    property={property as ResolvedMapProperty}/>;
+        } else {
+            content = buildWrongValueType(propertyKey, property.dataType, value);
+        }
+    } else if (property.dataType === "date") {
+        if (value instanceof Date) {
+            content = <DatePreview date={value}/>;
+        } else {
+            content = buildWrongValueType(propertyKey, property.dataType, value);
+        }
+    } else if (property.dataType === "reference") {
+        if (typeof property.path === "string") {
+            if (value instanceof EntityReference) {
+                content = <ReferencePreview
+                    disabled={!property.path}
+                    previewProperties={property.previewProperties}
+                    size={props.size}
+                    // onClick={props.onClick}
+                    reference={value as EntityReference}
+                />;
+            } else {
+                content = buildWrongValueType(propertyKey, property.dataType, value);
+            }
+        } else {
+            content = <EmptyValue/>;
+        }
+
+    } else if (property.dataType === "boolean") {
+        if (typeof value === "boolean") {
+            content = <BooleanPreview value={value}/>;
+        } else {
+            content = buildWrongValueType(propertyKey, property.dataType, value);
+        }
+    } else if (property.dataType === "number") {
+        if (typeof value === "number") {
+            content = <NumberPropertyPreview {...props}
+                                             value={value}
+                                             property={property as ResolvedNumberProperty}/>;
+        } else {
+            content = buildWrongValueType(propertyKey, property.dataType, value);
+        }
+    } else {
+        content = JSON.stringify(value);
+    }
+
+    return content === undefined || content === null ? <EmptyValue/> : content;
+}, equal);
+
+function buildWrongValueType(name: string | undefined, dataType: string, value: any) {
+    console.warn(`Unexpected value for property ${name}, of type ${dataType}`, value);
+    return (
+        <ErrorView title={"Unexpected value"}
+                   error={`${JSON.stringify(value)}`}/>
+    );
+}

package/src/preview/PropertyPreviewProps.tsx

@@ -0,0 +1,59 @@
+import { CMSType, Entity, Property, ResolvedProperty } from "../types";
+
+/**
+ * @group Preview components
+ */
+export type PreviewSize = "medium" | "small" | "tiny";
+
+/**
+ * @group Preview components
+ */
+export interface PropertyPreviewProps<T extends CMSType = any, CustomProps = any, M extends Record<string, any> = Record<string, any>> {
+    /**
+     * Name of the property
+     */
+    propertyKey?: string;
+
+    /**
+     * Current value of the property
+     */
+    value: T;
+
+    /**
+     * Property this display is related to
+     */
+    property: Property<T> | ResolvedProperty<T>;
+
+    /**
+     * Click handler
+     */
+    // onClick?: () => void;
+
+    /**
+     * Desired size of the preview, depending on the context.
+     */
+    size: PreviewSize;
+
+    /**
+     * Max height assigned to the preview, depending on the context.
+     * It may be undefined if unlimited.
+     */
+    height?: number;
+
+    /**
+     * Max height width to the preview, depending on the context.
+     * It may be undefined if unlimited.
+     */
+    width?: number;
+
+    /**
+     * Additional properties set by the developer
+     */
+    customProps?: CustomProps;
+
+    /**
+     * Entity this property refers to
+     */
+    // entity?: Entity<M>;
+
+}

package/src/preview/components/ArrayEnumPreview.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+
+import { EnumValueConfig } from "../../types";
+import { EnumValuesChip } from "./EnumValuesChip";
+import { PreviewSize } from "../PropertyPreviewProps";
+import { ErrorBoundary } from "../../components";
+
+/**
+ * @group Preview components
+ */
+export function ArrayEnumPreview({
+                                     name,
+                                     value,
+                                     enumValues,
+                                     size
+                                 }: {
+    value: string[] | number[],
+    name: string | undefined,
+    enumValues: EnumValueConfig[],
+    size: PreviewSize
+}) {
+
+    return (
+        <div className="flex flex-wrap gap-1.5">
+            {value && value.map((enumKey, index) => {
+                    return (
+                        <ErrorBoundary
+                            key={`preview_array_ref_${name}_${index}`}>
+                            <EnumValuesChip
+                                enumKey={enumKey}
+                                enumValues={enumValues}
+                                size={size !== "medium" ? "small" : "medium"}/>
+                        </ErrorBoundary>
+                    );
+                }
+            )}
+        </div>
+    );
+}

package/src/preview/components/AsyncPreviewComponent.tsx

@@ -0,0 +1,47 @@
+import * as React from "react";
+import { useEffect, useState } from "react";
+import { Skeleton } from "@firecms/ui";
+
+export interface AsyncPreviewComponentProps {
+    builder: Promise<React.ReactNode>;
+}
+
+/**
+ * Utility component used to render the result of an async execution.
+ * It shows a loading indicator while at it.
+ *
+ * @group Preview components
+ */
+export const AsyncPreviewComponent = React.memo(function AsyncPreviewComponentInternal<M extends Record<string, any>>(
+        {
+            builder
+        }: AsyncPreviewComponentProps) {
+
+        const [loading, setLoading] = useState<boolean>(true);
+        const [result, setResult] = useState<React.ReactNode>(null);
+
+        useEffect(() => {
+            let unmounted = false;
+            builder
+                .then((res) => {
+                    if (!unmounted) {
+                        setLoading(false);
+                        setResult(res);
+                    }
+                })
+                .catch(error => {
+                    setLoading(false);
+                    console.error(error);
+                });
+            return () => {
+                unmounted = true;
+            };
+        }, [builder]);
+
+        if (loading)
+            return <Skeleton/>;
+
+        return <React.Fragment>{result}</React.Fragment>;
+
+    }
+);

package/src/preview/components/BooleanPreview.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+import { Checkbox } from "@firecms/ui";
+
+/**
+ * @group Preview components
+ */
+export function BooleanPreview({ value }: {
+    value: boolean
+}): React.ReactElement {
+    return <Checkbox checked={value} color={"secondary"}/>;
+}

package/src/preview/components/DatePreview.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+import { format } from "date-fns";
+import * as locales from "date-fns/locale";
+import { FireCMSContext } from "../../types";
+import { useFireCMSContext } from "../../hooks";
+import { defaultDateFormat } from "../../util";
+
+/**
+ * @group Preview components
+ */
+export function DatePreview({
+                                date
+                            }: { date: Date }): React.ReactElement {
+
+    const appConfig: FireCMSContext<any> | undefined = useFireCMSContext();
+    // @ts-ignore
+    const dateUtilsLocale = appConfig?.locale ? locales[appConfig?.locale] : undefined;
+    const dateFormat: string = appConfig?.dateTimeFormat ?? defaultDateFormat;
+    const formattedDate = date ? format(date, dateFormat, { locale: dateUtilsLocale }) : "";
+
+    return (
+        <>
+            {formattedDate}
+        </>
+    );
+}

package/src/preview/components/EmptyValue.tsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+/**
+ * @group Preview components
+ */
+export function EmptyValue() {
+
+    return <div
+        className="rounded-full bg-gray-200 bg-opacity-30 dark:bg-opacity-20 w-5 h-2 inline-block"/>;
+}

package/src/preview/components/EnumValuesChip.tsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { EnumValues } from "../../types";
+import { buildEnumLabel, enumToObjectEntries, getColorScheme, getLabelOrConfigFrom } from "../../util/enums";
+import { Chip } from "@firecms/ui";
+
+export interface EnumValuesChipProps {
+    enumValues?: EnumValues;
+    enumKey: string | number;
+    size: "small" | "medium";
+    className?: string;
+    children?: React.ReactNode;
+}
+
+/**
+ * @group Preview components
+ */
+export function EnumValuesChip({
+                                   enumValues,
+                                   enumKey,
+                                   size,
+                                   className,
+                                   children
+                               }: EnumValuesChipProps) {
+    if (!enumValues) return null;
+    const enumValuesConfig = enumToObjectEntries(enumValues);
+    const enumValue = enumKey !== undefined ? getLabelOrConfigFrom(enumValuesConfig, enumKey) : undefined;
+    const label = buildEnumLabel(enumValue);
+    const colorScheme = getColorScheme(enumValuesConfig, enumKey);
+    return <Chip
+        className={className}
+        colorScheme={colorScheme}
+        error={!label}
+        outlined={false}
+        size={size}>
+        {children}
+        {!children && (label !== undefined ? label : String(enumKey))}
+    </Chip>;
+}