ant-design/components/tree/demo/drag-debug.md

186 lines
4.2 KiB
Markdown
Raw Normal View History

---
order: 98
title:
zh-CN: Drag Debug
en-US: Drag Debug
debug: true
---
```jsx
import { Tree, Switch } from 'antd';
import { CarryOutOutlined } from '@ant-design/icons';
const x = 3;
const y = 2;
const z = 1;
const gData = [];
const generateData = (_level, _preKey, _tns) => {
const preKey = _preKey || '0';
const tns = _tns || gData;
const children = [];
for (let i = 0; i < x; i++) {
const key = `${preKey}-${i}`;
tns.push({ title: key, key, icon: <CarryOutOutlined /> });
if (i < y) {
children.push(key);
}
}
if (_level < 0) {
return tns;
}
const level = _level - 1;
children.forEach((key, index) => {
tns[index].children = [];
return generateData(level, key, tns[index].children);
});
};
generateData(z);
class Demo extends React.Component {
state = {
gData,
expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],
showLine: true,
showIcon: true,
showLeafIcon: true,
};
onDragEnter = info => {
console.log(info);
// expandedKeys 需要受控时设置
// this.setState({
// expandedKeys: info.expandedKeys,
// });
};
onDrop = info => {
console.log(info);
chore: merge master into feature (#28751) * fix: Transfer dataSource cannot be immutable (#28675) close #28662 * docs: fix errors in example code (#28677) * ci: expand ie check (#28673) * ci: expand ie check * Update issue-open-check.yml * perf(📦): reduce @babel/runtime package size (#28678) * perf(📦): reduce @babel/runtime package size https://github.com/ant-design/antd-tools/commit/04cd73dea1206d1119847ffd7342b28b26d0babc * chore(:up:): upgrade @ant-design/react-slick to esm support version * upgrade @ant-design/tools * ci: add open condition (#28682) * fix(Slider): forcePopupAlign null when unmounted (#28699) * docs: Update overview.zh-CN.md (#28703) * docs: Update resources.en-US.md (#28701) * chore: bump rc-select to 12.1.0 (#28715) * fix: stylelint plugin (#28730) * Update package.json * perf(📦): upgrade rc-image to 5.x (#28727) * refactor: upgrade rc-image to 5.x reduce bundle size * upgrade rc-image * upgrade @ant-design/tools https://github.com/ant-design/antd-tools/pull/226 * rc-image 5.0.0 * fix image preview icon missing * refactor code * docs: example of synchronous rc-tree (#28648) * ci: fix outputs type 过程中的使用 string。奇怪啊,之前测试过的,今天点的时候发现不行了 * Update package.json * fix: site overflow cause sticky invalid (#28741) * fix: site overflow cause sticky invalid * disable auto scroll * chore: upgrade rc-dialog and rc-drawer (#28749) * chore: upgrade rc-dialog and rc-drawer (#28687) * chore: upgrade rc-dialog and rc-drawer * upgrade rc-util * update snapshots * upgrade rc-util * upgrade rc-util * update snapshots * upgrade rc-dialog * perf: remove duplicated rc-dialog Co-authored-by: 骗你是小猫咪 <darryshaw@gmail.com> Co-authored-by: bigbigbo <zxb141242@163.com> Co-authored-by: xrkffgg <xrkffgg@gmail.com> Co-authored-by: Yann Pringault <yann.pringault@gmail.com> Co-authored-by: godfather <greenday.wj@foxmail.com> Co-authored-by: Mateusz Wierzbicki <22788841+mateusz-wierzbicki@users.noreply.github.com> Co-authored-by: Kermit <kermitlx@outlook.com> Co-authored-by: AkiJoey <akijoey1010635951@gmail.com> Co-authored-by: qqabcv520 <605655316@qq.com> Co-authored-by: 骗你是小猫咪 <darryshaw@gmail.com>
2021-01-08 10:14:01 +08:00
const dropKey = info.node.key;
const dragKey = info.dragNode.key;
const dropPos = info.node.pos.split('-');
const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
const loop = (data, key, callback) => {
for (let i = 0; i < data.length; i++) {
if (data[i].key === key) {
return callback(data[i], i, data);
}
if (data[i].children) {
loop(data[i].children, key, callback);
}
}
};
const data = [...this.state.gData];
// Find dragObject
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 {
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);
}
}
this.setState({
gData: data,
});
};
setShowLine = showLine => {
const { showLeafIcon } = this.state;
if (showLine) {
if (showLeafIcon) {
this.setState({
showLine: {
showLeafIcon: true,
},
});
} else {
this.setState({
showLine: true,
});
}
} else {
this.setState({
showLine: false,
});
}
};
setShowIcon = showIcon => {
this.setState({
showIcon,
});
};
setShowLeafIcon = showLeafIcon => {
this.setState({
showLeafIcon,
showLine: { showLeafIcon },
});
};
render() {
const { showLine, showIcon, showLeafIcon, expandedKeys } = this.state;
const { setShowLine, setShowIcon, setShowLeafIcon } = this;
return (
<>
<div style={{ marginBottom: 16 }}>
showLine: <Switch checked={showLine} onChange={setShowLine} />
<br />
<br />
showIcon: <Switch checked={showIcon} onChange={setShowIcon} />
<br />
<br />
showLeafIcon: <Switch checked={showLeafIcon} onChange={setShowLeafIcon} />
</div>
<Tree
showLine={showLine}
showIcon={showIcon}
className="draggable-tree"
defaultExpandedKeys={expandedKeys}
draggable
blockNode
onDragEnter={this.onDragEnter}
onDrop={this.onDrop}
treeData={this.state.gData}
/>
</>
);
}
}
export default Demo;
```