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

Wulper Studio Library Components CMS

import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
var _excluded = ["children", "disabled", "id", "items", "style"];
import React from 'react';
import { defaultAnimateLayoutChanges, SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { AlterBoardColumn } from '../AlterBoardColumn';
import { jsx as _jsx } from "react/jsx-runtime";
var animateLayoutChanges = function animateLayoutChanges(args) {
  return defaultAnimateLayoutChanges(Object.assign({}, args, {
    wasDragging: true
  }));
};
var strategy = verticalListSortingStrategy;
export var DroppableColumn = function DroppableColumn(_ref) {
  var children = _ref.children,
    disabled = _ref.disabled,
    id = _ref.id,
    items = _ref.items,
    style = _ref.style,
    props = _objectWithoutProperties(_ref, _excluded);
  var _useSortable = useSortable({
      id: id,
      data: {
        type: 'container',
        children: items
      },
      animateLayoutChanges: animateLayoutChanges
    }),
    attributes = _useSortable.attributes,
    isDragging = _useSortable.isDragging,
    listeners = _useSortable.listeners,
    setNodeRef = _useSortable.setNodeRef,
    transition = _useSortable.transition,
    transform = _useSortable.transform;
  return /*#__PURE__*/_jsx(AlterBoardColumn, Object.assign({
    ref: disabled ? undefined : setNodeRef,
    style: Object.assign({}, style, {
      transition: transition,
      transform: CSS.Translate.toString(transform),
      opacity: isDragging ? 0.5 : undefined
    }),
    handleProps: Object.assign({}, attributes, listeners)
  }, props, {
    children: /*#__PURE__*/_jsx(SortableContext, {
      items: items,
      strategy: strategy,
      children: children
    })
  }));
};