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

Tree Component

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

The main Tree component provides comprehensive tree functionality with extensive configuration options for rendering hierarchical data, managing state, and handling user interactions.

Capabilities

Tree Component

Main tree container component that renders hierarchical data with full control over appearance, behavior, and interactions.

/**
 * Main Tree component for displaying hierarchical data with rich interactions
 * @param props - Tree configuration and event handlers
 * @returns React tree component
 */
declare class Tree<TreeDataType extends BasicDataNode = DataNode> extends React.Component<TreeProps<TreeDataType>>;

interface TreeProps<TreeDataType extends BasicDataNode = DataNode> {
  // Core Configuration
  prefixCls?: string; // Default: 'rc-tree'
  className?: string;
  style?: React.CSSProperties;
  focusable?: boolean;
  tabIndex?: number;
  disabled?: boolean;
  direction?: Direction;
  rootClassName?: string;
  rootStyle?: React.CSSProperties;

  // Data Configuration
  children?: React.ReactNode;
  treeData?: TreeDataType[];
  fieldNames?: FieldNames;

  // Display Configuration
  showLine?: boolean;
  showIcon?: boolean;
  icon?: IconType;
  switcherIcon?: IconType;
  motion?: any;

  // Selection Configuration
  selectable?: boolean;
  multiple?: boolean;
  selectedKeys?: Key[];
  defaultSelectedKeys?: Key[];
  activeKey?: Key | null;

  // Expansion Configuration
  expandAction?: ExpandAction;
  expandedKeys?: Key[];
  defaultExpandedKeys?: Key[];
  defaultExpandParent?: boolean;
  autoExpandParent?: boolean;
  defaultExpandAll?: boolean;

  // Checking Configuration
  checkable?: boolean | React.ReactNode;
  checkStrictly?: boolean;
  checkedKeys?: Key[] | { checked: Key[]; halfChecked: Key[] };
  defaultCheckedKeys?: Key[];

  // Drag & Drop Configuration
  draggable?: DraggableFn | boolean | DraggableConfig;
  allowDrop?: AllowDrop<TreeDataType>;

  // Async Loading Configuration
  loadData?: (treeNode: EventDataNode<TreeDataType>) => Promise<any>;
  loadedKeys?: Key[];

  // Filtering & Rendering
  filterTreeNode?: (treeNode: EventDataNode<TreeDataType>) => boolean;
  titleRender?: (node: TreeDataType) => React.ReactNode;
  dropIndicatorRender?: (props: DropIndicatorProps) => React.ReactNode;

  // Virtual Scrolling Configuration
  height?: number;
  itemHeight?: number;
  virtual?: boolean;
  scrollWidth?: number;
  itemScrollOffset?: number;

  // Event Handlers - Basic
  onFocus?: React.FocusEventHandler<HTMLDivElement>;
  onBlur?: React.FocusEventHandler<HTMLDivElement>;
  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
  onContextMenu?: React.MouseEventHandler<HTMLDivElement>;
  onScroll?: React.UIEventHandler<HTMLElement>;

  // Event Handlers - Node Interaction
  onClick?: NodeMouseEventHandler<TreeDataType>;
  onDoubleClick?: NodeMouseEventHandler<TreeDataType>;
  onRightClick?: (info: { event: React.MouseEvent; node: EventDataNode<TreeDataType> }) => void;

  // Event Handlers - State Changes
  onExpand?: (
    expandedKeys: Key[],
    info: {
      node: EventDataNode<TreeDataType>;
      expanded: boolean;
      nativeEvent: MouseEvent;
    },
  ) => void;
  onSelect?: (
    selectedKeys: Key[],
    info: {
      event: 'select';
      selected: boolean;
      node: EventDataNode<TreeDataType>;
      selectedNodes: TreeDataType[];
      nativeEvent: MouseEvent;
    },
  ) => void;
  onCheck?: (
    checked: { checked: Key[]; halfChecked: Key[] } | Key[],
    info: CheckInfo<TreeDataType>,
  ) => void;

  // Event Handlers - Async Loading
  onLoad?: (
    loadedKeys: Key[],
    info: {
      event: 'load';
      node: EventDataNode<TreeDataType>;
    },
  ) => void;

  // Event Handlers - Mouse Events
  onMouseEnter?: (info: NodeMouseEventParams<TreeDataType>) => void;
  onMouseLeave?: (info: NodeMouseEventParams<TreeDataType>) => void;

  // Event Handlers - Drag & Drop
  onDragStart?: (info: NodeDragEventParams<TreeDataType>) => void;
  onDragEnter?: (info: NodeDragEventParams<TreeDataType> & { expandedKeys: Key[] }) => void;
  onDragOver?: (info: NodeDragEventParams<TreeDataType>) => void;
  onDragLeave?: (info: NodeDragEventParams<TreeDataType>) => void;
  onDragEnd?: (info: NodeDragEventParams<TreeDataType>) => void;
  onDrop?: (
    info: NodeDragEventParams<TreeDataType> & {
      dragNode: EventDataNode<TreeDataType>;
      dragNodesKeys: Key[];
      dropPosition: number;
      dropToGap: boolean;
    },
  ) => void;

  // Internal/Advanced
  onActiveChange?: (key: Key) => void;
}

Usage Examples:

Basic Tree Setup

import React, { useState } from "react";
import Tree from "rc-tree";
import "rc-tree/assets/index.css";

const BasicTree = () => {
  const [expandedKeys, setExpandedKeys] = useState<string[]>(['0-0']);

  return (
    <Tree
      prefixCls="rc-tree"
      showLine
      showIcon
      expandedKeys={expandedKeys}
      onExpand={(keys) => setExpandedKeys(keys)}
    >
      <TreeNode key="0-0" title="Root Node">
        <TreeNode key="0-0-0" title="Child 1" />
        <TreeNode key="0-0-1" title="Child 2" />
      </TreeNode>
    </Tree>
  );
};

Data-Driven Tree

import React, { useState } from "react";
import Tree from "rc-tree";
import "rc-tree/assets/index.css";

const DataDrivenTree = () => {
  const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
  
  const treeData = [
    {
      key: '0-0',
      title: 'Parent Node',
      children: [
        { key: '0-0-0', title: 'Child Node 1' },
        { key: '0-0-1', title: 'Child Node 2' },
      ],
    },
  ];

  return (
    <Tree
      prefixCls="rc-tree"
      treeData={treeData}
      expandedKeys={expandedKeys}
      onExpand={(keys) => setExpandedKeys(keys)}
    />
  );
};

Controlled Tree with All Features

import React, { useState } from "react";
import Tree from "rc-tree";
import "rc-tree/assets/index.css";

const ControlledTree = () => {
  const [expandedKeys, setExpandedKeys] = useState<string[]>([]);
  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
  const [checkedKeys, setCheckedKeys] = useState<string[]>([]);

  return (
    <Tree
      prefixCls="rc-tree"
      checkable
      selectable
      multiple
      showLine
      showIcon
      treeData={treeData}
      expandedKeys={expandedKeys}
      selectedKeys={selectedKeys}
      checkedKeys={checkedKeys}
      onExpand={(keys, info) => {
        console.log('Expanded:', keys, info);
        setExpandedKeys(keys);
      }}
      onSelect={(keys, info) => {
        console.log('Selected:', keys, info);
        setSelectedKeys(keys);
      }}
      onCheck={(checked, info) => {
        console.log('Checked:', checked, info);
        const keys = Array.isArray(checked) ? checked : checked.checked;
        setCheckedKeys(keys);
      }}
    />
  );
};

Core Configuration Properties

Prefix and Styling

interface StylingProps {
  /** CSS class prefix for all tree elements */
  prefixCls: string;
  /** Additional CSS class for root element */
  className?: string;
  /** Inline styles for root element */
  style?: React.CSSProperties;
  /** Additional CSS class for tree container */
  rootClassName?: string;
  /** Inline styles for tree container */
  rootStyle?: React.CSSProperties;
}

Data Source Configuration

interface DataSourceProps<TreeDataType extends BasicDataNode = DataNode> {
  /** TreeNode elements as children (JSX approach) */
  children?: React.ReactNode;
  /** Array of tree data (data-driven approach) */
  treeData?: TreeDataType[];
  /** Custom field name mappings for data-driven trees */
  fieldNames?: FieldNames;
}

Display Configuration

interface DisplayProps {
  /** Show connecting lines between nodes */
  showLine?: boolean;
  /** Show icons for all nodes */
  showIcon?: boolean;
  /** Default icon renderer for all nodes */
  icon?: IconType;
  /** Default expand/collapse icon renderer */
  switcherIcon?: IconType;
  /** Animation configuration object */
  motion?: any;
  /** Layout direction */
  direction?: Direction;
}

Install with Tessl CLI