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;