[core] Smoothen edges on the new Editable Tree component (#2778)

mui · Oct 11, 2023 · 8d98fee · 8d98fee
1 parent 532d2cd
commit 8d98fee
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 23 deletions.
diff --git a/packages/toolpad-app/src/components/EditableTreeItem.tsx b/packages/toolpad-app/src/components/EditableTreeItem.tsx
@@ -81,11 +81,9 @@ export default function EditableTreeItem({
  handleCancel();
  return;
  }
-
  if (onEdit) {
  onEdit(itemNameInput);
  }
-
  setItemNameInput('');
  setIsInternalEditing(false);
  }, [handleCancel, itemNameInput, newItemValidationResult.isValid, onEdit]);
@@ -96,6 +94,7 @@ export default function EditableTreeItem({
 
  const handleFocus = React.useCallback((event: React.FocusEvent<HTMLInputElement>) => {
  event.target.select();
+ event.stopPropagation();
  }, []);
 
  const handleBlur = React.useCallback(
@@ -111,11 +110,11 @@ export default function EditableTreeItem({
 
  const handleKeyDown = React.useCallback(
  (event: React.KeyboardEvent<HTMLInputElement>) => {
+ event.stopPropagation();
  if (event.key === 'Enter') {
  handleConfirm();
  } else if (event.key === 'Escape') {
  handleCancel();
- event.stopPropagation();
  }
  },
  [handleCancel, handleConfirm],

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/NodeMenu.tsx b/packages/toolpad-app/src/toolpad/AppEditor/NodeMenu.tsx
@@ -50,7 +50,6 @@ export default function NodeMenu({
  const handleDeleteNodeDialogClose = React.useCallback(
  (confirmed: boolean, event: React.MouseEvent) => {
  event.stopPropagation();
-
  setDeletedNodeId(null);
  if (confirmed && deletedNode) {
  onDeleteNode?.(deletedNodeId);
@@ -61,8 +60,8 @@ export default function NodeMenu({
 
  const handleRenameClick = React.useCallback(
  (event: React.MouseEvent) => {
- onMenuClose(event);
  onRenameNode?.(nodeId);
+ onMenuClose(event);
  },
  [nodeId, onRenameNode, onMenuClose],
  );
@@ -88,24 +87,30 @@ export default function NodeMenu({
  menuProps.onClick?.(event);
  }}
  >
- <MenuItem onClick={handleRenameClick}>
- <ListItemIcon>
- <ModeEditIcon />
- </ListItemIcon>
- <ListItemText>{renameLabelText}</ListItemText>
- </MenuItem>
- <MenuItem onClick={handleDuplicateClick}>
- <ListItemIcon>
- <ContentCopyIcon />
- </ListItemIcon>
- <ListItemText>{duplicateLabelText}</ListItemText>
- </MenuItem>
- <MenuItem onClick={handleDeleteNodeDialogOpen}>
- <ListItemIcon>
- <DeleteIcon />
- </ListItemIcon>
- <ListItemText>{deleteLabelText}</ListItemText>
- </MenuItem>
+ {onRenameNode ? (
+ <MenuItem onClick={handleRenameClick}>
+ <ListItemIcon>
+ <ModeEditIcon />
+ </ListItemIcon>
+ <ListItemText>{renameLabelText}</ListItemText>
+ </MenuItem>
+ ) : null}
+ {onDuplicateNode ? (
+ <MenuItem onClick={handleDuplicateClick}>
+ <ListItemIcon>
+ <ContentCopyIcon />
+ </ListItemIcon>
+ <ListItemText>{duplicateLabelText}</ListItemText>
+ </MenuItem>
+ ) : null}
+ {onDeleteNode ? (
+ <MenuItem onClick={handleDeleteNodeDialogOpen}>
+ <ListItemIcon>
+ <DeleteIcon />
+ </ListItemIcon>
+ <ListItemText>{deleteLabelText}</ListItemText>
+ </MenuItem>
+ ) : null}
  </Menu>
  <ConfirmDialog
  open={!!deletedNode}