@arudovwen/react-form-builder
Version:
A complete form builder for react.
109 lines (107 loc) • 4.04 kB
JavaScript
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = FieldSetBase;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _componentHeader = _interopRequireDefault(require("../form-elements/component-header"));
var _componentLabel = _interopRequireDefault(require("../form-elements/component-label"));
var _dustbin = _interopRequireDefault(require("../multi-column/dustbin"));
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); }
/* eslint-disable camelcase */
const accepts = [_ItemTypes.default.BOX, _ItemTypes.default.CARD];
function FieldSetBase(props) {
const [childData, setChildData] = (0, _react.useState)({});
const [childItems, setChildItems] = (0, _react.useState)(null);
(0, _react.useEffect)(() => {
const {
data,
class_name,
...rest
} = props;
setChildData(data);
let count = 1;
createChild(count, data);
}, [props]);
const addNewChild = () => {
let data = props.data;
let colCount = data.childItems.length + 1;
let oldChilds = data.childItems;
data.childItems = Array.from({
length: colCount
}, (v, i) => {
return oldChilds[i] ? oldChilds[i] : null;
});
setChildItems(data.childItems);
};
const onDropSuccess = droppedIndex => {
const totalChild = childItems ? childItems.length : 0;
const isLastChild = totalChild === droppedIndex + 1;
if (isLastChild) {
addNewChild();
}
};
const createChild = (count, data) => {
const colCount = count;
const className = data.class_name || "col-md-12";
if (!data.childItems) {
// eslint-disable-next-line no-param-reassign
data.childItems = Array.from({
length: colCount
}, (v, i) => null);
data.isContainer = true;
}
setChildItems(data.childItems);
};
const {
controls,
editModeOn,
getDataById,
setAsChild,
removeChild,
seq,
className,
index
} = props;
const {
pageBreakBefore
} = childData;
let baseClasses = "SortableItem rfb-item";
if (pageBreakBefore) {
baseClasses += " alwaysbreak";
}
return /*#__PURE__*/_react.default.createElement("div", {
style: {
...props.style
},
className: baseClasses
}, /*#__PURE__*/_react.default.createElement(_componentHeader.default, (0, _extends2.default)({}, props, {
isFieldSet: true
})), /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_componentLabel.default, props), /*#__PURE__*/_react.default.createElement("div", {
className: "row"
}, childItems?.map((x, i) => /*#__PURE__*/_react.default.createElement("div", {
key: `${i}_${x || "_"}`,
className: "col-md-12"
}, controls ? controls[i] : /*#__PURE__*/_react.default.createElement(_dustbin.default, {
style: {
width: "100%"
},
data: childData,
accepts: accepts,
items: childItems,
key: i,
col: i,
onDropSuccess: () => onDropSuccess(i),
parentIndex: index,
editModeOn: editModeOn,
_onDestroy: () => removeChild(childData, i),
duplicateElement: () => props.duplicateElement(i.id),
getDataById: getDataById,
setAsChild: setAsChild,
seq: seq,
rowNo: i
}))))));
}