fix: fix reorder documnets

This commit is contained in:
fantasticit 2022-05-10 11:44:06 +08:00
parent 2a6a82936f
commit e6ef6df7d5
2 changed files with 53 additions and 49 deletions

View File

@ -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);

View File

@ -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}>