@arudovwen/react-form-builder
Version:
A complete form builder for react.
73 lines (72 loc) • 2.76 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactDnd = require("react-dnd");
var _reactDndHtml5Backend = require("react-dnd-html5-backend");
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 = {
// display: 'inline-block',
// border: '1px dashed gray',
// padding: '0.5rem 1rem',
// backgroundColor: 'white',
cursor: 'move'
};
const dragHandleSource = {
beginDrag(props) {
const {
data,
index,
onDestroy,
setAsChild,
getDataById
} = props;
return {
itemType: _ItemTypes.default.BOX,
index: data.parentId ? -1 : index,
parentIndex: data.parentIndex,
id: data.id,
col: data.col,
onDestroy,
setAsChild,
getDataById,
data
};
}
};
class DragHandle extends _react.PureComponent {
componentDidMount() {
const {
connectDragPreview
} = this.props;
if (connectDragPreview) {
// Use empty image as a drag preview so browsers don't draw it
// and we can draw whatever we want on the custom drag layer instead.
connectDragPreview((0, _reactDndHtml5Backend.getEmptyImage)(), {
// IE fallback: specify that we'd rather screenshot the node
// when it already knows it's being dragged so we can hide it with CSS.
captureDraggingState: true
});
}
}
render() {
const {
connectDragSource
} = this.props;
return connectDragSource(/*#__PURE__*/_react.default.createElement("div", {
className: "btn is-isolated",
style: style
}, /*#__PURE__*/_react.default.createElement("i", {
className: "is-isolated fas fa-grip-vertical"
})));
}
}
var _default = exports.default = (0, _reactDnd.DragSource)(_ItemTypes.default.BOX, dragHandleSource, (connect, monitor) => ({
connectDragSource: connect.dragSource(),
connectDragPreview: connect.dragPreview(),
isDragging: monitor.isDragging()
}))(DragHandle);