UNPKG

zent

Version:

一套前端设计语言和基于React的实现

155 lines (140 loc) 3.25 kB
import React, { Component } from 'react'; import Radio from 'zent-radio'; import Tree from '../src/index'; import 'zent-radio/assets/index.scss'; import '../assets/index.scss'; import '../assets/example.scss'; const RadioGroup = Radio.Group; const treeData = [{ id: '1', title: '杭州有赞', content: '移动零售服务商', parentId: '0' }, { id: '2', title: '产品设计', parentId: '1' }, { id: '3', title: '市场', parentId: '1' }, { id: '4', title: '技术', parentId: '1' }, { id: '5', title: '内部平台', parentId: '4' }, { id: '6', title: '运维', parentId: '4' }, { id: '7', title: '前端0', parentId: '4' }, { id: '8', title: '前端1', parentId: '7' }, { id: '9', title: '前端2', parentId: '7' }, { id: '10', title: '前端3', parentId: '8' }, { id: '11', title: '前端4', parentId: '10' }, { id: '12', title: '前端1', parentId: '0' }, { id: '13', title: '前端2', parentId: '12' }, { id: '14', title: '前端3', parentId: '12' }, { id: '15', title: '前端4', parentId: '13' }]; export default class Example extends Component { constructor(props) { super(props); this.state = { treeData, copyType: 'shallow' }; this.handleDelete = this.handleDelete.bind(this); this.handleClone = this.handleClone.bind(this); this.handleCopyTypeChange = this.handleCopyTypeChange.bind(this); } deepClone(node, parentId = 0, nodeArray = []) { const copyNode = { id: String(Math.random()).replace('0.', ''), parentId, title: node.title }; nodeArray.push(copyNode); for (let i = 0, l = node.children && node.children.length || 0; i < l; i++) { this.deepClone(node.children[i], copyNode.id, nodeArray); } return nodeArray; } handleDelete(data) { this.setState({ treeData: this.state.treeData.filter(item => item.id !== data.id) }); } handleClone(data) { const { copyType } = this.state; if (copyType === 'shallow') { const node = Object.assign({}, data, { id: Date.now() }); this.setState({ treeData: [...this.state.treeData, node] }); } else if (copyType === 'deep') { const nodeArray = this.deepClone(data, data.parentId); this.setState({ treeData: [...this.state.treeData, ...nodeArray] }); } } handleCopyTypeChange(e) { this.setState({ copyType: e.target.value }); } shouldRenderDeleteIcon(data) { return data.id % 2 === 0; } render() { const { copyType } = this.state; const operations = [{ name: 'Delete', icon: 'icon-font icon-font-heartbreak', action: this.handleDelete, shouldRender: this.shouldRenderDeleteIcon }, { name: 'Clone', icon: 'icon-font icon-font-heart', action: this.handleClone }]; return ( <div> <RadioGroup onChange={this.handleCopyTypeChange} value={copyType}> <Radio value="shallow">浅拷贝</Radio> <Radio value="deep">深拷贝</Radio> </RadioGroup> <Tree data={this.state.treeData} dataType="plain" render={this.customRender} operations={operations} checkable /> </div> ); } }