@wulperstudio/cms/organisms/AlterBoard/AlterBoard.js

Wulper Studio Library Components CMS

import React from 'react';
import { DndContext, KeyboardSensor, MeasuringStrategy, MouseSensor, TouchSensor, useSensor, useSensors } from '@dnd-kit/core';
import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';
import { coordinateGetter as multipleContainersCoordinateGetter } from './helpers';
import { jsx as _jsx } from "react/jsx-runtime";
export var AlterBoard = function AlterBoard(_ref) {
  var cancelDrop = _ref.cancelDrop,
    _ref$coordinateGetter = _ref.coordinateGetter,
    coordinateGetter = _ref$coordinateGetter === void 0 ? multipleContainersCoordinateGetter : _ref$coordinateGetter,
    modifiers = _ref.modifiers,
    columns = _ref.columns,
    children = _ref.children,
    collisionDetection = _ref.collisionDetection,
    onDragCancel = _ref.onDragCancel,
    onDragStart = _ref.onDragStart,
    onDragOver = _ref.onDragOver,
    onDragEnd = _ref.onDragEnd,
    onDragMove = _ref.onDragMove;
  var sensors = useSensors(useSensor(MouseSensor, {
    activationConstraint: {
      distance: 8
    }
  }), useSensor(TouchSensor, {
    activationConstraint: {
      delay: 200,
      tolerance: 6
    }
  }), useSensor(KeyboardSensor, {
    coordinateGetter: coordinateGetter
  }));
  return /*#__PURE__*/_jsx(DndContext, {
    sensors: sensors,
    collisionDetection: collisionDetection,
    measuring: {
      droppable: {
        strategy: MeasuringStrategy.Always
      }
    },
    onDragStart: onDragStart,
    onDragOver: onDragOver,
    onDragEnd: onDragEnd,
    onDragMove: onDragMove,
    cancelDrop: cancelDrop,
    onDragCancel: onDragCancel,
    modifiers: modifiers,
    children: /*#__PURE__*/_jsx("div", {
      style: {
        display: 'inline-grid',
        boxSizing: 'border-box',
        gridAutoFlow: 'column'
      },
      children: /*#__PURE__*/_jsx(SortableContext, {
        items: columns,
        strategy: horizontalListSortingStrategy,
        children: children
      })
    })
  });
};