@mui/x-data-grid-pro/hooks/features/rowReorder/useGridRowReorder.js

The Pro plan edition of the MUI X Data Grid components.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useGridRowReorder = void 0;
var React = _interopRequireWildcard(require("react"));
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
var _xDataGrid = require("@mui/x-data-grid");
var _internals = require("@mui/x-data-grid/internals");
var _gridRowReorderColDef = require("./gridRowReorderColDef");
var Direction = /*#__PURE__*/function (Direction) {
  Direction[Direction["UP"] = 0] = "UP";
  Direction[Direction["DOWN"] = 1] = "DOWN";
  return Direction;
}(Direction || {});
let previousMousePosition = null;
let previousReorderState = {
  previousTargetId: null,
  dragDirection: null
};
const useUtilityClasses = ownerState => {
  const {
    classes
  } = ownerState;
  const slots = {
    rowDragging: ['row--dragging']
  };
  return (0, _composeClasses.default)(slots, _xDataGrid.getDataGridUtilityClass, classes);
};

/**
 * Only available in DataGridPro
 * @requires useGridRows (method)
 */
const useGridRowReorder = (apiRef, props) => {
  const logger = (0, _xDataGrid.useGridLogger)(apiRef, 'useGridRowReorder');
  const sortModel = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridSortModelSelector);
  const treeDepth = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridRowMaximumTreeDepthSelector);
  const dragRowNode = React.useRef(null);
  const originRowIndex = React.useRef(null);
  const removeDnDStylesTimeout = React.useRef(undefined);
  const ownerState = {
    classes: props.classes
  };
  const classes = useUtilityClasses(ownerState);
  const [dragRowId, setDragRowId] = React.useState('');
  const sortedRowIndexLookup = (0, _xDataGrid.useGridSelector)(apiRef, _internals.gridSortedRowIndexLookupSelector);
  React.useEffect(() => {
    return () => {
      clearTimeout(removeDnDStylesTimeout.current);
    };
  }, []);

  // TODO: remove sortModel check once row reorder is sorting compatible
  // remove treeDepth once row reorder is tree compatible
  const isRowReorderDisabled = React.useMemo(() => {
    return !props.rowReordering || !!sortModel.length || treeDepth !== 1;
  }, [props.rowReordering, sortModel, treeDepth]);
  const handleDragStart = React.useCallback((params, event) => {
    // Call the gridEditRowsStateSelector directly to avoid infnite loop
    const editRowsState = (0, _internals.gridEditRowsStateSelector)(apiRef);
    if (isRowReorderDisabled || Object.keys(editRowsState).length !== 0) {
      return;
    }
    logger.debug(`Start dragging row ${params.id}`);
    // Prevent drag events propagation.
    // For more information check here https://github.com/mui/mui-x/issues/2680.
    event.stopPropagation();
    dragRowNode.current = event.currentTarget;
    dragRowNode.current.classList.add(classes.rowDragging);
    setDragRowId(params.id);
    removeDnDStylesTimeout.current = setTimeout(() => {
      dragRowNode.current.classList.remove(classes.rowDragging);
    });
    originRowIndex.current = sortedRowIndexLookup[params.id];
    apiRef.current.setCellFocus(params.id, _gridRowReorderColDef.GRID_REORDER_COL_DEF.field);
  }, [apiRef, isRowReorderDisabled, logger, classes.rowDragging, sortedRowIndexLookup]);
  const handleDragOver = React.useCallback((params, event) => {
    if (dragRowId === '') {
      return;
    }
    const rowNode = (0, _xDataGrid.gridRowNodeSelector)(apiRef, params.id);
    if (!rowNode || rowNode.type === 'footer' || rowNode.type === 'pinnedRow') {
      return;
    }
    logger.debug(`Dragging over row ${params.id}`);
    event.preventDefault();
    // Prevent drag events propagation.
    // For more information check here https://github.com/mui/mui-x/issues/2680.
    event.stopPropagation();
    const mouseMovementDiff = previousMousePosition ? previousMousePosition.y - event.clientY : event.clientY;
    if (params.id !== dragRowId) {
      const targetRowIndex = sortedRowIndexLookup[params.id];
      const dragDirection = mouseMovementDiff > 0 ? Direction.DOWN : Direction.UP;
      const currentReorderState = {
        dragDirection,
        previousTargetId: params.id
      };
      const isStateChanged = currentReorderState.dragDirection !== previousReorderState.dragDirection || currentReorderState.previousTargetId !== previousReorderState.previousTargetId;
      if (previousReorderState.dragDirection === null || Math.abs(mouseMovementDiff) >= 1 && isStateChanged) {
        apiRef.current.setRowIndex(dragRowId, targetRowIndex);
        previousReorderState = currentReorderState;
      }
    }
    previousMousePosition = {
      x: event.clientX,
      y: event.clientY
    };
  }, [dragRowId, apiRef, logger, sortedRowIndexLookup]);
  const handleDragEnd = React.useCallback((params, event) => {
    // Call the gridEditRowsStateSelector directly to avoid infnite loop
    const editRowsState = (0, _internals.gridEditRowsStateSelector)(apiRef);
    if (dragRowId === '' || isRowReorderDisabled || Object.keys(editRowsState).length !== 0) {
      return;
    }
    logger.debug('End dragging row');
    event.preventDefault();
    // Prevent drag events propagation.
    // For more information check here https://github.com/mui/mui-x/issues/2680.
    event.stopPropagation();
    clearTimeout(removeDnDStylesTimeout.current);
    dragRowNode.current = null;
    previousReorderState.dragDirection = null;

    // Check if the row was dropped outside the grid.
    if (event.dataTransfer.dropEffect === 'none') {
      // Accessing params.field may contain the wrong field as header elements are reused
      apiRef.current.setRowIndex(dragRowId, originRowIndex.current);
      originRowIndex.current = null;
    } else {
      // Emit the rowOrderChange event only once when the reordering stops.
      const rowOrderChangeParams = {
        row: apiRef.current.getRow(dragRowId),
        targetIndex: sortedRowIndexLookup[params.id],
        oldIndex: originRowIndex.current
      };
      apiRef.current.publishEvent('rowOrderChange', rowOrderChangeParams);
    }
    setDragRowId('');
  }, [apiRef, dragRowId, isRowReorderDisabled, logger, sortedRowIndexLookup]);
  (0, _xDataGrid.useGridEvent)(apiRef, 'rowDragStart', handleDragStart);
  (0, _xDataGrid.useGridEvent)(apiRef, 'rowDragOver', handleDragOver);
  (0, _xDataGrid.useGridEvent)(apiRef, 'rowDragEnd', handleDragEnd);
  (0, _xDataGrid.useGridEvent)(apiRef, 'cellDragOver', handleDragOver);
  (0, _xDataGrid.useGridEventPriority)(apiRef, 'rowOrderChange', props.onRowOrderChange);
};
exports.useGridRowReorder = useGridRowReorder;