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
import React, { useRef, useState, useEffect } from 'react';
import { useDrag, useDrop } from 'react-dnd';
import classnames from 'classnames';
import styles from './index.less';
const DraggableBodyRow = ({
name,
index,
moveRow,
className,
style,
tableType,
ItemTypes,
...restProps
}) => {
const [type, setType] = useState('');
const ref = useRef();
useEffect(() => {
if (ItemTypes) {
setType(ItemTypes);
}
}, [ItemTypes]);
const [{ isOver, dropClassName }, drop] = useDrop({
accept: type,
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,
item: { index },
collect: monitor => ({
isDragging: monitor.isDragging(),
}),
});
drop(drag(ref));
return (
<tr
ref={ref}
className={classnames({
[className]: true,
[styles[dropClassName]]: isOver,
})}
style={{ cursor: 'move', ...style }}
{...restProps}
/>
);
};
export default DraggableBodyRow;