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

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.0.0-alpha.81",
+  "version": "3.0.0-alpha.83",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@firecms/data_import_export": "^3.0.0-alpha.81",
-    "@firecms/schema_inference": "^3.0.0-alpha.81",
-    "@firecms/ui": "^3.0.0-alpha.81",
+    "@firecms/data_import_export": "^3.0.0-alpha.83",
+    "@firecms/schema_inference": "^3.0.0-alpha.83",
+    "@firecms/ui": "^3.0.0-alpha.83",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.3.0"
   },
@@ -72,5 +72,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "ac77309580f9668647209724e1df2080d3932bef"
+  "gitHead": "96d21eb290969ee8e2cc56ca13a47834bae0ee57"
 }

package/src/ConfigControllerProvider.tsx

@@ -2,7 +2,13 @@ import React, { PropsWithChildren, useCallback, useEffect } from "react";
 import equal from "react-fast-compare"
 
 import { CollectionsConfigController } from "./types/config_controller";
-import { Property, useFireCMSContext, useNavigationController, User, useSnackbarController } from "@firecms/core";
+import {
+    Property,
+    useCustomizationController,
+    useNavigationController,
+    User,
+    useSnackbarController
+} from "@firecms/core";
 import { CollectionEditorDialog } from "./ui/collection_editor/CollectionEditorDialog";
 import { useNavigate } from "react-router";
 import { CollectionEditorController } from "./types/collection_editor_controller";
@@ -69,7 +75,7 @@ export const ConfigControllerProvider = React.memo(
         const navigation = useNavigationController();
         const navigate = useNavigate();
         const snackbarController = useSnackbarController();
-        const { propertyConfigs } = useFireCMSContext();
+        const { propertyConfigs } = useCustomizationController();
 
         const {
             collections

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { EntityCollection, getIconForView, SearchIconsView, singular, toSnakeCase, } from "@firecms/core";
+import { EntityCollection, IconForView, SearchIconsView, singular, toSnakeCase, } from "@firecms/core";
 import {
     Autocomplete,
     AutocompleteItem,
@@ -81,7 +81,7 @@ export function CollectionDetailsForm({
         }
     }, [errors.id]);
 
-    const collectionIcon = getIconForView(values);
+    const collectionIcon = <IconForView collectionOrView={values}/>;
 
     const groupOptions = groups?.filter((group) => !reservedGroups?.includes(group));
 
@@ -353,9 +353,9 @@ export function CollectionDetailsForm({
                     <div className={"p-4 overflow-auto min-h-[200px]"}>
                         <SearchIconsView selectedIcon={values.icon}
                                          onIconSelected={(icon: string) => {
-                                         setIconDialogOpen(false);
-                                         setFieldValue("icon", icon);
-                                     }}/>
+                                             setIconDialogOpen(false);
+                                             setFieldValue("icon", icon);
+                                         }}/>
                     </div>
 
                 </Dialog>

package/src/ui/collection_editor/CollectionEditorDialog.tsx

@@ -18,7 +18,7 @@ import {
     removeUndefined,
     TopNavigationResult,
     useAuthController,
-    useFireCMSContext,
+    useCustomizationController,
     useNavigationController,
     User,
     useSnackbarController
@@ -161,7 +161,7 @@ export function CollectionEditorDialogInternal<M extends {
    }
 ) {
 
-    const { propertyConfigs } = useFireCMSContext();
+    const { propertyConfigs } = useCustomizationController();
     const navigation = useNavigationController();
     const {
         topLevelNavigation,

package/src/ui/collection_editor/EntityCustomViewsSelectDialog.tsx

@@ -1,11 +1,11 @@
-import { useFireCMSContext } from "@firecms/core";
+import { useCustomizationController } from "@firecms/core";
 import { Button, Dialog, DialogActions, DialogContent, Typography } from "@firecms/ui";
 import React from "react";
 
 export function EntityCustomViewsSelectDialog({ open, onClose }: { open: boolean, onClose: (selectedViewKey?: string) => void }) {
     const {
         entityViews,
-    } = useFireCMSContext();
+    } = useCustomizationController();
 
     return <Dialog
         maxWidth={"md"}

package/src/ui/collection_editor/PropertyFieldPreview.tsx

@@ -5,7 +5,7 @@ import {
     isPropertyBuilder,
     Property,
     PropertyOrBuilder,
-    useFireCMSContext,
+    useCustomizationController,
 } from "@firecms/core";
 import {
     cardClickableMixin,
@@ -18,7 +18,6 @@ import {
     Typography,
 } from "@firecms/ui";
 
-
 import { editableProperty } from "../../utils/entities";
 
 export function PropertyFieldPreview({
@@ -37,7 +36,7 @@ export function PropertyFieldPreview({
     onClick?: () => void
 }) {
 
-    const { propertyConfigs } = useFireCMSContext();
+    const { propertyConfigs } = useCustomizationController();
 
     const propertyConfig = getFieldConfig(property, propertyConfigs);
     const disabled = !editableProperty(property);
@@ -119,7 +118,7 @@ export function NonEditablePropertyPreview({
     property?: PropertyOrBuilder
 }) {
 
-    const { propertyConfigs } = useFireCMSContext();
+    const { propertyConfigs } = useCustomizationController();
 
     const propertyConfig = !isPropertyBuilder(property) && property ? getFieldConfig(property, propertyConfigs) : undefined;
 

package/src/ui/collection_editor/SubcollectionsEditTab.tsx

@@ -4,7 +4,7 @@ import {
     EntityCollection,
     EntityCustomView,
     resolveEntityView,
-    useFireCMSContext,
+    useCustomizationController,
     User
 } from "@firecms/core";
 import {
@@ -45,7 +45,7 @@ export function SubcollectionsEditTab({
     parentCollectionIds?: string[];
 }) {
 
-    const { entityViews: contextEntityViews } = useFireCMSContext();
+    const { entityViews: contextEntityViews } = useCustomizationController();
 
     const [subcollectionToDelete, setSubcollectionToDelete] = React.useState<string | undefined>();
     const [addEntityViewDialogOpen, setAddEntityViewDialogOpen] = React.useState<boolean>(false);

package/src/ui/collection_editor/properties/ReferencePropertyField.tsx

@@ -1,18 +1,7 @@
 import React from "react";
 import { Field, getIn, useFormikContext } from "formik";
-import {
-    getIconForView,
-    NumberProperty,
-    StringProperty,
-    useNavigationController
-} from "@firecms/core";
-import {
-    CircularProgress,
-    Select,
-    SelectGroup,
-    SelectItem,
-    Typography,
-} from "@firecms/ui";
+import { IconForView, NumberProperty, StringProperty, useNavigationController } from "@firecms/core";
+import { CircularProgress, Select, SelectGroup, SelectItem, Typography, } from "@firecms/ui";
 import { FieldHelperView } from "./FieldHelperView";
 
 export function ReferencePropertyField({
@@ -26,9 +15,6 @@ export function ReferencePropertyField({
         values,
         handleChange,
         errors,
-        touched,
-        setFieldError,
-        setFieldValue
     } = useFormikContext<StringProperty | NumberProperty>();
 
     const navigation = useNavigationController();
@@ -113,10 +99,9 @@ export function CollectionsSelect({
                 renderValue={(selected) => {
                     const selectedCollection = collections.find(collection => collection.id === selected || collection.path === selected);
                     if (!selectedCollection) return null;
-                    const collectionIcon = getIconForView(selectedCollection);
                     return (
                         <div className="flex flex-row">
-                            {collectionIcon}
+                            <IconForView collectionOrView={selectedCollection}/>
                             <Typography
                                 variant={"subtitle2"}
                                 className="font-medium ml-4">
@@ -132,12 +117,11 @@ export function CollectionsSelect({
                         {
                             collections.filter(collection => collection.group === group)
                                 .map((collection) => {
-                                    const collectionIcon = getIconForView(collection);
                                     return <SelectItem
                                         key={`${collection.id ?? collection.path}-${group}`}
                                         value={collection.id ?? collection.path}>
                                         <div className="flex flex-row">
-                                            {collectionIcon}
+                                            <IconForView collectionOrView={collection}/>
                                             <Typography
                                                 variant={"subtitle2"}
                                                 className="font-medium ml-4">
@@ -154,11 +138,10 @@ export function CollectionsSelect({
                 {ungroupedCollections && <SelectGroup label={"Views"}>
                     {ungroupedCollections
                         .map((collection) => {
-                            const collectionIcon = getIconForView(collection);
                             return <SelectItem key={collection.id ?? collection.path}
                                                value={collection.id ?? collection.path}>
                                 <div className="flex flex-row">
-                                    {collectionIcon}
+                                    <IconForView collectionOrView={collection}/>
                                     <Typography
                                         variant={"subtitle2"}
                                         className="font-medium ml-4">