@firecms/core 3.0.0-canary.2 → 3.0.0-canary.200

package/src/components/{DeleteConfirmationDialog.tsx → ConfirmationDialog.tsx}

@@ -1,8 +1,8 @@
 import React from "react";
 
-import { Button, Dialog, DialogActions, DialogContent, LoadingButton, Typography } from "@firecms/ui";
+import { Button, Dialog, DialogActions, DialogContent, DialogTitle, LoadingButton, Typography } from "@firecms/ui";
 
-export function DeleteConfirmationDialog({
+export function ConfirmationDialog({
                                              open,
                                              onAccept,
                                              onCancel,
@@ -22,8 +22,8 @@ export function DeleteConfirmationDialog({
             open={open}
             onOpenChange={(open) => !open ? onCancel() : undefined}
         >
+            <DialogTitle variant={"h6"} className={"mb-2"}>{title}</DialogTitle>
             <DialogContent>
-                <Typography variant={"h6"} className={"mb-2"}>{title}</Typography>
                 {body}
             </DialogContent>
 

package/src/components/DeleteEntityDialog.tsx

@@ -1,6 +1,6 @@
 import { Entity, EntityCallbacks, EntityCollection } from "../types";
 import React, { useCallback, useMemo, useState } from "react";
-import { Button, CircularProgress, Dialog, DialogActions, DialogContent, Typography } from "@firecms/ui";
+import { Button, CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle } from "@firecms/ui";
 import {
     deleteEntityWithCallbacks,
     useCustomizationController,
@@ -9,7 +9,7 @@ import {
     useSnackbarController
 } from "../hooks";
 import { resolveCollection } from "../util";
-import { EntityPreview } from "./EntityPreview";
+import { EntityView } from "./EntityView";
 
 export interface DeleteEntityDialogProps<M extends Record<string, any>> {
     entityOrEntitiesToDelete?: Entity<M> | Entity<M>[],
@@ -35,30 +35,22 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
                                                                       path
                                                                   }: DeleteEntityDialogProps<M>) {
 
-    const dataSource = useDataSource();
+    const dataSource = useDataSource(collection);
     const customizationController = useCustomizationController();
     const snackbarController = useSnackbarController();
     const [loading, setLoading] = useState(false);
 
-    const [entityOrEntities, setUsedEntityOrEntities] = React.useState<Entity<M> | Entity<M>[]>();
-
-    const [multipleEntities, setMultipleEntities] = React.useState<boolean>();
     const context = useFireCMSContext();
+    const entityOrEntities = Array.isArray(entityOrEntitiesToDelete) && entityOrEntitiesToDelete.length === 1
+        ? entityOrEntitiesToDelete[0]
+        : entityOrEntitiesToDelete;
 
-    React.useEffect(() => {
-        if (entityOrEntitiesToDelete) {
-            const revisedEntityOrEntities = Array.isArray(entityOrEntitiesToDelete) && entityOrEntitiesToDelete.length === 1
-                ? entityOrEntitiesToDelete[0]
-                : entityOrEntitiesToDelete;
-            setUsedEntityOrEntities(revisedEntityOrEntities);
-            setMultipleEntities(Array.isArray(revisedEntityOrEntities));
-        }
-    }, [entityOrEntitiesToDelete]);
+    const multipleEntities = Array.isArray(entityOrEntities);
 
     const resolvedCollection = useMemo(() => resolveCollection<M>({
         collection,
         path,
-        fields: customizationController.propertyConfigs
+        propertyConfigs: customizationController.propertyConfigs
     }), [collection, path]);
 
     const handleCancel = useCallback(() => {
@@ -163,7 +155,7 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
     } else {
         const entity = entityOrEntities as Entity<M> | undefined;
         content = entity
-            ? <EntityPreview
+            ? <EntityView
                 entity={entity}
                 collection={collection}
                 path={path}/>
@@ -176,21 +168,20 @@ export function DeleteEntityDialog<M extends Record<string, any>>({
 
     return (
         <Dialog
-            maxWidth={"2xl"}
+            maxWidth={multipleEntities ? "lg" : "2xl"}
             aria-labelledby="delete-dialog"
             open={open}
             onOpenChange={(open) => !open ? onClose() : undefined}
         >
+            <DialogTitle id="delete-dialog-title">
+                {dialogTitle}
+            </DialogTitle>
             <DialogContent fullHeight={true}>
-                <Typography variant={"subtitle2"} className={"p-4"}>
-                    {dialogTitle}
-                </Typography>
-
                 {!multipleEntities && <div className={"p-4"}>{content}</div>}
             </DialogContent>
             <DialogActions>
 
-                {loading && <CircularProgress size={"small"}/>}
+                {loading && <CircularProgress size={"smallest"}/>}
 
                 <Button onClick={handleCancel}
                         disabled={loading}

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -1,8 +1,20 @@
 import React, { MouseEvent, useCallback } from "react";
 
 import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../types";
-import { Checkbox, cn, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
+import {
+    Checkbox,
+    Chip,
+    cls,
+    EditIcon,
+    IconButton,
+    Menu,
+    MenuItem,
+    MoreVertIcon,
+    Skeleton,
+    Tooltip
+} from "@firecms/ui";
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
+import { hasEntityInCache } from "../../util/entity_cache";
 
 /**
  *
@@ -14,7 +26,6 @@ import { useFireCMSContext, useLargeLayout } from "../../hooks";
  * @param size
  * @param toggleEntitySelection
  * @param hideId
- * @constructor
  *
  * @group Collection components
  */
@@ -33,35 +44,32 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                                                                   actions = [],
                                                                                   hideId,
                                                                                   selectionController,
+                                                                                  openEntityMode
                                                                               }:
-                                                                                  {
-                                                                                      entity: Entity<any>,
-                                                                                      collection?: EntityCollection<any>,
-                                                                                      fullPath?: string,
-                                                                                      width: number,
-                                                                                      frozen?: boolean,
-                                                                                      size: CollectionSize,
-                                                                                      isSelected?: boolean,
-                                                                                      selectionEnabled?: boolean,
-                                                                                      actions?: EntityAction[],
-                                                                                      hideId?: boolean,
-                                                                                      onCollectionChange?: () => void,
-                                                                                      selectionController?: SelectionController;
-                                                                                      highlightEntity?: (entity: Entity<any>) => void;
-                                                                                      unhighlightEntity?: (entity: Entity<any>) => void;
-                                                                                  }) {
+                                                                              {
+                                                                                  entity: Entity<any>,
+                                                                                  collection?: EntityCollection<any>,
+                                                                                  fullPath?: string,
+                                                                                  width: number,
+                                                                                  frozen?: boolean,
+                                                                                  size: CollectionSize,
+                                                                                  isSelected?: boolean,
+                                                                                  selectionEnabled?: boolean,
+                                                                                  actions?: EntityAction[],
+                                                                                  hideId?: boolean,
+                                                                                  onCollectionChange?: () => void,
+                                                                                  selectionController?: SelectionController;
+                                                                                  highlightEntity?: (entity: Entity<any>) => void;
+                                                                                  unhighlightEntity?: (entity: Entity<any>) => void;
+                                                                                  openEntityMode: "side_panel" | "full_screen";
+                                                                              }) {
 
     const largeLayout = useLargeLayout();
 
     const context = useFireCMSContext();
 
     const onCheckedChange = useCallback((checked: boolean) => {
-        selectionController?.toggleEntitySelection(entity);
-    }, [entity, selectionController?.toggleEntitySelection]);
-
-    const onClick = useCallback((event: MouseEvent) => {
-        event.stopPropagation();
-        selectionController?.toggleEntitySelection(entity);
+        selectionController?.toggleEntitySelection(entity, checked);
     }, [entity, selectionController?.toggleEntitySelection]);
 
     const hasActions = actions.length > 0;
@@ -69,13 +77,16 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
 
     const collapsedActions = actions.filter(a => a.collapsed || a.collapsed === undefined);
     const uncollapsedActions = actions.filter(a => a.collapsed === false);
+    const hasDraft = hasEntityInCache(fullPath + "/" + entity.id);
     return (
         <div
-            onClick={onClick}
-            className={cn(
-                "h-full flex items-center justify-center flex-col bg-gray-50 dark:bg-gray-900 bg-opacity-90 dark:bg-opacity-90 z-10",
+            className={cls(
+                "h-full flex items-center justify-center flex-col bg-surface-50 dark:bg-surface-900 bg-opacity-90 dark:bg-opacity-90 z-10",
                 frozen ? "sticky left-0" : ""
             )}
+            onClick={useCallback((event: any) => {
+                event.stopPropagation();
+            }, [])}
             style={{
                 width,
                 position: frozen ? "sticky" : "initial",
@@ -87,7 +98,9 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                 <div className="w-34 flex justify-center">
 
                     {uncollapsedActions.map((action, index) => (
-                        <Tooltip key={index} title={action.name}>
+                        <Tooltip key={index}
+                                 title={action.name}
+                                 asChild={true}>
                             <IconButton
                                 onClick={(event: MouseEvent) => {
                                     event.stopPropagation();
@@ -99,7 +112,8 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                         selectionController,
                                         highlightEntity,
                                         unhighlightEntity,
-                                        onCollectionChange
+                                        onCollectionChange,
+                                        openEntityMode: openEntityMode ?? collection?.openEntityMode
                                     });
                                 }}
                                 size={largeLayout ? "medium" : "small"}>
@@ -127,7 +141,8 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                                             selectionController,
                                             highlightEntity,
                                             unhighlightEntity,
-                                            onCollectionChange
+                                            onCollectionChange,
+                                            openEntityMode: openEntityMode ?? collection?.openEntityMode
                                         });
                                     }}>
                                     {action.icon}
@@ -149,16 +164,18 @@ export const EntityCollectionRowActions = function EntityCollectionRowActions({
                 </div>}
 
             {!hideId && size !== "xs" && (
-                <div className="w-[138px] text-center overflow-hidden truncate">
-
+                <div
+                    className="w-[138px] overflow-hidden truncate font-mono text-xs text-text-secondary dark:text-text-secondary-dark max-w-full text-ellipsis px-2 align-center flex items-center justify-center gap-1"
+                    onClick={(event) => {
+                        event.stopPropagation();
+                    }}>
+                    {hasDraft && <Tooltip title={"Unsaved changes"} className={"inline"}>
+                        <Chip colorScheme={"orangeDarker"} className={"p-0.5"}>
+                            <EditIcon size={12}/>
+                        </Chip>
+                    </Tooltip>}
                     {entity
-                        ? <Typography
-                            onClick={(event) => {
-                                event.stopPropagation();
-                            }}
-                            className={"font-mono select-all"}
-                            variant={"caption"}
-                            color={"secondary"}> {entity.id} </Typography>
+                        ? entity.id
                         : <Skeleton/>
                     }
                 </div>