stark-form-builder-next
Version:
Package to create form using JSON schema
787 lines (779 loc) • 35.9 kB
JavaScript
"use strict";
require("core-js/modules/es.weak-map.js");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = FormRenderer;
require("core-js/modules/es.array.includes.js");
require("core-js/modules/es.string.includes.js");
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireWildcard(require("react"));
var _reactBootstrap = require("react-bootstrap");
var _reactStepperHorizontal = _interopRequireDefault(require("react-stepper-horizontal"));
var _simpleReactValidator = _interopRequireDefault(require("simple-react-validator"));
var _formElementRenderer = _interopRequireDefault(require("./formElementRenderer"));
var _customFunctions = _interopRequireDefault(require("./helper/customFunctions"));
var _sweetalert = _interopRequireDefault(require("sweetalert"));
var _sweetalert2 = _interopRequireDefault(require("sweetalert2"));
var _FormElements = require("./FormElements");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); } /* eslint-disable */
function FormRenderer(props) {
const simpleValidator = (0, _react.useRef)(new _simpleReactValidator.default());
const {
sections,
onFormSubmit,
onFormDraft,
callbacks,
options,
defaultFormValues,
currentUser,
submitBtnText,
resetBtnText,
showDraftBtn,
draftBtnText,
showResetBtn,
onFormReset,
btnContainerClass,
stepFormProps,
isStepForm,
refreshCounter,
formClass,
showBtnClass,
addMoreRemoveCallback,
addMoreAddCallback,
sectionButtonCallBacks,
addMoreButtonsSchema,
onTextInputChange,
removeValues
} = props;
const keyId = (0, _react.useId)();
const stepperProps = stepFormProps || {};
const [formValues, setFormValues] = (0, _react.useState)({});
const [allFormFields, setAllFormFields] = (0, _react.useState)([]);
const [allFormSections, setAllFormSections] = (0, _react.useState)([]);
const [allAddMoreFields, setAddMoreFields] = (0, _react.useState)({});
const [submitCount, updateSubmitCount] = (0, _react.useState)(0);
const [displayedFields, updateDisplayedFields] = (0, _react.useState)({});
const [stepCounter, updateStepCounter] = (0, _react.useState)(0);
const [currentStepIndex, updateStepIndex] = (0, _react.useState)(0);
const [isClickedNext, updateIsClickedNext] = (0, _react.useState)(false);
const setDefaultFormValues = function setDefaultFormValues() {
let resetForm = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
let allFields = [];
const addMoreFields = {};
sections.map(section => {
allFields = [...allFields, ...section.fields];
return section;
});
const allFormValues = {};
allFields.map(field => {
if (!resetForm) {
if (formValues[field.name]) {
allFormValues[field.name] = formValues[field.name];
} else {
allFormValues[field.name] = defaultFormValues && defaultFormValues[field.name] ? defaultFormValues[field.name] : field.value;
}
} else {
allFormValues[field.name] = "";
}
if (field.type === "addmore") {
if (!resetForm) {
if (formValues[field.name]) {
allFormValues[field.name] = formValues[field.name];
} else {
allFormValues[field.name] = typeof allFormValues[field.name] === "object" ? allFormValues[field.name] : [];
}
const amFields = allFormValues[field.name] && typeof allFormValues[field.name] === "object" ? allFormValues[field.name] : [];
// addMoreFields[field.name] = [field.fields];
addMoreFields[field.name] = Array(amFields.length || 1).fill(field.fields);
} else {
allFormValues[field.name] = [];
addMoreFields[field.name] = Array(1).fill(field.fields);
}
}
return field;
});
setFormValues(allFormValues);
setAllFormSections(sections);
setAddMoreFields(addMoreFields);
setAllFormFields([...allFields]);
};
(0, _react.useEffect)(() => {
setDefaultFormValues();
}, []);
(0, _react.useEffect)(() => {
setDefaultFormValues();
setFormValues(_objectSpread({}, defaultFormValues));
}, [defaultFormValues, refreshCounter]);
const updateFormValues = function updateFormValues(e, field) {
let fieldIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
let aField = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
if (!_customFunctions.default.checkIfEmpty(callbacks, "O")) {
if (callbacks[field.callback]) {
callbacks[field.callback](e);
formValues[removeValues] = "";
removeValues && removeValues.map(ele => {
return formValues[ele] = "";
});
}
}
const allValues = formValues;
if (field.type === "addmore") {
let fieldValues = formValues[field.name];
if (!fieldValues) fieldValues = [];
if (!_customFunctions.default.checkIfEmpty(callbacks, "O")) {
if (callbacks[aField.callback]) callbacks[aField.callback](e);
}
if (!fieldValues[fieldIndex]) fieldValues[fieldIndex] = {};
fieldValues[fieldIndex][aField.name] = aField.type === "date" ? e ? new Date(e) : null : e;
allValues[field.name] = fieldValues;
} else {
allValues[field.name] = field.type === "date" ? e ? new Date(e) : null : e;
}
if (!_customFunctions.default.checkIfEmpty(field.fieldsToReset, "A")) {
field.fieldsToReset.map(f => {
allValues[f] = null;
return f;
});
}
const forceUpdateFields = ["date", "select", "radio", "checkbox"];
setFormValues(forceUpdateFields.includes(aField.type || field.type) ? _objectSpread({}, allValues) : allValues);
};
const getFieldType = function getFieldType() {
let fieldName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
const selectedField = allFormFields.filter(field => field.name === fieldName);
if (_customFunctions.default.checkIfEmpty(selectedField, "A")) return "";
return {
type: selectedField[0].type,
isMulti: selectedField[0].isMulti
};
};
const checkFieldCondition = condition => {
const fieldType = getFieldType(condition.name);
let conditionResults = true;
let checkboxValue = [];
let dropdownValue = fieldType.isMulti ? [] : {};
if (fieldType.type === "checkbox") {
checkboxValue = _customFunctions.default.checkIfEmpty(formValues[condition.name], "A") ? [] : formValues[condition.name];
}
if (fieldType.type === "select") {
dropdownValue = _customFunctions.default.checkIfEmpty(formValues[condition.name]) ? dropdownValue : formValues[condition.name];
}
switch (condition.condition) {
case "===":
case "==":
if (fieldType.type === "checkbox") {
conditionResults = checkboxValue.includes(condition.value);
break;
}
if (fieldType.type === "select") {
if (fieldType.isMulti) {
const values = [...dropdownValue].map(v => v.value);
conditionResults = values.includes(condition.value);
break;
}
conditionResults = dropdownValue.value === condition.value;
break;
}
conditionResults = formValues[condition.name] === condition.value;
break;
case "!=":
if (fieldType === "checkbox") {
conditionResults = !checkboxValue.includes(condition.value);
break;
}
if (fieldType.type === "select") {
if (fieldType.isMulti) {
const values = [...dropdownValue].map(v => v.value);
conditionResults = !values.includes(condition.value);
break;
}
conditionResults = dropdownValue.value !== condition.value;
break;
}
conditionResults = formValues[condition.name] != condition.value;
break;
case ">=":
conditionResults = formValues[condition.name] >= condition.value;
break;
case ">":
conditionResults = formValues[condition.name] > condition.value;
break;
case "<":
conditionResults = formValues[condition.name] < condition.value;
break;
case "<=":
conditionResults = formValues[condition.name] <= condition.value;
break;
case "!empty":
conditionResults = !_customFunctions.default.checkIfEmpty(formValues[condition.name]);
break;
case "empty":
conditionResults = _customFunctions.default.checkIfEmpty(formValues[condition.name]);
break;
default:
conditionResults = true;
break;
}
return conditionResults;
};
const checkPermittedUser = function checkPermittedUser() {
let allowedUsers = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
if (!currentUser || !allowedUsers || !allowedUsers.length) return true;
return allowedUsers.includes(Number(currentUser));
};
const checkDisplayConditions = field => {
if (_customFunctions.default.checkIfEmpty(field.displayWhen, "O")) return true;
if (_customFunctions.default.checkIfEmpty(field.displayWhen.conditions, "A")) return true;
const conditionResults = [];
let displayField = true;
field.displayWhen.conditions.map(condition => {
conditionResults.push(checkFieldCondition(condition));
return condition;
});
// Get all satisfied conditions
const filteredResult = conditionResults.filter(condition => condition);
switch (_customFunctions.default.toLowerCase(field.displayWhen.displayWhenRelation)) {
case "and":
if (filteredResult.length !== conditionResults.length) displayField = false;
break;
case "or":
if (!filteredResult.length) displayField = false;
break;
default:
displayField = true;
}
return displayField;
};
/* get AddMore Field type */
const getAddMoreFieldType = function getAddMoreFieldType() {
var _checkAddMoreAllField, _selectedField$, _selectedField$2;
let fieldName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
let fieldIndex = arguments.length > 1 ? arguments[1] : undefined;
let addMoreFieldName = arguments.length > 2 ? arguments[2] : undefined;
let checkAddMoreAllField = allFormFields.filter(element => element.type === "addmore");
let addMoreIndex = checkAddMoreAllField.findIndex(ele => ele.name == addMoreFieldName);
let checkIsAddmore = /* allFormFields[4] */((_checkAddMoreAllField = checkAddMoreAllField[addMoreIndex]) === null || _checkAddMoreAllField === void 0 ? void 0 : _checkAddMoreAllField.type) === "addmore";
let selectedField;
if (checkIsAddmore) {
var _checkAddMoreAllField2;
selectedField = /* allFormFields[4] */(_checkAddMoreAllField2 = checkAddMoreAllField[addMoreIndex]) === null || _checkAddMoreAllField2 === void 0 ? void 0 : _checkAddMoreAllField2.fields.filter(ele => (ele === null || ele === void 0 ? void 0 : ele.name) === fieldName);
}
if (_customFunctions.default.checkIfEmpty(selectedField, "A")) return "";
return {
type: (_selectedField$ = selectedField[0]) === null || _selectedField$ === void 0 ? void 0 : _selectedField$.type,
isMulti: (_selectedField$2 = selectedField[0]) === null || _selectedField$2 === void 0 ? void 0 : _selectedField$2.isMulti
};
};
/* check AddMore Field Condition*/
const checkAddMoreFieldCondition = (condition, fieldIndex, fieldName) => {
const fieldType = getAddMoreFieldType(condition.name, fieldIndex, fieldName);
let conditionResults = true;
let checkboxValue = [];
let dropdownValue = fieldType.isMulti ? [] : {};
let radioValue = [];
let addMoreKey = /* Object.keys(formValues)?.toString() */fieldName;
if (fieldType.type === "radio") {
radioValue = formValues[addMoreKey] && formValues[addMoreKey][fieldIndex] ? formValues[addMoreKey][fieldIndex][condition === null || condition === void 0 ? void 0 : condition.name] : [];
}
if (fieldType.type === "checkbox") {
checkboxValue = formValues[addMoreKey] && formValues[addMoreKey][fieldIndex] ? formValues[addMoreKey][fieldIndex][condition === null || condition === void 0 ? void 0 : condition.name] : [];
}
if (fieldType.type === "select") {
dropdownValue = formValues[addMoreKey] && formValues[addMoreKey][fieldIndex] ? formValues[addMoreKey][fieldIndex][condition === null || condition === void 0 ? void 0 : condition.name] : [];
}
if (!dropdownValue) return;
if (!checkboxValue) return;
if (!radioValue) return;
switch (condition.condition) {
case "===":
case "==":
if (fieldType.type === "checkbox") {
conditionResults = checkboxValue.includes(condition.value);
break;
}
if (fieldType.type === "radio") {
conditionResults = radioValue.includes(condition.value);
break;
}
if (fieldType.type === "select") {
if (fieldType.isMulti) {
const values = [...dropdownValue].map(v => v.value);
conditionResults = values.includes(condition.value);
break;
}
conditionResults = dropdownValue.value === (condition === null || condition === void 0 ? void 0 : condition.value);
break;
}
conditionResults = formValues[condition.name] === condition.value;
break;
case "!=":
if (fieldType === "checkbox") {
conditionResults = !checkboxValue.includes(condition.value);
break;
}
if (fieldType.type === "radio") {
conditionResults = !radioValue.includes(condition.value);
break;
}
if (fieldType.type === "select") {
if (fieldType.isMulti) {
const values = [...dropdownValue].map(v => v.value);
conditionResults = !values.includes(condition.value);
break;
}
conditionResults = dropdownValue.value !== condition.value;
break;
}
conditionResults = formValues[condition.name] != condition.value;
break;
case ">=":
conditionResults = formValues[condition.name] >= condition.value;
break;
case ">":
conditionResults = formValues[condition.name] > condition.value;
break;
case "<":
conditionResults = formValues[condition.name] < condition.value;
break;
case "<=":
conditionResults = formValues[condition.name] <= condition.value;
break;
case "!empty":
conditionResults = !_customFunctions.default.checkIfEmpty(formValues[condition.name]);
break;
case "empty":
conditionResults = _customFunctions.default.checkIfEmpty(formValues[condition.name]);
break;
default:
conditionResults = true;
break;
}
return conditionResults;
};
/* for Add more Display Condition */
const checkAddMoreDisplayConditions = (field, fieldIndex, fieldName) => {
if (_customFunctions.default.checkIfEmpty(field.displayWhen, "O")) return true;
if (_customFunctions.default.checkIfEmpty(field.displayWhen.conditions, "A")) return true;
const conditionResults = [];
let displayField = true;
field.displayWhen.conditions.map(condition => {
conditionResults.push(checkAddMoreFieldCondition(condition, fieldIndex, fieldName));
return condition;
});
// Get all satisfied conditions
const filteredResult = conditionResults.filter(condition => condition);
switch (_customFunctions.default.toLowerCase(field.displayWhen.displayWhenRelation)) {
case "and":
if (filteredResult.length !== conditionResults.length) displayField = false;
break;
case "or":
if (!filteredResult.length) displayField = false;
break;
default:
displayField = true;
}
let addMoreKey = Object.keys(formValues);
if (!displayField && formValues[fieldName] && formValues[fieldName][fieldIndex] && formValues[fieldName][fieldIndex][field.name]) {
formValues[fieldName][fieldIndex][field.name] = "";
}
return displayField;
};
const getFieldValidation = function getFieldValidation(field) {
let isAddMore = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
let fieldIndex = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
let parentField = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
if (_customFunctions.default.checkIfEmpty(field.validations, "A")) return "";
let validations = "";
field.validations.map(item => {
// If applywhen condition is empty
if (_customFunctions.default.checkIfEmpty(item.applyWhen, "A")) {
if (item.type) validations = "".concat(validations).concat(validations ? "|" : "").concat(item.type);
return item;
}
// If applywhen has some conditions
const conditionResults = [];
item.applyWhen.map(condition => {
conditionResults.push(checkFieldCondition(condition));
return condition;
});
// Get all satisfied conditions
const filteredResult = conditionResults.filter(condition => condition);
switch (_customFunctions.default.toLowerCase(item.applyWhenRelation)) {
case "and":
if (filteredResult.length !== conditionResults.length) return item;
break;
case "or":
if (!filteredResult.length) return item;
break;
default:
return item;
}
if (item.type) validations = "".concat(validations).concat(validations ? "|" : "").concat(item.type);
return item;
});
if (!validations) return "";
let defaultValue = formValues[field.name];
if (isAddMore) {
const fVal = _customFunctions.default.checkIfEmpty(formValues[parentField.name], "A") ? [] : formValues[parentField.name];
if (!fVal[fieldIndex]) fVal[fieldIndex] = {};
const val = fVal[fieldIndex][field.name];
defaultValue = field.type === "date" ? val ? new Date(val) : null : val; //fVal[fieldIndex][field.name];
}
if (field.errorMessage) {
return simpleValidator.current.message(field.label, defaultValue, validations, field.errorMessage);
} else {
return simpleValidator.current.message(field.label, defaultValue, validations);
}
};
const RenderSectionTitle = _ref => {
let {
title,
secIndex
} = _ref;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
className: "",
key: keyId
}, /*#__PURE__*/_react.default.createElement("h5", null, title)), /*#__PURE__*/_react.default.createElement("hr", null));
};
const RenderSectionButton = buttonProps => {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_FormElements.ButtonComponent, buttonProps));
};
const getFieldLayout = function getFieldLayout() {
let layout = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "1column";
let columns = 1;
switch (layout) {
case "1column":
columns = 1;
break;
case "2column":
columns = 2;
break;
case "3column":
columns = 3;
break;
case "4column":
columns = 4;
break;
default:
columns = 1;
}
return columns;
};
const RenderFormField = _ref2 => {
let {
field,
onChange,
isAddMore,
fieldIndex,
parentField
} = _ref2;
const extraProps = {};
if (field.minDateSelector) extraProps.minDate = formValues[field.minDateSelector];
if (field.maxDateSelector) extraProps.maxDate = formValues[field.maxDateSelector];
if (field.type === "date") extraProps.selected = formValues[field.name];
// if (field.type === 'select') {
// extraProps.options = options[field.name] ? dropdownOptions[field.name] : field.options;
// }
if (["select", "checkbox"].includes(field.type)) {
extraProps.options = options[field.name] ? options[field.name] : field.options;
}
if (["checkbox", "radio"].includes(field.type)) {
extraProps.name = "".concat(field.name, "[").concat(fieldIndex, "]");
}
let defaultValue = formValues[field.name];
if (isAddMore) {
const fVal = _customFunctions.default.checkIfEmpty(formValues[parentField.name], "A") ? [] : formValues[parentField.name];
if (!fVal[fieldIndex]) fVal[fieldIndex] = {};
if (field.type === "date") extraProps.selected = fVal[fieldIndex][field.name];
if (field.minDateSelector) extraProps.minDate = fVal[fieldIndex][field.minDateSelector];
if (field.maxDateSelector) extraProps.maxDate = fVal[fieldIndex][field.maxDateSelector];
defaultValue = fVal[fieldIndex][field.name];
}
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_formElementRenderer.default, {
formInput: _objectSpread(_objectSpread(_objectSpread({}, field), extraProps), {}, {
value: defaultValue,
onChange: (0, _react.useCallback)(onChange, []),
errorMessage: getFieldValidation(field, isAddMore, fieldIndex, parentField)
})
}));
};
const addField = field => {
if (addMoreAddCallback) addMoreAddCallback();
const fields = allAddMoreFields[field.name];
const foundFields = allFormFields.filter(f => f.type === "addmore" && f.name === field.name);
const fieldsToAdd = _customFunctions.default.checkIfEmpty(foundFields, "A") ? [] : foundFields[0].fields;
fields.push(fieldsToAdd);
setAddMoreFields(_objectSpread(_objectSpread({}, allAddMoreFields), {}, {
[field.name]: fields
}));
};
const removeField = (field, fieldIndex) => {
/* swal({
title: "Are you sure?",
text: "Are you sure you want to remove field?",
icon: "warning",
dangerMode: true,
// buttons: true,
buttons: ["Cancel", true],
closeOnClickOutside: false,
allowOutsideClick: false,
}). */
_sweetalert2.default.fire({
title: "Are you sure?",
text: "Do you want to remove field?",
icon: "warning",
showCancelButton: true,
confirmButtonColor: "#3E8855",
cancelButtonColor: "#d33",
cancelButtonText: "No",
confirmButtonText: "Yes"
}).then(result => {
if (result !== null && result !== void 0 && result.isConfirmed) {
const fields = [...allAddMoreFields[field.name]];
fields.splice(fieldIndex, 1);
const allVals = _objectSpread({}, formValues);
const fVal = _customFunctions.default.checkIfEmpty(allVals[field.name], "A") ? [] : [...allVals[field.name]];
if (fVal.length) fVal.splice(fieldIndex, 1);
allVals[field.name] = fVal;
setFormValues(allVals);
setAddMoreFields(_objectSpread(_objectSpread({}, allAddMoreFields), {}, {
[field.name]: fields
}));
if (addMoreRemoveCallback) addMoreRemoveCallback(fieldIndex);
}
});
};
const RenderSingleFormField = _ref3 => {
let {
field,
columns
} = _ref3;
const displayField = checkDisplayConditions(field);
if (!displayField) {
formValues[field.name] = "";
}
const isPermittedUser = checkPermittedUser(field.allowedUsers);
const allDisplayFields = displayedFields;
allDisplayFields[field.name] = displayField;
updateDisplayedFields(allDisplayFields);
if (!displayField || !isPermittedUser) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
const col = 12 / Number(columns);
const isAddMoreField = field.type === "addmore";
const addMoreFields = isAddMoreField ? allAddMoreFields[field.name] : [];
const fieldCol = isAddMoreField ? 12 / getFieldLayout(field.fieldLayout) : col;
let addMoreDisplayField;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Col, {
md: col
}, isAddMoreField ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.Row, {
className: field.sectionClass
}, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form.Label, null, field.label), addMoreFields.map((aField, fieldIndex) => {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, aField.map(bField => (addMoreDisplayField = checkAddMoreDisplayConditions(bField, fieldIndex, field === null || field === void 0 ? void 0 : field.name), addMoreDisplayField ? /*#__PURE__*/_react.default.createElement(_reactBootstrap.Col, {
md: fieldCol,
key: keyId
}, /*#__PURE__*/_react.default.createElement(RenderFormField, {
field: _objectSpread({}, bField),
column: col,
onChange: e => {
if (onTextInputChange) {
onTextInputChange(e, formValues);
}
updateFormValues(e, field, fieldIndex, bField);
},
isAddMore: true,
fieldIndex: fieldIndex,
parentField: field
})) : null)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Row, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Col, null, " ", addMoreButtonsSchema !== null && addMoreButtonsSchema !== void 0 && addMoreButtonsSchema[fieldIndex] ? RenderSectionButton(addMoreButtonsSchema === null || addMoreButtonsSchema === void 0 ? void 0 : addMoreButtonsSchema[fieldIndex]) : null)), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Col, {
md: 12,
className: "mb-3"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "btn-group addMoreBtnContainer"
}, (addMoreFields === null || addMoreFields === void 0 ? void 0 : addMoreFields.length) > 1 && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
className: "btn btn-secondary btn-width",
onClick: e => {
e.preventDefault();
removeField(field, fieldIndex);
}
}, "-"), " ", (addMoreFields === null || addMoreFields === void 0 ? void 0 : addMoreFields.length) - 1 === fieldIndex && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
className: "btn btn-primary btn-width mr-5",
onClick: () => addField(field)
}, "+"))));
})) : /*#__PURE__*/_react.default.createElement(RenderFormField, {
field: _objectSpread({}, field),
column: col,
onChange: e => {
if (onTextInputChange) {
onTextInputChange(e, formValues);
}
updateFormValues(e, field);
}
})));
};
const RenderSection = _ref4 => {
let {
section,
secIndex
} = _ref4;
const {
displaySection,
sectionTitle,
displaySectionTitle,
fields,
sectionLayout,
containerClass,
buttonProps
} = section;
const isPermittedUser = checkPermittedUser(section.allowedUsers);
if (!displaySection || !isPermittedUser) return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
let columns = getFieldLayout(sectionLayout);
const sectionButtonProps = sectionButtonCallBacks ? _objectSpread(_objectSpread({}, buttonProps), {}, {
onClick: sectionButtonCallBacks[secIndex]
}) : _objectSpread({}, buttonProps);
const {
type,
variant,
name
} = buttonProps || {};
const hasRequiredKeys = type !== undefined && name !== undefined;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
className: containerClass,
key: keyId
}, displaySectionTitle && /*#__PURE__*/_react.default.createElement(RenderSectionTitle, {
title: sectionTitle,
secIndex: secIndex
}), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Row, null, fields.map((field, fieldIndex) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(RenderSingleFormField, {
field: field,
columns: columns
})))), hasRequiredKeys ? /*#__PURE__*/_react.default.createElement(RenderSectionButton, sectionButtonProps) : null));
};
const validateAndSubmitForm = () => {
if (!simpleValidator.current.allValid()) {
simpleValidator.current.showMessages();
setFormValues(_objectSpread({}, formValues));
return;
}
let finalFormValues = {};
Object.keys(displayedFields).map(field => {
if (displayedFields[field]) {
finalFormValues[field] = formValues[field];
}
return field;
});
if (onFormSubmit) onFormSubmit(finalFormValues);
};
(0, _react.useEffect)(() => {
if (!submitCount) return;
validateAndSubmitForm();
}, [submitCount]);
const submitForm = e => {
e.preventDefault();
updateSubmitCount(submitCount + 1);
};
const onDraftSubmit = e => {
e.preventDefault();
let finalFormValues = {};
Object.keys(displayedFields).map(field => {
if (displayedFields[field]) {
finalFormValues[field] = formValues[field];
}
return field;
});
if (onFormDraft) onFormDraft(finalFormValues);
};
const resetForm = e => {
e.preventDefault();
if (simpleValidator && simpleValidator.current) simpleValidator.current.hideMessages();
setDefaultFormValues(true);
if (onFormReset) onFormReset();
};
const getStepLabels = allSections => {
if (_customFunctions.default.checkIfEmpty(allSections, "A")) return [];
const stepProps = stepperProps.steps || {};
const steps = allSections.map(section => {
const label = stepProps[section.sectionName] && stepProps[section.sectionName].label ? stepProps[section.sectionName].label : section.sectionTitle;
const image = stepProps[section.sectionName] && stepProps[section.sectionName].image ? stepProps[section.sectionName].image : null;
return {
title: label,
icon: image
};
});
return steps;
};
const nextPrevCallback = function nextPrevCallback() {
let next = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
updateIsClickedNext(next);
updateStepCounter(stepCounter + 1);
};
const changeStep = function changeStep() {
let next = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : true;
if (next) {
if (!simpleValidator.current.allValid()) {
simpleValidator.current.showMessages();
setFormValues(_objectSpread({}, formValues));
return;
}
simpleValidator.current.hideMessages();
if (currentStepIndex + 1 > allFormSections.length - 1) return;
updateStepIndex(currentStepIndex + 1);
} else {
if (currentStepIndex - 1 < 0) return;
updateStepIndex(currentStepIndex - 1);
}
};
(0, _react.useEffect)(() => {
if (!stepCounter) return;
changeStep(isClickedNext);
}, [stepCounter]);
simpleValidator.current.purgeFields();
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Form, {
className: "".concat(formClass),
onSubmit: submitForm,
onReset: resetForm
}, isStepForm && /*#__PURE__*/_react.default.createElement("div", {
className: stepperProps.containerClass
}, /*#__PURE__*/_react.default.createElement(_reactStepperHorizontal.default, {
steps: getStepLabels(allFormSections),
activeStep: currentStepIndex
})), allFormSections && allFormSections.map((section, secIndex) => {
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
key: keyId
}, (isStepForm && secIndex === currentStepIndex || !isStepForm) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(RenderSection, {
section: section,
secIndex: secIndex
})));
}), /*#__PURE__*/_react.default.createElement("div", {
className: showBtnClass ? "btn-group mt-5 ".concat(btnContainerClass) : "".concat(btnContainerClass)
}, isStepForm ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
variant: "secondary",
className: "mr-5 prev-btn",
onClick: () => {
nextPrevCallback(false);
}
}, "".concat(stepperProps.prevBtnText || "Prev")), /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
variant: "primary",
className: "next-btn",
onClick: e => {
if (currentStepIndex < allFormSections.length - 1) nextPrevCallback(true);else submitForm(e);
}
}, currentStepIndex < allFormSections.length - 1 ? "".concat(stepperProps.nextBtnText || "Next") : "".concat(submitBtnText || "Submit"))) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
variant: "primary",
className: "mr-5",
type: "submit"
}, "".concat(submitBtnText || "Submit")), " ", showResetBtn && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
variant: "secondary",
className: "mr-5",
type: "reset"
}, "".concat(resetBtnText || "Reset")), " ", showDraftBtn && /*#__PURE__*/_react.default.createElement(_reactBootstrap.Button, {
variant: "success",
onClick: e => {
onDraftSubmit(e);
}
}, "".concat(draftBtnText || "Save Draft"))))));
}