fluid-dnd/dist/core/events/remove.js

An agnostic drag and drop library to sort all kind of lists. With current support for vue, react and svelte

import { getSiblings } from '../utils/GetStyles';
import { moveTranslate, removeTranslateWhitoutTransition, setTranistion } from '../utils/SetStyles';
import getTranslationByDragging from './dragAndDrop/getTranslationByDraggingAndEvent';
import { addTempChild, removeTempChild } from '../tempChildren';
import { useChangeDraggableStyles } from './changeDraggableStyles';
import { addClass, removeClass } from '../utils/dom/classList';
import { draggableTargetTimingFunction } from '../utils';
export default function useRemoveEvents(currentConfig, parent, handlerPublisher, endDraggingAction) {
    const { animationDuration } = currentConfig;
    const [removeElementDraggingStyles] = useChangeDraggableStyles(currentConfig, handlerPublisher, endDraggingAction);
    const emitRemoveEventToSiblings = (targetIndex, draggedElement, droppableConfig, onFinishRemoveEvent) => {
        if (!droppableConfig || !droppableConfig.droppable || !droppableConfig.config) {
            return;
        }
        const { droppable, config } = droppableConfig;
        let [siblings] = getSiblings(draggedElement, droppable);
        siblings = [draggedElement, ...siblings].toReversed();
        const translation = getTranslationByDragging(draggedElement, 'remove', config.direction, droppable);
        for (const [index, sibling] of siblings.entries()) {
            if (index >= targetIndex) {
                moveTranslate(sibling, translation);
                setTimeout(() => {
                    onFinishRemoveEvent(sibling);
                }, animationDuration);
            }
        }
    };
    const emitFinishRemoveEventToSiblings = (draggedElement) => {
        removeTempChild(parent, animationDuration, true);
        setTimeout(() => {
            removeElementDraggingStyles(draggedElement);
            removeTranslateFromSiblings(draggedElement, parent);
        }, animationDuration);
    };
    const removeTranslateFromSiblings = (element, parent) => {
        const [siblings] = getSiblings(element, parent);
        for (const sibling of [...siblings, element]) {
            removeTranslateWhitoutTransition(sibling);
        }
    };
    const removeAt = (index, targetIndex, draggableElement, config) => {
        const { removingClass, delayBeforeRemove } = currentConfig;
        if (targetIndex == index) {
            addClass(draggableElement, removingClass);
            setTimeout(() => {
                removeAfterRemovingClass(index, targetIndex, draggableElement, config);
            }, delayBeforeRemove);
        }
    };
    const removeAfterRemovingClass = (index, targetIndex, draggableElement, config) => {
        const { removingClass, onRemoveAtEvent } = currentConfig;
        removeClass(draggableElement, removingClass);
        addTempChild(draggableElement, parent, false, config);
        emitRemoveEventToSiblings(targetIndex, draggableElement, config, (sibling) => {
            removeDraggingStyles(sibling);
            emitFinishRemoveEventToSiblings(draggableElement);
        });
        onRemoveAtEvent(index, true);
    };
    const removeDraggingStyles = (element) => {
        setTranistion(element, animationDuration, draggableTargetTimingFunction);
        moveTranslate(element);
    };
    return [removeAt];
}