@firecms/core 3.0.0-beta.7 → 3.0.0-beta.9

package/src/internal/useBuildDataSource.ts

@@ -9,6 +9,7 @@ import {
     FetchCollectionProps,
     FetchEntityProps,
     FilterValues,
+    FireCMSContext,
     ListenCollectionProps,
     ListenEntityProps,
     NavigationController,
@@ -51,23 +52,25 @@ export function useBuildDataSource({
          */
         fetchCollection: useCallback(<M extends Record<string, any>>({
                                                                          path,
-                                                                         collection: collectionProp,
+                                                                         collection,
                                                                          filter,
                                                                          limit,
                                                                          startAfter,
                                                                          searchString,
                                                                          orderBy,
-                                                                         order
+                                                                         order,
                                                                      }: FetchCollectionProps<M>
         ): Promise<Entity<M>[]> => {
-            return delegate.fetchCollection<M>({
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+            return usedDelegate.fetchCollection<M>({
                 path,
                 filter,
                 limit,
                 startAfter,
                 searchString,
                 orderBy,
-                order
+                order,
+                collection
             });
         }, [delegate]),
 
@@ -88,7 +91,6 @@ export function useBuildDataSource({
          * @group Firestore
          */
         listenCollection: delegate.listenCollection
-            // eslint-disable-next-line react-hooks/rules-of-hooks
             ? useCallback(<M extends Record<string, any>>(
                 {
                     path,
@@ -105,11 +107,12 @@ export function useBuildDataSource({
             ): () => void => {
 
                 const collection = collectionProp ?? navigationController.getCollection(path);
-                const isCollectionGroup = Boolean(collection?.collectionGroup) ?? false;
-                if (!delegate.listenCollection)
+                const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+
+                if (!usedDelegate.listenCollection)
                     throw Error("useBuildDataSource delegate not initialised");
 
-                return delegate.listenCollection<M>({
+                return usedDelegate.listenCollection<M>({
                     path,
                     filter,
                     limit,
@@ -119,8 +122,7 @@ export function useBuildDataSource({
                     order,
                     onUpdate,
                     onError,
-                    isCollectionGroup,
-                    collection
+                    collection,
                 });
             }, [delegate, navigationController.getCollection])
             : undefined,
@@ -134,12 +136,17 @@ export function useBuildDataSource({
          */
         fetchEntity: useCallback(<M extends Record<string, any>>({
                                                                      path,
-                                                                     entityId
+                                                                     entityId,
+                                                                     collection
                                                                  }: FetchEntityProps<M>
-        ): Promise<Entity<M> | undefined> => delegate.fetchEntity({
-            path,
-            entityId
-        }), [delegate]),
+        ): Promise<Entity<M> | undefined> => {
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+            return usedDelegate.fetchEntity({
+                path,
+                entityId,
+                collection
+            });
+        }, [delegate.fetchEntity]),
 
         /**
          *
@@ -152,7 +159,6 @@ export function useBuildDataSource({
          * @group Firestore
          */
         listenEntity: delegate.listenEntity
-            // eslint-disable-next-line react-hooks/rules-of-hooks
             ? useCallback(<M extends Record<string, any>>(
                 {
                     path,
@@ -161,14 +167,17 @@ export function useBuildDataSource({
                     onUpdate,
                     onError
                 }: ListenEntityProps<M>): () => void => {
-                if (!delegate.listenEntity)
+                const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+
+                if (!usedDelegate.listenEntity)
                     throw Error("useBuildDataSource delegate not initialised");
 
-                return delegate.listenEntity<M>({
+                return usedDelegate.listenEntity<M>({
                     path,
                     entityId,
                     onUpdate,
-                    onError
+                    onError,
+                    collection
                 })
             }, [delegate.listenEntity]) : undefined,
 
@@ -193,6 +202,7 @@ export function useBuildDataSource({
             }: SaveEntityProps<M>): Promise<Entity<M>> => {
 
             const collection = collectionProp ?? navigationController.getCollection(path);
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
 
             const resolvedCollection = collection
                 ? resolveCollection<M>({
@@ -205,31 +215,32 @@ export function useBuildDataSource({
 
             const properties: ResolvedProperties<M> | undefined = resolvedCollection?.properties;
 
-            const firestoreValues = delegate.cmsToDelegateModel(
+            const firestoreValues = usedDelegate.cmsToDelegateModel(
                 values,
             );
 
-            const updatedFirestoreValues: EntityValues<M> = properties
+            const updatedValues: EntityValues<M> = properties
                 ? updateDateAutoValues(
                     {
                         inputValues: firestoreValues,
                         properties,
                         status,
-                        timestampNowValue: delegate.currentTime(),
-                        setDateToMidnight: delegate.setDateToMidnight
+                        timestampNowValue: usedDelegate.currentTime?.() ?? new Date(),
+                        setDateToMidnight: usedDelegate.setDateToMidnight
                     })
                 : firestoreValues;
 
-            return delegate.saveEntity({
+            return usedDelegate.saveEntity({
                 path,
+                collection,
                 entityId,
-                values: updatedFirestoreValues,
+                values: updatedValues,
                 status
             }).then((res) => {
                 return {
                     id: res.id,
                     path: res.path,
-                    values: delegate.delegateToCMSModel(updatedFirestoreValues)
+                    values: usedDelegate.delegateToCMSModel(updatedValues)
                 } as Entity<M>;
             });
         }, [delegate.saveEntity, navigationController.getCollection]),
@@ -242,10 +253,15 @@ export function useBuildDataSource({
          */
         deleteEntity: useCallback(<M extends Record<string, any>>(
             {
-                entity
+                entity,
+                collection
             }: DeleteEntityProps<M>
         ): Promise<void> => {
-            return delegate.deleteEntity({ entity });
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+            return usedDelegate.deleteEntity({
+                entity,
+                collection
+            });
         }, [delegate.deleteEntity]),
 
         /**
@@ -262,13 +278,16 @@ export function useBuildDataSource({
             path: string,
             name: string,
             value: any,
-            entityId?: string
+            entityId?: string,
+            collection?: EntityCollection
         ): Promise<boolean> => {
-            return delegate.checkUniqueField(path, name, value, entityId);
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+            return usedDelegate.checkUniqueField(path, name, value, entityId, collection);
         }, [delegate.checkUniqueField]),
 
-        generateEntityId: useCallback((path: string): string => {
-            return delegate.generateEntityId(path,);
+        generateEntityId: useCallback((path: string, collection: EntityCollection): string => {
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+            return usedDelegate.generateEntityId(path, collection);
         }, [delegate.generateEntityId]),
 
         countEntities: delegate.countEntities ? async ({
@@ -284,21 +303,24 @@ export function useBuildDataSource({
             orderBy?: string,
             order?: "desc" | "asc",
         }): Promise<number> => {
-            return delegate.countEntities!({
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+            return usedDelegate.countEntities!({
                 path,
                 filter,
                 orderBy,
                 order,
-                isCollectionGroup: Boolean(collection.collectionGroup) ?? false
+                collection
             });
         } : undefined,
 
         isFilterCombinationValid: useCallback(({
                                                    path,
+                                                   databaseId,
                                                    filterValues,
                                                    sortBy
                                                }: {
             path: string,
+            databaseId?: string,
             filterValues: FilterValues<any>,
             sortBy?: [string, "asc" | "desc"]
         }): boolean => {
@@ -307,52 +329,25 @@ export function useBuildDataSource({
             return delegate.isFilterCombinationValid(
                 {
                     path,
+                    databaseId,
                     filterValues,
                     sortBy
                 }
             )
         }, [delegate.isFilterCombinationValid]),
 
+        initTextSearch: useCallback(async (props: {
+            context: FireCMSContext,
+            path: string,
+            collection: EntityCollection,
+            parentCollectionIds?: string[]
+        }): Promise<boolean> => {
+            const usedDelegate = props.collection?.overrides?.dataSourceDelegate ?? delegate;
+            if (!usedDelegate.initTextSearch)
+                return false;
+            return usedDelegate.initTextSearch(props)
+        }, [delegate.initTextSearch]),
+
     };
 
 }
-
-// /**
-//  * Recursive function that converts Firestore data types into CMS or plain
-//  * JS types.
-//  * FireCMS uses Javascript dates internally instead of Firestore timestamps.
-//  * This makes it easier to interact with the rest of the libraries and
-//  * bindings.
-//  * Also, Firestore references are replaced with {@link EntityReference}
-//  * @param data
-//  * @param buildReference
-//  * @param buildGeoPoint
-//  * @param buildDate
-//  * @param buildDelete
-//  * @group Firestore
-//  */
-// export function cmsToDelegateModel(data: any,
-//                                    buildReference: (reference: EntityReference) => any,
-//                                    buildGeoPoint: (geoPoint: GeoPoint) => any,
-//                                    buildDate: (date: Date) => any,
-//                                    buildDelete: () => any
-// ): any {
-//     if (data === undefined) {
-//         return buildDelete();
-//     } else if (data === null) {
-//         return null;
-//     } else if (Array.isArray(data)) {
-//         return data.map(v => cmsToDelegateModel(v, buildReference, buildGeoPoint, buildDate, buildDelete));
-//     } else if (data.isEntityReference && data.isEntityReference()) {
-//         return buildReference(data);
-//     } else if (data instanceof GeoPoint) {
-//         return buildGeoPoint(data);
-//     } else if (data instanceof Date) {
-//         return buildDate(data);
-//     } else if (data && typeof data === "object") {
-//         return Object.entries(data)
-//             .map(([key, v]) => ({ [key]: cmsToDelegateModel(v, buildReference, buildGeoPoint, buildDate, buildDelete) }))
-//             .reduce((a, b) => ({ ...a, ...b }), {});
-//     }
-//     return data;
-// }

package/src/internal/useBuildSideDialogsController.tsx

@@ -118,6 +118,7 @@ export function useBuildSideDialogsController(): SideDialogsController {
 
     return {
         sidePanels,
+        setSidePanels: updateSidePanels,
         close,
         open,
         replace

package/src/internal/useBuildSideEntityController.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useRef } from "react";
 import {
     EntityCollection,
     EntitySidePanelProps,
-    NavigationController, PropertyConfig,
+    NavigationController,
     ResolvedProperty,
     SideDialogPanelProps,
     SideDialogsController,
@@ -115,6 +115,16 @@ export const useBuildSideEntityController = (navigation: NavigationController,
         }
     }, [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();
     }, [sideDialogsController]);
@@ -210,7 +220,7 @@ export function buildSidePanelsFromUrl(path: string, collections: EntityCollecti
     return sidePanels;
 }
 
-const propsToSidePanel = (props: EntitySidePanelProps<any>,
+const propsToSidePanel = (props: EntitySidePanelProps,
                           buildUrlCollectionPath: (path: string) => string,
                           resolveAliasesFrom: (pathWithAliases: string) => string,
                           smallLayout: boolean): SideDialogPanelProps => {
@@ -227,13 +237,16 @@ const propsToSidePanel = (props: EntitySidePanelProps<any>,
             path: resolvedPath,
         };
 
+        const entityViewWidth = getEntityViewWidth(props, smallLayout);
+
         return {
             key: `${props.path}/${props.entityId}`,
             component: <EntitySidePanel {...resolvedPanelProps}/>,
             urlPath: newPath,
             parentUrlPath: buildUrlCollectionPath(collectionPath),
-            width: getEntityViewWidth(props, smallLayout),
-            onClose: props.onClose
+            width: entityViewWidth,
+            onClose: props.onClose,
+            additional: props
         };
     }
 ;

package/src/internal/useUnsavedChangesDialog.tsx

@@ -84,8 +84,10 @@ export function UnsavedChangesDialog({
 
     return (
         <Dialog
+            onEscapeKeyDown={() => {
+                handleCancel();
+            }}
             open={open}
-            onOpenChange={(open) => open ? handleCancel() : handleOk()}
         >
             <DialogContent>
                 <Typography variant={"h6"}>{title}</Typography>

package/src/preview/PropertyPreview.tsx

@@ -47,7 +47,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
         size,
         height,
         width,
-        // entity
+        interactive
     } = props;
 
     const property = resolveProperty({
@@ -84,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} size={"small"}/>;
+                    storagePathOrDownloadUrl={filePath}/>;
             } else {
                 content = <StringPropertyPreview {...props}
                                                  property={stringProperty}

package/src/preview/PropertyPreviewProps.tsx

@@ -3,7 +3,7 @@ import { CMSType, Property, ResolvedProperty } from "../types";
 /**
  * @group Preview components
  */
-export type PreviewSize = "medium" | "small" | "tiny";
+export type PreviewSize = "medium" | "small" | "smallest";
 
 /**
  * @group Preview components
@@ -46,4 +46,10 @@ export interface PropertyPreviewProps<T extends CMSType = any, CustomProps = any
      */
     customProps?: CustomProps;
 
+    /**
+     * If the preview should be interactive or not.
+     * This applies only to videos.
+     */
+    interactive?: boolean;
+
 }

package/src/preview/components/BooleanPreview.tsx

@@ -21,6 +21,6 @@ export function BooleanPreview({
                   size={size}
                   color={"secondary"}/>
         {property.name && <span
-            className={cls("text-text-secondary dark:text-text-secondary-dark", size === "tiny" ? "text-sm" : "")}>{property.name}</span>}
+            className={cls("text-text-secondary dark:text-text-secondary-dark", size === "smallest" ? "text-sm" : "")}>{property.name}</span>}
     </div>;
 }

package/src/preview/components/EnumValuesChip.tsx

@@ -6,7 +6,7 @@ import { buildEnumLabel, enumToObjectEntries, getColorScheme, getLabelOrConfigFr
 export interface EnumValuesChipProps {
     enumValues?: EnumValues;
     enumKey: string | number;
-    size: "tiny" | "small" | "medium";
+    size: "smallest" | "small" | "medium";
     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 === "smallest") {
         return (
             <img src={url}
                  className={"rounded-md"}
@@ -47,60 +45,52 @@ 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-gray-700 dark:text-gray-300"}
+                                         size={"small"}/>
+                    </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"}
+                        <OpenInNewIcon className={"text-gray-700 dark:text-gray-300"}
                                        size={"small"}/>
                     </IconButton>
                 </Tooltip>
-            </>
-            }
+            </div>
+
         </div>
     );
 }

package/src/preview/components/ReferencePreview.tsx

@@ -21,7 +21,7 @@ export type ReferencePreviewProps = {
 /**
  * @group Preview components
  */
-export const ReferencePreview = React.memo<ReferencePreviewProps>(function ReferencePreview(props: ReferencePreviewProps) {
+export const ReferencePreview = function ReferencePreview(props: ReferencePreviewProps) {
     const reference = props.reference;
     if (!(typeof reference === "object" && "isEntityReference" in reference && reference.isEntityReference())) {
         console.warn("Reference preview received value of type", typeof reference);
@@ -33,17 +33,7 @@ export const ReferencePreview = React.memo<ReferencePreviewProps>(function Refer
         </EntityPreviewContainer>;
     }
     return <ReferencePreviewInternal {...props} />;
-}, areEqual) as React.FunctionComponent<ReferencePreviewProps>;
-
-function areEqual(prevProps: ReferencePreviewProps, nextProps: ReferencePreviewProps) {
-    return prevProps.disabled === nextProps.disabled &&
-        prevProps.size === nextProps.size &&
-        prevProps.hover === nextProps.hover &&
-        prevProps.reference?.id === nextProps.reference?.id &&
-        prevProps.reference?.path === nextProps.reference?.path &&
-        prevProps.includeEntityLink === nextProps.includeEntityLink
-        ;
-}
+};
 
 function ReferencePreviewInternal({
                                       disabled,

package/src/preview/components/StorageThumbnail.tsx

@@ -11,6 +11,7 @@ type StorageThumbnailProps = {
     storagePathOrDownloadUrl: string;
     storeUrl: boolean;
     size: PreviewSize;
+    interactive?: boolean;
 };
 
 /**
@@ -21,13 +22,15 @@ export const StorageThumbnail = React.memo<StorageThumbnailProps>(StorageThumbna
 function areEqual(prevProps: StorageThumbnailProps, nextProps: StorageThumbnailProps) {
     return prevProps.size === nextProps.size &&
         prevProps.storagePathOrDownloadUrl === nextProps.storagePathOrDownloadUrl &&
-        prevProps.storeUrl === nextProps.storeUrl;
+        prevProps.storeUrl === nextProps.storeUrl&&
+        prevProps.interactive === nextProps.interactive;
 }
 
 const URL_CACHE: Record<string, DownloadConfig> = {};
 
 export function StorageThumbnailInternal({
                                              storeUrl,
+                                             interactive,
                                              storagePathOrDownloadUrl,
                                              size
                                          }: StorageThumbnailProps) {
@@ -68,6 +71,7 @@ export function StorageThumbnailInternal({
     return downloadConfig?.url
         ? <UrlComponentPreview previewType={previewType}
                                url={downloadConfig.url}
+                               interactive={interactive}
                                size={size}
                                hint={storagePathOrDownloadUrl}/>
         : renderSkeletonImageThumbnail(size);