import React, {useState} from 'react';
import { storiesOf } from '@storybook/react';
import { TreeMenu, TreeNode } from 'asc-web-components';
import { Icons } from 'asc-web-components';
const treeData = [
{ key: '0-0', title: 'Departments', root: true, children:
[
{ key: '0-0-0', title: 'Development', root: false},
{ key: '0-0-1', title: 'Direction', root: false },
{ key: '0-0-2', title: 'Marketing', root: false },
{ key: '0-0-3', title: 'Mobile', root: false },
{ key: '0-0-4', title: 'Support', root: false },
{ key: '0-0-5', title: 'Web', root: false }
],
},
];
const TreeMenuStory = props => {
const { data } = props;
const [gData, setGData] = useState(data);
const [autoExpandParent, setAutoExpandParent] = useState(true);
const [expandedKeys, setExpandedKeys] = useState(['0-0-key', '0-0-0-key', '0-0-0-0-key']);
const onDragStart = (info) => {
info.event.persist();
};
const onDragEnter = (info) => {
setExpandedKeys(info.expandedKeys);
}
const onDrop = (info) => {
info.event.persist();
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]);
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) {
loop(data, dropKey, (item) => {
item.children = item.children || [];
item.children.push(dragObj);
});
} else if (
(info.node.props.children || []).length > 0 &&
info.node.props.expanded &&
dropPosition === 1
) {
loop(data, dropKey, (item) => {
item.children = item.children || [];
item.children.unshift(dragObj);
});
} else {
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);
}
const loop = data => {
return data.map((item) => {
if (item.children && item.children.length) {
return