# co-tree --- Tree ui component for react ## 特性 - 支持所有流行的浏览器，包括 IE9 及以上版本 - 用于多层次结构列表展示 - 具有展开收起选择等交互功能 ### 使用场景 --- 任何可以利用树形结构来展现事物层级关系的场景 ## Example http://localhost:3000/ ## Usage ```bash npm install solidoc-az-rc or cnpm install solidoc-az-rc ``` ### Draggable Demo `Based on the toolkit nwb` You can based on some toolkit or framework, whatever `create-react-app` etc... ```bash npm install nwb -g; nwb new react-component test; cd test; npm install solidoc-rc-az ``` ```js import React from "react"; import { Tree } from "solidoc-az-rc"; //Some very simple styles, just embed the js code const STYLE = ` .draggable-demo { width: 20%; margin-left: 30px; } .wrapper { background-color: #f5f7f9; } .node-motion { transition: all .3s; overflow-y: hidden; } `; //Basic animation setting. const motion = { motionName: "node-motion", motionAppear: false, onAppearStart: () => ({ height: 0 }), onAppearActive: node => ({ height: node.scrollHeight }), onLeaveStart: node => ({ height: node.offsetHeight }), onLeaveActive: () => ({ height: 0 }) }; //Generate Data Function const gData = (x = 3, y = 2, z = 1, data = []) => { //x: 每一级下的节点总数。y: 每一级节点里有y个节点、存在子节点 //y: 树的level层级（0代表一级） const loop = (_level, _prevKey, _tns) => { const preKey = _prevKey || "0"; const tns = _tns || data; const children = []; for (let i = 0; i < x; i++) { const key = `${preKey}-${i}`; tns.push({ title: `${key}`, key: `${key}-key` }); if (i < y) { children.push(key); } } if (_level < 0) { return tns; } const __level = _level - 1; children.forEach((key, index) => { tns[index].children = []; return loop(__level, key, tns[index].children); }); return null; }; loop(z); return data; }; //By the way, we can also just simply hard code data like the following way in the component //const gData = [ // { title: '0-0', key: '0-0' }, // { title: '0-1', key: '0-1' }, // { title: '0-2', key: '0-2', children: [{ title: '0-2-0', key: '0-2-0' }] }, //]; const DragTree = () => { const [_gData, setGData] = React.useState(gData); const [autoExpandParent, setAutoExpandParent] = React.useState(true); const [expandedKeys, setExpandedKeys] = React.useState([ "0-0-key", "0-0-0-key", "0-0-0-0-key" ]); const onDragEnter = ({ expandedKeys }) => { setExpandedKeys(expandedKeys); }; const onDrop = info => { const dropKey = info.node.props.eventKey; const dragKey = info.dragNode.props.eventKey; const dropPos = info.node.props.pos.split("-"); const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]); //Traverse the whole tree node structure const loop = (data, key, callback) => { data.forEach((item, index, arr) => { if (item.key === key) { callback(item, index, arr); return; } if (item.children) { loop(item.children, key, callback); } }); }; //获取原始节点数据结构 const data = [..._gData]; //被拖拽的节点对象 let dragObj; loop(data, dragKey, (item, index, arr) => { arr.splice(index, 1); dragObj = item; }); if (!info.dropToGap) { // Drop on the content 释放在其他节点上 loop(data, dropKey, item => { item.children = item.children || []; // where to insert 示例添加到尾部，可以是随意位置 item.children.push(dragObj); }); } else if ( (info.node.props.children || []).length > 0 && // Has children info.node.props.expanded && // Is expanded dropPosition === 1 // On the bottom gap ) { loop(data, dropKey, item => { item.children = item.children || []; // where to insert 示例添加到尾部，可以是随意位置 item.children.unshift(dragObj); }); } else { // Drop on the gap 释放在节点间的gap上 let ar; let i; loop(data, dropKey, (_item, index, arr) => { ar = arr; i = index; }); if (dropPosition === -1) { ar.splice(i, 0, dragObj); } else { ar.splice(i + 1, 0, dragObj); } } setGData(data); }; const onExpand = expandedKeys => { setExpandedKeys(expandedKeys); setAutoExpandParent(false); }; return (