@hello-pangea/dnd/src/state/move-in-direction/move-to-next-place/move-to-next-index/from-combine.ts

Beautiful and accessible drag and drop for lists with React

import type {
  DroppableDimension,
  Combine,
  DraggableDimension,
  DraggableDimensionMap,
  DisplacementGroups,
  DraggableId,
  LiftEffect,
} from '../../../../types';
import didStartAfterCritical from '../../../did-start-after-critical';

interface Args {
  isMovingForward: boolean;
  destination: DroppableDimension;
  displaced: DisplacementGroups;
  draggables: DraggableDimensionMap;
  combine: Combine;
  afterCritical: LiftEffect;
}

export default ({
  isMovingForward,
  destination,
  draggables,
  combine,
  afterCritical,
}: Args): number | null => {
  if (!destination.isCombineEnabled) {
    return null;
  }
  const combineId: DraggableId = combine.draggableId;
  const combineWith: DraggableDimension = draggables[combineId];
  const combineWithIndex: number = combineWith.descriptor.index;
  const didCombineWithStartAfterCritical: boolean = didStartAfterCritical(
    combineId,
    afterCritical,
  );

  if (didCombineWithStartAfterCritical) {
    if (isMovingForward) {
      return combineWithIndex;
    }
    return combineWithIndex - 1;
  }

  if (isMovingForward) {
    return combineWithIndex + 1;
  }

  return combineWithIndex;
};