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

wix-style-react

import {
  dragAndDropDriverFactory,
  changeItemDepth,
} from '../utils/DragAndDrop/dragAndDropDriverFactory';
import { dataAttributes } from '../DragAndDrop/Draggable/constants';
import { dataHooks } from './constants';

const nestableListFactory = ({ element }) => {
  const dragAndDropDriver = dragAndDropDriverFactory({
    element: element.querySelector(`[data-hook="${dataHooks.provider}"]`),
  });

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

    /** reorder nestable list items by id */
    reorder: ({ removedId, addedId }, offset) => {
      dragAndDropDriver.beginDrag({ id: removedId });
      dragAndDropDriver.dragOver({ id: addedId, offset });
      dragAndDropDriver.endDrag();
    },

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

    /** change nestable list item depth */
    changeItemDepth: ({ dataHook, depthLevel, threshold = 30 }) =>
      changeItemDepth({ dragAndDropDriver, depthLevel, threshold, dataHook }),

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

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

    /** get nestable list item depth */
    getItemDepth: ({ dataHook }) => {
      return parseInt(
        element
          .querySelector(`[data-hook=${dataHook}]`)
          .getAttribute(dataAttributes.depth),
      );
    },
  };
};

export default nestableListFactory;