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

Selection Strategies

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

Selection strategies control how selected values are displayed when using checkable trees in multiple selection mode. They determine which tree nodes appear in the selection display when parent-child relationships exist.

Capabilities

Strategy Constants

Constants that define how checked values are shown in the selection display.

/** Show all selected nodes including parents and children */
const SHOW_ALL: CheckedStrategy;

/** Show only parent nodes when all children are selected */  
const SHOW_PARENT: CheckedStrategy;

/** Show only leaf nodes (children without further children) */
const SHOW_CHILD: CheckedStrategy;

type CheckedStrategy = 'SHOW_ALL' | 'SHOW_PARENT' | 'SHOW_CHILD';

Using Selection Strategies

Strategies are applied via the showCheckedStrategy prop on TreeSelect.

interface TreeSelectProps {
  /** Strategy for displaying selected values in checkable mode */
  showCheckedStrategy?: CheckedStrategy;
}

Usage Examples:

import TreeSelect, { SHOW_ALL, SHOW_PARENT, SHOW_CHILD } from "rc-tree-select";

const treeData = [
  {
    value: "documents",
    title: "Documents", 
    children: [
      { value: "doc1", title: "Resume.pdf" },
      { value: "doc2", title: "Cover Letter.docx" },
      {
        value: "projects",
        title: "Projects",
        children: [
          { value: "project1", title: "Project A" },
          { value: "project2", title: "Project B" },
        ]
      }
    ]
  },
  {
    value: "pictures", 
    title: "Pictures",
    children: [
      { value: "pic1", title: "Vacation.jpg" },
      { value: "pic2", title: "Profile.png" },
    ]
  }
];

// SHOW_ALL - Display all selected nodes
function ShowAllExample() {
  const [value, setValue] = useState([]);
  
  return (
    <TreeSelect
      style={{ width: 400 }}
      value={value}
      treeData={treeData}
      multiple
      treeCheckable
      showCheckedStrategy={SHOW_ALL}
      placeholder="Select files (show all)"
      onChange={setValue}
    />
  );
  // If user selects: Documents > Resume.pdf, Documents > Projects
  // Display shows: "Documents, Resume.pdf, Projects"
}

// SHOW_PARENT - Show only parents when all children selected
function ShowParentExample() {
  const [value, setValue] = useState([]);
  
  return (
    <TreeSelect
      style={{ width: 400 }}
      value={value}
      treeData={treeData}
      multiple
      treeCheckable
      showCheckedStrategy={SHOW_PARENT}
      placeholder="Select files (show parent)"
      onChange={setValue}
    />
  );
  // If user selects all items under "Pictures":
  // Display shows: "Pictures" (instead of "Vacation.jpg, Profile.png")
  
  // If user selects only some items under "Pictures":
  // Display shows: "Vacation.jpg" (individual selections)
}

// SHOW_CHILD - Show only leaf nodes
function ShowChildExample() {
  const [value, setValue] = useState([]);
  
  return (
    <TreeSelect
      style={{ width: 400 }}
      value={value}
      treeData={treeData}
      multiple
      treeCheckable
      showCheckedStrategy={SHOW_CHILD}
      placeholder="Select files (show children)"
      onChange={setValue}
    />
  );
  // If user selects "Documents" folder:
  // Display shows: "Resume.pdf, Cover Letter.docx, Project A, Project B"
  // Even though parent was selected, only leaf nodes are displayed
}

// Comparing strategies with same selection
function StrategyComparisonExample() {
  const [strategy, setStrategy] = useState<CheckedStrategy>(SHOW_ALL);
  const [value, setValue] = useState([
    "doc1", "doc2", "project1", "project2" // All children of "documents"
  ]);

  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <label>Strategy: </label>
        <select 
          value={strategy} 
          onChange={e => setStrategy(e.target.value as CheckedStrategy)}
        >
          <option value={SHOW_ALL}>SHOW_ALL</option>
          <option value={SHOW_PARENT}>SHOW_PARENT</option>
          <option value={SHOW_CHILD}>SHOW_CHILD</option>
        </select>
      </div>
      
      <TreeSelect
        style={{ width: 400 }}
        value={value}
        treeData={treeData}
        multiple
        treeCheckable
        showCheckedStrategy={strategy}
        placeholder="See strategy differences"
        onChange={setValue}
      />
      
      {/* Results with same selection:
          SHOW_ALL: "Resume.pdf, Cover Letter.docx, Project A, Project B"
          SHOW_PARENT: "Documents" (all children selected)
          SHOW_CHILD: "Resume.pdf, Cover Letter.docx, Project A, Project B"
      */}
    </div>
  );
}

Strategy Behavior Details

SHOW_ALL Behavior

Displays every selected node regardless of parent-child relationships
Most verbose display showing complete selection state
Useful when users need to see exactly what was selected

SHOW_PARENT Behavior

When all children under a parent are selected, shows only the parent
When partial children are selected, shows individual children
Provides the most compact display by grouping complete selections
Ideal for hierarchical selection where parent represents all children

SHOW_CHILD Behavior

Always shows only the leaf nodes (nodes without children)
Even if parent is selected, displays the actual selectable end items
Most useful when parent nodes are organizational and only leaves matter
Good for scenarios where parents are just categories

Selection State vs Display

The selection strategies only affect display of selected values, not the actual selection state:

// The onChange handler receives the complete selection state
const handleChange = (value, labelList, extra) => {
  console.log('Actual values:', value); // Complete selection including parents
  console.log('Display labels:', labelList); // Filtered by strategy
  console.log('Strategy applied to display only');
};

// Internal value state remains complete regardless of display strategy

Types

type CheckedStrategy = 'SHOW_ALL' | 'SHOW_PARENT' | 'SHOW_CHILD';

// Strategy constants
declare const SHOW_ALL: 'SHOW_ALL';
declare const SHOW_PARENT: 'SHOW_PARENT'; 
declare const SHOW_CHILD: 'SHOW_CHILD';

Install with Tessl CLI