@arudovwen/react-form-builder/lib/sortable-element.js

A complete form builder for react.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = _default;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _reactDom = require("react-dom");
var _reactDnd = require("react-dnd");
var _ItemTypes = _interopRequireDefault(require("./ItemTypes"));
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); }
const style = {
  border: '1px dashed gray',
  padding: '0.5rem 1rem',
  marginBottom: '.5rem',
  backgroundColor: 'white',
  cursor: 'pointer'
};
const cardSource = {
  beginDrag(props) {
    return {
      itemType: _ItemTypes.default.CARD,
      id: props.id,
      index: props.index
    };
  }
};
const cardTarget = {
  drop(props, monitor, component) {
    if (!component) {
      return;
    }
    const item = monitor.getItem();
    const hoverIndex = props.index;
    const dragIndex = item.index;
    if (props.data && props.data.isContainer || item.itemType === _ItemTypes.default.CARD) {
      // console.log('cardTarget -  Drop', item.itemType);
      return;
    }
    if (item.data && typeof item.setAsChild === 'function') {
      // console.log('BOX', item);
      if (dragIndex === -1) {
        props.insertCard(item, hoverIndex, item.id);
      }
    }
  },
  hover(props, monitor, component) {
    const item = monitor.getItem();
    if (item.itemType === _ItemTypes.default.BOX && item.index === -1) return;

    // Don't replace multi-column component unless both drag & hover are multi-column
    if (props.data?.isContainer && !item.data?.isContainer) return;
    const dragIndex = item.index;
    const hoverIndex = props.index;

    // Don't replace items with themselves
    if (dragIndex === hoverIndex) {
      return;
    }
    if (dragIndex === -1) {
      if (props.data && props.data.isContainer) {
        return;
      }
      // console.log('CARD', item);
      item.index = hoverIndex;
      props.insertCard(item.onCreate(item.data), hoverIndex);
    }

    // Determine rectangle on screen
    const hoverBoundingRect = (0, _reactDom.findDOMNode)(component).getBoundingClientRect();

    // Get vertical middle
    const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;

    // Determine mouse position
    const clientOffset = monitor.getClientOffset();

    // Get pixels to the top
    const hoverClientY = clientOffset.y - hoverBoundingRect.top;

    // Only perform the move when the mouse has crossed half of the items height
    // When dragging downwards, only move when the cursor is below 50%
    // When dragging upwards, only move when the cursor is above 50%

    // Dragging downwards
    if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
      return;
    }

    // Dragging upwards
    if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
      return;
    }

    // Time to actually perform the action
    props.moveCard(dragIndex, hoverIndex);

    // Note: we're mutating the monitor item here!
    // Generally it's better to avoid mutations,
    // but it's good here for the sake of performance
    // to avoid expensive index searches.

    // if (item.itemType == ItemTypes.BOX) item.cardIndex = hoverIndex;
    // else
    item.index = hoverIndex;
  }
};

// eslint-disable-next-line no-unused-vars
function _default(ComposedComponent) {
  class Card extends _react.Component {
    render() {
      const {
        isDragging,
        // connectDragSource,
        connectDragPreview,
        connectDropTarget
      } = this.props;
      const opacity = isDragging ? 0 : 1;
      return connectDragPreview(connectDropTarget(/*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(ComposedComponent, (0, _extends2.default)({}, this.props, {
        style: {
          ...style,
          opacity
        }
      })))));
    }
  }
  (0, _defineProperty2.default)(Card, "propTypes", {
    connectDragSource: _propTypes.default.func,
    connectDragPreview: _propTypes.default.func,
    connectDropTarget: _propTypes.default.func,
    index: _propTypes.default.number.isRequired,
    isDragging: _propTypes.default.bool,
    id: _propTypes.default.any.isRequired,
    // text: PropTypes.string.isRequired,
    moveCard: _propTypes.default.func.isRequired,
    seq: _propTypes.default.number
  });
  (0, _defineProperty2.default)(Card, "defaultProps", {
    seq: -1
  });
  const x = (0, _reactDnd.DropTarget)([_ItemTypes.default.CARD, _ItemTypes.default.BOX], cardTarget, connect => ({
    connectDropTarget: connect.dropTarget()
  }))(Card);
  return (0, _reactDnd.DragSource)(_ItemTypes.default.CARD, cardSource, (connect, monitor) => ({
    connectDragSource: connect.dragSource(),
    connectDragPreview: connect.dragPreview(),
    isDragging: monitor.isDragging()
  }))(x);
}