rct-tree
Version:
A tree component based on ReactJS and Typescript.
232 lines (211 loc) • 7.84 kB
Markdown
# rct-tree
A tree component based on ReactJS and Typescript.
[](https://www.npmjs.com/package/rct-tree)
# 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 | `必须` 叶子节点 | `文件图标` |