Skip to content

💬 A tree component based on ReactJS and Typescript, which achieves virtual list.

Notifications You must be signed in to change notification settings

TseKaHing/rct-tree

Repository files navigation

rct-tree

A tree component based on ReactJS and Typescript.

NPM version

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 必须 叶子节点 文件图标

About

💬 A tree component based on ReactJS and Typescript, which achieves virtual list.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published