@anymux/ui-kit 0.1.0

package/src/tree/components/TreeNodeList.tsx

@@ -0,0 +1,329 @@
+/**
+ * TreeNodeList - Recursive component for rendering tree node lists
+ * 
+ * This component handles the recursive rendering of tree nodes and their children,
+ * providing proper indentation and hierarchy visualization.
+ */
+
+import React, { useState, useRef, useEffect } from 'react';
+import { observer } from 'mobx-react-lite';
+import { ChevronRight, ChevronDown, Loader2, MoreVertical } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import { resolveIcon } from '../../icons/iconMap';
+import { TreeCheckbox } from './TreeCheckbox';
+import { getSelectionClasses, getCustomColorVariables, DEFAULT_SELECTION_THEME } from '../utils/SelectionTheme';
+import type { TreeNodeData } from '../types/TreeTypes';
+import type { TreeModel } from '../models/TreeModel';
+import { logger } from '../utils/logger';
+import { useFileBrowserContext } from '../../file-browser/context/FileBrowserContext';
+
+// Inline rename input for tree nodes
+const TreeInlineRename: React.FC<{
+  currentName: string;
+  onCommit: (newName: string) => void;
+  onCancel: () => void;
+}> = ({ currentName, onCommit, onCancel }) => {
+  const [value, setValue] = useState(currentName);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const mountTimeRef = useRef(Date.now());
+  const committedRef = useRef(false);
+
+  useEffect(() => {
+    mountTimeRef.current = Date.now();
+    const raf = requestAnimationFrame(() => {
+      const input = inputRef.current;
+      if (input) {
+        input.focus();
+        const dotIndex = currentName.lastIndexOf('.');
+        input.setSelectionRange(0, dotIndex > 0 ? dotIndex : currentName.length);
+      }
+    });
+    return () => cancelAnimationFrame(raf);
+  }, [currentName]);
+
+  const commit = () => {
+    if (committedRef.current) return;
+    committedRef.current = true;
+    const trimmed = value.trim();
+    if (trimmed && trimmed !== currentName) {
+      onCommit(trimmed);
+    } else {
+      onCancel();
+    }
+  };
+
+  const handleBlur = () => {
+    if (Date.now() - mountTimeRef.current < 200) return;
+    commit();
+  };
+
+  return (
+    <input
+      ref={inputRef}
+      value={value}
+      onChange={(e) => setValue(e.target.value)}
+      onKeyDown={(e) => {
+        e.stopPropagation();
+        if (e.key === 'Enter') { e.preventDefault(); commit(); }
+        if (e.key === 'Escape') { e.preventDefault(); onCancel(); }
+      }}
+      onBlur={handleBlur}
+      onClick={(e) => e.stopPropagation()}
+      onDoubleClick={(e) => e.stopPropagation()}
+      className="flex-1 bg-background border border-primary rounded px-1 py-0 text-[13px] outline-none min-w-0"
+    />
+  );
+};
+
+export interface TreeNodeListProps {
+  /** Tree nodes to render */
+  nodes: TreeNodeData[];
+  /** Tree model instance */
+  treeModel: TreeModel;
+  /** Current depth level (for indentation) */
+  depth?: number;
+  /** Additional CSS classes */
+  className?: string;
+}
+
+/**
+ * TreeNodeList component renders a list of tree nodes with proper nesting and interaction
+ */
+export const TreeNodeList = observer<TreeNodeListProps>(({
+  nodes,
+  treeModel,
+  depth = 0,
+  className
+}) => {
+  const fileBrowserCtx = useFileBrowserContext();
+
+  const renderNode = (node: TreeNodeData) => {
+    const isSelected = treeModel.isNodeSelected(node.id);
+    const isExpanded = treeModel.isNodeExpanded(node.id);
+    const isFocused = treeModel.focusedNode === node.id;
+    const isLoading = treeModel.isNodeLoading(node.id);
+    const isDirectory = node.type === 'directory';
+    const hasChildren = node.hasChildren || (node.children && node.children.length > 0);
+    const showCheckbox = treeModel.provider.useCheckboxSelection;
+    const [isHovered, setIsHovered] = useState(false);
+    const isRenaming = fileBrowserCtx?.renameState?.itemId === node.id && fileBrowserCtx?.renameState?.source === 'tree';
+
+    // Get selection theme
+    const selectionTheme = treeModel.provider.getSelectionTheme?.() || DEFAULT_SELECTION_THEME;
+
+    const nodeClasses = cn(
+      // Base styles
+      'group flex items-center gap-2 py-1 px-2 text-[13px] cursor-default select-none transition-colors duration-150',
+      'focus:outline-none',
+
+      // Selection styling - must come before hover so selected state is visible
+      isSelected
+        ? 'bg-accent text-accent-foreground'
+        : 'hover:bg-muted/50',
+
+      // Focus styles
+      isFocused && !isSelected && 'ring-1 ring-primary/50',
+    );
+
+         // Handle node click
+     const handleNodeClick = (event: React.MouseEvent) => {
+       event.stopPropagation();
+       logger.interaction('TreeNode clicked', node.id, { name: node.name });
+       
+       if (event.ctrlKey || event.metaKey) {
+         // Multi-select with Ctrl/Cmd
+         if (treeModel.provider.isMultiSelectEnabled) {
+           if (isSelected) {
+             treeModel.deselectNode(node);
+           } else {
+             treeModel.selectNode(node);
+           }
+         }
+       } else {
+         // Single select
+         if (!isSelected) {
+           treeModel.selectNode(node);
+         }
+       }
+     };
+
+     // Handle expand/collapse click
+     const handleExpandClick = (event: React.MouseEvent) => {
+       event.stopPropagation();
+       logger.interaction('TreeNode expand/collapse clicked', node.id, { name: node.name });
+       
+       if (hasChildren) {
+         treeModel.toggleExpansion(node);
+       }
+     };
+
+     // Handle context menu (right-click)
+     const handleContextMenu = (event: React.MouseEvent) => {
+       event.preventDefault();
+       event.stopPropagation();
+       logger.interaction('TreeNode context menu', node.id, { name: node.name });
+       
+       // Don't change selection on right-click, but ensure we show menu for this node
+       if (!isSelected && treeModel.selectedNodesArray.length <= 1) {
+         treeModel.selectNode(node);
+       }
+       
+       // Show context menu at cursor position
+       const rect = { x: event.clientX, y: event.clientY };
+       
+       // Check if this node is part of a multi-selection
+       const selectedNodes = treeModel.selectedNodesArray;
+       if (selectedNodes.length > 1 && isSelected) {
+         treeModel.showMultiNodeContextMenu(selectedNodes, event.nativeEvent);
+       } else {
+         treeModel.showContextMenu(node, event.nativeEvent);
+       }
+     };
+
+     // Handle menu button click - shows context menu without changing selection
+     const handleMenuButtonClick = (event: React.MouseEvent) => {
+       event.stopPropagation();
+       logger.interaction('TreeNode menu button clicked', node.id, { name: node.name });
+
+      // Show context menu positioned near the button
+      const rect = event.currentTarget.getBoundingClientRect();
+      const fakeEvent = new MouseEvent('contextmenu', {
+        clientX: rect.right - 10,
+        clientY: rect.bottom,
+        bubbles: true,
+        cancelable: true
+      });
+
+      // If this node is part of a multi-selection, show multi-menu
+      const selectedNodes = treeModel.selectedNodesArray;
+      if (selectedNodes.length > 1 && isSelected) {
+        treeModel.showMultiNodeContextMenu(selectedNodes, fakeEvent);
+      } else {
+        // Show menu for this specific node without changing selection
+        treeModel.showContextMenu(node, fakeEvent);
+      }
+    };
+
+    const iconSize = 'w-4 h-4';
+
+    // Get custom icon from provider
+    const renderIcon = () => {
+      // Try to get custom icon from provider first
+      const customIcon = treeModel.provider.getNodeIcon?.(node);
+      if (customIcon) {
+        if (typeof customIcon === 'string') {
+          return resolveIcon(customIcon, iconSize);
+        } else {
+          const IconComponent = customIcon;
+          return <IconComponent className={iconSize} />;
+        }
+      }
+
+      // Default icons via shared icon map
+      if (isDirectory) {
+        return resolveIcon(isExpanded ? 'folder-open' : 'folder', iconSize);
+      } else {
+        return resolveIcon('file', iconSize);
+      }
+    };
+
+    return (
+      <div key={node.id} className="w-full">
+        {/* Node */}
+        <div
+          className={nodeClasses}
+          style={{ paddingLeft: `${depth * 20 + 8}px` }}
+          onClick={handleNodeClick}
+          onContextMenu={handleContextMenu}
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+          tabIndex={isFocused ? 0 : -1}
+          role="treeitem"
+          aria-expanded={hasChildren ? isExpanded : undefined}
+          aria-selected={isSelected}
+          aria-level={depth + 1}
+          aria-label={`${node.type === 'directory' ? 'Folder' : 'File'}: ${node.name}`}
+        >
+          {/* Expand/Collapse Button */}
+          <div className="flex-shrink-0 w-4 h-4">
+            {hasChildren && (
+              <button
+                className="w-4 h-4 flex items-center justify-center hover:bg-muted rounded-sm transition-colors"
+                onClick={handleExpandClick}
+                aria-label={isExpanded ? 'Collapse' : 'Expand'}
+              >
+                {isLoading ? (
+                  <Loader2 className="w-3 h-3 animate-spin" />
+                ) : isExpanded ? (
+                  <ChevronDown className="w-3 h-3" />
+                ) : (
+                  <ChevronRight className="w-3 h-3" />
+                )}
+              </button>
+            )}
+          </div>
+
+                     {/* Checkbox (if enabled) */}
+           {showCheckbox && (
+             <TreeCheckbox
+               state={treeModel.getCheckboxState(node.id)}
+               onChange={(newState) => {
+                 logger.interaction('TreeCheckbox changed', node.id, { name: node.name, newState });
+                 treeModel.handleCheckboxChange(node, newState);
+               }}
+               nodeId={node.id}
+             />
+           )}
+
+          {/* Icon */}
+          <div className="flex-shrink-0 w-4 h-4">
+            {renderIcon()}
+          </div>
+
+          {/* Node Name */}
+          {isRenaming && fileBrowserCtx ? (
+            <TreeInlineRename
+              currentName={fileBrowserCtx.renameState!.currentName}
+              onCommit={fileBrowserCtx.onRenameCommit}
+              onCancel={fileBrowserCtx.onRenameCancel}
+            />
+          ) : (
+            <span className="flex-1 truncate">
+              {node.name}
+            </span>
+          )}
+
+          {/* Menu Button - positioned on the right */}
+          <button
+            className={cn(
+              'flex-shrink-0 w-6 h-6 flex items-center justify-center rounded hover:bg-muted/70 transition-colors cursor-pointer',
+              // Show on hover or when node is selected
+              'opacity-0 group-hover:opacity-100',
+              (isSelected || isHovered) && 'opacity-100'
+            )}
+            onClick={handleMenuButtonClick}
+            aria-label="Show context menu"
+          >
+            <MoreVertical className="w-4 h-4" />
+          </button>
+        </div>
+
+        {/* Children */}
+        {isExpanded && hasChildren && node.children && (
+          <TreeNodeList
+            nodes={node.children}
+            treeModel={treeModel}
+            depth={depth + 1}
+            className={className}
+          />
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div className={cn('w-full', className)}>
+      {nodes.map(renderNode)}
+    </div>
+  );
+});