mirror of https://github.com/fantasticit/think.git
fix: fix reorder documnets
This commit is contained in:
parent
2a6a82936f
commit
e6ef6df7d5
|
@ -2,7 +2,7 @@
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
|
|
||||||
.tocsWrap {
|
.tocsWrap {
|
||||||
height: 420px;
|
height: 560px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
border: 1px solid var(--semi-color-border);
|
border: 1px solid var(--semi-color-border);
|
||||||
border-radius: var(--border-radius);
|
border-radius: var(--border-radius);
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useCallback, useEffect, useState } from 'react';
|
||||||
import { Banner, Tree, Button, Toast, Typography } from '@douyinfe/semi-ui';
|
import { Banner, Tree, Button, Toast, Typography } from '@douyinfe/semi-ui';
|
||||||
import { DataRender } from 'components/data-render';
|
import { DataRender } from 'components/data-render';
|
||||||
|
import { Resizeable } from 'components/resizeable';
|
||||||
import { useWikiTocs } from 'data/wiki';
|
import { useWikiTocs } from 'data/wiki';
|
||||||
import styles from './index.module.scss';
|
import styles from './index.module.scss';
|
||||||
|
|
||||||
|
@ -32,7 +33,7 @@ const extractRelation = (treeData: Array<IDataNode>) => {
|
||||||
});
|
});
|
||||||
index++;
|
index++;
|
||||||
if (node.children && node.children.length) {
|
if (node.children && node.children.length) {
|
||||||
data.push(...node.children.map((sub, j) => ({ ...sub, index: j })));
|
data.push(...node.children.map((sub, j) => ({ ...sub, index: j, parentDocumentId: node.id })));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -50,63 +51,66 @@ export const WikiTocsManager: React.FC<IProps> = ({ wikiId }) => {
|
||||||
setTreeData(tocs);
|
setTreeData(tocs);
|
||||||
}, [tocs]);
|
}, [tocs]);
|
||||||
|
|
||||||
function onDrop(info) {
|
const onDrop = useCallback(
|
||||||
const { dropToGap, node, dragNode } = info;
|
(info) => {
|
||||||
const dropKey = node.key;
|
const { dropToGap, node, dragNode } = info;
|
||||||
const dragKey = dragNode.key;
|
const dropKey = node.key;
|
||||||
const dropPos = node.pos.split('-');
|
const dragKey = dragNode.key;
|
||||||
const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
|
const dropPos = node.pos.split('-');
|
||||||
|
const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);
|
||||||
|
|
||||||
const data = [...treeData];
|
const data = [...treeData];
|
||||||
const loop = (data, key, callback) => {
|
const loop = (data, key, callback) => {
|
||||||
data.forEach((item, ind, arr) => {
|
data.forEach((item, ind, arr) => {
|
||||||
if (item.key === key) return callback(item, ind, arr);
|
if (item.key === key) return callback(item, ind, arr);
|
||||||
if (item.children) return loop(item.children, key, callback);
|
if (item.children) return loop(item.children, key, callback);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
let dragObj;
|
||||||
|
loop(data, dragKey, (item, ind, arr) => {
|
||||||
|
arr.splice(ind, 1);
|
||||||
|
dragObj = item;
|
||||||
});
|
});
|
||||||
};
|
|
||||||
let dragObj;
|
|
||||||
loop(data, dragKey, (item, ind, arr) => {
|
|
||||||
arr.splice(ind, 1);
|
|
||||||
dragObj = item;
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!dropToGap) {
|
if (!dropToGap) {
|
||||||
loop(data, dropKey, (item, ind, arr) => {
|
loop(data, dropKey, (item, ind, arr) => {
|
||||||
item.children = item.children || [];
|
item.children = item.children || [];
|
||||||
dragObj.parentDocumentId = item.id;
|
dragObj.parentDocumentId = item.id;
|
||||||
item.children.push(dragObj);
|
item.children.push(dragObj);
|
||||||
});
|
});
|
||||||
} else if (dropPosition === 1 && node.children && node.expanded) {
|
} else if (dropPosition === 1 && node.children && node.expanded) {
|
||||||
loop(data, dropKey, (item) => {
|
loop(data, dropKey, (item) => {
|
||||||
item.children = item.children || [];
|
item.children = item.children || [];
|
||||||
dragObj.parentDocumentId = item.id;
|
dragObj.parentDocumentId = item.id;
|
||||||
item.children.unshift(dragObj);
|
item.children.unshift(dragObj);
|
||||||
});
|
});
|
||||||
} else {
|
|
||||||
let dropNodeInd;
|
|
||||||
let dropNodePosArr;
|
|
||||||
loop(data, dropKey, (item, ind, arr) => {
|
|
||||||
dropNodePosArr = arr;
|
|
||||||
dropNodeInd = ind;
|
|
||||||
});
|
|
||||||
dragObj.parentDocumentId = null;
|
|
||||||
if (dropPosition === -1) {
|
|
||||||
dropNodePosArr.splice(dropNodeInd, 0, dragObj);
|
|
||||||
} else {
|
} else {
|
||||||
dropNodePosArr.splice(dropNodeInd + 1, 0, dragObj);
|
let dropNodeInd;
|
||||||
|
let dropNodePosArr;
|
||||||
|
loop(data, dropKey, (item, ind, arr) => {
|
||||||
|
dropNodePosArr = arr;
|
||||||
|
dropNodeInd = ind;
|
||||||
|
});
|
||||||
|
dragObj.parentDocumentId = null;
|
||||||
|
if (dropPosition === -1) {
|
||||||
|
dropNodePosArr.splice(dropNodeInd, 0, dragObj);
|
||||||
|
} else {
|
||||||
|
dropNodePosArr.splice(dropNodeInd + 1, 0, dragObj);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
setTreeData(data);
|
||||||
setTreeData(data);
|
setChanged(true);
|
||||||
setChanged(true);
|
},
|
||||||
}
|
[treeData]
|
||||||
|
);
|
||||||
|
|
||||||
const submit = () => {
|
const submit = useCallback(() => {
|
||||||
const data = extractRelation(treeData);
|
const data = extractRelation(treeData);
|
||||||
updateTocs(data).then(() => {
|
updateTocs(data).then(() => {
|
||||||
setChanged(false);
|
setChanged(false);
|
||||||
Toast.success('目录已更新');
|
Toast.success('目录已更新');
|
||||||
});
|
});
|
||||||
};
|
}, [treeData, updateTocs]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.wrap}>
|
<div className={styles.wrap}>
|
||||||
|
|
Loading…
Reference in New Issue