tessl/npm-rc-tree

Tree UI component for React with selection, checkboxes, drag-drop, and virtual scrolling features

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Overview

Eval results

Files

TreeNode Component

Name: tessl/npm-rc-tree
Author: tessl

The TreeNode component represents individual nodes within the tree structure, handling display, state, and user interactions for each tree item.

Capabilities

TreeNode Component

Individual tree node component for rendering nodes with titles, icons, checkboxes, and handling user interactions.

/**
 * Individual tree node component
 * @param props - TreeNode configuration and content
 * @returns React tree node element
 */
declare const TreeNode: React.FC<TreeNodeProps>;

interface TreeNodeProps<TreeDataType extends BasicDataNode = DataNode> {
  // Identity & Core Props
  /** Unique identifier for the node (passed by parent Tree) */
  eventKey?: Key;
  /** Associated data object for this node */
  data?: TreeDataType;
  
  // Display Content
  /** Node display title */
  title?: React.ReactNode | ((data: TreeDataType) => React.ReactNode);
  /** Child TreeNode elements */
  children?: React.ReactNode;
  
  // Styling
  /** CSS class for the node */
  className?: string;
  /** Inline styles for the node */
  style?: React.CSSProperties;
  /** CSS class prefix */
  prefixCls?: string;
  /** HTML id attribute */
  id?: string;
  
  // State Props (controlled by parent Tree)
  /** Whether node is expanded */
  expanded?: boolean;
  /** Whether node is selected */
  selected?: boolean;
  /** Whether node checkbox is checked */
  checked?: boolean;
  /** Whether node checkbox is half-checked */
  halfChecked?: boolean;
  /** Whether node is currently loading */
  loading?: boolean;
  /** Whether node has finished loading */
  loaded?: boolean;
  /** Whether node is currently active/focused */
  active?: boolean;
  
  // Behavior Configuration
  /** Whether this is a leaf node (no children) */
  isLeaf?: boolean;
  /** Whether this node can be selected */
  selectable?: boolean;
  /** Whether this node shows a checkbox */
  checkable?: boolean;
  /** Whether this node is disabled */
  disabled?: boolean;
  /** Whether only the checkbox is disabled */
  disableCheckbox?: boolean;
  
  // Visual Customization
  /** Custom icon for this node */
  icon?: IconType;
  /** Custom expand/collapse icon for this node */
  switcherIcon?: IconType;
  
  // Drag & Drop State (controlled by parent Tree)
  /** Whether node is being dragged over */
  dragOver?: boolean;
  /** Whether drag is over the top gap */
  dragOverGapTop?: boolean;
  /** Whether drag is over the bottom gap */
  dragOverGapBottom?: boolean;
  
  // Internal Props (managed by Tree component)
  /** Position string for tree structure */
  pos?: string;
  /** DOM reference for the node element */
  domRef?: React.Ref<HTMLDivElement>;
  /** Array indicating start positions */
  isStart?: boolean[];
  /** Array indicating end positions */
  isEnd?: boolean[];
  /** Mouse move event handler */
  onMouseMove?: React.MouseEventHandler<HTMLDivElement>;
}

Usage Examples:

Basic TreeNode Usage

import React from "react";
import Tree, { TreeNode } from "rc-tree";

const BasicTreeNodes = () => (
  <Tree prefixCls="rc-tree">
    <TreeNode key="0-0" title="Parent Node">
      <TreeNode key="0-0-0" title="Child Node 1" />
      <TreeNode key="0-0-1" title="Child Node 2" />
      <TreeNode key="0-0-2" title="Child Node 3" isLeaf />
    </TreeNode>
  </Tree>
);

TreeNode with Custom Icons

import React from "react";
import Tree, { TreeNode } from "rc-tree";

const IconTreeNodes = () => {
  const folderIcon = <span>📁</span>;
  const fileIcon = <span>📄</span>;
  
  return (
    <Tree prefixCls="rc-tree" showIcon>
      <TreeNode key="0-0" title="Documents" icon={folderIcon}>
        <TreeNode key="0-0-0" title="document.pdf" icon={fileIcon} isLeaf />
        <TreeNode key="0-0-1" title="image.jpg" icon={fileIcon} isLeaf />
      </TreeNode>
    </Tree>
  );
};

TreeNode with Custom Title Renderer

import React from "react";
import Tree, { TreeNode } from "rc-tree";

const CustomTitleTreeNodes = () => {
  const renderTitle = (nodeData: any) => (
    <span style={{ color: nodeData.important ? 'red' : 'black' }}>
      {nodeData.title}
      {nodeData.count && <span style={{ marginLeft: 8 }}>({nodeData.count})</span>}
    </span>
  );
  
  return (
    <Tree prefixCls="rc-tree">
      <TreeNode 
        key="0-0" 
        title={renderTitle({ title: "Important Folder", important: true, count: 5 })}
      >
        <TreeNode 
          key="0-0-0" 
          title={renderTitle({ title: "Regular File", important: false })} 
          isLeaf 
        />
      </TreeNode>
    </Tree>
  );
};

TreeNode with Conditional Properties

import React from "react";
import Tree, { TreeNode } from "rc-tree";

const ConditionalTreeNodes = () => (
  <Tree prefixCls="rc-tree" checkable>
    <TreeNode key="0-0" title="All Items">
      <TreeNode 
        key="0-0-0" 
        title="Selectable Item" 
        selectable={true}
      />
      <TreeNode 
        key="0-0-1" 
        title="Disabled Item" 
        disabled={true}
      />
      <TreeNode 
        key="0-0-2" 
        title="Checkbox Disabled" 
        disableCheckbox={true}
      />
      <TreeNode 
        key="0-0-3" 
        title="Non-checkable Item" 
        checkable={false}
      />
    </TreeNode>
  </Tree>
);

Node State Properties

Display State

interface DisplayState {
  /** Whether node is currently expanded (shows children) */
  expanded?: boolean;
  /** Whether node is currently selected */
  selected?: boolean;
  /** Whether node is currently active/focused */
  active?: boolean;
}

Checkbox State

interface CheckboxState {
  /** Whether node checkbox is fully checked */
  checked?: boolean;
  /** Whether node checkbox is partially checked (indeterminate) */
  halfChecked?: boolean;
}

Loading State

interface LoadingState {
  /** Whether node is currently loading data */
  loading?: boolean;
  /** Whether node has completed loading */
  loaded?: boolean;
}

Drag & Drop State

interface DragDropState {
  /** Whether another node is being dragged over this node */
  dragOver?: boolean;
  /** Whether drag is happening over the top edge/gap */
  dragOverGapTop?: boolean;
  /** Whether drag is happening over the bottom edge/gap */
  dragOverGapBottom?: boolean;
}

Behavior Configuration

Node Type Configuration

interface NodeBehaviorConfig {
  /** Mark node as leaf (cannot have children, no expand/collapse) */
  isLeaf?: boolean;
  /** Enable/disable selection for this specific node */
  selectable?: boolean;
  /** Enable/disable checkbox for this specific node */
  checkable?: boolean;
}

Disabled States

interface DisabledConfig {
  /** Completely disable node (no interactions) */
  disabled?: boolean;
  /** Disable only the checkbox, keep other interactions */
  disableCheckbox?: boolean;
}

Visual Customization

Icon Configuration

interface IconConfig {
  /** Custom icon displayed next to the title */
  icon?: IconType;
  /** Custom icon for expand/collapse button */
  switcherIcon?: IconType;
}

type IconType = React.ReactNode | ((props: TreeNodeProps) => React.ReactNode);

Title Customization

interface TitleConfig<TreeDataType extends BasicDataNode = DataNode> {
  /** Node title content - can be string, React element, or render function */
  title?: React.ReactNode | ((data: TreeDataType) => React.ReactNode);
}

Internal Properties

These properties are typically managed internally by the Tree component:

interface InternalProps {
  /** Position string representing node location in tree hierarchy */
  pos?: string;
  /** Reference to the DOM element */
  domRef?: React.Ref<HTMLDivElement>;
  /** Array indicating if this node is at start positions */
  isStart?: boolean[];
  /** Array indicating if this node is at end positions */
  isEnd?: boolean[];
  /** Mouse move event handler */
  onMouseMove?: React.MouseEventHandler<HTMLDivElement>;
}

Install with Tessl CLI