@firecms/core 3.0.0-beta.1 → 3.0.0-beta.11

package/src/internal/useBuildSideEntityController.tsx

@@ -3,13 +3,14 @@ import {
     EntityCollection,
     EntitySidePanelProps,
     NavigationController,
+    ResolvedProperty,
     SideDialogPanelProps,
     SideDialogsController,
     SideEntityController
 } from "../types";
 import { getNavigationEntriesFromPathInternal, NavigationViewInternal } from "../util/navigation_from_path";
 import { useLocation } from "react-router-dom";
-import { removeInitialAndTrailingSlashes, resolveDefaultSelectedView } from "../util";
+import { removeInitialAndTrailingSlashes, resolveCollection, resolveDefaultSelectedView } from "../util";
 import { ADDITIONAL_TAB_WIDTH, CONTAINER_FULL_WIDTH, FORM_CONTAINER_WIDTH } from "./common";
 import { useLargeLayout } from "../hooks";
 import { EntitySidePanel } from "../core/EntitySidePanel";
@@ -19,8 +20,67 @@ const NEW_URL_HASH = "new";
 export function getEntityViewWidth(props: EntitySidePanelProps<any>, small: boolean): string {
     if (small) return CONTAINER_FULL_WIDTH;
     const mainViewSelected = !props.selectedSubPath;
-    const resolvedWidth: string | undefined = typeof props.width === "number" ? `${props.width}px` : props.width;
-    return !mainViewSelected ? `calc(${ADDITIONAL_TAB_WIDTH} + ${resolvedWidth ?? FORM_CONTAINER_WIDTH})` : resolvedWidth ?? FORM_CONTAINER_WIDTH
+    let resolvedWidth: string | undefined;
+    if (props.width) {
+        resolvedWidth = typeof props.width === "number" ? `${props.width}px` : props.width;
+    } else if (props.collection?.sideDialogWidth) {
+        resolvedWidth = typeof props.collection.sideDialogWidth === "number" ? `${props.collection.sideDialogWidth}px` : props.collection.sideDialogWidth;
+    }
+
+    if (!mainViewSelected) {
+        return `calc(${ADDITIONAL_TAB_WIDTH} + ${resolvedWidth ?? FORM_CONTAINER_WIDTH})`
+    } else {
+        if (resolvedWidth) {
+            return resolvedWidth
+        } else if (!props.collection) {
+            return FORM_CONTAINER_WIDTH;
+        } else {
+            return calculateCollectionDesiredWidth(props.collection);
+        }
+    }
+}
+
+const collectionViewWidthCache: { [key: string]: string } = {};
+
+function calculateCollectionDesiredWidth(collection: EntityCollection<any>): string {
+    if (collectionViewWidthCache[collection.id]) {
+        return collectionViewWidthCache[collection.id];
+    }
+    const resolvedCollection = resolveCollection({
+        collection,
+        path: "__ignored",
+        ignoreMissingFields: true
+    });
+
+    let result = FORM_CONTAINER_WIDTH
+    if (resolvedCollection?.properties) {
+        const values = Object.values(resolvedCollection.properties).map((p: ResolvedProperty) => getNestedPropertiesDepth(p));
+        const maxDepth = Math.max(...values);
+        if (maxDepth < 3) {
+            result = FORM_CONTAINER_WIDTH;
+        } else {
+            result = 768 + 32 * (maxDepth - 2) + "px";
+        }
+    }
+    collectionViewWidthCache[collection.id] = result;
+    return result;
+}
+
+function getNestedPropertiesDepth(property: ResolvedProperty, accumulator: number = 0): number {
+    if (property.dataType === "map" && property.properties) {
+        const values = Object.values(property.properties).flatMap((property) => getNestedPropertiesDepth(property, accumulator + 1));
+        return Math.max(...values);
+    } else if (property.dataType === "array" && property.oneOf) {
+        return accumulator + 3;
+    } else if (property.dataType === "array" && property.of) {
+        if (Array.isArray(property.of)) {
+            return Math.max(...property.of.map((p) => getNestedPropertiesDepth(p, accumulator + 1)));
+        } else {
+            return getNestedPropertiesDepth(property.of, accumulator + 1);
+        }
+    } else {
+        return accumulator + 1;
+    }
 }
 
 export const useBuildSideEntityController = (navigation: NavigationController,
@@ -34,23 +94,36 @@ export const useBuildSideEntityController = (navigation: NavigationController,
     // only on initialisation, create panels from URL
     useEffect(() => {
         if (!navigation.loading && !initialised.current) {
+            console.debug("Initialising side entity controller");
             if (navigation.isUrlCollectionPath(location.pathname)) {
                 const newFlag = location.hash === `#${NEW_URL_HASH}`;
                 const entityOrCollectionPath = navigation.urlPathToDataPath(location.pathname);
-                const panelsFromUrl = buildSidePanelsFromUrl(entityOrCollectionPath, navigation.collections, newFlag);
+                const panelsFromUrl = buildSidePanelsFromUrl(entityOrCollectionPath, navigation.collections ?? [], newFlag);
                 for (let i = 0; i < panelsFromUrl.length; i++) {
-                    const panel = panelsFromUrl[i];
+                    const props = panelsFromUrl[i];
                     setTimeout(() => {
                         if (i === 0)
-                            sideDialogsController.replace(propsToSidePanel(panel, navigation, smallLayout));
+                            sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout));
                         else
-                            sideDialogsController.open(propsToSidePanel(panel, navigation, smallLayout))
+                            sideDialogsController.open(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout))
                     }, 1);
                 }
+            } else {
+                // console.warn("Location path is not a collection path");
             }
             initialised.current = true;
         }
-    }, [location, navigation, sideDialogsController, smallLayout]);
+    }, [location, navigation.loading, navigation.isUrlCollectionPath, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, sideDialogsController, smallLayout, navigation]);
+
+    useEffect(() => {
+        const updatedSidePanels = sideDialogsController.sidePanels.map(sidePanelProps => {
+            if (sidePanelProps.additional) {
+                return propsToSidePanel(sidePanelProps.additional, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout);
+            }
+            return sidePanelProps;
+        });
+        sideDialogsController.setSidePanels(updatedSidePanels);
+    }, [smallLayout]);
 
     const close = useCallback(() => {
         sideDialogsController.close();
@@ -73,9 +146,9 @@ export const useBuildSideEntityController = (navigation: NavigationController,
         sideDialogsController.open(propsToSidePanel({
             selectedSubPath: defaultSelectedView,
             ...props,
-        }, navigation, smallLayout));
+        }, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout));
 
-    }, [sideDialogsController, navigation, smallLayout]);
+    }, [sideDialogsController, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout]);
 
     const replace = useCallback((props: EntitySidePanelProps<any>) => {
 
@@ -83,9 +156,9 @@ export const useBuildSideEntityController = (navigation: NavigationController,
             throw Error("If you want to copy an entity you need to provide an entityId");
         }
 
-        sideDialogsController.replace(propsToSidePanel(props, navigation, smallLayout));
+        sideDialogsController.replace(propsToSidePanel(props, navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, smallLayout));
 
-    }, [navigation, sideDialogsController, smallLayout]);
+    }, [navigation.buildUrlCollectionPath, navigation.resolveAliasesFrom, sideDialogsController, smallLayout]);
 
     return {
         close,
@@ -116,7 +189,8 @@ export function buildSidePanelsFromUrl(path: string, collections: EntityCollecti
                 sidePanels.push({
                         path: navigationEntry.path,
                         entityId: navigationEntry.entityId,
-                        copy: false
+                        copy: false,
+                        width: navigationEntry.parentCollection?.sideDialogWidth
                     }
                 );
             } else if (navigationEntry.type === "custom_view") {
@@ -146,27 +220,33 @@ export function buildSidePanelsFromUrl(path: string, collections: EntityCollecti
     return sidePanels;
 }
 
-const propsToSidePanel = (props: EntitySidePanelProps<any>, navigation: NavigationController, smallLayout: boolean): SideDialogPanelProps => {
+const propsToSidePanel = (props: EntitySidePanelProps,
+                          buildUrlCollectionPath: (path: string) => string,
+                          resolveAliasesFrom: (pathWithAliases: string) => string,
+                          smallLayout: boolean): SideDialogPanelProps => {
 
         const collectionPath = removeInitialAndTrailingSlashes(props.path);
 
         const newPath = props.entityId
-            ? navigation.buildUrlCollectionPath(`${collectionPath}/${props.entityId}/${props.selectedSubPath || ""}`)
-            : navigation.buildUrlCollectionPath(`${collectionPath}#${NEW_URL_HASH}`);
-        const resolvedPath = navigation.resolveAliasesFrom(props.path);
+            ? buildUrlCollectionPath(`${collectionPath}/${props.entityId}/${props.selectedSubPath || ""}`)
+            : buildUrlCollectionPath(`${collectionPath}#${NEW_URL_HASH}`);
+        const resolvedPath = resolveAliasesFrom(props.path);
 
         const resolvedPanelProps: EntitySidePanelProps<any> = {
             ...props,
-            path: resolvedPath
+            path: resolvedPath,
         };
 
-        return ({
+        const entityViewWidth = getEntityViewWidth(props, smallLayout);
+
+        return {
             key: `${props.path}/${props.entityId}`,
             component: <EntitySidePanel {...resolvedPanelProps}/>,
             urlPath: newPath,
-            parentUrlPath: navigation.buildUrlCollectionPath(collectionPath),
-            width: getEntityViewWidth(props, smallLayout),
-            onClose: props.onClose
-        });
+            parentUrlPath: buildUrlCollectionPath(collectionPath),
+            width: entityViewWidth,
+            onClose: props.onClose,
+            additional: props
+        };
     }
 ;

package/src/internal/useUnsavedChangesDialog.tsx

@@ -1,7 +1,7 @@
 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";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography } from "@firecms/ui";
 
 export function useNavigationUnsavedChangesDialog(when: boolean, onSuccess: () => void):
     {
@@ -84,11 +84,13 @@ export function UnsavedChangesDialog({
 
     return (
         <Dialog
+            onEscapeKeyDown={() => {
+                handleCancel();
+            }}
             open={open}
-            onOpenChange={(open) => open ? handleCancel() : handleOk()}
         >
+            <DialogTitle variant={"h6"}>{title}</DialogTitle>
             <DialogContent>
-                <Typography variant={"h6"}>{title}</Typography>
 
                 {body}
 

package/src/preview/PropertyPreview.tsx

@@ -47,17 +47,16 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
         size,
         height,
         width,
-        // entity
+        interactive
     } = props;
 
     const property = resolveProperty({
         propertyKey,
         propertyOrBuilder: inputProperty,
-        propertyValue: value,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
     });
 
-    if (value === undefined || property === null) {
+    if (property === null) {
         content = <EmptyValue/>;
     } else if (property.Preview) {
         content = createElement(property.Preview as React.ComponentType<PropertyPreviewProps>,
@@ -71,7 +70,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                 // entity,
                 customProps: property.customProps
             });
-    } else if (value === null) {
+    } else if (value === undefined || value === null) {
         content = <EmptyValue/>;
     } else if (property.dataType === "string") {
         const stringProperty = property as ResolvedStringProperty;
@@ -85,14 +84,17 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                     content =
                         <UrlComponentPreview size={props.size}
                                              url={value}
+                                             interactive={interactive}
                                              previewType={stringProperty.url}/>;
+            } else if (stringProperty.markdown) {
+                content = <Markdown source={value} size={"small"}/>;
             } else if (stringProperty.storage) {
+                const filePath = stringProperty.storage.previewUrl ? stringProperty.storage.previewUrl(value) : value;
                 content = <StorageThumbnail
+                    interactive={interactive}
                     storeUrl={property.storage?.storeUrl ?? false}
                     size={props.size}
-                    storagePathOrDownloadUrl={value}/>;
-            } else if (stringProperty.markdown) {
-                content = <Markdown source={value}/>;
+                    storagePathOrDownloadUrl={filePath}/>;
             } else {
                 content = <StringPropertyPreview {...props}
                                                  property={stringProperty}
@@ -113,17 +115,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                     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") {
+                } else if (arrayProperty.of.dataType === "reference") {
                     content = <ArrayOfReferencesPreview {...props}
                                                         value={value}
                                                         property={property as ResolvedArrayProperty}/>;
@@ -178,12 +170,13 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
         }
     } else if (property.dataType === "reference") {
         if (typeof property.path === "string") {
-            if (value instanceof EntityReference) {
+            if (typeof value === "object" && "isEntityReference" in value && value.isEntityReference()) {
                 content = <ReferencePreview
                     disabled={!property.path}
                     previewProperties={property.previewProperties}
+                    includeId={property.includeId}
+                    includeEntityLink={property.includeEntityLink}
                     size={props.size}
-                    // onClick={props.onClick}
                     reference={value as EntityReference}
                 />;
             } else {
@@ -195,7 +188,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
 
     } else if (property.dataType === "boolean") {
         if (typeof value === "boolean") {
-            content = <BooleanPreview value={value}/>;
+            content = <BooleanPreview value={value} size={size} property={property}/>;
         } else {
             content = buildWrongValueType(propertyKey, property.dataType, value);
         }

package/src/preview/PropertyPreviewProps.tsx

@@ -1,14 +1,14 @@
-import { CMSType, Entity, Property, ResolvedProperty } from "../types";
+import { CMSType, Property, ResolvedProperty } from "../types";
 
 /**
  * @group Preview components
  */
-export type PreviewSize = "medium" | "small" | "tiny";
+export type PreviewSize = "small" | "medium" | "large";
 
 /**
  * @group Preview components
  */
-export interface PropertyPreviewProps<T extends CMSType = any, CustomProps = any, M extends Record<string, any> = Record<string, any>> {
+export interface PropertyPreviewProps<T extends CMSType = any, CustomProps = any> {
     /**
      * Name of the property
      */
@@ -24,11 +24,6 @@ export interface PropertyPreviewProps<T extends CMSType = any, CustomProps = any
      */
     property: Property<T> | ResolvedProperty<T>;
 
-    /**
-     * Click handler
-     */
-    // onClick?: () => void;
-
     /**
      * Desired size of the preview, depending on the context.
      */
@@ -52,8 +47,9 @@ export interface PropertyPreviewProps<T extends CMSType = any, CustomProps = any
     customProps?: CustomProps;
 
     /**
-     * Entity this property refers to
+     * If the preview should be interactive or not.
+     * This applies only to videos.
      */
-    // entity?: Entity<M>;
+    interactive?: boolean;
 
 }

package/src/preview/components/BooleanPreview.tsx

@@ -1,11 +1,26 @@
 import React from "react";
-import { Checkbox } from "@firecms/ui";
+import { Checkbox, cls } from "@firecms/ui";
+import { PreviewSize } from "../PropertyPreviewProps";
+import { Property } from "../../types";
 
 /**
  * @group Preview components
  */
-export function BooleanPreview({ value }: {
-    value: boolean
+export function BooleanPreview({
+                                   value,
+                                   size,
+                                   property
+                               }: {
+    value: boolean,
+    size: PreviewSize,
+    property: Property,
 }): React.ReactElement {
-    return <Checkbox checked={value} color={"secondary"}/>;
+    return <div className={"flex flex-row gap-2 items-center"}>
+        <Checkbox checked={value}
+                  padding={false}
+                  size={size}
+                  color={"secondary"}/>
+        {property.name && <span
+            className={cls("text-text-secondary dark:text-text-secondary-dark", size === "small" ? "text-sm" : "")}>{property.name}</span>}
+    </div>;
 }

package/src/preview/components/EmptyValue.tsx

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

package/src/preview/components/EnumValuesChip.tsx

@@ -1,12 +1,12 @@
 import React from "react";
+import { Chip } from "@firecms/ui";
 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";
+    size: "small" | "medium" | "large";
     className?: string;
     children?: React.ReactNode;
 }

package/src/preview/components/ImagePreview.tsx

@@ -1,4 +1,4 @@
-import React, { CSSProperties, useMemo, useState } from "react";
+import React, { CSSProperties, useMemo } from "react";
 
 import { getThumbnailMeasure } from "../util";
 import { PreviewSize } from "../PropertyPreviewProps";
@@ -20,11 +20,9 @@ export function ImagePreview({
                                  url
                              }: ImagePreviewProps) {
 
-    const [onHover, setOnHover] = useState(false);
-
     const imageSize = useMemo(() => getThumbnailMeasure(size), [size]);
 
-    if (size === "tiny") {
+    if (size === "small") {
         return (
             <img src={url}
                  className={"rounded-md"}
@@ -47,60 +45,51 @@ export function ImagePreview({
 
     return (
         <div
-            className="relative flex items-center justify-center max-w-full max-h-full"
+            className="relative flex items-center justify-center max-w-full max-h-full group"
             style={{
                 width: imageSize,
                 height: imageSize
             }}
-            key={"image_preview_" + url}
-            onMouseEnter={() => setOnHover(true)}
-            onMouseMove={() => setOnHover(true)}
-            onMouseLeave={() => setOnHover(false)}>
+            key={"image_preview_" + url}>
 
             <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>
+            <div className={"flex flex-row gap-2 absolute bottom-[-4px] right-[-4px] invisible group-hover:visible"}>
+                {navigator && <Tooltip
+                    asChild={true}
+                    title="Copy url to clipboard" side={"bottom"}>
+                    <IconButton
+                        variant={"filled"}
+                        size={"small"}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            return navigator.clipboard.writeText(url);
+                        }}>
+                        <ContentCopyIcon className={"text-surface-700 dark:text-surface-300"}
+                                         size={"smallest"}/>
+                    </IconButton>
                 </Tooltip>}
 
-                <Tooltip title="Open image in new tab">
+                <Tooltip title="Open image in new tab" side={"bottom"}>
                     <IconButton
+                        className="invisible group-hover:visible"
                         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"}/>
+                        <OpenInNewIcon className={"text-surface-700 dark:text-surface-300"}
+                                       size={"smallest"}/>
                     </IconButton>
                 </Tooltip>
-            </>
-            }
+            </div>
+
         </div>
     );
 }