@wulperstudio/cms/organisms/FreeBoard/FreeBoard.js

Wulper Studio Library Components CMS

/* eslint-disable @typescript-eslint/naming-convention */
import React, { cloneElement, Children } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import { Container } from './styled';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
export var FreeBoard = function FreeBoard(_ref) {
  var _children = _ref.children,
    _ref$isDropDisabled = _ref.isDropDisabled,
    isDropDisabled = _ref$isDropDisabled === void 0 ? false : _ref$isDropDisabled,
    _ref$isDragDisabled = _ref.isDragDisabled,
    isDragDisabled = _ref$isDragDisabled === void 0 ? false : _ref$isDragDisabled,
    AddColumnComponent = _ref.AddColumnComponent,
    _onDragEnd = _ref.onDragEnd;
  var isValid = React.Children.count(_children);
  if (isValid) {
    return /*#__PURE__*/_jsx(DragDropContext, {
      onDragEnd: function onDragEnd(result, provided) {
        var parseResult = {
          destination: result == null ? void 0 : result.destination,
          source: result == null ? void 0 : result.source,
          elementId: result == null ? void 0 : result.draggableId,
          type: result == null ? void 0 : result.type
        };
        if (_onDragEnd) _onDragEnd(parseResult, provided);
      },
      children: /*#__PURE__*/_jsx(Droppable, {
        droppableId: "board",
        type: "COLUMN",
        direction: "horizontal",
        isDropDisabled: isDropDisabled,
        children: function children(_ref2) {
          var dropInnerRef = _ref2.innerRef,
            dropPlaceholder = _ref2.placeholder,
            droppableProps = _ref2.droppableProps;
          return /*#__PURE__*/_jsxs(_Fragment, {
            children: [/*#__PURE__*/_jsxs(Container, Object.assign({
              ref: dropInnerRef
            }, droppableProps, {
              children: [Children.map(_children, function (child, index) {
                var Child = child;
                return /*#__PURE__*/_jsx(Draggable, {
                  draggableId: index.toString()
                  // eslint-disable-next-line react/no-array-index-key
                  ,

                  index: index,
                  isDragDisabled: isDragDisabled,
                  children: function children(_ref3) {
                    var dragInnerRef = _ref3.innerRef,
                      draggableProps = _ref3.draggableProps,
                      dragHandleProps = _ref3.dragHandleProps;
                    return /*#__PURE__*/cloneElement(Child, Object.assign({
                      innerRef: dragInnerRef
                    }, draggableProps, dragHandleProps));
                  }
                }, index);
              }), AddColumnComponent]
            })), dropPlaceholder]
          });
        }
      })
    });
  }
  return /*#__PURE__*/_jsxs(_Fragment, {
    children: [_children, AddColumnComponent]
  });
};