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

package/src/preview/components/ImagePreview.tsx

@@ -0,0 +1,106 @@
+import React, { CSSProperties, useMemo, useState } from "react";
+
+import { getThumbnailMeasure } from "../util";
+import { PreviewSize } from "../PropertyPreviewProps";
+import { ContentCopyIcon, IconButton, OpenInNewIcon, Tooltip } from "@firecms/ui";
+
+/**
+ * @group Preview components
+ */
+export interface ImagePreviewProps {
+    size: PreviewSize,
+    url: string
+}
+
+/**
+ * @group Preview components
+ */
+export function ImagePreview({
+                                 size,
+                                 url
+                             }: ImagePreviewProps) {
+
+    const [onHover, setOnHover] = useState(false);
+
+    const imageSize = useMemo(() => getThumbnailMeasure(size), [size]);
+
+    if (size === "tiny") {
+        return (
+            <img src={url}
+                 className={"rounded-md"}
+                 key={"tiny_image_preview_" + url}
+                 style={{
+                     position: "relative",
+                     objectFit: "cover",
+                     width: imageSize,
+                     height: imageSize,
+                     maxHeight: "100%"
+                 }}/>
+        );
+    }
+
+    const imageStyle: CSSProperties =
+        {
+            maxWidth: "100%",
+            maxHeight: "100%"
+        };
+
+    return (
+        <div
+            className="relative flex items-center justify-center max-w-full max-h-full"
+            style={{
+                width: imageSize,
+                height: imageSize
+            }}
+            key={"image_preview_" + url}
+            onMouseEnter={() => setOnHover(true)}
+            onMouseMove={() => setOnHover(true)}
+            onMouseLeave={() => setOnHover(false)}>
+
+            <img src={url}
+                 className={"rounded-md"}
+                 style={imageStyle}/>
+
+            {onHover && <>
+
+                {navigator && <Tooltip title="Copy url to clipboard">
+                    <div
+                        className="rounded-full absolute bottom-[-4px] right-8">
+                        <IconButton
+                            variant={"filled"}
+                            size={"small"}
+                            onClick={(e) => {
+                                e.stopPropagation();
+                                e.preventDefault();
+                                return navigator.clipboard.writeText(url);
+                            }}>
+                            <ContentCopyIcon className={"text-gray-500"}
+                                             size={"small"}/>
+                        </IconButton>
+                    </div>
+                </Tooltip>}
+
+                <Tooltip title="Open image in new tab">
+                    <IconButton
+                        variant={"filled"}
+                        component={"a" as React.ElementType}
+                        style={{
+                            position: "absolute",
+                            bottom: -4,
+                            right: -4
+                        }}
+                        href={url}
+                        rel="noopener noreferrer"
+                        target="_blank"
+                        size={"small"}
+                        onClick={(e: any) => e.stopPropagation()}
+                    >
+                        <OpenInNewIcon className={"text-gray-500"}
+                                       size={"small"}/>
+                    </IconButton>
+                </Tooltip>
+            </>
+            }
+        </div>
+    );
+}

package/src/preview/components/ReferencePreview.tsx

@@ -0,0 +1,249 @@
+import * as React from "react";
+import { useMemo } from "react";
+
+import { Entity, EntityCollection, EntityReference, ResolvedProperty } from "../../types";
+
+import { getReferencePreviewKeys, getValueInPath, resolveCollection } from "../../util";
+import { useEntityFetch, useFireCMSContext, useNavigationController, useSideEntityController } from "../../hooks";
+import { PropertyPreview } from "../PropertyPreview";
+import { PreviewSize } from "../PropertyPreviewProps";
+import { SkeletonPropertyComponent } from "../property_previews/SkeletonPropertyComponent";
+import { cn, IconButton, KeyboardTabIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
+import { ErrorView } from "../../components";
+
+export type ReferencePreviewProps = {
+    disabled?: boolean;
+    reference: EntityReference,
+    size: PreviewSize;
+    previewProperties?: string[];
+    onClick?: (e: React.SyntheticEvent) => void;
+    onHover?: boolean;
+    allowEntityNavigation?: boolean;
+};
+
+/**
+ * @group Preview components
+ */
+export const ReferencePreview = React.memo<ReferencePreviewProps>(function ReferencePreview(props: ReferencePreviewProps) {
+    const reference = props.reference;
+    if (!((reference as unknown) instanceof EntityReference)) {
+        console.warn("Reference preview received value of type", typeof reference);
+        return <ReferencePreviewContainer
+            onClick={props.onClick}
+            size={props.size}>
+            <ErrorView error={"Unexpected value. Click to edit"}
+                       tooltip={JSON.stringify(reference)}/>
+        </ReferencePreviewContainer>;
+    }
+    return <ReferencePreviewInternal {...props} />;
+}, areEqual) as React.FunctionComponent<ReferencePreviewProps>;
+
+function areEqual(prevProps: ReferencePreviewProps, nextProps: ReferencePreviewProps) {
+    return prevProps.disabled === nextProps.disabled &&
+        prevProps.size === nextProps.size &&
+        prevProps.onHover === nextProps.onHover &&
+        prevProps.reference?.id === nextProps.reference?.id &&
+        prevProps.reference?.path === nextProps.reference?.path &&
+        prevProps.allowEntityNavigation === nextProps.allowEntityNavigation
+        ;
+}
+
+function ReferencePreviewInternal<M extends Record<string, any>>({
+                                                                     disabled,
+                                                                     reference,
+                                                                     previewProperties,
+                                                                     size,
+                                                                     onHover,
+                                                                     onClick,
+                                                                     allowEntityNavigation = true
+                                                                 }: ReferencePreviewProps) {
+
+    const context = useFireCMSContext();
+    const navigationController = useNavigationController();
+
+    const collection = navigationController.getCollection<EntityCollection<M>>(reference.path);
+    if (!collection) {
+        if (context.components?.missingReference) {
+            return <context.components.missingReference path={reference.path}/>;
+        } else {
+            throw Error(`Couldn't find the corresponding collection view for the path: ${reference.path}`);
+        }
+    }
+
+    return <ReferencePreviewExisting
+        reference={reference}
+        collection={collection}
+        previewProperties={previewProperties}
+        size={size}
+        disabled={disabled}
+        allowEntityNavigation={allowEntityNavigation}
+        onClick={onClick}
+        onHover={onHover}/>
+}
+
+function ReferencePreviewExisting<M extends Record<string, any> = any>({ reference, collection, previewProperties, size, disabled, allowEntityNavigation, onClick, onHover }: ReferencePreviewProps & {
+    collection: EntityCollection<M>
+}) {
+
+    const context = useFireCMSContext();
+    const sideEntityController = useSideEntityController();
+
+    const {
+        entity,
+        dataLoading,
+        dataLoadingError
+    } = useEntityFetch({
+        path: reference.path,
+        entityId: reference.id,
+        collection,
+        useCache: true
+    });
+
+    if (entity) {
+        referencesCache.set(reference.pathWithId, entity);
+    }
+
+    const usedEntity = entity ?? referencesCache.get(reference.pathWithId);
+
+    const resolvedCollection = useMemo(() => resolveCollection({
+        collection,
+        path: reference.path,
+        values: usedEntity?.values,
+        fields: context.propertyConfigs
+    }), [collection]);
+
+    const listProperties = useMemo(() => getReferencePreviewKeys(resolvedCollection, context.propertyConfigs, previewProperties, size === "small" || size === "medium" ? 3 : 1),
+        [previewProperties, resolvedCollection, size]);
+
+    let body: React.ReactNode;
+
+    if (!resolvedCollection) {
+        return <ErrorView
+            error={"Could not find collection with id " + resolvedCollection}/>
+    }
+
+    if (!reference) {
+        body = <ErrorView error={"Reference not set"}/>;
+    } else if (usedEntity && !usedEntity.values) {
+        body = <ErrorView error={"Reference does not exist"}
+                          tooltip={reference.path}/>;
+    } else {
+        body = (
+            <>
+                <div
+                    className="flex flex-col flex-grow w-full max-w-[calc(100%-52px)] m-1">
+
+                    {size !== "tiny" && (
+                        reference
+                            ? <div className={`${
+                                size !== "medium"
+                                    ? "block whitespace-nowrap overflow-hidden truncate"
+                                    : ""
+                            }`}>
+                                <Typography variant={"caption"}
+                                            className={"font-mono"}>
+                                    {reference.id}
+                                </Typography>
+                            </div>
+                            : <Skeleton/>)}
+
+                    {listProperties && listProperties.map((key) => {
+                        const childProperty = resolvedCollection.properties[key as string];
+                        if (!childProperty) return null;
+
+                        return (
+                            <div key={"ref_prev_" + (key as string)}
+                                 className={listProperties.length > 1 ? "my-0.5" : "my-0"}>
+                                {
+                                    usedEntity
+                                        ? <PropertyPreview
+                                            propertyKey={key as string}
+                                            value={getValueInPath(usedEntity.values, key)}
+                                            property={childProperty as ResolvedProperty}
+                                            // entity={usedEntity}
+                                            size={"tiny"}/>
+                                        : <SkeletonPropertyComponent
+                                            property={childProperty as ResolvedProperty}
+                                            size={"tiny"}/>
+                                }
+                            </div>
+                        );
+                    })}
+
+                </div>
+                <div className={`my-${size === "tiny" ? 2 : 4}`}>
+                    {!disabled && usedEntity && allowEntityNavigation &&
+                        <Tooltip title={`See details for ${usedEntity.id}`}>
+                            <IconButton
+                                color={"inherit"}
+                                size={"small"}
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    context.onAnalyticsEvent?.("entity_click_from_reference", {
+                                        path: usedEntity.path,
+                                        entityId: usedEntity.id
+                                    });
+                                    sideEntityController.open({
+                                        entityId: usedEntity.id,
+                                        path: usedEntity.path,
+                                        collection: resolvedCollection,
+                                        updateUrl: true
+                                    });
+                                }}>
+                                <KeyboardTabIcon size={"small"}/>
+                            </IconButton>
+                        </Tooltip>}
+                </div>
+            </>
+        );
+    }
+
+    return (
+        <ReferencePreviewContainer onClick={disabled ? undefined : onClick}
+                                   onHover={disabled ? undefined : onHover}
+                                   size={size}>
+            {body}
+        </ReferencePreviewContainer>
+    );
+}
+
+export function ReferencePreviewContainer({
+                                              children,
+                                              onHover,
+                                              size,
+                                              onClick
+                                          }: {
+    children: React.ReactNode;
+    onHover?: boolean;
+    size: PreviewSize;
+    onClick?: (e: React.SyntheticEvent) => void;
+}) {
+    return <Typography variant={"label"}
+                       className={cn("bg-opacity-70 bg-gray-100 dark:bg-gray-800 dark:bg-opacity-60",
+                           "w-full",
+                           "flex",
+                           "rounded-md",
+                           "overflow-hidden",
+                           onHover ? "hover:bg-opacity-90 dark:hover:bg-opacity-90" : "",
+                           size === "medium" ? "p-2" : "p-1",
+                           size === "tiny" ? "items-center" : "",
+                           "transition-colors duration-300 ease-in-out ",
+                           // onHover ? "shadow-outline" : "",
+                           onClick ? "cursor-pointer" : "")}
+                       style={{
+                           // @ts-ignore
+                           tabindex: 0
+                       }}
+                       onClick={(event) => {
+                           if (onClick) {
+                               event.preventDefault();
+                               onClick(event);
+                           }
+                       }}>
+
+        {children}
+
+    </Typography>
+}
+
+const referencesCache = new Map<string, Entity<any>>();

package/src/preview/components/StorageThumbnail.tsx

@@ -0,0 +1,84 @@
+import React, { useEffect } from "react";
+
+import { renderSkeletonImageThumbnail } from "../property_previews/SkeletonPropertyComponent";
+import { UrlComponentPreview } from "./UrlComponentPreview";
+import { useStorageSource } from "../../hooks";
+import { DownloadConfig, FileType } from "../../types";
+import { PreviewSize } from "../PropertyPreviewProps";
+import { ErrorView } from "../../components";
+
+type StorageThumbnailProps = {
+    storagePathOrDownloadUrl: string;
+    storeUrl: boolean;
+    size: PreviewSize;
+};
+
+/**
+ * @group Preview components
+ */
+export const StorageThumbnail = React.memo<StorageThumbnailProps>(StorageThumbnailInternal, areEqual) as React.FunctionComponent<StorageThumbnailProps>;
+
+function areEqual(prevProps: StorageThumbnailProps, nextProps: StorageThumbnailProps) {
+    return prevProps.size === nextProps.size &&
+        prevProps.storagePathOrDownloadUrl === nextProps.storagePathOrDownloadUrl &&
+        prevProps.storeUrl === nextProps.storeUrl;
+}
+
+const URL_CACHE: Record<string, DownloadConfig> = {};
+
+export function StorageThumbnailInternal({
+                                             storeUrl,
+                                             storagePathOrDownloadUrl,
+                                             size
+                                         }: StorageThumbnailProps) {
+
+    const [error, setError] = React.useState<Error | undefined>(undefined);
+    const storage = useStorageSource();
+
+    const [downloadConfig, setDownloadConfig] = React.useState<DownloadConfig>(URL_CACHE[storagePathOrDownloadUrl]);
+
+    useEffect(() => {
+        if (!storagePathOrDownloadUrl)
+            return;
+        let unmounted = false;
+        storage.getDownloadURL(storagePathOrDownloadUrl)
+            .then(function (downloadConfig) {
+                if (!unmounted) {
+                    setDownloadConfig(downloadConfig);
+                    URL_CACHE[storagePathOrDownloadUrl] = downloadConfig;
+                }
+            }).catch(setError);
+        return () => {
+            unmounted = true;
+        };
+    }, [storagePathOrDownloadUrl]);
+
+    if (!storagePathOrDownloadUrl) return null;
+
+    const filetype = downloadConfig?.metadata ? getFiletype(downloadConfig?.metadata.contentType) : undefined;
+    const previewType = filetype?.startsWith("image")
+        ? "image"
+        : (filetype?.startsWith("video")
+            ? "video"
+            : (filetype?.startsWith("audio") ? "audio" : "file"));
+
+    if (downloadConfig?.fileNotFound)
+        return <ErrorView error={"File not found"}></ErrorView>
+
+    return downloadConfig?.url
+        ? <UrlComponentPreview previewType={previewType}
+                               url={downloadConfig.url}
+                               size={size}
+                               hint={storagePathOrDownloadUrl}/>
+        : renderSkeletonImageThumbnail(size);
+}
+
+function getFiletype(input: string): FileType {
+    if (input.startsWith("image")) return "image/*";
+    else if (input.startsWith("video")) return "video/*";
+    else if (input.startsWith("audio")) return "audio/*";
+    else if (input.startsWith("application")) return "application/*";
+    else if (input.startsWith("text")) return "text/*";
+    else if (input.startsWith("font")) return "font/*";
+    else return input;
+}

package/src/preview/components/UrlComponentPreview.tsx

@@ -0,0 +1,79 @@
+import React from "react";
+
+import { ImagePreview } from "./ImagePreview";
+import { getThumbnailMeasure } from "../util";
+import { PreviewType } from "../../types";
+import { PreviewSize } from "../PropertyPreviewProps";
+import { DescriptionIcon, OpenInNewIcon, Tooltip, Typography } from "@firecms/ui";
+import { EmptyValue } from "./EmptyValue";
+
+/**
+ * @group Preview components
+ */
+export function UrlComponentPreview({
+                                        url,
+                                        previewType,
+                                        size,
+                                        hint
+                                    }: {
+    url: string,
+    previewType?: PreviewType,
+    size: PreviewSize,
+    hint?: string
+}): React.ReactElement {
+
+    if (!previewType) {
+        if (!url || !url.trim()) return <EmptyValue/>;
+        return (
+            <a className="flex gap-4 break-words items-center font-medium text-primary visited:text-primary dark:visited:text-primary dark:text-primary"
+               href={url}
+               rel="noopener noreferrer"
+               onMouseDown={(e: React.MouseEvent) => {
+                   e.preventDefault();
+               }}
+               target="_blank">
+                <OpenInNewIcon size={"small"}/>
+                {url}
+            </a>
+        );
+    }
+
+    if (previewType === "image") {
+        return <ImagePreview url={url}
+                             size={size}/>;
+    } else if (previewType === "audio") {
+        return <audio controls
+                      src={url}>
+            Your browser does not support the
+            <code>audio</code> element.
+        </audio>;
+    } else if (previewType === "video") {
+        return <video
+            className={`max-w-${size === "small" ? "sm" : "md"}`}
+            controls
+        >
+            <source src={url}/>
+        </video>;
+    } else {
+        return (
+            <a
+                href={url}
+                rel="noopener noreferrer"
+                target="_blank"
+                onClick={(e) => e.stopPropagation()}
+                className="flex flex-col items-center justify-center"
+                style={{
+                    width: getThumbnailMeasure(size),
+                    height: getThumbnailMeasure(size)
+                }}>
+                <DescriptionIcon className="flex-grow"/>
+                {hint &&
+                    <Tooltip title={hint}>
+                        <Typography
+                            className="max-w-full truncate rtl text-left"
+                            variant={"caption"}>{hint}</Typography>
+                    </Tooltip>}
+            </a>
+        );
+    }
+}

package/src/preview/index.ts

@@ -0,0 +1,27 @@
+export { PropertyPreview } from "./PropertyPreview";
+export type {
+    PropertyPreviewProps, PreviewSize
+} from "./PropertyPreviewProps";
+
+export * from "./property_previews/ArrayOfStringsPreview";
+export * from "./property_previews/ArrayPropertyEnumPreview";
+export * from "./property_previews/ArrayOfMapsPreview";
+export * from "./property_previews/NumberPropertyPreview";
+export * from "./property_previews/StringPropertyPreview";
+export * from "./property_previews/ArrayOfStorageComponentsPreview";
+export * from "./property_previews/ArrayOfReferencesPreview";
+export * from "./property_previews/MapPropertyPreview";
+export * from "./property_previews/ArrayPropertyPreview";
+export * from "./property_previews/ArrayOneOfPreview";
+export * from "./property_previews/SkeletonPropertyComponent";
+
+export * from "./components/AsyncPreviewComponent";
+export * from "./components/DatePreview";
+export * from "./components/UrlComponentPreview";
+export * from "./components/StorageThumbnail";
+export * from "./components/ArrayEnumPreview";
+export * from "./components/BooleanPreview";
+export * from "./components/EnumValuesChip";
+export * from "./components/EmptyValue";
+export * from "./components/ImagePreview";
+export * from "./components/ReferencePreview";

package/src/preview/property_previews/ArrayOfMapsPreview.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { ErrorBoundary } from "../../components";
+import { useFireCMSContext } from "../../hooks";
+import { PropertyPreviewProps } from "../PropertyPreviewProps";
+import { PropertyPreview } from "../PropertyPreview";
+import { resolveArrayProperty } from "../../util";
+
+/**
+ * @group Preview components
+ */
+export function ArrayOfMapsPreview({
+                                       propertyKey,
+                                       value,
+                                       property: inputProperty,
+                                       size,
+                                       // entity
+                                   }: PropertyPreviewProps<Record<string, any>[]>) {
+    const fireCMSContext = useFireCMSContext();
+
+    const property = resolveArrayProperty({
+        propertyKey,
+        property: inputProperty,
+        propertyValue: value,
+        fields: fireCMSContext.propertyConfigs
+    });
+
+    if (Array.isArray(property?.of)) {
+        throw Error("Using array properties instead of single one in `of` in ArrayProperty");
+    }
+
+    if (property?.dataType !== "array" || !property.of || property.of.dataType !== "map")
+        throw Error("Picked wrong preview component ArrayOfMapsPreview");
+
+    const mapProperty = property.of;
+    const properties = mapProperty.properties;
+    if (!properties) {
+        throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property ${propertyKey}`);
+    }
+    const values = value;
+    const previewProperties: string[] | undefined = mapProperty.previewProperties;
+
+    if (!values) return null;
+
+    let mapProperties = previewProperties;
+    if (!mapProperties || !mapProperties.length) {
+        mapProperties = Object.keys(properties);
+        if (size)
+            mapProperties = mapProperties.slice(0, 3);
+    }
+
+    return (
+        <div className="table-auto text-xs">
+            <div>
+                {values &&
+                    values.map((v, index) => {
+                        return (
+                            <div key={`table_${v}_${index}`}
+                                 className="border-b last:border-b-0">
+                                {mapProperties && mapProperties.map(
+                                    (key) => (
+                                        <div
+                                            key={`table-cell-${key as string}`}
+                                            className="table-cell"
+                                        >
+                                            <ErrorBoundary>
+                                                <PropertyPreview
+                                                    propertyKey={key as string}
+                                                    value={(v)[key]}
+                                                    property={properties[key as string]}
+                                                    // entity={entity}
+                                                    size={"small"}/>
+                                            </ErrorBoundary>
+                                        </div>
+                                    )
+                                )}
+                            </div>
+                        );
+                    })}
+            </div>
+        </div>
+    );
+}

package/src/preview/property_previews/ArrayOfReferencesPreview.tsx

@@ -0,0 +1,52 @@
+import { ResolvedReferenceProperty } from "../../types";
+import { resolveArrayProperty } from "../../util";
+import { useFireCMSContext } from "../../hooks";
+import { PreviewSize, PropertyPreviewProps } from "../PropertyPreviewProps";
+import { ReferencePreview } from "../components/ReferencePreview";
+
+/**
+ * @group Preview components
+ */
+export function ArrayOfReferencesPreview({
+                                             propertyKey,
+                                             value,
+                                             property: inputProperty,
+                                             size
+                                         }: PropertyPreviewProps<any[]>) {
+
+    const fireCMSContext = useFireCMSContext();
+    const property = resolveArrayProperty({
+        propertyKey,
+        property: inputProperty,
+        propertyValue: value,
+        fields: fireCMSContext.propertyConfigs
+    });
+
+    if (Array.isArray(property?.of)) {
+        throw Error("Using array properties instead of single one in `of` in ArrayProperty");
+    }
+
+    if (property?.dataType !== "array" || !property.of || property.of.dataType !== "reference")
+        throw Error("Picked wrong preview component ArrayOfReferencesPreview");
+
+    const childSize: PreviewSize = size === "medium" ? "small" : "tiny";
+
+    return (
+        <div className="flex flex-col w-full">
+            {value &&
+                value.map((reference, index) => {
+                        const ofProperty = property.of as ResolvedReferenceProperty;
+                        return <div className="mt-1 mb-1 w-full"
+                                    key={`preview_array_ref_${propertyKey}_${index}`}>
+                            <ReferencePreview
+                                disabled={!ofProperty.path}
+                                previewProperties={ofProperty.previewProperties}
+                                size={childSize}
+                                reference={reference}
+                            />
+                        </div>;
+                    }
+                )}
+        </div>
+    );
+}