tessl/npm-rc-tree-select

tree-select ui component for react

—

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-select
Author: tessl

The TreeNode component provides a declarative JSX-based approach to defining tree structure for TreeSelect. It's particularly useful for static tree data that can be expressed in JSX form.

Capabilities

TreeNode Component

Declarative component for defining tree structure using JSX syntax.

/**
 * TreeNode component for declarative tree structure definition
 * @param props - TreeNode properties extending DataNode with value and children
 */
declare const TreeNode: React.FC<TreeNodeProps>;

interface TreeNodeProps extends DataNode {
  /** Required value for the tree node */
  value: Key;
  /** Child TreeNode components for nested structure */
  children?: React.ReactNode;
}

Usage Examples:

import TreeSelect, { TreeNode } from "rc-tree-select";

// Declarative tree structure using TreeNode JSX
function DeclarativeTreeExample() {
  const [value, setValue] = useState();

  return (
    <TreeSelect
      style={{ width: 300 }}
      value={value}
      onChange={setValue}
      placeholder="Select from tree"
      treeDefaultExpandAll
    >
      <TreeNode value="parent1" title="Parent Node 1">
        <TreeNode value="child1-1" title="Child 1-1" />
        <TreeNode value="child1-2" title="Child 1-2" />
        <TreeNode value="parent1-1" title="Parent 1-1">
          <TreeNode value="grandchild1-1-1" title="Grandchild 1-1-1" />
        </TreeNode>
      </TreeNode>
      <TreeNode value="parent2" title="Parent Node 2">
        <TreeNode value="child2-1" title="Child 2-1" />
      </TreeNode>
    </TreeSelect>
  );
}

// TreeNode with custom properties
function CustomTreeNodeExample() {
  const [value, setValue] = useState();

  return (
    <TreeSelect
      style={{ width: 300 }}
      value={value}
      onChange={setValue}
      treeCheckable
      multiple
    >
      <TreeNode 
        value="documents" 
        title="Documents"
        icon={<FolderIcon />}
      >
        <TreeNode 
          value="doc1" 
          title="Important Document"
          disabled
        />
        <TreeNode 
          value="doc2" 
          title="Regular Document"
          checkable={false}
        />
      </TreeNode>
      <TreeNode 
        value="pictures" 
        title="Pictures"
        icon={<ImageIcon />}
      >
        <TreeNode value="pic1" title="Photo 1.jpg" />
        <TreeNode value="pic2" title="Photo 2.png" />
      </TreeNode>
    </TreeSelect>
  );
}

// Mixed approach: TreeNode with dynamic children
function MixedApproachExample() {
  const [value, setValue] = useState();
  const [dynamicChildren, setDynamicChildren] = useState([]);

  // Load dynamic children when parent is expanded
  const loadChildren = () => {
    setDynamicChildren([
      { key: "dynamic1", value: "dynamic1", title: "Dynamic Child 1" },
      { key: "dynamic2", value: "dynamic2", title: "Dynamic Child 2" },
    ]);
  };

  return (
    <TreeSelect
      style={{ width: 300 }}
      value={value}
      onChange={setValue}
    >
      <TreeNode value="static" title="Static Parent">
        <TreeNode value="static-child" title="Static Child" />
      </TreeNode>
      <TreeNode 
        value="dynamic-parent" 
        title="Dynamic Parent"
        onExpand={loadChildren}
      >
        {dynamicChildren.map(child => (
          <TreeNode 
            key={child.key}
            value={child.value} 
            title={child.title} 
          />
        ))}
      </TreeNode>
    </TreeSelect>
  );
}

TreeNode vs treeData

The TreeNode component provides an alternative to the treeData prop approach:

TreeNode Advantages:

Declarative JSX syntax
Easy to read and maintain for static structures
Natural component composition
IDE support for JSX

TreeData Advantages:

Dynamic data structures
Better performance with large datasets
Easier to work with APIs
More flexible for programmatic manipulation

Comparison Example:

// Using TreeNode (declarative)
<TreeSelect>
  <TreeNode value="folder1" title="Folder 1">
    <TreeNode value="file1" title="File 1.txt" />
    <TreeNode value="file2" title="File 2.txt" />
  </TreeNode>
</TreeSelect>

// Using treeData (data-driven) 
<TreeSelect
  treeData={[
    {
      value: "folder1",
      title: "Folder 1", 
      children: [
        { value: "file1", title: "File 1.txt" },
        { value: "file2", title: "File 2.txt" },
      ]
    }
  ]}
/>

Types

// Key type for tree node values
type Key = string | number | null;

// Base data node interface that TreeNode extends
interface DataNode extends Record<string, any> {
  key?: Key;
  value?: SafeKey;
  title?: React.ReactNode;
  children?: DataNode[];
  disabled?: boolean;
  disableCheckbox?: boolean;
  checkable?: boolean;
  isLeaf?: boolean;
  icon?: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
}

Install with Tessl CLI