react-form-builder-devextreme
Version:
A complete form builder for react. Some changes to design
491 lines (488 loc) • 18.9 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _immutabilityHelper = _interopRequireDefault(require("immutability-helper"));
var _store = _interopRequireDefault(require("./stores/store"));
var _formDynamicEdit = _interopRequireDefault(require("./form-dynamic-edit"));
var _formDynamicPermission = _interopRequireDefault(require("./form-dynamic-permission"));
var _sortableFormElements = _interopRequireDefault(require("./sortable-form-elements"));
var _componentDragLayer = _interopRequireDefault(require("./form-elements/component-drag-layer"));
var _devextremeReact = require("devextreme-react");
var _header = _interopRequireDefault(require("./header/header"));
var _headerPlaceHolder = _interopRequireDefault(require("./header/headerPlaceHolder"));
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /**
* <Preview />
*/
var PlaceHolder = _sortableFormElements["default"].PlaceHolder;
var Preview = exports["default"] = /*#__PURE__*/function (_React$Component) {
(0, _inherits2["default"])(Preview, _React$Component);
var _super = _createSuper(Preview);
function Preview(props) {
var _this;
(0, _classCallCheck2["default"])(this, Preview);
_this = _super.call(this, props);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "state", {
data: [],
answer_data: {}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "editModeOff", function (e) {
// if (this.editForm.current && !this.editForm.current.contains(e.target)) {
// this.manualEditModeOff();
// }
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "manualEditModeOff", function () {
var editElement = _this.props.editElement;
if (editElement && editElement.dirty) {
editElement.dirty = false;
_this.updateElement(editElement);
}
_this.props.manualEditModeOff();
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "manualEditPermissionModeOff", function () {
var editElement = _this.props.editElement;
if (editElement && editElement.dirty) {
editElement.dirty = false;
_this.updateElement(editElement);
}
_this.props.manualEditPermissionModeOff();
});
var onLoad = props.onLoad,
onPost = props.onPost;
_store["default"].setExternalHandler(onLoad, onPost);
_this.editForm = /*#__PURE__*/_react["default"].createRef();
_this.editPermissionForm = /*#__PURE__*/_react["default"].createRef();
_this.state = {
data: props.data || [],
answer_data: {}
};
_this.seq = 0;
_this._onUpdate = _this._onChange.bind((0, _assertThisInitialized2["default"])(_this));
_this.getDataById = _this.getDataById.bind((0, _assertThisInitialized2["default"])(_this));
_this.moveCard = _this.moveCard.bind((0, _assertThisInitialized2["default"])(_this));
_this.insertCard = _this.insertCard.bind((0, _assertThisInitialized2["default"])(_this));
_this.setAsChild = _this.setAsChild.bind((0, _assertThisInitialized2["default"])(_this));
_this.removeChild = _this.removeChild.bind((0, _assertThisInitialized2["default"])(_this));
_this._onDestroy = _this._onDestroy.bind((0, _assertThisInitialized2["default"])(_this));
_this._onCopy = _this._onCopy.bind((0, _assertThisInitialized2["default"])(_this));
_this._onInsertAbove = _this._onInsertAbove.bind((0, _assertThisInitialized2["default"])(_this));
return _this;
}
(0, _createClass2["default"])(Preview, [{
key: "componentDidMount",
value: function componentDidMount() {
var _this2 = this;
var _this$props = this.props,
data = _this$props.data,
url = _this$props.url,
saveUrl = _this$props.saveUrl,
saveAlways = _this$props.saveAlways;
_store["default"].subscribe(function (state) {
return _this2._onUpdate(state.data);
});
_store["default"].dispatch('load', {
loadUrl: url,
saveUrl: saveUrl,
data: data || [],
saveAlways: saveAlways
});
document.addEventListener('mousedown', this.editModeOff);
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
document.removeEventListener('mousedown', this.editModeOff);
}
}, {
key: "_setValue",
value: function _setValue(text) {
return text.replace(/[^A-Z0-9]+/gi, '_').toLowerCase();
}
}, {
key: "updateElement",
value: function updateElement(element) {
var data = this.state.data;
var found = false;
for (var i = 0, len = data.length; i < len; i++) {
if (element.id === data[i].id) {
data[i] = element;
found = true;
break;
}
}
if (found) {
this.seq = this.seq > 100000 ? 0 : this.seq + 1;
_store["default"].dispatch('updateOrder', data);
}
}
}, {
key: "_onChange",
value: function _onChange(data) {
var _this3 = this;
var answer_data = {};
data.forEach(function (item) {
if (item && item.readOnly && _this3.props.variables[item.variableKey]) {
answer_data[item.field_name] = _this3.props.variables[item.variableKey];
}
});
this.setState({
data: data,
answer_data: answer_data
});
}
}, {
key: "_onDestroy",
value: function _onDestroy(item) {
var _this4 = this;
if (item.childItems) {
item.childItems.forEach(function (x) {
var child = _this4.getDataById(x);
if (child) {
_store["default"].dispatch('delete', child);
}
});
}
_store["default"].dispatch('delete', item);
}
}, {
key: "_onInsertAbove",
value: function _onInsertAbove(item) {
this.props.toggleToolbar(true, item);
}
}, {
key: "_onCopy",
value: function _onCopy(item) {
var _this5 = this;
if (item.childItems) {
item.childItems.forEach(function (x) {
var child = _this5.getDataById(x);
if (child) {
_store["default"].dispatch('copy', child);
}
});
}
_store["default"].dispatch('copy', item);
}
}, {
key: "getDataById",
value: function getDataById(id) {
var data = this.state.data;
return data.find(function (x) {
return x && x.id === id;
});
}
}, {
key: "swapChildren",
value: function swapChildren(data, item, child, col) {
if (child.col !== undefined && item.id !== child.parentId) {
return false;
}
if (!(child.col !== undefined && child.col !== col && item.childItems[col])) {
// No child was assigned yet in both source and target.
return false;
}
var oldId = item.childItems[col];
var oldItem = this.getDataById(oldId);
var oldCol = child.col;
// eslint-disable-next-line no-param-reassign
item.childItems[oldCol] = oldId;
oldItem.col = oldCol;
// eslint-disable-next-line no-param-reassign
item.childItems[col] = child.id;
child.col = col;
_store["default"].dispatch('updateOrder', data);
return true;
}
}, {
key: "setAsChild",
value: function setAsChild(item, child, col, isBusy) {
var data = this.state.data;
if (this.swapChildren(data, item, child, col)) {
return;
}
if (isBusy) {
return;
}
var oldParent = this.getDataById(child.parentId);
var oldCol = child.col;
// eslint-disable-next-line no-param-reassign
item.childItems[col] = child.id;
child.col = col;
// eslint-disable-next-line no-param-reassign
child.parentId = item.id;
// eslint-disable-next-line no-param-reassign
child.parentIndex = data.indexOf(item);
if (oldParent) {
oldParent.childItems[oldCol] = null;
}
var list = data.filter(function (x) {
return x && x.parentId === item.id;
});
var toRemove = list.filter(function (x) {
return item.childItems.indexOf(x.id) === -1;
});
var newData = data;
if (toRemove.length) {
// console.log('toRemove', toRemove);
newData = data.filter(function (x) {
return toRemove.indexOf(x) === -1;
});
}
if (!this.getDataById(child.id)) {
newData.push(child);
}
_store["default"].dispatch('updateOrder', newData);
}
}, {
key: "removeChild",
value: function removeChild(item, col) {
var data = this.state.data;
var oldId = item.childItems[col];
var oldItem = this.getDataById(oldId);
if (oldItem) {
var newData = data.filter(function (x) {
return x !== oldItem;
});
// eslint-disable-next-line no-param-reassign
item.childItems[col] = null;
// delete oldItem.parentId;
this.seq = this.seq > 100000 ? 0 : this.seq + 1;
_store["default"].dispatch('updateOrder', newData);
this.setState({
data: newData
});
}
}
}, {
key: "restoreCard",
value: function restoreCard(item, id) {
var data = this.state.data;
var parent = this.getDataById(item.data.parentId);
var oldItem = this.getDataById(id);
if (parent && oldItem) {
var newIndex = data.indexOf(oldItem);
var newData = (0, _toConsumableArray2["default"])(data); // data.filter(x => x !== oldItem);
// eslint-disable-next-line no-param-reassign
parent.childItems[oldItem.col] = null;
delete oldItem.parentId;
// eslint-disable-next-line no-param-reassign
delete item.setAsChild;
// eslint-disable-next-line no-param-reassign
delete item.parentIndex;
// eslint-disable-next-line no-param-reassign
item.index = newIndex;
this.seq = this.seq > 100000 ? 0 : this.seq + 1;
_store["default"].dispatch('updateOrder', newData);
this.setState({
data: newData
});
}
}
}, {
key: "insertCard",
value: function insertCard(item, hoverIndex, id) {
var data = this.state.data;
if (id) {
this.restoreCard(item, id);
} else {
data.splice(hoverIndex, 0, item);
this.saveData(item, hoverIndex, hoverIndex);
_store["default"].dispatch('insertItem', item);
}
}
}, {
key: "moveCard",
value: function moveCard(dragIndex, hoverIndex) {
var data = this.state.data;
var dragCard = data[dragIndex];
this.saveData(dragCard, dragIndex, hoverIndex);
}
// eslint-disable-next-line no-unused-vars
}, {
key: "cardPlaceHolder",
value: function cardPlaceHolder(dragIndex, hoverIndex) {
// Dummy
}
}, {
key: "saveData",
value: function saveData(dragCard, dragIndex, hoverIndex) {
var newData = (0, _immutabilityHelper["default"])(this.state, {
data: {
$splice: [[dragIndex, 1], [hoverIndex, 0, dragCard]]
}
});
this.setState(newData);
_store["default"].dispatch('updateOrder', newData.data);
}
}, {
key: "getElement",
value: function getElement(item, index) {
var _this6 = this;
if (item.custom) {
if (!item.component || typeof item.component !== 'function') {
// eslint-disable-next-line no-param-reassign
item.component = this.props.registry.get(item.key);
}
}
var SortableFormElement = _sortableFormElements["default"][item.element];
if (SortableFormElement === null) {
return null;
}
var handleUpdateElement = function handleUpdateElement(element) {
return _this6.updateElement(element);
};
handleUpdateElement.bind(this);
return /*#__PURE__*/_react["default"].createElement(SortableFormElement, {
id: item.id,
seq: this.seq,
index: index,
moveCard: this.moveCard,
insertCard: this.insertCard,
mutable: false,
parent: this.props.parent,
editModeOn: this.props.editModeOn,
editPermissionModeOn: this.props.editPermissionModeOn,
isDraggable: true,
key: item.id,
sortData: item.id,
history: item.history,
data: item,
getDataById: this.getDataById,
setAsChild: this.setAsChild,
removeChild: this.removeChild,
user: this.props.user
// preview={this}
// element={this.props.editElement}
,
updateElement: handleUpdateElement
// rightComponent={this.props.rightComponent}
,
_onDestroy: this._onDestroy,
_onCopy: this._onCopy,
_onInsertAbove: this._onInsertAbove
});
}
}, {
key: "showEditForm",
value: function showEditForm() {
var _this7 = this;
var handleUpdateElement = function handleUpdateElement(element) {
return _this7.updateElement(element);
};
handleUpdateElement.bind(this);
var formElementEditProps = {
showCorrectColumn: this.props.showCorrectColumn,
files: this.props.files,
manualEditModeOff: this.manualEditModeOff,
preview: this,
element: this.props.editElement,
updateElement: handleUpdateElement
};
return this.props.renderEditForm(formElementEditProps);
}
}, {
key: "showPermissionForm",
value: function showPermissionForm() {
var _this8 = this;
var handleUpdateElement = function handleUpdateElement(element) {
return _this8.updateElement(element);
};
handleUpdateElement.bind(this);
var formElementPermissionProps = {
showCorrectColumn: this.props.showCorrectColumn,
files: this.props.files,
manualEditPermissionModeOff: this.manualEditPermissionModeOff,
preview: this,
element: this.props.editElement,
updateElement: handleUpdateElement
};
return this.props.renderPermissionForm(formElementPermissionProps);
}
}, {
key: "render",
value: function render() {
var _this9 = this;
var classes = this.props.className;
if (this.props.editMode) {
classes.replace(' is-permission-editing', '');
classes += ' is-editing';
}
if (this.props.editPermissionMode) {
classes.replace(' is-editing', '');
classes += ' is-permission-editing';
}
var data = this.state.data.filter(function (x) {
return !!x && !x.parentId;
});
var items = data.map(function (item, index) {
return _this9.getElement(item, index);
});
return /*#__PURE__*/_react["default"].createElement("div", {
className: classes
}, this.props.editMode && /*#__PURE__*/_react["default"].createElement("div", {
className: "edit-form",
style: {
height: 0
},
ref: this.editForm
}, /*#__PURE__*/_react["default"].createElement(_headerPlaceHolder["default"], {
id: "header-Form-place-holder",
show: true,
text: /*#__PURE__*/_react["default"].createElement(_header["default"], null)
}), this.props.editElement !== null && this.showEditForm()), this.props.editPermissionMode && /*#__PURE__*/_react["default"].createElement("div", {
className: "edit-permission-form",
style: {
height: 0
},
ref: this.editPermissionForm
}, /*#__PURE__*/_react["default"].createElement(_headerPlaceHolder["default"], {
id: "header-Form-place-holder",
show: true,
text: /*#__PURE__*/_react["default"].createElement(_header["default"], null)
}), this.props.editElement !== null && this.showPermissionForm()), /*#__PURE__*/_react["default"].createElement("div", {
className: "Sortable"
}, items), /*#__PURE__*/_react["default"].createElement(PlaceHolder, {
id: "form-place-holder",
show: true,
text: /*#__PURE__*/_react["default"].createElement(_devextremeReact.Button, {
icon: "plus",
className: "plus-icon-formBuilder",
onClick: function onClick() {
return _this9.props.toggleToolbar(true);
}
}),
index: items.length,
moveCard: this.cardPlaceHolder,
insertCard: this.insertCard
}), /*#__PURE__*/_react["default"].createElement(_componentDragLayer["default"], null));
}
}]);
return Preview;
}(_react["default"].Component);
Preview.defaultProps = {
showCorrectColumn: false,
files: [],
editMode: false,
editPermissionMode: false,
editElement: null,
className: 'col-md-12 react-form-builder-preview float-left',
renderEditForm: function renderEditForm(props) {
return /*#__PURE__*/_react["default"].createElement(_formDynamicEdit["default"], props);
},
renderPermissionForm: function renderPermissionForm(props) {
return /*#__PURE__*/_react["default"].createElement(_formDynamicPermission["default"], props);
}
// rightComponent: (props) => <div {...props} />,
};