DraggableBodyRow.jsx 2.37 KB
Newer Older
1 2
import React, { useState, useCallback, useEffect, useRef } from 'react';
import { useDrag, useDrop } from 'react-dnd';
3
import styles from './index.less';
4 5

const DraggableBodyRow = ({
6 7
  pickIndex,
  dragType,
8 9 10 11 12 13 14 15 16 17
  name,
  index,
  moveRow,
  className,
  style,
  tableType,
  ...restProps
}) => {
  useEffect(() => {}, []);
  const ref = useRef();
18 19
  // const
  const [{ isOver, canDrop, dropClassName }, drop] = useDrop({
20
    accept: 'DraggableBodyRow',
21 22 23 24 25 26 27 28 29 30 31 32 33
    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;
    },
34 35
    collect: monitor => {
      const { index: dragIndex } = monitor.getItem() || {};
36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56

      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') {
57 58 59 60 61
        return {};
      }
      return {
        isOver: monitor.isOver(),
        canDrop: monitor.canDrop(),
62
        dropClassName: rowClass,
63 64 65
      };
    },
    drop: item => {
66
      moveRow(item.index, index, tableType, dragType);
67 68
    },
  });
69
  // 拖拽配置
70
  const [, drag] = useDrag({
71
    type: 'DraggableBodyRow',
72
    item: { index },
73 74 75 76 77 78 79
    canDrag: () => {
      if (dragType === 'group' && index === 0) {
        return false;
      }
      return true;
    },
    collect: monitor => ({ isDragging: monitor.isDragging() }),
80 81 82 83 84 85 86 87 88 89 90 91 92 93
  });
  drop(drag(ref));

  return (
    <tr
      ref={ref}
      className={`${className}${isOver ? dropClassName : ''}`}
      style={{ cursor: 'move', ...style }}
      {...restProps}
    />
  );
};

export default DraggableBodyRow;