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
import React, { useState, useCallback, useEffect, useRef } from 'react';
import { useDrag, useDrop } from 'react-dnd';
import './index.less';
const DraggableBodyRow = ({
name,
index,
moveRow,
className,
style,
tableType,
...restProps
}) => {
useEffect(() => {}, []);
const ref = useRef();
const [{ isOver, dropClassName }, drop] = useDrop({
accept: 'DraggableBodyRow',
collect: monitor => {
const { index: dragIndex } = monitor.getItem() || {};
if (dragIndex === index) {
return {};
}
return {
isOver: monitor.isOver(),
canDrop: monitor.canDrop(),
dropClassName:
dragIndex < index ? ' drop-over-downward' : ' drop-over-upward',
};
},
drop: item => {
moveRow(item.index, index, tableType);
},
});
const [, drag] = useDrag({
type: tableType === 'field' ? 'DraggableBodyRow' : '',
item: { index },
collect: monitor => ({
isDragging: monitor.isDragging(),
}),
});
drop(drag(ref));
return (
<tr
ref={ref}
className={`${className}${isOver ? dropClassName : ''}`}
style={{ cursor: 'move', ...style }}
{...restProps}
/>
);
};
export default DraggableBodyRow;