export function useDrop()

in src/hooks/useDrop.ts [56:96]
37 lines of code
4 McCabe index (conditional complexity)

export function useDrop(stepIndex: number, actionIndex: number) {
  const { dragIndex } = useContext(DragAndDropContext);
  const { steps, onDropStep, onSplitStep } = useContext(StepsContext);
  const [dropzoneOver, setDropzoneOver] = useState(false);
  const [enterTarget, setEnterTarget] = useState<EventTarget | undefined>(undefined);

  const splitStepAtAction = useCallback(() => {
    onSplitStep(stepIndex, actionIndex);
  }, [actionIndex, onSplitStep, stepIndex]);

  const isDroppable = computeIsDroppable(stepIndex, actionIndex, steps, dragIndex);

  const onDropActions: DropProps = {};
  if (isDroppable) {
    onDropActions.onDrop = e => {
      const { initiatorIndex } = JSON.parse(
        e.dataTransfer.getData(DRAG_AND_DROP_DATA_TRANSFER_TYPE)
      ) as StepSeparatorDragDropDataTransfer;
      setDropzoneOver(false);
      onDropStep(stepIndex, initiatorIndex, actionIndex);
      e.preventDefault();
    };
    onDropActions.onDragEnter = e => {
      setEnterTarget(e.target);
      setDropzoneOver(true);
      e.preventDefault();
    };
    onDropActions.onDragOver = e => {
      e.preventDefault();
    };
    onDropActions.onDragLeave = e => {
      if (e.target === enterTarget) setDropzoneOver(false);
    };
  }

  return {
    isDragOver: isDroppable && dropzoneOver,
    onDropActions,
    splitStepAtAction,
  };
}