rct-tree

A tree component based on ReactJS and Typescript.

Installation

• yarn add rct-tree

Development

Recommend to use yarn to start the project:

• yarn install
• yarn run dev

Example

Here is a complex example while you try to use this component.

Data Structure

const treeData = [
  {
    title: '1',
    expand: true,
    selected: false,
    checked: false,
    disabled: false,
    index: 0,
    children: [
      {
        title: '1-1',
        expand: true,
        selected: false,
        checked: false,
        disabled: false,
        index: 1
      },
      {
        title: '1-2',
        expand: true,
        selected: false,
        checked: false,
        disabled: false,
        index: 1
      },
      {
        title: '1-3',
        expand: false,
        selected: false,
        checked: false,
        disabled: true,
        index: 1,
        children: [
          {
            title: '1-3-1',
            expand: true,
            selected: false,
            checked: false,
            disabled: true,
            index: 2
          },
          {
            title: '1-3-2',
            expand: true,
            selected: false,
            checked: false,
            disabled: false,
            index: 2,
            children: [
              {
                title: '1-3-2-1',
                expand: true,
                selected: false,
                checked: false,
                disabled: false,
                index: 3
              },
              {
                title: '1-3-2-2',
                expand: true,
                selected: false,
                checked: false,
                disabled: false,
                index: 3
              }
            ]
          }
        ]
      }
    ]
  }
]

Usage

import RctTree from 'rct-tree'

export default class Example extends React.Component<IProps, IState> {
  private tree?: any
  constructor(props: IProps) {
    super(props)
    this.state = {
      showCheckBox: true,
      showIcon: true,
      autoExpandAll: true,
      autoCollapseAll: false,
      multiple: true
    }
  }
  public render() {
    const icon = {
      parent: <span styleName="rct-icon-directory" />,
      leaf: <span styleName="rct-icon-file" />
    }
    const {
      showCheckBox,
      showIcon,
      autoExpandAll,
      autoCollapseAll,
      multiple
    } = this.state
    return (
      <div styleName="example-wrapper">
        <div styleName="example-tree">
          <RctTree
            rowHeight={32}
            height={320}
            treeData={treeData}
            showCheckBox={showCheckBox}
            showIcon={showIcon}
            icon={icon}
            autoExpandAll={autoExpandAll}
            autoCollapseAll={autoCollapseAll}
            multiple={multiple}
            placeholder={`你想显示什么placeholder？`}
            onSelect={this.onSelect}
            onCheck={this.onCheck}
            onToggleExpand={this.onExpand}
          />
        </div>
        <div styleName="example-controller">
          <button styleName="example-controller-button" onClick={this.changeCheckBox}>
            显示/隐藏CheckBox
          </button>
          <button styleName="example-controller-button" onClick={this.changeShowIcon}>
            显示/隐藏Icon
          </button>
          <button styleName="example-controller-button" onClick={this.changeMultiple}>
            单选/多选
          </button>
        </div>
      </div>
    )
  }
  public changeCheckBox = () => {
    let { showCheckBox } = this.state
    showCheckBox = !showCheckBox
    this.setState({
      showCheckBox
    })
  }
  public changeShowIcon = () => {
    let { showIcon } = this.state
    showIcon = !showIcon
    this.setState({
      showIcon
    })
  }
  public changeMultiple = () => {
    let { multiple } = this.state
    multiple = !multiple
    this.setState({
      multiple
    })
  }
  public onSelect = (nodes: any) => {
    console.log(nodes)
  }
  public onCheck = (nodes: any) => {
    console.log(nodes)
  }
  public onExpand = (nodes: any) => {
    console.log(nodes)
  }
}

Tree Props

| Property | Type | Description | Default | | ----------------- | ---------------------------------- | ----------------------------------------------- | ---------- | | treeData | ITreeNodeParams[] | 必须 树形数组的数据 | - | | rowHeight | number | 可选 节点的高度 | 32px | | height | number | 可选 树的可视高度，设置该属性表示使用虚拟渲染 | 100% | | showCheckBox | boolean | 可选 是否显示 checkbox 多选框 | false | | showIcon | boolean | 可选 是否显示图标 | false | | icon | IIcon | 可选 传入的自定义 icon 图标 | 默认图标 | | autoExpandAll | boolean | 可选 是否自动展开所有节点 | true | | autoCollapseAll | boolean | 可选 是否自动收起所有节点 | false | | placeholder | string | 可选 没有数据时的提示 | 暂无数据 | | onSelect | (nodes: ITreeNodeParams[]) => void | 可选 点击树节点时触发 | - | | onCheck | (nodes: ITreeNodeParams[]) => void | 可选 点击 checkbox 时触发 | - | | onToggleExpand | (nodes: ITreeNodeParams[]) => void | 可选 展开和收起子列表时触发 | - |

ITreeNodeParams Props

| Property | type | Description | Default | | -------------- | ----------------- | ---------------------------------- | ---------- | | title | string | 可选 当前节点的标题 | - | | expand | boolean | 可选 当前节点是否展开 | true | | selected | boolean | 可选 当前节点是否被选中 | false | | checked | boolean | 可选 当前节点的多选框是否被选中 | false | | disabled | boolean | 可选 当前节点是否为禁用状态 | false | | showCheckBox | boolean | 可选 是否显示当前节点的 checkbox | false | | showIcon | boolean | 可选 是否显示当前节点的 icon | false | | icon | IIcon | 可选 传入的自定义 icon 图标 | 默认图标 | | currentNode | ITreeNodeParams | 可选 当前节点 | - | | children | ITreeNodeParams[] | 可选 子节点 | - |

IIcon

| Property | Type | Description | Default | | -------- | --------------- | ----------------- | ------------ | | parent | React.ReactNode | 必须 非叶子节点 | 文件夹图标 | | leaf | React.ReactNode | 必须 叶子节点 | 文件图标 |