@ui5/webcomponents-react/dist/components/AnalyticalTable/hooks/useDragAndDrop.js

React Wrapper for UI5 Web Components and additional components

import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
function getHeaderProps(props, {
  instance: {
    dispatch,
    state,
    columns,
    setColumnOrder,
    webComponentsReactProperties
  }
}) {
  const {
    columnOrder,
    columnResizing,
    isRtl,
    dndColumn
  } = state;
  const {
    onColumnsReorder
  } = webComponentsReactProperties;
  const handleDragStart = e => {
    if (columnResizing.isResizingColumn || !e.target.draggable) {
      e.preventDefault();
      return;
    }
    e.dataTransfer.setData('text', e.currentTarget.dataset.columnId);
  };
  const handleDragOver = e => {
    e.preventDefault();
  };
  const handleDragEnter = e => {
    dispatch({
      type: 'COLUMN_DND_START',
      payload: e.currentTarget.dataset.columnId
    });
  };
  const handleOnDragEnd = () => {
    dispatch({
      type: 'COLUMN_DND_END'
    });
  };
  const handleOnDrop = e => {
    dispatch({
      type: 'COLUMN_DND_END'
    });
    const droppedColId = e.currentTarget.dataset.columnId;
    const draggedColId = e.dataTransfer.getData('text');
    if (droppedColId === draggedColId) return;

    // Reconciliation uses same approach as visibleColumns in plugin-hooks/useColumnOrder.js of react-table
    const columnOrderCopy = [...columnOrder];
    const columnsCopy = [...columns];
    const columnsInOrder = [];
    while (columnsCopy.length && columnOrderCopy.length) {
      const targetId = columnOrderCopy.shift();
      const foundIndex = columnsCopy.findIndex(col => col.id === targetId);
      if (foundIndex > -1) {
        columnsInOrder.push(columnsCopy.splice(foundIndex, 1)[0]);
      }
    }
    const internalColumnOrder = [...columnsInOrder, ...columnsCopy].map(col => col.id);
    const droppedColIdx = internalColumnOrder.findIndex(col => col === droppedColId);
    const draggedColIdx = internalColumnOrder.findIndex(col => col === draggedColId);
    const tempCols = [...internalColumnOrder];
    const targetIndex = droppedColIdx > draggedColIdx ? isRtl ? droppedColIdx : droppedColIdx - 1 : droppedColIdx;
    tempCols.splice(targetIndex, 0, tempCols.splice(draggedColIdx, 1)[0]);
    setColumnOrder(tempCols);
    if (typeof onColumnsReorder === 'function') {
      const columnsNewOrder = tempCols.map(tempColId => columns.find(col => col.id === tempColId));
      onColumnsReorder(enrichEventWithDetails(e, {
        columnsNewOrder,
        column: columns[draggedColIdx]
      }));
    }
  };
  return [props, {
    onDragStart: handleDragStart,
    onDragEnter: handleDragEnter,
    onDragOver: handleDragOver,
    onDragEnd: handleOnDragEnd,
    onDrop: handleOnDrop,
    dragOver: dndColumn === props.id
  }];
}
export function useColumnDragAndDrop(hooks) {
  hooks.getHeaderProps.push(getHeaderProps);
}
useColumnDragAndDrop.pluginName = 'useColumnDragAndDrop';