@firecms/core 3.0.0-canary.112 → 3.0.0-canary.114

package/src/form/field_bindings/ReferenceFieldBinding.tsx

@@ -6,7 +6,7 @@ import { ReadOnlyFieldBinding } from "./ReadOnlyFieldBinding";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { ErrorView } from "../../components";
 import { EmptyValue, ReferencePreview } from "../../preview";
-import { getIconForProperty, getReferenceFrom } from "../../util";
+import { getIconForProperty, getReferenceFrom, IconForView } from "../../util";
 import { useClearRestoreValue } from "../useClearRestoreValue";
 import { EntityPreviewContainer } from "../../components/EntityPreview";
 import { cls } from "@firecms/ui";
@@ -78,10 +78,10 @@ function ReferenceFieldBindingInternal({
         }
     );
 
-    const onEntryClick = useCallback((e: React.SyntheticEvent) => {
+    const onEntryClick = (e: React.SyntheticEvent) => {
         e.preventDefault();
         referenceDialogController.open();
-    }, [referenceDialogController]);
+    };
 
     return (
         <>
@@ -115,7 +115,8 @@ function ReferenceFieldBindingInternal({
                             : "cursor-pointer text-slate-700 dark:text-slate-300 hover:bg-slate-50 dark:hover:bg-gray-800 group-hover:bg-slate-50 dark:group-hover:bg-gray-800")}
                                             onClick={onEntryClick}
                                             size={"medium"}>
-                        <EmptyValue/>
+                        <IconForView collectionOrView={collection}
+                                     className={"text-gray-300 dark:text-gray-600"}/>
                         {`Edit ${property.name}`.toUpperCase()}
                     </EntityPreviewContainer>
                 </div>}

package/src/hooks/data/delete.ts

@@ -81,7 +81,8 @@ export async function deleteEntityWithCallbacks<M extends Record<string, any>, U
         }
     }
     return dataSource.deleteEntity({
-        entity
+        entity,
+        collection
     }).then(() => {
         onDeleteSuccess && onDeleteSuccess(entity);
         try {

package/src/hooks/data/useDataSource.tsx

@@ -7,8 +7,16 @@ import { DataSourceContext } from "../../contexts/DataSourceContext";
  * @group Hooks and utilities
  */
 export const useDataSource = (collection?: EntityCollection<any, any>): DataSource => {
+    // const customizationController = useCustomizationController();
+    // const navigationController = useNavigationController();
     const defaultDataSource = useContext(DataSourceContext);
-    if (collection?.overrides?.dataSource)
-        return collection?.overrides.dataSource;
+    // if (collection?.overrides?.dataSourceDelegate) {
+    //     console.trace("Using custom data source for collection " + collection.id);
+    //     return useBuildDataSource({
+    //         delegate: collection.overrides.dataSourceDelegate,
+    //         propertyConfigs: customizationController?.propertyConfigs,
+    //         navigationController: navigationController
+    //     });
+    // }
     return defaultDataSource;
 };

package/src/hooks/useBuildNavigationController.tsx

@@ -19,7 +19,8 @@ import {
 import {
     applyPermissionsFunctionIfEmpty,
     getCollectionByPathOrId,
-    mergeDeep, removeFunctions,
+    mergeDeep,
+    removeFunctions,
     removeInitialAndTrailingSlashes,
     resolveCollectionPathIds,
     resolvePermissions
@@ -200,7 +201,6 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
 
             let shouldUpdateTopLevelNav = false;
             if (!areCollectionListsEqual(collectionsRef.current ?? [], resolvedCollections)) {
-                console.log("Collections need to be updated");
                 collectionsRef.current = resolvedCollections;
                 shouldUpdateTopLevelNav = true;
             }
@@ -209,12 +209,10 @@ export function useBuildNavigationController<EC extends EntityCollection, UserTy
                 shouldUpdateTopLevelNav = true;
             }
             if (!equal(viewsRef.current, resolvedViews)) {
-                console.log("Views need to be updated");
                 viewsRef.current = resolvedViews;
                 shouldUpdateTopLevelNav = true;
             }
             if (!equal(adminViewsRef.current, resolvedAdminViews)) {
-                console.log("Admin views need to be updated");
                 adminViewsRef.current = resolvedAdminViews;
                 shouldUpdateTopLevelNav = true;
             }

package/src/internal/useBuildDataSource.ts

@@ -61,7 +61,8 @@ export function useBuildDataSource({
                                                                          order,
                                                                      }: FetchCollectionProps<M>
         ): Promise<Entity<M>[]> => {
-            return delegate.fetchCollection<M>({
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+            return usedDelegate.fetchCollection<M>({
                 path,
                 filter,
                 limit,
@@ -106,11 +107,12 @@ export function useBuildDataSource({
             ): () => void => {
 
                 const collection = collectionProp ?? navigationController.getCollection(path);
-                const isCollectionGroup = Boolean(collection?.collectionGroup);
-                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,
@@ -137,11 +139,14 @@ export function useBuildDataSource({
                                                                      entityId,
                                                                      collection
                                                                  }: FetchEntityProps<M>
-        ): Promise<Entity<M> | undefined> => delegate.fetchEntity({
-            path,
-            entityId,
-            collection
-        }), [delegate]),
+        ): Promise<Entity<M> | undefined> => {
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
+            return usedDelegate.fetchEntity({
+                path,
+                entityId,
+                collection
+            });
+        }, [delegate.fetchEntity]),
 
         /**
          *
@@ -162,10 +167,12 @@ 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,
@@ -195,6 +202,7 @@ export function useBuildDataSource({
             }: SaveEntityProps<M>): Promise<Entity<M>> => {
 
             const collection = collectionProp ?? navigationController.getCollection(path);
+            const usedDelegate = collection?.overrides?.dataSourceDelegate ?? delegate;
 
             console.log("useBuildDatasource save", {
                 path,
@@ -216,32 +224,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?.() ?? new Date(),
-                        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]),
@@ -254,10 +262,12 @@ 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]),
 
         /**
@@ -275,13 +285,15 @@ export function useBuildDataSource({
             name: string,
             value: any,
             entityId?: string,
-            databaseId?: string
+            collection?: EntityCollection
         ): Promise<boolean> => {
-            return delegate.checkUniqueField(path, name, value, entityId, databaseId);
+            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 ({
@@ -297,7 +309,8 @@ 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,
@@ -335,51 +348,12 @@ export function useBuildDataSource({
             collection: EntityCollection,
             parentCollectionIds?: string[]
         }): Promise<boolean> => {
-            if (!delegate.initTextSearch)
+            const usedDelegate = props.collection?.overrides?.dataSourceDelegate ?? delegate;
+            if (!usedDelegate.initTextSearch)
                 return false;
-            return delegate.initTextSearch(props)
+            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

@@ -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 => {
@@ -235,7 +245,8 @@ const propsToSidePanel = (props: EntitySidePanelProps<any>,
             urlPath: newPath,
             parentUrlPath: buildUrlCollectionPath(collectionPath),
             width: entityViewWidth,
-            onClose: props.onClose
+            onClose: props.onClose,
+            additional: props
         };
     }
 ;

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,18 +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 &&
-        prevProps.onClick === nextProps.onClick
-        ;
-}
+};
 
 function ReferencePreviewInternal({
                                       disabled,

package/src/types/datasource.ts

@@ -64,6 +64,7 @@ export interface SaveEntityProps<M extends Record<string, any> = any> {
  */
 export interface DeleteEntityProps<M extends Record<string, any> = any> {
     entity: Entity<M>;
+    collection?: EntityCollection<M> | ResolvedEntityCollection<M>;
 }
 
 /**
@@ -182,7 +183,8 @@ export interface DataSource {
      */
     deleteEntity<M extends Record<string, any> = any>(
         {
-            entity
+            entity,
+            collection
         }: DeleteEntityProps<M>
     ): Promise<void>;
 
@@ -191,7 +193,7 @@ export interface DataSource {
      * @param path Collection path
      * @param name of the property
      * @param value
-     * @param property
+     * @param collection
      * @param entityId
      * @return `true` if there are no other fields besides the given entity
      */
@@ -200,13 +202,13 @@ export interface DataSource {
         name: string,
         value: any,
         entityId?: string,
-        databaseId?: string
+        collection?: EntityCollection
     ): Promise<boolean>;
 
     /**
      * Generate an id for a new entity
      */
-    generateEntityId(path: string): string;
+    generateEntityId(path: string, collection: EntityCollection): string;
 
     /**
      * Count the number of entities in a collection
@@ -360,14 +362,15 @@ export interface DataSourceDelegate {
      * @param name of the property
      * @param value
      * @param entityId
+     * @param collection
      * @return `true` if there are no other fields besides the given entity
      */
-    checkUniqueField(path: string, name: string, value: any, entityId?: string, databaseId?: string): Promise<boolean>;
+    checkUniqueField(path: string, name: string, value: any, entityId?: string, collection?: EntityCollection): Promise<boolean>;
 
     /**
      * Generate an id for a new entity
      */
-    generateEntityId(path: string): string;
+    generateEntityId(path: string, collection?: EntityCollection): string;
 
     /**
      * Count the number of entities in a collection

package/src/types/entity_overrides.tsx

@@ -1,7 +1,7 @@
-import { DataSource } from "./datasource";
+import { DataSource, DataSourceDelegate } from "./datasource";
 import { StorageSource } from "./storage";
 
 export type EntityOverrides = {
-    dataSource?: DataSource;
+    dataSourceDelegate?: DataSourceDelegate;
     storageSource?: StorageSource;
 };

package/src/types/side_dialogs_controller.tsx

@@ -1,3 +1,5 @@
+import React from "react";
+
 /**
  * Controller to open the side dialog
  * @group Hooks and utilities
@@ -14,6 +16,12 @@ export interface SideDialogsController {
      */
     sidePanels: SideDialogPanelProps[];
 
+    /**
+     * Override the current side panels
+     * @param panels
+     */
+    setSidePanels: (panels: SideDialogPanelProps[]) => void;
+
     /**
      * Open one or multiple side panels
      * @param props
@@ -65,4 +73,9 @@ export interface SideDialogPanelProps {
      * Callback when the panel is closed
      */
     onClose?: () => void;
+
+    /**
+     * Use this prop to store additional data in the panel
+     */
+    additional?: any;
 }

package/src/util/icons.tsx

@@ -22,7 +22,13 @@ export type IconViewProps = {
 }
 
 export const IconForView = React.memo(
-    function IconForView({ collectionOrView, className }: { collectionOrView?: IconViewProps, className?: string }): React.ReactElement {
+    function IconForView({
+                             collectionOrView,
+                             className,
+                             size = "medium"
+                         }: {
+        collectionOrView?: IconViewProps, className?: string, size?: "smallest" | "small" | "medium" | "large" | number,
+    }): React.ReactElement {
         if (!collectionOrView) return <></>;
         const icon = getIcon(collectionOrView.icon, className);
         if (collectionOrView?.icon && icon)
@@ -45,7 +51,7 @@ export const IconForView = React.memo(
         if (!key)
             key = coolIconKeys[hashString(collectionOrView.path) % iconsCount];
 
-        return <Icon iconKey={key} size={"medium"} className={className}/>;
+        return <Icon iconKey={key} size={size} className={className}/>;
     }, (prevProps, nextProps) => {
         return equal(prevProps.collectionOrView?.icon, nextProps.collectionOrView?.icon);
     });