@firecms/core 3.0.0-canary.165 → 3.0.0-canary.167

package/dist/types/collections.d.ts

@@ -105,7 +105,7 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * `hidden` in the property definition,will be ignored.
      * `propertiesOrder` has precedence over `hidden`.
      */
-    propertiesOrder?: (Extract<keyof M, string> | `subcollection:${string}`)[];
+    propertiesOrder?: (Extract<keyof M, string> | string | `subcollection:${string}` | "collectionGroupParent")[];
     /**
      * If enabled, content is loaded in batches. If `false` all entities in the
      * collection are loaded.

package/dist/types/dialogs_controller.d.ts

@@ -20,7 +20,7 @@ export interface DialogsController {
  * Props used to open a side dialog
  * @group Hooks and utilities
  */
-export interface DialogControllerEntryProps {
+export interface DialogControllerEntryProps<T extends object = {}> {
     key: string;
     /**
      * The component type that will be rendered
@@ -28,5 +28,9 @@ export interface DialogControllerEntryProps {
     Component: React.ComponentType<{
         open: boolean;
         closeDialog: () => void;
-    }>;
+    } & T>;
+    /**
+     * Props to pass to the dialog component
+     */
+    props?: T;
 }

package/dist/types/entity_actions.d.ts

@@ -4,6 +4,7 @@ import { Entity } from "./entities";
 import { EntityCollection, SelectionController } from "./collections";
 import { User } from "./user";
 import { SideEntityController } from "./side_entity_controller";
+import { FormContext } from "./fields";
 /**
  * An entity action is a custom action that can be performed on an entity.
  * They are displayed in the entity view and in the collection view.
@@ -13,6 +14,15 @@ export type EntityAction<M extends object = any, USER extends User = User> = {
      * Title of the action
      */
     name: string;
+    /**
+     * Key of the action. You only need to provide this if you want to
+     * override the default actions.
+     * The default actions are:
+     * - edit
+     * - delete
+     * - copy
+     */
+    key?: string;
     /**
      * Icon of the action
      */
@@ -46,4 +56,9 @@ export type EntityActionClickProps<M extends object, USER extends User = User> =
      * If this actions is being called from a side dialog
      */
     sideEntityController?: SideEntityController;
+    /**
+     * You can use the form context to manage the state of the form.
+     * This is only available if this action in being triggered from a form context.
+     */
+    formContext?: FormContext<M>;
 };

package/dist/util/entity_actions.d.ts

@@ -0,0 +1,2 @@
+import { EntityAction } from "../types";
+export declare function mergeEntityActions(currentActions: EntityAction[], newActions: EntityAction[]): EntityAction[];

package/dist/util/index.d.ts

@@ -7,6 +7,7 @@ export * from "./objects";
 export * from "./paths";
 export * from "./regexp";
 export * from "./navigation_utils";
+export * from "./entity_actions";
 export * from "./useDebouncedCallback";
 export * from "./property_utils";
 export * from "./resolutions";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@firecms/core",
   "type": "module",
-  "version": "3.0.0-canary.165",
+  "version": "3.0.0-canary.167",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -50,9 +50,9 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@firecms/editor": "^3.0.0-canary.165",
-    "@firecms/formex": "^3.0.0-canary.165",
-    "@firecms/ui": "^3.0.0-canary.165",
+    "@firecms/editor": "^3.0.0-canary.167",
+    "@firecms/formex": "^3.0.0-canary.167",
+    "@firecms/ui": "^3.0.0-canary.167",
     "@hello-pangea/dnd": "^17.0.0",
     "@radix-ui/react-portal": "^1.1.2",
     "clsx": "^2.1.1",
@@ -106,7 +106,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "d6e4ccb9e524a6fac08b70f77eb9a188c894db24",
+  "gitHead": "86c9b7ff34991bf0424764845936b002e1071560",
   "publishConfig": {
     "access": "public"
   },

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -61,6 +61,7 @@ import {
 import { setIn } from "@firecms/formex";
 import { getSubcollectionColumnId } from "../EntityCollectionTable/internal/common";
 import {
+    COLLECTION_GROUP_PARENT_ID,
     OnCellValueChange,
     OnColumnResizeParams,
     UniqueFieldValidator,
@@ -75,8 +76,7 @@ import { useAnalyticsController } from "../../hooks/useAnalyticsController";
 import { useSelectionController } from "./useSelectionController";
 import { EntityCollectionViewStartActions } from "./EntityCollectionViewStartActions";
 import { addRecentId, getRecentIds } from "./utils";
-
-const COLLECTION_GROUP_PARENT_ID = "collectionGroupParent";
+import { mergeEntityActions } from "../../util/entity_actions";
 
 /**
  * @group Components
@@ -458,7 +458,7 @@ export const EntityCollectionView = React.memo(
             if (deleteEnabled)
                 actions.push(deleteEntityAction);
             if (customEntityActions)
-                actions.push(...customEntityActions);
+                return mergeEntityActions(actions, customEntityActions);
             return actions;
         };
 
@@ -798,7 +798,8 @@ function EntityIdHeaderWidget({
                         <SearchIcon size={"small"}/>
                     </IconButton>
                 }>
-                <div className={cls("my-2 rounded-lg bg-surface-50 dark:bg-surface-950 text-surface-900 dark:text-white")}>
+                <div
+                    className={cls("my-2 rounded-lg bg-surface-50 dark:bg-surface-950 text-surface-900 dark:text-white")}>
                     <form noValidate={true}
                           onSubmit={(e) => {
                               e.preventDefault();

package/src/components/common/default_entity_actions.tsx

@@ -5,6 +5,7 @@ import { addRecentId } from "../EntityCollectionView/utils";
 
 export const editEntityAction: EntityAction = {
     icon: <EditIcon/>,
+    key: "edit",
     name: "Edit",
     collapsed: false,
     onClick({
@@ -38,6 +39,7 @@ export const editEntityAction: EntityAction = {
 export const copyEntityAction: EntityAction = {
     icon: <FileCopyIcon/>,
     name: "Copy",
+    key: "copy",
     onClick({
                 entity,
                 collection,
@@ -62,38 +64,11 @@ export const copyEntityAction: EntityAction = {
     }
 }
 
-export const archiveEntityAction: EntityAction = {
-    icon: <ArchiveIcon/>,
-    name: "Archive",
-    onClick({
-                entity,
-                collection,
-                context: {
-                    dataSource,
-                }
-            }): Promise<void> {
-        // Add your code here
-        return Promise.resolve(undefined);
-    }
-}
-
-export const openWebsiteAction: EntityAction = {
-    icon: <OpenInNewIcon/>,
-    name: "See in website",
-    onClick({
-                entity,
-                collection,
-                context,
-            }): Promise<void> {
-        // open a new tab
-        window.open(`https://example.com/${entity.id}`, "_blank");
-        return Promise.resolve(undefined);
-    }
-}
 
 export const deleteEntityAction: EntityAction = {
     icon: <DeleteIcon/>,
     name: "Delete",
+    key: "delete",
     onClick({
                 entity,
                 fullPath,

package/src/components/common/useColumnsIds.tsx

@@ -3,7 +3,7 @@ import { EntityCollection, ResolvedEntityCollection, ResolvedProperty } from "..
 import { getSubcollectionColumnId } from "../EntityCollectionTable/internal/common";
 import { PropertyColumnConfig } from "../EntityCollectionTable/EntityCollectionTableProps";
 
-const COLLECTION_GROUP_PARENT_ID = "collectionGroupParent";
+export const COLLECTION_GROUP_PARENT_ID = "collectionGroupParent";
 
 export function useColumnIds<M extends Record<string, any>>(collection: ResolvedEntityCollection<M>, includeSubcollections: boolean): PropertyColumnConfig[] {
     return useMemo(() => {

package/src/contexts/DialogsProvider.tsx

@@ -46,6 +46,7 @@ export const DialogsProvider: React.FC<PropsWithChildren<{}>> = ({ children }) =
                 key={`dialog_${i}`}
                 open={true}
                 closeDialog={close}
+                {...entry.props}
             />)}
         </DialogsControllerContext.Provider>
     );

package/src/core/EntityEditView.tsx

@@ -34,6 +34,7 @@ import {
     getValueInPath,
     isHidden,
     isReadOnly,
+    mergeEntityActions,
     removeInitialAndTrailingSlashes,
     resolveCollection,
     resolveDefaultSelectedView,
@@ -702,7 +703,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
         if (deleteEnabled)
             actions.push(deleteEntityAction);
         if (customEntityActions)
-            actions.push(...customEntityActions);
+            return mergeEntityActions(actions, customEntityActions);
         return actions;
     }, [authController, inputCollection, path]);
 
@@ -841,14 +842,17 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                                 fullPath: resolvedCollection.path,
                                 collection: resolvedCollection,
                                 context,
-                                sideEntityController
+                                sideEntityController,
+                                formContext
                             });
                     }}>
                     {action.icon}
                 </IconButton>
             ))}
         </div>}
+
         {formex.isSubmitting && <CircularProgress size={"small"}/>}
+
         <Button
             variant="text"
             disabled={disabled || formex.isSubmitting}

package/src/preview/PropertyPreview.tsx

@@ -56,7 +56,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
         propertyConfigs: customizationController.propertyConfigs
     });
 
-    if (value === undefined || property === null) {
+    if (property === null) {
         content = <EmptyValue/>;
     } else if (property.Preview) {
         content = createElement(property.Preview as React.ComponentType<PropertyPreviewProps>,
@@ -70,7 +70,7 @@ export const PropertyPreview = React.memo(function PropertyPreview<T extends CMS
                 // entity,
                 customProps: property.customProps
             });
-    } else if (value === null) {
+    } else if (value === undefined || value === null) {
         content = <EmptyValue/>;
     } else if (property.dataType === "string") {
         const stringProperty = property as ResolvedStringProperty;

package/src/types/collections.ts

@@ -119,7 +119,7 @@ export interface EntityCollection<M extends Record<string, any> = any, USER exte
      * `hidden` in the property definition,will be ignored.
      * `propertiesOrder` has precedence over `hidden`.
      */
-    propertiesOrder?: (Extract<keyof M, string> | `subcollection:${string}`)[];
+    propertiesOrder?: (Extract<keyof M, string> | string | `subcollection:${string}` | "collectionGroupParent")[];
 
     /**
      * If enabled, content is loaded in batches. If `false` all entities in the

package/src/types/dialogs_controller.tsx

@@ -22,12 +22,16 @@ export interface DialogsController {
  * Props used to open a side dialog
  * @group Hooks and utilities
  */
-export interface DialogControllerEntryProps {
+export interface DialogControllerEntryProps<T extends object = {}> {
 
     key: string;
     /**
      * The component type that will be rendered
      */
-    Component: React.ComponentType<{ open: boolean, closeDialog: () => void }>;
+    Component: React.ComponentType<{ open: boolean, closeDialog: () => void } & T>;
+    /**
+     * Props to pass to the dialog component
+     */
+    props?: T;
 
 }

package/src/types/entity_actions.tsx

@@ -4,6 +4,8 @@ import { Entity } from "./entities";
 import { EntityCollection, SelectionController } from "./collections";
 import { User } from "./user";
 import { SideEntityController } from "./side_entity_controller";
+import { FormexController } from "@firecms/formex";
+import { FormContext } from "./fields";
 
 /**
  * An entity action is a custom action that can be performed on an entity.
@@ -15,6 +17,16 @@ export type EntityAction<M extends object = any, USER extends User = User> = {
      */
     name: string;
 
+    /**
+     * Key of the action. You only need to provide this if you want to
+     * override the default actions.
+     * The default actions are:
+     * - edit
+     * - delete
+     * - copy
+     */
+    key?: string;
+
     /**
      * Icon of the action
      */
@@ -53,4 +65,10 @@ export type EntityActionClickProps<M extends object, USER extends User = User> =
      * If this actions is being called from a side dialog
      */
     sideEntityController?: SideEntityController;
+
+    /**
+     * You can use the form context to manage the state of the form.
+     * This is only available if this action in being triggered from a form context.
+     */
+    formContext?: FormContext<M>;
 };

package/src/util/entity_actions.ts

@@ -0,0 +1,28 @@
+import { EntityAction } from "../types";
+
+const reservedKeys = ["edit", "copy", "delete"];
+
+export function mergeEntityActions(currentActions: EntityAction[], newActions: EntityAction[]): EntityAction[] {
+    // given the current actions, replace the ones with the same key
+    // and append the new ones
+    const updatedActions: EntityAction[] = [];
+    currentActions.forEach(action => {
+        const newAction = newActions.find(a => a.key === action.key);
+        if (newAction) {
+            const mergedAction = {
+                ...action,
+                ...newAction
+            }
+            updatedActions.push(mergedAction);
+        } else {
+            updatedActions.push(action);
+        }
+    });
+    newActions.forEach(action => {
+        if (!currentActions.find(a => a.key === action.key) && (!action.key || !reservedKeys.includes(action.key))) {
+            updatedActions.push(action);
+        }
+    });
+    return updatedActions;
+
+}

package/src/util/index.ts

@@ -7,6 +7,7 @@ export * from "./objects";
 export * from "./paths";
 export * from "./regexp";
 export * from "./navigation_utils";
+export * from "./entity_actions";
 export * from "./useDebouncedCallback";
 export * from "./property_utils";
 export * from "./resolutions";