@firecms/core 3.0.0-canary.186 → 3.0.0-canary.187

package/src/core/NavigationRoutes.tsx

@@ -68,24 +68,28 @@ export const NavigationRoutes = React.memo<NavigationRoutesProps>(
             });
         }
 
-        const urlPath = navigation.buildUrlCollectionPath("");
-        const collectionRoute = <Route path={urlPath + "/*"}
-                                       key={`navigation_entity`}
-                                       element={
-                                           <ErrorBoundary>
-                                               <FireCMSRoute/>
-                                           </ErrorBoundary>
-                                       }/>
+        const collectionUrlPath = navigation.buildUrlCollectionPath("");
+        const collectionRoute = (
+            <Route path={collectionUrlPath + "/*"}
+                   key={`navigation_entity`}
+                   element={
+                       <ErrorBoundary>
+                           <FireCMSRoute/>
+                       </ErrorBoundary>
+                   }/>
+        );
 
         const homeRoute = (
             <Route path={"/"}
                    element={<HomePageRoute>{homePage}</HomePageRoute>}/>
         );
 
-        const notFoundRoute = <Route path={"*"}
-                                     element={
-                                         <NotFoundPage/>
-                                     }/>;
+        const notFoundRoute = (
+            <Route path={"*"}
+                   element={
+                       <NotFoundPage/>
+                   }/>
+        );
 
         return (
             <Routes location={baseLocation}>

package/src/form/components/FormEntry.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { ErrorBoundary } from "../../components";
+
+export function FormEntry({
+                              propertyKey,
+                              widthPercentage = 100,
+                              children
+                          }: {
+    propertyKey: string;
+    widthPercentage?: number;
+    children: React.ReactNode;
+}) {
+    return (
+        <div id={`form_field_${propertyKey}`}
+             className={"relative"}
+             style={{ width: widthPercentage === 100 ? "100%" : `calc(${widthPercentage}% - 8px)` }}>
+            <ErrorBoundary>
+                {children}
+            </ErrorBoundary>
+        </div>
+    );
+}

package/src/form/components/FormLayout.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { cls } from "@firecms/ui";
+
+export function FormLayout({
+                               children,
+                               className
+                           }: {
+    children: React.ReactNode;
+    className?: string;
+}) {
+    return (
+        <div className={cls("flex flex-wrap gap-x-4 w-full space-y-8", className)}>
+            {children}
+        </div>
+    );
+}

package/src/form/components/index.tsx

@@ -1,3 +1,5 @@
 export * from "./FieldHelperText";
 export * from "./LabelWithIcon";
 export * from "./LabelWithIconAndTooltip";
+export * from "./FormEntry";
+export * from "./FormLayout";

package/src/form/field_bindings/ArrayCustomShapedFieldBinding.tsx

@@ -23,7 +23,6 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
                                                                         minimalistView: minimalistViewProp,
                                                                         property,
                                                                         includeDescription,
-                                                                        underlyingValueHasChanged,
                                                                         context,
                                                                         disabled
                                                                     }: FieldProps<T, any, any>) {
@@ -65,7 +64,6 @@ export function ArrayCustomShapedFieldBinding<T extends Array<any>>({
             disabled: disabled || thisDisabled,
             property: childProperty,
             includeDescription,
-            underlyingValueHasChanged,
             context,
             partOfArray: true,
             minimalistView: false,

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -23,7 +23,6 @@ export function MapFieldBinding({
                                     property,
                                     minimalistView: minimalistViewProp,
                                     includeDescription,
-                                    underlyingValueHasChanged,
                                     autoFocus,
                                     context,
                                     onPropertyChange
@@ -62,7 +61,6 @@ export function MapFieldBinding({
                                 disabled: disabled || thisDisabled,
                                 property: childProperty,
                                 includeDescription,
-                                underlyingValueHasChanged,
                                 context,
                                 partOfArray: false,
                                 minimalistView: false,

package/src/routes/FireCMSRoute.tsx

@@ -190,10 +190,15 @@ function EntityFullScreenRoute({
             onValuesModified={(modified) => blocked.current = modified}
             onSaved={(params) => {
                 console.log("Entity saved", params);
-                navigate(`${basePath}/${params.entityId}`, { replace: true });
+                const newSelectedTab = params.selectedTab;
+                const newEntityId = params.entityId;
+                if (newSelectedTab) {
+                    navigate(`${basePath}/${newEntityId}/${newSelectedTab}`, { replace: true });
+                } else {
+                    navigate(`${basePath}/${newEntityId}`, { replace: true });
+                }
             }}
             onTabChange={(params) => {
-                // updateUrl(params.entityId, params.selectedTab, !isNew, params.path, isNew);
                 setSelectedTab(params.selectedTab);
                 if (isNew) {
                     return;

package/src/types/fields.tsx

@@ -1,6 +1,7 @@
 import { CMSType, Property, PropertyOrBuilder } from "./properties";
 import { ResolvedEntityCollection, ResolvedProperty } from "./resolved_entities";
 import { FormexController } from "@firecms/formex";
+import { Entity } from "./entities";
 
 /**
  * When building a custom field you need to create a React component that takes
@@ -161,6 +162,21 @@ export interface FormContext<M extends Record<string, any> = any> {
      */
     path?: string;
 
+    status: "new" | "existing" | "copy";
+
+    entity?: Entity<M>;
+
+    savingError?: Error;
+
+    openEntityMode: "side_panel" | "full_screen";
+
+    /**
+     * If pending close is set to true, the form will close when the user
+     * saves the entity
+     * @param pendingClose
+     */
+    setPendingClose?: (pendingClose: boolean) => void;
+
     /**
      * This is the underlying formex controller that powers the form
      */

package/src/types/navigation.ts

@@ -5,6 +5,7 @@ import { EntityReference } from "./entities";
 /**
  * Controller that includes the resolved navigation and utility methods and
  * attributes.
+ * This controller holds the state of the navigation including the collections.
  * @group Models
  */
 export type NavigationController<EC extends EntityCollection = EntityCollection<any>> = {

package/src/types/plugins.tsx

@@ -195,7 +195,7 @@ export interface PluginFormActionProps<USER extends User = User, EC extends Enti
     formContext?: FormContext<any>;
     context: FireCMSContext<USER>;
     currentEntityId?: string;
-    layout: "side_panel" | "full_screen";
+    openEntityMode: "side_panel" | "full_screen";
 }
 
 export type PluginFieldBuilderParams<T extends CMSType = CMSType, M extends Record<string, any> = any, EC extends EntityCollection<M> = EntityCollection<M>> = {

package/src/types/properties.ts

@@ -377,7 +377,7 @@ export interface StringProperty extends BaseProperty<string> {
 
     /**
      * You can specify a `Storage` configuration. It is used to
-     * indicate that this string refers to a path in Google Cloud Storage.
+     * indicate that this string refers to a path in your storage provider.
      */
     storage?: StorageConfig;
 

package/src/util/entity_cache.ts

@@ -10,23 +10,31 @@ const entityCache: Map<string, object> = new Map();
 const isLocalStorageAvailable = typeof localStorage !== "undefined";
 
 // Define custom replacer for JSON.stringify
-function customReplacer(key: string, value: any): any {
+function customReplacer(key: string): any {
+
+    // @ts-ignore
+    const value = this[key];
+
     // Handle Date objects
+    // @ts-ignore
     if (value instanceof Date) {
         return { __type: "Date", value: value.toISOString() };
     }
 
     // Handle EntityReference
+    // @ts-ignore
     if (value instanceof EntityReference) {
         return { __type: "EntityReference", id: value.id, path: value.path };
     }
 
     // Handle GeoPoint
+    // @ts-ignore
     if (value instanceof GeoPoint) {
         return { __type: "GeoPoint", latitude: value.latitude, longitude: value.longitude };
     }
 
     // Handle Vector
+    // @ts-ignore
     if (value instanceof Vector) {
         return { __type: "Vector", value: value.value };
     }
@@ -93,6 +101,7 @@ export function saveEntityToCache(path: string, data: object): void {
     if (isLocalStorageAvailable) {
         try {
             const key = LOCAL_STORAGE_PREFIX + path;
+            console.log("Saving entity to cache", key, data);
             const entityString = JSON.stringify(data, customReplacer);
             localStorage.setItem(key, entityString);
         } catch (error) {