wix-style-react/src/SortableList/SortableList.driver.js

wix-style-react

import draggableDriverFactory from '../DragAndDrop/Draggable/Draggable.driver';
import { dataAttributes } from '../DragAndDrop/Draggable/constants';
import { dataHooks } from './constants';

const sortableListFactory = ({ element }) => {
  const draggableDriver = draggableDriverFactory({
    element: element.querySelector(`[data-hook="${dataHooks.provider}"]`),
  });

  return {
    /** checks if exists */
    exists: () => !!element,

    /** reorder sortable list items */
    reorder: ({ removedId, addedId }) => {
      draggableDriver.beginDrag({
        id: removedId,
      });
      draggableDriver.dragOver({ id: addedId });
      draggableDriver.endDrag();
    },

    /** reorder sortable list items by data-hook */
    reorderByDataHook: ({ from, to }) => {
      draggableDriver.beginDrag({
        dataHook: from,
      });
      draggableDriver.dragOver({ dataHook: to });
      draggableDriver.endDrag();
    },

    /** get draggable item current position */
    getItemCurrentPosition: ({ dataHook }) => {
      const draggableItems = [
        ...element.querySelectorAll(`[${dataAttributes.draggableTarget}]`),
      ];

      return draggableItems.findIndex(
        item =>
          item
            .querySelectorAll(`[${dataAttributes.draggableSource}]`)[0]
            .getAttribute('data-hook') === dataHook,
      );
    },
  };
};

export default sortableListFactory;