@firecms/core 3.0.0-alpha.81 → 3.0.0-alpha.82

package/src/types/collections.ts

@@ -363,6 +363,9 @@ export type WhereFilterOp =
 
 /**
  * Used to define filters applied in collections
+ *
+ * e.g. `{ age: [">=", 18] }`
+ *
  * @group Models
  */
 export type FilterValues<Key extends string> =

package/src/types/customization_controller.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { EntityLinkBuilder } from "./entity_link_builder";
+import { FireCMSPlugin } from "./plugins";
+import { EntityCustomView } from "./collections";
+import { Locale } from "./locales";
+import { PropertyConfig } from "./property_config";
+
+export type CustomizationController = {
+
+    /**
+     * Builder for generating utility links for entities
+     */
+    entityLinkBuilder?: EntityLinkBuilder;
+
+    /**
+     * Use plugins to modify the behaviour of the CMS.
+     */
+    plugins?: FireCMSPlugin<any, any, any>[];
+
+    /**
+     * List of additional custom views for entities.
+     * You can use the key to reference the custom view in
+     * the `entityViews` prop of a collection.
+     *
+     * You can also define an entity view from the UI.
+     */
+
+    entityViews?: EntityCustomView[];
+
+    /**
+     * Format of the dates in the CMS.
+     * Defaults to 'MMMM dd, yyyy, HH:mm:ss'
+     */
+    dateTimeFormat?: string;
+
+    /**
+     * Locale of the CMS, currently only affecting dates
+     */
+    locale?: Locale;
+
+    /**
+     * Record of custom form fields to be used in the CMS.
+     * You can use the key to reference the custom field in
+     * the `propertyConfig` prop of a property in a collection.
+     */
+    propertyConfigs: Record<string, PropertyConfig>;
+
+    components?: {
+
+        /**
+         * Component to render when a reference is missing
+         */
+        missingReference?: React.ComponentType<{
+            path: string,
+        }>;
+
+    };
+}

package/src/types/entity_callbacks.ts

@@ -30,7 +30,7 @@ export type EntityCallbacks<M extends Record<string, any> = any, UserType extend
      * Callback used when saving fails
      * @param entitySaveProps
      */
-    onSaveFailure?(entitySaveProps: EntityOnSaveProps<M, UserType>)
+    onSaveFailure?(entitySaveProps: EntityOnSaveFailureProps<M, UserType>)
         : Promise<void> | void;
 
     /**
@@ -39,7 +39,7 @@ export type EntityCallbacks<M extends Record<string, any> = any, UserType extend
      * error snackbar gets displayed.
      * @param entitySaveProps
      */
-    onPreSave?(entitySaveProps: EntityOnSaveProps<M, UserType>)
+    onPreSave?(entitySaveProps: EntityOnPreSaveProps<M, UserType>)
         : Promise<Partial<EntityValues<M>>> | Partial<EntityValues<M>>;
 
     /**
@@ -96,6 +96,25 @@ export interface EntityOnFetchProps<M extends Record<string, any> = any, UserTyp
     context: FireCMSContext<UserType>;
 }
 
+/**
+ * Parameters passed to hooks before an entity is saved
+ * @group Models
+ */
+export type EntityOnPreSaveProps<M extends Record<string, any> = any, UserType extends User = User> =
+    Omit<EntityOnSaveProps<M, UserType>, "entityId">
+    & {
+    entityId?: string;
+}
+/**
+ * Parameters passed to hooks before an entity is saved
+ * @group Models
+ */
+export type EntityOnSaveFailureProps<M extends Record<string, any> = any, UserType extends User = User> =
+    Omit<EntityOnSaveProps<M, UserType>, "entityId">
+    & {
+    entityId?: string;
+}
+
 /**
  * Parameters passed to hooks when an entity is saved
  * @group Models
@@ -121,7 +140,7 @@ export interface EntityOnSaveProps<M extends Record<string, any> = any, UserType
     /**
      * ID of the entity
      */
-    entityId?: string;
+    entityId: string;
 
     /**
      * Values being saved

package/src/types/firecms_context.tsx

@@ -1,19 +1,15 @@
-import { Locale } from "./locales";
 import { DataSource } from "./datasource";
 import { StorageSource } from "./storage";
 import { NavigationController } from "./navigation";
 import { SideEntityController } from "./side_entity_controller";
 import { AuthController } from "./auth";
-import { EntityLinkBuilder } from "./entity_link_builder";
 import { User } from "./user";
 import { SnackbarController } from "../hooks";
 import { UserConfigurationPersistence } from "./local_config_persistence";
 import { SideDialogsController } from "./side_dialogs_controller";
-import { FireCMSPlugin } from "./plugins";
-import { CMSAnalyticsEvent } from "./analytics";
-import { PropertyConfig } from "./property_config";
-import { EntityCustomView } from "./collections";
 import { DialogsController } from "./dialogs_controller";
+import { CustomizationController } from "./customization_controller";
+import { AnalyticsController } from "./analytics_controller";
 
 /**
  * Context that includes the internal controllers and contexts used by the app.
@@ -65,9 +61,9 @@ export type FireCMSContext<UserType extends User = User, AuthControllerType exte
     authController: AuthControllerType;
 
     /**
-     * Builder for generating utility links for entities
+     * This controller holds the customization options for the CMS.
      */
-    entityLinkBuilder?: EntityLinkBuilder;
+    customizationController: CustomizationController;
 
     /**
      * Use this controller to display snackbars
@@ -80,49 +76,8 @@ export type FireCMSContext<UserType extends User = User, AuthControllerType exte
     userConfigPersistence?: UserConfigurationPersistence;
 
     /**
-     * Use plugins to modify the behaviour of the CMS.
-     * Currently, in ALPHA, and likely subject to change.
+     * Callback to send analytics events
      */
-    plugins?: FireCMSPlugin[];
+    analyticsController?: AnalyticsController;
 
-    /**
-     * Callback used to get analytics events from the CMS
-     */
-    onAnalyticsEvent?: (event: CMSAnalyticsEvent, data?: object) => void;
-
-    /**
-     * Record of custom form fields to be used in the CMS.
-     * You can use the key to reference the custom field in
-     * the `propertyConfig` prop of a property in a collection.
-     */
-    propertyConfigs: Record<string, PropertyConfig>;
-
-    /**
-     * List of additional custom views for entities.
-     * You can use the key to reference the custom view in
-     * the `entityViews` prop of a collection.
-     *
-     * You can also define an entity view from the UI.
-     */
-    entityViews?: EntityCustomView[];
-
-    /**
-     * Format of the dates in the CMS.
-     * Defaults to 'MMMM dd, yyyy, HH:mm:ss'
-     */
-    dateTimeFormat?: string;
-
-    /**
-     * Locale of the CMS, currently only affecting dates
-     */
-    locale?: Locale;
-
-    components?: {
-
-        /**
-         * Component to render when a reference is missing
-         */
-        missingReference?: React.ComponentType<{ path: string }>;
-
-    }
 };

package/src/types/index.ts

@@ -24,3 +24,5 @@ export * from "./firecms";
 export * from "./appcheck";
 export * from "./export_import";
 export * from "./modify_collections";
+export * from "./analytics_controller";
+export * from "./customization_controller";

package/src/util/icons.tsx

@@ -3,8 +3,9 @@ import { CMSView, EntityCollection } from "../types";
 import { hashString } from "./hash";
 import { coolIconKeys, Icon, iconKeys } from "@firecms/ui";
 import { slugify } from "./strings";
+import equal from "react-fast-compare"
 
-export function getIcon(iconKey?: string, className?:string): React.ReactElement | undefined {
+export function getIcon(iconKey?: string, className?: string): React.ReactElement | undefined {
     if (!iconKey) return undefined;
     iconKey = slugify(iconKey);
     if (!(iconKey in iconKeysMap)) {
@@ -13,31 +14,33 @@ export function getIcon(iconKey?: string, className?:string): React.ReactElement
     return iconKey in iconKeysMap ? <Icon iconKey={iconKey} size={"medium"} className={className}/> : undefined;
 }
 
-export function getIconForView(collectionOrView: EntityCollection | CMSView, className?:string): React.ReactElement {
+export const IconForView = React.memo(
+    function IconForView({ collectionOrView, className }: { collectionOrView: EntityCollection | CMSView, className?: string }): React.ReactElement {
+        const icon = getIcon(collectionOrView.icon, className);
+        if (collectionOrView?.icon && icon)
+            return icon;
 
-    const icon = getIcon(collectionOrView.icon, className);
-    if (collectionOrView?.icon && icon)
-        return icon;
+        let slugName = slugify(("singularName" in collectionOrView ? collectionOrView.singularName : undefined) ?? collectionOrView.name);
 
-    let slugName = slugify(("singularName" in collectionOrView ? collectionOrView.singularName : undefined) ?? collectionOrView.name);
-
-    let key: string | undefined;
-    if (slugName in iconKeysMap)
-        key = slugName;
-
-    if (!key) {
-        slugName = slugify(collectionOrView.path);
+        let key: string | undefined;
         if (slugName in iconKeysMap)
             key = slugName;
-    }
 
-    const iconsCount = coolIconKeys.length;
+        if (!key) {
+            slugName = slugify(collectionOrView.path);
+            if (slugName in iconKeysMap)
+                key = slugName;
+        }
 
-    if (!key)
-        key = coolIconKeys[hashString(collectionOrView.path) % iconsCount];
+        const iconsCount = coolIconKeys.length;
 
-    return <Icon iconKey={key} size={"medium"} className={className}/>;
-}
+        if (!key)
+            key = coolIconKeys[hashString(collectionOrView.path) % iconsCount];
+
+        return <Icon iconKey={key} size={"medium"} className={className}/>;
+    }, (prevProps, nextProps) => {
+        return equal(prevProps.collectionOrView.icon, nextProps.collectionOrView.icon);
+    });
 
 const iconKeysMap: Record<string, string> = iconKeys.reduce((acc: Record<string, string>, key) => {
     acc[key] = key;

package/src/util/useTraceUpdate.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useRef } from "react";
 
-function printChanged(props: any, prev: any, path = "", depth = 0) {
-    if (depth > 10) {
+function printChanged(props: any, prev: any, path = "", depth = 0, maxDepth: number) {
+    if (depth > maxDepth) {
         return;
     }
     if (props && prev && typeof props === "object" && typeof prev === "object") {
         Object.keys(props).forEach((key) => {
-            printChanged(props[key], prev[key], path + "." + key, depth + 1);
+            printChanged(props[key], prev[key], path + "." + key, depth + 1, maxDepth);
         });
     } else if (props !== prev) {
         console.log("Changed props:", path);
@@ -14,10 +14,10 @@ function printChanged(props: any, prev: any, path = "", depth = 0) {
 
 }
 
-export function useTraceUpdate(props: any) {
+export function useTraceUpdate(props: any, maxDepth = 3) {
     const prev = useRef(props);
     useEffect(() => {
-        printChanged(props, prev.current, "");
+        printChanged(props, prev.current, "", 0, maxDepth);
         prev.current = props;
     });
 }