@thaddeusjiang/react-sortable-list/dist/react-sortable-list.cjs.development.js

You should focus the `features` of your app, not DnD boilerplate.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var React = _interopDefault(require('react'));
var sortable = require('@dnd-kit/sortable');
var utilities = require('@dnd-kit/utilities');
var core = require('@dnd-kit/core');

var SortableItem = function SortableItem(props) {
  var DragHandler = props.DragHandler,
    className = props.className;
  var _useSortable = sortable.useSortable({
      id: props.id
    }),
    attributes = _useSortable.attributes,
    listeners = _useSortable.listeners,
    setNodeRef = _useSortable.setNodeRef,
    transform = _useSortable.transform,
    transition = _useSortable.transition;
  var style = {
    transform: utilities.CSS.Transform.toString(transform),
    transition: transition
  };
  return DragHandler ? React.createElement("div", {
    ref: setNodeRef,
    style: style,
    className: className
  }, React.createElement(DragHandler, Object.assign({}, attributes, listeners)), props.children) : React.createElement("div", Object.assign({
    ref: setNodeRef,
    style: style
  }, attributes, listeners, {
    className: className
  }), props.children);
};

// TODO: Headless UI Component
var SortableList = function SortableList(props) {
  var items = props.items,
    setItems = props.setItems,
    children = props.children,
    itemRender = props.itemRender,
    horizontal = props.horizontal,
    _props$disabled = props.disabled,
    disabled = _props$disabled === void 0 ? false : _props$disabled;
  var sensors = core.useSensors(core.useSensor(core.PointerSensor), core.useSensor(core.KeyboardSensor, {
    coordinateGetter: sortable.sortableKeyboardCoordinates
  }));
  if (disabled) {
    return React.createElement(React.Fragment, null, children ? children({
      items: items
    }) : items.map(function (item) {
      return itemRender == null ? void 0 : itemRender({
        item: item
      });
    }));
  }
  return React.createElement(core.DndContext, {
    sensors: sensors,
    collisionDetection: core.closestCenter,
    onDragEnd: handleDragEnd
  }, React.createElement(sortable.SortableContext, {
    items: items,
    strategy: horizontal ? sortable.horizontalListSortingStrategy : sortable.verticalListSortingStrategy
  }, children ? children({
    items: items
  }) : items.map(function (item) {
    return React.createElement(SortableItem, {
      key: item.id,
      id: item.id
    }, itemRender({
      item: item
    }));
  })));
  function handleDragEnd(event) {
    var active = event.active,
      over = event.over;
    if (active.id !== over.id) {
      setItems(function (items) {
        var ids = items.map(function (item) {
          return item.id;
        });
        var oldIndex = ids.indexOf(active.id);
        var newIndex = ids.indexOf(over.id);
        return sortable.arrayMove(items, oldIndex, newIndex);
      });
    }
  }
};

exports.SortableItem = SortableItem;
exports.SortableList = SortableList;
//# sourceMappingURL=react-sortable-list.cjs.development.js.map