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

package/src/components/EntityCollectionTable/fields/TableReferenceField.tsx

@@ -1,10 +1,12 @@
 import React, { useCallback, useState } from "react";
+import equal from "react-fast-compare"
+
 import { ReferencePreview, ReferencePreviewContainer } from "../../../preview";
 import { CollectionSize, Entity, EntityCollection, EntityReference, FilterValues } from "../../../types";
 
 import { getPreviewSizeFrom } from "../../../preview/util";
 import { getReferenceFrom } from "../../../util";
-import { useFireCMSContext, useNavigationController, useReferenceDialog } from "../../../hooks";
+import { useCustomizationController, useNavigationController, useReferenceDialog } from "../../../hooks";
 import { ErrorView } from "../../ErrorView";
 import { Button } from "@firecms/ui";
 
@@ -22,14 +24,14 @@ type TableReferenceFieldProps = {
 };
 
 export function TableReferenceField(props: TableReferenceFieldProps) {
+    const customizationController = useCustomizationController();
 
-    const context = useFireCMSContext();
     const navigationController = useNavigationController();
     const { path } = props;
     const collection = navigationController.getCollection<EntityCollection>(path);
     if (!collection) {
-        if (context.components?.missingReference) {
-            return <context.components.missingReference path={path}/>;
+        if (customizationController.components?.missingReference) {
+            return <customizationController.components.missingReference path={path}/>;
         } else {
             throw Error(`Couldn't find the corresponding collection view for the path: ${path}`);
         }
@@ -37,123 +39,124 @@ export function TableReferenceField(props: TableReferenceFieldProps) {
     return <TableReferenceFieldSuccess {...props} collection={collection}/>;
 }
 
-function TableReferenceFieldSuccess(props: TableReferenceFieldProps & {
-    collection: EntityCollection;
-}) {
-    const {
-        name,
-        internalValue,
-        updateValue,
-        multiselect,
-        path,
-        size,
-        previewProperties,
-        title,
-        disabled,
-        forceFilter,
-        collection
-    } = props;
-
-    const [onHover, setOnHover] = useState(false);
-
-    const hoverTrue = useCallback(() => setOnHover(true), []);
-    const hoverFalse = useCallback(() => setOnHover(false), []);
-
-    const onSingleEntitySelected = useCallback((entity: Entity<any>) => {
-        updateValue(entity ? getReferenceFrom(entity) : null);
-    }, [updateValue]);
-
-    const onMultipleEntitiesSelected = useCallback((entities: Entity<any>[]) => {
-        updateValue(entities.map((e) => getReferenceFrom(e)));
-    }, [updateValue]);
-
-    const selectedEntityIds = internalValue
-        ? (Array.isArray(internalValue)
-            ? internalValue.map((ref) => ref.id)
-            : internalValue.id ? [internalValue.id] : [])
-        : [];
-
-    const referenceDialogController = useReferenceDialog({
+export const TableReferenceFieldSuccess = React.memo(
+    function TableReferenceFieldSuccess(props: TableReferenceFieldProps & {
+        collection: EntityCollection;
+    }) {
+        const {
+            name,
+            internalValue,
+            updateValue,
             multiselect,
             path,
-            collection,
-            onMultipleEntitiesSelected,
-            onSingleEntitySelected,
-            selectedEntityIds,
-            forceFilter
-        }
-    );
-
-    const handleOpen = useCallback(() => {
-        if (disabled)
-            return;
-        referenceDialogController.open();
-    }, [disabled, referenceDialogController]);
-
-    const valueNotSet = !internalValue || (Array.isArray(internalValue) && internalValue.length === 0);
-
-    const buildSingleReferenceField = () => {
-        if (internalValue instanceof EntityReference)
-            return <ReferencePreview
-                onClick={disabled ? undefined : handleOpen}
-                size={getPreviewSizeFrom(size)}
-                reference={internalValue as EntityReference}
-                onHover={onHover}
-                disabled={!path}
-                previewProperties={previewProperties}
-            />;
-        else
-            return <ReferencePreviewContainer
-                onClick={disabled ? undefined : handleOpen}
-                size={getPreviewSizeFrom(size)}>
-                <ErrorView title="Value is not a reference." error={"Click to edit"}/>
-            </ReferencePreviewContainer>;
-    };
-
-    const buildMultipleReferenceField = () => {
-        if (Array.isArray(internalValue))
-            return <>
-                {internalValue.map((reference, index) =>
-                    <div className="m-1 w-full"
-                         key={`preview_array_ref_${name}_${index}`}>
-                        <ReferencePreview
-                            onClick={disabled ? undefined : handleOpen}
-                            size={"tiny"}
-                            reference={reference}
-                            onHover={onHover}
-                            disabled={!path}
-                            previewProperties={previewProperties}
-                        />
-                    </div>
-                )
-                }
-            </>;
-        else
-            return <ErrorView error={"Data is not an array of references"}/>;
-    };
-
-    if (!collection)
-        return <ErrorView error={"The specified collection does not exist"}/>;
-
-    return (
-        <div className="w-full"
-             onMouseEnter={hoverTrue}
-             onMouseMove={hoverTrue}
-             onMouseLeave={hoverFalse}>
-
-            {internalValue && !multiselect && buildSingleReferenceField()}
-
-            {internalValue && multiselect && buildMultipleReferenceField()}
-
-            {valueNotSet &&
-                <Button
-                    onClick={handleOpen}
-                    size={"small"}
-                    variant="outlined"
-                    color="primary">
-                    Edit {title}
-                </Button>}
-
-        </div>
-    );
-}
+            size,
+            previewProperties,
+            title,
+            disabled,
+            forceFilter,
+            collection
+        } = props;
+
+        const [onHover, setOnHover] = useState(false);
+
+        const hoverTrue = useCallback(() => setOnHover(true), []);
+        const hoverFalse = useCallback(() => setOnHover(false), []);
+
+        const onSingleEntitySelected = useCallback((entity: Entity<any>) => {
+            updateValue(entity ? getReferenceFrom(entity) : null);
+        }, [updateValue]);
+
+        const onMultipleEntitiesSelected = useCallback((entities: Entity<any>[]) => {
+            updateValue(entities.map((e) => getReferenceFrom(e)));
+        }, [updateValue]);
+
+        const selectedEntityIds = internalValue
+            ? (Array.isArray(internalValue)
+                ? internalValue.map((ref) => ref.id)
+                : internalValue.id ? [internalValue.id] : [])
+            : [];
+
+        const referenceDialogController = useReferenceDialog({
+                multiselect,
+                path,
+                collection,
+                onMultipleEntitiesSelected,
+                onSingleEntitySelected,
+                selectedEntityIds,
+                forceFilter
+            }
+        );
+
+        const handleOpen = useCallback(() => {
+            if (disabled)
+                return;
+            referenceDialogController.open();
+        }, [disabled, referenceDialogController]);
+
+        const valueNotSet = !internalValue || (Array.isArray(internalValue) && internalValue.length === 0);
+
+        const buildSingleReferenceField = () => {
+            if (internalValue instanceof EntityReference)
+                return <ReferencePreview
+                    onClick={disabled ? undefined : handleOpen}
+                    size={getPreviewSizeFrom(size)}
+                    reference={internalValue as EntityReference}
+                    onHover={onHover}
+                    disabled={!path}
+                    previewProperties={previewProperties}
+                />;
+            else
+                return <ReferencePreviewContainer
+                    onClick={disabled ? undefined : handleOpen}
+                    size={getPreviewSizeFrom(size)}>
+                    <ErrorView title="Value is not a reference." error={"Click to edit"}/>
+                </ReferencePreviewContainer>;
+        };
+
+        const buildMultipleReferenceField = () => {
+            if (Array.isArray(internalValue))
+                return <>
+                    {internalValue.map((reference, index) =>
+                        <div className="m-1 w-full"
+                             key={`preview_array_ref_${name}_${index}`}>
+                            <ReferencePreview
+                                onClick={disabled ? undefined : handleOpen}
+                                size={"tiny"}
+                                reference={reference}
+                                onHover={onHover}
+                                disabled={!path}
+                                previewProperties={previewProperties}
+                            />
+                        </div>
+                    )
+                    }
+                </>;
+            else
+                return <ErrorView error={"Data is not an array of references"}/>;
+        };
+
+        if (!collection)
+            return <ErrorView error={"The specified collection does not exist"}/>;
+
+        return (
+            <div className="w-full"
+                 onMouseEnter={hoverTrue}
+                 onMouseMove={hoverTrue}
+                 onMouseLeave={hoverFalse}>
+
+                {internalValue && !multiselect && buildSingleReferenceField()}
+
+                {internalValue && multiselect && buildMultipleReferenceField()}
+
+                {valueNotSet &&
+                    <Button
+                        onClick={handleOpen}
+                        size={"small"}
+                        variant="outlined"
+                        color="primary">
+                        Edit {title}
+                    </Button>}
+
+            </div>
+        );
+    }, equal);

package/src/components/EntityCollectionTable/filters/DateTimeFilterField.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { VirtualTableWhereFilterOp } from "../../VirtualTable";
 import { DateTimeField, Select, SelectItem } from "@firecms/ui";
-import { useFireCMSContext } from "../../../hooks";
+import { useCustomizationController } from "../../../hooks";
 
 interface DateTimeFilterFieldProps {
     name: string,
@@ -36,7 +36,7 @@ export function DateTimeFilterField({
                                         title
                                     }: DateTimeFilterFieldProps) {
 
-    const { locale } = useFireCMSContext();
+    const { locale } = useCustomizationController();
     const possibleOperations: (keyof typeof operationLabels) [] = isArray
         ? ["array-contains"]
         : ["==", "!=", ">", "<", ">=", "<="];

package/src/components/EntityCollectionTable/internal/default_entity_actions.tsx

@@ -14,7 +14,7 @@ export const editEntityAction: EntityAction = {
                 unhighlightEntity
             }): Promise<void> {
         highlightEntity?.(entity);
-        context.onAnalyticsEvent?.("entity_click", {
+        context.analyticsController?.onAnalyticsEvent?.("entity_click", {
             path: entity.path,
             entityId: entity.id
         });
@@ -40,7 +40,7 @@ export const copyEntityAction: EntityAction = {
                 unhighlightEntity
             }): Promise<void> {
         highlightEntity?.(entity);
-        context.onAnalyticsEvent?.("copy_entity_click", {
+        context.analyticsController?.onAnalyticsEvent?.("copy_entity_click", {
             path: entity.path,
             entityId: entity.id
         });
@@ -107,7 +107,7 @@ export const deleteEntityAction: EntityAction = {
                     callbacks={collection.callbacks}
                     open={open}
                     onEntityDelete={() => {
-                        context.onAnalyticsEvent?.("single_entity_deleted", {
+                        context.analyticsController?.onAnalyticsEvent?.("single_entity_deleted", {
                             path: fullPath
                         });
                         selectionController?.setSelectedEntities(selectionController.selectedEntities.filter(e => e.id !== entity.id));

package/src/components/EntityCollectionTable/internal/popup_field/PopupFormField.tsx

@@ -23,7 +23,7 @@ import { ErrorView, OnCellValueChangeParams } from "../../../../components";
 import { getPropertyInPath, isReadOnly, resolveCollection } from "../../../../util";
 import { Button, ClearIcon, DialogActions, IconButton, Typography } from "@firecms/ui";
 import { PropertyFieldBinding } from "../../../../form";
-import { useDataSource, useFireCMSContext } from "../../../../hooks";
+import { useCustomizationController, useFireCMSContext } from "../../../../hooks";
 
 interface PopupFormFieldProps<M extends Record<string, any>> {
     entity?: Entity<M>;
@@ -65,6 +65,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
 
     // const dataSource = useDataSource();
     const fireCMSContext = useFireCMSContext();
+    const customizationController = useCustomizationController();
 
     const [savingError, setSavingError] = React.useState<any>();
     const [popupLocation, setPopupLocation] = useState<{
@@ -99,7 +100,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
             path,
             values: internalValue,
             entityId,
-            fields: fireCMSContext.propertyConfigs
+            fields: customizationController.propertyConfigs
         })
         : undefined;
 
@@ -315,7 +316,7 @@ export function PopupFormFieldInternal<M extends Record<string, any>>({
                         </div>
                     </>;
 
-                    const plugins = fireCMSContext.plugins;
+                    const plugins = customizationController.plugins;
                     if (plugins) {
                         // const formController: FormContext<M> = {
                         //     values,