@arudovwen/react-form-builder/lib/multi-column/dustbin.js

A complete form builder for react.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
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"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function getCustomElement(item, props) {
  if (!item.component || typeof item.component !== 'function') {
    item.component = _registry.default.get(item.key);
    if (!item.component) {
      console.error(`${item.element} was not registered`);
    }
  }
  return /*#__PURE__*/_react.default.createElement(_customElement.default, (0, _extends2.default)({}, props, {
    mutable: false,
    key: `form_${item.id}`,
    data: item
  }));
}
function getElement(item, props) {
  if (!item) return null;
  if (item.custom) {
    return getCustomElement(item, props);
  }
  const Element = _formElements.default[item.element || item.key];
  return /*#__PURE__*/_react.default.createElement(Element, (0, _extends2.default)({}, props, {
    key: `form_${item.id}`,
    data: item
  }));
}
function getStyle(backgroundColor) {
  return {
    border: '1px solid rgba(0,0,0,0.2)',
    minHeight: '2rem',
    minWidth: '7rem',
    width: '100%',
    backgroundColor,
    padding: 0,
    float: 'left'
  };
}
function isContainer(item) {
  if (item.itemType !== _ItemTypes.default.CARD) {
    const {
      data
    } = item;
    if (data) {
      if (data.isContainer) {
        return true;
      }
      if (data.field_name) {
        return data.field_name.indexOf('_col_row') > -1;
      }
    }
  }
  return false;
}
const Dustbin = /*#__PURE__*/_react.default.forwardRef(({
  onDropSuccess,
  seq,
  draggedItem,
  parentIndex,
  canDrop,
  isOver,
  isOverCurrent,
  connectDropTarget,
  items,
  col,
  getDataById,
  ...rest
}, ref) => {
  const item = getDataById(items[col]);
  (0, _react.useImperativeHandle)(ref, () => ({
    onDrop: dropped => {
      console.log("dropped ites");
      const {
        data
      } = dropped;
      if (data) {
        onDropSuccess && onDropSuccess();
        _store.default.dispatch('deleteLastItem');
      }
    }
  }), []);
  const element = getElement(item, rest);
  const sameCard = draggedItem ? draggedItem.index === parentIndex : false;

  // console.log('dragIndex:',draggedItem?.index)
  // console.log('HoverIndex:',parentIndex)
  // console.log('SameCard:',sameCard)

  let backgroundColor = 'rgba(0, 0, 0, .03)';
  if (!sameCard && isOver && canDrop && !draggedItem.data.isContainer) {
    backgroundColor = '#F7F589';
  }

  // console.log('sameCard, canDrop', sameCard, canDrop);
  return connectDropTarget(/*#__PURE__*/_react.default.createElement("div", {
    style: !sameCard ? getStyle(backgroundColor) : getStyle('rgba(0, 0, 0, .03')
  }, !element && /*#__PURE__*/_react.default.createElement("span", null, "Drop your element here "), element));
});
var _default = exports.default = (0, _reactDnd.DropTarget)(props => props.accepts, {
  drop(props, monitor, component) {
    if (!component) {
      return;
    }

    // //Do nothing whith busy dustbin
    // if(props.items[props.col]) return;
    // Allow swap column if target and source are in same multi column row
    const isBusy = !!props.items[props.col];
    const item = monitor.getItem();

    // Do nothing when moving the box inside the same column
    if (props.col === item.col && props.items[props.col] === item.id) return;

    // Do not allow replace component other than both items in same multi column row
    if (item.col === undefined && props.items[props.col]) {
      _store.default.dispatch('resetLastItem');
      return;
    }
    if (!isContainer(item)) {
      component.onDrop(item);
      if (item.data && typeof props.setAsChild === 'function') {
        const isNew = !item.data.id;
        const data = isNew ? item.onCreate(item.data) : item.data;
        props.setAsChild(props.data, data, props.col, isBusy);
      }
    }
  }
}, (connect, monitor) => ({
  connectDropTarget: connect.dropTarget(),
  draggedItem: monitor.getItem() ? monitor.getItem() : null,
  isOver: monitor.isOver(),
  isOverCurrent: monitor.isOver({
    shallow: true
  }),
  canDrop: monitor.canDrop()
}))(Dustbin);