react-form-builder-devextreme/lib/multi-column/dustbin.js

A complete form builder for react. Some changes to design

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _reactDnd = require("react-dnd");
var _formElements = _interopRequireDefault(require("../form-elements"));
var _ItemTypes = _interopRequireDefault(require("../ItemTypes"));
var _customElement = _interopRequireDefault(require("../form-elements/custom-element"));
var _registry = _interopRequireDefault(require("../stores/registry"));
var _store = _interopRequireDefault(require("../stores/store"));
var _excluded = ["draggedItem", "parentIndex", "items", "col", "getDataById", "setAsChild"];
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function getCustomElement(item, props) {
  if (!item.component || typeof item.component !== 'function') {
    item.component = _registry["default"].get(item.key);
    if (!item.component) {
      console.error("".concat(item.element, " was not registered"));
    }
  }
  return /*#__PURE__*/_react["default"].createElement(_customElement["default"], (0, _extends2["default"])({}, props, {
    mutable: false,
    key: "form_".concat(item.id),
    data: item
  }));
}
function getElement(item, props) {
  if (!item) return null;
  var Element = item.custom ? function () {
    return getCustomElement(item, props);
  } : _formElements["default"][item.element || item.key];
  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Element, (0, _extends2["default"])({}, props, {
    key: "form_".concat(item.id),
    data: item
  })));
}
function getStyle(backgroundColor) {
  return {
    border: '1px solid rgba(0,0,0,0.2)',
    minHeight: '2rem',
    minWidth: '7rem',
    width: '100%',
    backgroundColor: backgroundColor,
    padding: 0,
    "float": 'left'
  };
}
function isContainer(item) {
  if (item.itemType !== _ItemTypes["default"].CARD) {
    var data = item.data;
    if (data) {
      if (data.isContainer) {
        return true;
      }
      if (data.field_name) {
        return data.field_name.indexOf('_col_row') > -1;
      }
    }
  }
  return false;
}
var Dustbin = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
  var draggedItem = _ref.draggedItem,
    parentIndex = _ref.parentIndex,
    items = _ref.items,
    col = _ref.col,
    getDataById = _ref.getDataById,
    setAsChild = _ref.setAsChild,
    rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  var item = getDataById(items[col]);
  var _useDrop = (0, _reactDnd.useDrop)(function () {
      return {
        accept: function accept(props) {
          return props.accepts;
        },
        drop: function drop(droppedItem, monitor) {
          if (!monitor.didDrop()) {
            var isBusy = !!items[col];
            if (!isContainer(droppedItem)) {
              // Add your custom drop handling logic here
              var isNew = !droppedItem.data.id;
              var data = isNew ? droppedItem.onCreate(droppedItem.data) : droppedItem.data;
              setAsChild(items[col], data, col, isBusy);
            }
          }
        },
        collect: function collect(monitor) {
          return {
            isOver: monitor.isOver(),
            canDrop: monitor.canDrop()
          };
        }
      };
    }, [items, col, setAsChild]),
    _useDrop2 = (0, _slicedToArray2["default"])(_useDrop, 2),
    _useDrop2$ = _useDrop2[0],
    isOver = _useDrop2$.isOver,
    canDrop = _useDrop2$.canDrop,
    drop = _useDrop2[1];
  (0, _react.useImperativeHandle)(ref, function () {
    return {
      onDrop: function onDrop(dropped) {
        if (droppedItem.data) {
          console.log('dropped', droppedItem);
          _store["default"].dispatch('deleteLastItem');

          // Additional logic here if necessary
          // For example, updating state or making API calls
        }
      }
    };
  });
  var element = getElement(item, rest);
  var sameCard = draggedItem ? draggedItem.index === parentIndex : false;
  var backgroundColor = 'rgba(0, 0, 0, .03)';
  // console.log('dragIndex:', draggedItem?.index);
  // console.log('HoverIndex:', parentIndex);
  // console.log('SameCard:', sameCard);
  if (!sameCard && isOver && canDrop && !draggedItem.data.isContainer) {
    backgroundColor = '#F7F589';
  }
  return /*#__PURE__*/_react["default"].createElement("div", {
    ref: drop,
    style: getStyle(backgroundColor)
  }, element);
});
var _default = exports["default"] = Dustbin;