1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import React, { useState, useCallback, useEffect, useRef } from 'react';
import { useDrag, useDrop } from 'react-dnd';
import styles from './index.less';
const DraggableBodyRow = ({
pickIndex,
dragType,
name,
index,
moveRow,
className,
style,
tableType,
...restProps
}) => {
useEffect(() => {}, []);
const ref = useRef();
// const
const [{ isOver, canDrop, dropClassName }, drop] = useDrop({
accept: 'DraggableBodyRow',
canDrop: () => {
// 组不能拖拽到字段上
if (!tableType || (dragType === 'group' && tableType === 'field')) {
return false;
}
if (dragType === 'field' && tableType === 'group' && pickIndex === index) {
return false;
}
if (dragType === 'group' && index === 0) {
return false;
}
return true;
},
collect: monitor => {
const { index: dragIndex } = monitor.getItem() || {};
let rowClass;
// 拖拽体为字段时
if (dragType === 'field') {
if (tableType === 'group') {
// 给字段拖拽到组
rowClass = ` ${styles.dropOverGroup}`;
} else {
// 字段之间的拖拽
rowClass =
dragIndex < index ? ` ${styles.dropOverDownward}` : ` ${styles.dropOverUpward}`;
}
} else {
// 拖拽提为组时
if (index === 0 || dragIndex === index || tableType === 'field') {
return {};
}
rowClass = dragIndex < index ? ` ${styles.dropOverDownward}` : ` ${styles.dropOverUpward}`;
}
// 字段不能拖拽到字段上
if (dragIndex === index && tableType === 'field') {
return {};
}
return {
isOver: monitor.isOver(),
canDrop: monitor.canDrop(),
dropClassName: rowClass,
};
},
drop: item => {
moveRow(item.index, index, tableType, dragType);
},
});
// 拖拽配置
const [, drag] = useDrag({
type: 'DraggableBodyRow',
item: { index },
canDrag: () => {
if (dragType === 'group' && index === 0) {
return false;
}
return true;
},
collect: monitor => ({ isDragging: monitor.isDragging() }),
});
drop(drag(ref));
return (
<tr
ref={ref}
className={`${className}${isOver ? dropClassName : ''}`}
style={{ cursor: 'move', ...style }}
{...restProps}
/>
);
};
export default DraggableBodyRow;