[1062] Make the whole tree item hoverable/clickable but do not select…

… when expanding/collapsing from the arrow/chevron Bug: #1062 Signed-off-by: Pierre-Charles David <[email protected]>
eclipse-sirius · Nov 18, 2024 · 34e0712 · 34e0712
1 parent 250022b
commit 34e0712
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/packages/trees/frontend/sirius-components-trees/src/treeitems/TreeItem.tsx b/packages/trees/frontend/sirius-components-trees/src/treeitems/TreeItem.tsx
@@ -29,7 +29,11 @@ import { TreeItemDirectEditInput } from './TreeItemDirectEditInput';
 import { isFilterCandidate } from './filterTreeItem';
 import { useDropTreeItem } from './useDropTreeItem';
 
-const useTreeItemStyle = makeStyles()((theme) => ({
+interface TreeItemStyleProps {
+  depth: number;
+}
+
+const useTreeItemStyle = makeStyles<TreeItemStyleProps>()((theme, { depth }) => ({
   treeItemBefore: {
     height: '2px',
   },
@@ -45,6 +49,7 @@ const useTreeItemStyle = makeStyles()((theme) => ({
       borderColor: 'black',
       borderStyle: 'dotted',
     },
+    paddingLeft: `${24 * (depth - 1)}px`,
   },
   treeItemHover: {
     backgroundColor: theme.palette.action.hover,
@@ -92,10 +97,7 @@ const useTreeItemStyle = makeStyles()((theme) => ({
     fontWeight: 'bold',
   },
   ul: {
-    marginLeft: theme.spacing(3),
-  },
-  highlight: {
-    backgroundColor: theme.palette.navigation.leftBackground,
+    marginLeft: 0,
   },
 }));
 
@@ -121,7 +123,7 @@ export const TreeItem = ({
   markedItemIds,
   treeItemActionRender,
 }: TreeItemProps) => {
-  const { classes } = useTreeItemStyle();
+  const { classes } = useTreeItemStyle({ depth });
 
   const initialState: TreeItemState = {
     editingMode: false,
@@ -361,7 +363,6 @@ export const TreeItem = ({
             tabIndex={0}
             onKeyDown={onBeginEditing}
             draggable={true}
-            onClick={onClick}
             onDragStart={dragStart}
             onDragOver={dragOver}
             data-treeitemid={item.id}

diff --git a/packages/trees/frontend/sirius-components-trees/src/treeitems/TreeItemArrow.tsx b/packages/trees/frontend/sirius-components-trees/src/treeitems/TreeItemArrow.tsx
@@ -28,7 +28,10 @@ const useTreeItemArrowStyle = makeStyles()(() => ({
 export const TreeItemArrow = ({ item, depth, onExpand, 'data-testid': dataTestid }: TreeItemArrowProps) => {
   const { classes } = useTreeItemArrowStyle();
   if (item.hasChildren) {
-    const onClick = () => onExpand(item.id, depth);
+    const onClick: React.MouseEventHandler = (event) => {
+      event.stopPropagation();
+      onExpand(item.id, depth);
+    };
     if (item.expanded) {
       return (
         <ExpandMoreIcon className={classes.arrow} style={{ fontSize: 20 }} onClick={onClick} data-testid={dataTestid} />