@firecms/core 3.0.0-beta.1 → 3.0.0-beta.11

package/src/components/EntityCollectionTable/EntityCollectionRowActions.tsx

@@ -1,8 +1,7 @@
 import React, { MouseEvent, useCallback } from "react";
-import equal from "react-fast-compare"
 
 import { CollectionSize, Entity, EntityAction, EntityCollection, SelectionController } from "../../types";
-import { Checkbox, cn, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip, Typography } from "@firecms/ui";
+import { Checkbox, cls, IconButton, Menu, MenuItem, MoreVertIcon, Skeleton, Tooltip } from "@firecms/ui";
 import { useFireCMSContext, useLargeLayout } from "../../hooks";
 
 /**
@@ -14,58 +13,49 @@ import { useFireCMSContext, useLargeLayout } from "../../hooks";
  * @param selectionEnabled
  * @param size
  * @param toggleEntitySelection
- * @param onCopyClicked
- * @param onEditClicked
- * @param onDeleteClicked
  * @param hideId
- * @constructor
  *
  * @group Collection components
  */
-export const EntityCollectionRowActions = React.memo(function EntityCollectionRowActions({
-                                                                                             entity,
-                                                                                             collection,
-                                                                                             fullPath,
-                                                                                             width,
-                                                                                             frozen,
-                                                                                             isSelected,
-                                                                                             selectionEnabled,
-                                                                                             size,
-                                                                                             highlightEntity,
-                                                                                             onCollectionChange,
-                                                                                             unhighlightEntity,
-                                                                                             actions = [],
-                                                                                             hideId,
-                                                                                             selectionController,
-                                                                                         }:
-                                                                                             {
-                                                                                                 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;
-                                                                                             }) {
+export const EntityCollectionRowActions = function EntityCollectionRowActions({
+                                                                                  entity,
+                                                                                  collection,
+                                                                                  fullPath,
+                                                                                  width,
+                                                                                  frozen,
+                                                                                  isSelected,
+                                                                                  selectionEnabled,
+                                                                                  size,
+                                                                                  highlightEntity,
+                                                                                  onCollectionChange,
+                                                                                  unhighlightEntity,
+                                                                                  actions = [],
+                                                                                  hideId,
+                                                                                  selectionController,
+                                                                              }:
+                                                                                  {
+                                                                                      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;
+                                                                                  }) {
 
     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;
@@ -75,11 +65,13 @@ export const EntityCollectionRowActions = React.memo(function EntityCollectionRo
     const uncollapsedActions = actions.filter(a => a.collapsed === false);
     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",
@@ -91,7 +83,9 @@ export const EntityCollectionRowActions = React.memo(function EntityCollectionRo
                 <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();
@@ -103,7 +97,7 @@ export const EntityCollectionRowActions = React.memo(function EntityCollectionRo
                                         selectionController,
                                         highlightEntity,
                                         unhighlightEntity,
-                                        onCollectionChange
+                                        onCollectionChange,
                                     });
                                 }}
                                 size={largeLayout ? "medium" : "small"}>
@@ -131,7 +125,7 @@ export const EntityCollectionRowActions = React.memo(function EntityCollectionRo
                                             selectionController,
                                             highlightEntity,
                                             unhighlightEntity,
-                                            onCollectionChange
+                                            onCollectionChange,
                                         });
                                     }}>
                                     {action.icon}
@@ -153,16 +147,14 @@ export const EntityCollectionRowActions = React.memo(function EntityCollectionRo
                 </div>}
 
             {!hideId && size !== "xs" && (
-                <div className="w-[138px] text-center overflow-hidden truncate">
+                <div
+                    className="w-[138px] text-center overflow-hidden truncate font-mono text-xs text-text-secondary dark:text-text-secondary-dark max-w-full text-ellipsis px-2"
+                    onClick={(event) => {
+                        event.stopPropagation();
+                    }}>
 
                     {entity
-                        ? <Typography
-                            onClick={(event) => {
-                                event.stopPropagation();
-                            }}
-                            className={"font-mono select-all"}
-                            variant={"caption"}
-                            color={"secondary"}> {entity.id} </Typography>
+                        ? entity.id
                         : <Skeleton/>
                     }
                 </div>
@@ -171,4 +163,4 @@ export const EntityCollectionRowActions = React.memo(function EntityCollectionRo
         </div>
     );
 
-}, equal);
+};