2019-06-11 12:00:02 +00:00
|
|
|
import React, {useState} from 'react';
|
|
|
|
import { storiesOf } from '@storybook/react';
|
2019-07-04 10:37:54 +00:00
|
|
|
import { withKnobs, boolean, text,select} from '@storybook/addon-knobs/react';
|
2019-06-11 12:00:02 +00:00
|
|
|
import withReadme from 'storybook-readme/with-readme';
|
|
|
|
import Readme from './README.md';
|
2019-09-08 16:48:06 +00:00
|
|
|
import TreeMenu from '.';
|
2019-09-08 16:40:59 +00:00
|
|
|
import TreeNode from '../tree-menu-node';
|
|
|
|
import { Icons } from '../icons';
|
2019-06-11 12:00:02 +00:00
|
|
|
import { action } from '@storybook/addon-actions';
|
|
|
|
|
2019-07-04 10:37:54 +00:00
|
|
|
|
|
|
|
const iconNames = Object.keys(Icons);
|
|
|
|
|
2019-06-11 12:00:02 +00:00
|
|
|
const treeData = [
|
2019-07-04 10:37:54 +00:00
|
|
|
{ key: '0-0', children:
|
2019-06-11 12:00:02 +00:00
|
|
|
[
|
2019-07-04 10:37:54 +00:00
|
|
|
{ key: '0-0-0'},
|
|
|
|
{ key: '0-0-1'}
|
2019-06-11 12:00:02 +00:00
|
|
|
],
|
|
|
|
},
|
|
|
|
];
|
|
|
|
|
|
|
|
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);
|
2019-07-05 09:06:03 +00:00
|
|
|
};
|
2019-06-11 12:00:02 +00:00
|
|
|
|
|
|
|
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]);
|
|
|
|
|
2019-07-05 09:06:03 +00:00
|
|
|
const loop = (treeData, key, callback) => {
|
|
|
|
treeData.forEach((item, index, arr) => {
|
2019-06-11 12:00:02 +00:00
|
|
|
if (item.key === key) {
|
|
|
|
callback(item, index, arr);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if (item.children) {
|
|
|
|
loop(item.children, key, callback);
|
|
|
|
}
|
|
|
|
});
|
|
|
|
};
|
2019-07-05 09:06:03 +00:00
|
|
|
|
|
|
|
const treeData = [...gData];
|
2019-06-11 12:00:02 +00:00
|
|
|
|
|
|
|
let dragObj;
|
2019-07-05 09:06:03 +00:00
|
|
|
loop(treeData, dragKey, (item, index, arr) => {
|
2019-06-11 12:00:02 +00:00
|
|
|
arr.splice(index, 1);
|
|
|
|
dragObj = item;
|
|
|
|
});
|
|
|
|
|
|
|
|
if (!info.dropToGap) {
|
2019-07-05 09:06:03 +00:00
|
|
|
loop(treeData, dropKey, (item) => {
|
2019-06-11 12:00:02 +00:00
|
|
|
item.children = item.children || [];
|
|
|
|
item.children.push(dragObj);
|
|
|
|
});
|
|
|
|
} else if (
|
|
|
|
(info.node.props.children || []).length > 0 &&
|
|
|
|
info.node.props.expanded &&
|
|
|
|
dropPosition === 1
|
|
|
|
) {
|
2019-07-05 09:06:03 +00:00
|
|
|
loop(treeData, dropKey, (item) => {
|
2019-06-11 12:00:02 +00:00
|
|
|
item.children = item.children || [];
|
|
|
|
item.children.unshift(dragObj);
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
let ar;
|
|
|
|
let i;
|
2019-07-05 09:06:03 +00:00
|
|
|
loop(treeData, dropKey, (item, index, arr) => {
|
2019-06-11 12:00:02 +00:00
|
|
|
ar = arr;
|
|
|
|
i = index;
|
|
|
|
});
|
|
|
|
if (dropPosition === -1) {
|
|
|
|
ar.splice(i, 0, dragObj);
|
|
|
|
} else {
|
|
|
|
ar.splice(i + 1, 0, dragObj);
|
|
|
|
}
|
|
|
|
}
|
2019-07-05 09:06:03 +00:00
|
|
|
setGData(treeData);
|
2019-06-11 12:00:02 +00:00
|
|
|
};
|
|
|
|
const onExpand = (expandedKeys) => {
|
|
|
|
setExpandedKeys(expandedKeys);
|
|
|
|
setAutoExpandParent(false);
|
|
|
|
}
|
|
|
|
|
2019-07-05 09:06:03 +00:00
|
|
|
const getTreeNodes = tree => {
|
|
|
|
return tree.map((item) => {
|
2019-06-11 12:00:02 +00:00
|
|
|
if (item.children && item.children.length) {
|
2019-07-05 09:06:03 +00:00
|
|
|
return <TreeNode title={text('title', 'Title')} key={item.key} icon={React.createElement(Icons[select('icon', iconNames, 'CatalogFolderIcon')], {size: "scale", isfill:true, color: "dimgray"})} >{getTreeNodes(item.children)}</TreeNode>;
|
2019-06-11 12:00:02 +00:00
|
|
|
}
|
2019-07-04 10:37:54 +00:00
|
|
|
return <TreeNode key={item.key} title={text('title', 'Title')} icon={React.createElement(Icons[select('icon', iconNames, 'CatalogFolderIcon')], {size: "scale", isfill:true, color: "dimgray"})} ></TreeNode>;
|
2019-06-11 12:00:02 +00:00
|
|
|
});
|
|
|
|
};
|
2019-07-04 10:37:54 +00:00
|
|
|
|
|
|
|
|
|
|
|
|
2019-06-11 12:00:02 +00:00
|
|
|
const switcherIcon = (obj) => {
|
|
|
|
if (obj.isLeaf) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
if (obj.expanded) {
|
2019-07-04 10:37:54 +00:00
|
|
|
return <Icons.ExpanderDownIcon size="scale" isfill={true} color="dimgray"></Icons.ExpanderDownIcon>
|
2019-06-11 12:00:02 +00:00
|
|
|
} else {
|
2019-07-04 10:37:54 +00:00
|
|
|
return <Icons.ExpanderRightIcon size="scale" isfill={true} color="dimgray"></Icons.ExpanderRightIcon>
|
2019-06-11 12:00:02 +00:00
|
|
|
}
|
|
|
|
};
|
2019-07-04 10:37:54 +00:00
|
|
|
|
2019-06-11 12:00:02 +00:00
|
|
|
return (
|
|
|
|
<div style={{width: "250px", margin: "20px"}}>
|
|
|
|
<TreeMenu
|
|
|
|
checkable={boolean('checkable', false)}
|
2019-06-28 09:11:56 +00:00
|
|
|
draggable={boolean('draggable', false)}
|
2019-06-11 12:00:02 +00:00
|
|
|
disabled={boolean('disabled', false)}
|
|
|
|
multiple={boolean('multiple', false)}
|
|
|
|
showIcon={boolean('showIcon', true)}
|
|
|
|
|
|
|
|
defaultExpandAll={boolean('defaultExpandAll', false)}
|
|
|
|
defaultExpandParent={boolean('defaultExpandParent', true)}
|
|
|
|
|
|
|
|
onExpand={onExpand}
|
|
|
|
autoExpandParent={autoExpandParent}
|
|
|
|
expandedKeys={expandedKeys}
|
|
|
|
|
|
|
|
onDragStart={(info) => onDragStart(info)}
|
|
|
|
onDrop={(info) => onDrop(info)}
|
|
|
|
onDragEnter={onDragEnter}
|
|
|
|
|
|
|
|
switcherIcon={switcherIcon}
|
|
|
|
|
|
|
|
onSelect={action("select")}
|
|
|
|
onLoad={action("load")}
|
2019-07-04 10:37:54 +00:00
|
|
|
|
|
|
|
onCheck={action("check")}
|
2019-06-11 12:00:02 +00:00
|
|
|
|
|
|
|
onRightClick={action("rightClick")}
|
|
|
|
>
|
2019-07-05 09:06:03 +00:00
|
|
|
{getTreeNodes(gData)}
|
2019-06-11 12:00:02 +00:00
|
|
|
</TreeMenu>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
storiesOf('Components|Tree', module)
|
|
|
|
.addDecorator(withKnobs)
|
|
|
|
.addDecorator(withReadme(Readme))
|
|
|
|
.add('Tree menu', () => <TreeMenuStory data={treeData} />);
|
|
|
|
|
|
|
|
|