kwikid-components-react
Version:
KwikID's Component Library in React
1,044 lines (1,025 loc) • 51.1 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _kwikidToolkit = require("kwikid-toolkit");
var _react = _interopRequireDefault(require("react"));
var _Loader = _interopRequireDefault(require("../../kwikui/loader/Loader"));
var _configConverter = require("../config-converter/config-converter");
var _configConverter2 = require("../config-converter/config-converter.helper");
var _formViewActions = require("../definitions/form-view.actions.definition");
var _formViewApis = require("../definitions/form-view.apis.definition");
var _formViewCommons = require("../definitions/form-view.commons.definition");
var _formViewFields = require("../definitions/form-view.fields.definition");
var _formViewApis2 = require("../helpers/form-view.apis.helper");
var _formViewDefaults = require("../helpers/form-view.defaults.helper");
var _formViewFields2 = require("../helpers/form-view.fields.helper");
var _formView = require("../helpers/form-view.general");
var _Forms = require("./Forms.helper");
var _Forms2 = require("./Forms.style");
var _FormFields = _interopRequireDefault(require("./form-fields/FormFields"));
var _FormFooter = _interopRequireDefault(require("./form-footer/FormFooter"));
var _FormHeader = _interopRequireDefault(require("./form-header/FormHeader"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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); }
function useTraceUpdate(props) {
const prev = _react.default.useRef(props);
_react.default.useEffect(() => {
const changedProps = Object.entries(props).reduce((ps, _ref) => {
let [k, v] = _ref;
if (prev.current[k] !== v) {
ps[k] = [prev.current[k], v];
}
return ps;
}, {});
if (Object.keys(changedProps).length > 0) {
console.log("Changed Forms.tsx props:", changedProps);
}
prev.current = props;
});
}
const KwikIDFormView = _ref2 => {
var _formConfigRef$curren, _formConfigRef$curren2, _formConfigRef$curren3, _formConfigRef$curren4, _formConfigRef$curren5, _formConfigRef$curren6, _formConfigRef$curren7, _formConfigRef$curren8, _formConfigRef$curren9, _formConfigRef$curren0, _formConfigRef$curren1, _formConfigRef$curren10, _getFormFields, _getFormData, _formConfigRef$curren11, _formConfigRef$curren12, _formConfigRef$curren13, _formConfigRef$curren14, _formConfigRef$curren15, _formConfigRef$curren16, _formConfigRef$curren17, _formConfigRef$curren18;
let {
config = {},
data = {},
getData = undefined,
getSavedData = undefined
} = _ref2;
const [loading, setLoading] = _react.default.useState(true);
const [apiLoading, setApiLoading] = _react.default.useState(false);
const [isInitialConfigLoaded, setIsInitialConfigLoaded] = _react.default.useState(false);
const [isExecutingAction, setIsExecutingAction] = _react.default.useState(false);
const formConfigRef = _react.default.useRef(undefined);
const [formConfig, setFormConfig] = _react.default.useState(undefined);
const getFormConfig = (0, _formView.logMethodReact)("getFormConfig")(() => {
return formConfigRef.current;
});
const updateFormConfig = (0, _formView.logMethodReact)("updateFormConfig")(formConfig => {
formConfigRef.current = formConfig;
setFormConfig(formConfig);
});
const [formFieldGroups, setFormFieldGroups] = _react.default.useState({});
const formFieldsRef = _react.default.useRef(undefined);
const [formFields, setFormFields] = _react.default.useState(undefined);
const getFormFields = (0, _formView.logMethodReact)("getFormFields")(() => {
return formFieldsRef.current;
});
const updateFormFields = (0, _formView.logMethodReact)("updateFormFields")(formFields => {
formFieldsRef.current = formFields;
setFormFields(formFields);
});
const formDataRef = _react.default.useRef(data);
const [formData, setFormData] = _react.default.useState(data);
const getFormData = (0, _formView.logMethodReact)("getFormData")(() => {
return formDataRef.current;
});
const updateFormData = (0, _formView.logMethodReact)("updateFormData")(formData => {
delete formData.undefined;
formDataRef.current = formData;
setFormData(formData);
});
useTraceUpdate({
config,
loading,
formConfig,
formData
});
// Component onLoad useEffect
_react.default.useEffect(() => {
if (isInitialConfigLoaded) {
const defaultFormData = {};
// Get Default Form Data Values
const processField = (0, _formView.logMethodReact)("updateFormFields")(async field => {
if (!field.isFormElement) return;
const defaults = new _formViewDefaults.Defaults(field, getFormFields(), getFormData(), takeAction);
let value = "";
if ((0, _kwikidToolkit.checkObjectKeyExists)(field, "default")) {
if ((0, _kwikidToolkit.checkObjectKeyExists)(field.default, "value")) {
value = await defaults.getFormFieldValue();
defaultFormData[field.key] = value;
}
if ((0, _kwikidToolkit.checkObjectKeyExists)(field.default, "api")) {
await defaults.getFormFieldApiValue();
}
if ((0, _kwikidToolkit.checkObjectKeyExists)(field.default, "options")) {
if (field.default.options.triggers.includes("ON_INIT")) {
await defaults.getFormFieldOptions();
}
}
}
return (0, _formViewFields2.convertFormFieldValueToKwikUIFormat)(field, value);
});
const processAllFields = (0, _formView.logMethodReact)("updateFormFields")(async () => {
const promises = getFormFields().map(processField);
const results = await Promise.all(promises);
updateFormData(defaultFormData);
setTimeout(() => {
setLoading(false);
}, 300);
return results;
});
// Execute the async function
processAllFields();
getFormFields().forEach(field => {
if (field.isFormElement && (0, _kwikidToolkit.checkObjectKeyExists)(field, "validation") && field.validation.triggers.includes("ON_INIT")) {
const validations = new _kwikidToolkit.Validation({
FIELD_CONFIG: field,
FORM_FIELDS: getFormFields(),
FORM_DATA: getFormData()
}, takeAction);
(async () => {
await validations.validate(field.validation);
})();
}
if (field.isFormElement && (0, _kwikidToolkit.checkObjectKeyExists)(field, "connectedElements")) {
handleConnectedElements({
key: field.key,
value: getFormData()[field.key]
}, "ON_INIT");
}
});
}
}, [isInitialConfigLoaded]);
_react.default.useEffect(() => {
setLoading(true);
// Convert Config
const converter = new _configConverter.Converter();
const formattedConfig = converter.convertFormConfig(config);
updateFormConfig(formattedConfig);
const {
fields
} = formattedConfig;
updateFormFields(fields);
const {
fieldGroups
} = formattedConfig;
setFormFieldGroups(fieldGroups);
setIsInitialConfigLoaded(true);
}, [config]);
const handleOnInputChange = (0, _formView.logMethodReact)("handleOnInputChange")((key, value) => {
const field = (0, _Forms.findFormFieldFromKey)(getFormFields() || [], key);
const formattedValue = (0, _formViewFields2.convertFormFieldValueToStandardFormat)(field, value);
updateFormData(_objectSpread(_objectSpread({}, getFormData()), {}, {
[key]: formattedValue
}));
getData(getFormData());
if (field.isFormElement && (0, _kwikidToolkit.checkObjectKeyExists)(field, "validation") && field.validation.triggers.includes("ON_CHANGE")) {
const validations = new _kwikidToolkit.Validation({
FIELD_CONFIG: field,
FORM_FIELDS: getFormFields(),
FORM_DATA: getFormData()
}, takeAction);
(async () => {
await validations.validate(field.validation);
})();
}
if (field.isFormElement && (0, _kwikidToolkit.checkObjectKeyExists)(field, "connectedElements")) {
handleConnectedElements({
key: field.key,
value
}, "ON_CHANGE");
}
});
const handleOnInputValidation = _react.default.useCallback((0, _formView.logMethodReact)("handleOnInputValidation")((id, value) => {
const field = (0, _formViewFields2.getFormFieldByKey)(getFormFields(), id);
if ((0, _kwikidToolkit.checkObjectKeyExists)(field === null || field === void 0 ? void 0 : field.validators, "pattern")) {
let pattern;
if (field.validators.pattern.key === "CUSTOM") {
pattern = new RegExp(field.validators.pattern.pattern);
} else {
pattern = new RegExp(_kwikidToolkit.PATTERNS[field.validators.pattern.key]);
}
// Returning undefined for now since this is doing an on change validation which is not controlled through config for now.
// return { isValid: new RegExp(pattern).test(value) };
return undefined;
}
return undefined;
}), []);
const handleOnClickResetFormFields = (0, _formView.logMethodReact)("handleOnClickResetFormFields")(async field => {
var _field$properties;
const resetFormFields = async () => {
if (field !== null && field !== void 0 && field.reset) {
for (const f of field === null || field === void 0 ? void 0 : (_field$reset = field.reset) === null || _field$reset === void 0 ? void 0 : _field$reset.fields) {
var _field$reset;
setIsExecutingAction(true);
for (const action of f.actions) {
const resetField = (0, _formViewFields2.getFormFieldByKey)(getFormFields(), action.props.fieldKey);
const actions = new _kwikidToolkit.Action(action, {}, {
FORM_FIELDS: getFormFields(),
FIELD_CONFIG: resetField,
FORM_DATA: getFormData()
}, takeAction);
await actions.execute();
}
setTimeout(() => {
setIsExecutingAction(false);
}, 300);
}
}
};
const BYPASS_RESET_CONFIRM = field === null || field === void 0 ? void 0 : (_field$properties = field.properties) === null || _field$properties === void 0 ? void 0 : _field$properties.bypassResetConfirmation;
if (!BYPASS_RESET_CONFIRM) {
const CONFIRM_RESET = window.confirm("This action will reset all the fields. Do you still want to continue?");
if (CONFIRM_RESET) {
await resetFormFields();
}
} else {
await resetFormFields();
}
});
const handleOnClickSaveForm = (0, _formView.logMethodReact)("handleOnClickSaveForm")(e => {
e.preventDefault();
// Perform validation checks
let isValid = true;
const newFormErrors = {};
updateFormFields(getFormFields().map(field => {
var _field$validators, _field$validators2;
let isFieldValid = true;
// Reset Field Messages before setting new error messages.
field.messages = [];
if (!(field !== null && field !== void 0 && field.disabled) && !field.hidden && field !== null && field !== void 0 && (_field$validators = field.validators) !== null && _field$validators !== void 0 && _field$validators.required && field.isFormElement && !getFormData()[field.key]) {
isValid = false;
isFieldValid = false;
field.messages = [{
type: "error",
message: "".concat(field.label, " is required!")
}];
}
if (isFieldValid && !(field !== null && field !== void 0 && field.disabled) && !field.hidden && field.isFormElement && field !== null && field !== void 0 && (_field$validators2 = field.validators) !== null && _field$validators2 !== void 0 && _field$validators2.pattern && (0, _kwikidToolkit.isNotEmptyValue)(field.validators.pattern)) {
if ((0, _kwikidToolkit.checkObjectKeyExists)(field.validators.pattern, "key")) {
let pattern;
if (field.validators.pattern.key === "CUSTOM") {
pattern = new RegExp(field.validators.pattern.pattern);
} else {
pattern = new RegExp(_kwikidToolkit.PATTERNS[field.validators.pattern.key]);
}
if (!RegExp(pattern).test(getFormData()[field.key])) {
isValid = false;
isFieldValid = false;
field.messages = [{
type: "error",
message: "".concat(field.label, " has incorrect pattern!")
}];
}
}
}
return field;
}));
// If validation fails, return early and prevent form submission
if (!isValid) {
return;
}
getFormFields().forEach(field => {
if (field.isFormElement && !field.hidden && !field.disabled && (0, _kwikidToolkit.checkObjectKeyExists)(field, "validation") && field.validation.triggers.includes("ON_SAVE")) {
const validations = new _kwikidToolkit.Validation({
FIELD_CONFIG: field,
FORM_FIELDS: getFormFields(),
FORM_DATA: getFormData()
}, takeAction);
(async () => {
await validations.validate(field.validation);
})();
if (!field.validation.is_valid) {
isValid = false;
toggleErrorNotification(true);
setTimeout(() => {
toggleErrorNotification(false);
}, 3000);
} else {
isValid = true;
}
}
});
// If validation fails, return early and prevent form submission
if (!isValid) {
return;
}
// If validation passes, continue with form submission logic
if (isValid) {
const localFormData = getFormData();
for (const field of getFormFields()) {
if (field.isFormElement) {
if (field.hidden) {
delete localFormData[field.key];
} else {
localFormData[field.key] = (0, _formViewFields2.convertFormFieldValueToStandardFormat)(field, getFormData()[field.key]);
}
}
}
const localExtendedFormData = getFormFields().reduce((result, field, index) => {
if (field.isFormElement && !field.hidden) {
const fieldData = {
[field.key]: {
key: field.key,
label: field.label,
value: (0, _kwikidToolkit.isEmptyValue)(formData[field.key]) ? "" : formData[field.key],
type: field.type,
index
}
};
result[field.key] = fieldData[field.key];
}
return result;
}, {});
Object.keys(localFormData).map(key => {
if ((0, _kwikidToolkit.isEmptyValue)(localFormData[key])) {
localFormData[key] = "";
}
delete localFormData.undefined;
});
getSavedData({
formConfig,
data: localFormData,
extendedData: localExtendedFormData
});
}
});
const handleConnectedElementFieldGroupActions = (0, _formView.logMethodReact)("handleConnectedElementFieldGroupActions")(async (childFieldGroupConfig, parentField) => {
if ((0, _kwikidToolkit.checkObjectKeyExists)(childFieldGroupConfig, "rules")) {
const rulesMapping = new _kwikidToolkit.Rule(childFieldGroupConfig.rules, {
FIELD_CONFIG: parentField,
FORM_DATA: getFormData()
}).mapping();
for (const action of childFieldGroupConfig.actions) {
setIsExecutingAction(true);
const conditionSuccess = new _kwikidToolkit.Condition(action.condition, rulesMapping).evaluate();
if (conditionSuccess) {
const actions = new _kwikidToolkit.Action(action, rulesMapping, {
FIELD_CONFIG: parentField,
FORM_FIELDS: getFormFields(),
FORM_DATA: getFormData()
}, takeActionOnFieldGroup);
await actions.execute();
}
}
setTimeout(() => {
setIsExecutingAction(false);
}, 300);
}
});
const handleConnectedElementFieldGroup = (0, _formView.logMethodReact)("handleConnectedElementFieldGroup")(async (currentField, connectedFieldGroupConfig, eventType) => {
if ((0, _kwikidToolkit.checkObjectKeyExists)(connectedFieldGroupConfig, "triggers")) {
if (connectedFieldGroupConfig.triggers.includes(eventType)) {
await handleConnectedElementFieldGroupActions(connectedFieldGroupConfig, currentField);
}
}
});
const handleConnectedElementFieldActions = (0, _formView.logMethodReact)("handleConnectedElementFieldActions")(async (connectedFieldConfig, connectedField) => {
if ((0, _kwikidToolkit.checkObjectKeyExists)(connectedFieldConfig, "rules")) {
const rulesMapping = new _kwikidToolkit.Rule(connectedFieldConfig.rules, {
FIELD_CONFIG: connectedField,
FORM_DATA: getFormData()
}).mapping();
for (const action of connectedFieldConfig.actions) {
setIsExecutingAction(true);
const conditionSuccess = new _kwikidToolkit.Condition(action.condition, rulesMapping).evaluate();
if (conditionSuccess) {
const actions = new _kwikidToolkit.Action(action, rulesMapping, {
FORM_FIELDS: getFormFields(),
FIELD_CONFIG: connectedField,
FORM_DATA: getFormData()
}, takeAction);
await actions.execute();
}
}
setTimeout(() => {
setIsExecutingAction(false);
}, 300);
}
return connectedField;
});
const handleConnectedElementFields = (0, _formView.logMethodReact)("handleConnectedElementFields")(async (currentField, connectedFieldConfig, eventType, nested) => {
let connectedField = (0, _formViewFields2.getFormFieldByKey)(getFormFields(), connectedFieldConfig.key);
if ((0, _kwikidToolkit.checkObjectKeyExists)(connectedFieldConfig, "triggers")) {
if (connectedFieldConfig.triggers.includes(eventType)) {
connectedField = await handleConnectedElementFieldActions(connectedFieldConfig, connectedField);
}
}
if ((0, _kwikidToolkit.checkObjectKeyExists)(connectedFieldConfig, "handleNestedFields")) {
if (connectedFieldConfig.handleNestedFields) {
handleConnectedElements({
key: connectedFieldConfig.key
}, eventType);
}
}
return currentField;
});
const handleConnectedElements = (0, _formView.logMethodReact)("handleConnectedElements")(async (e, eventType) => {
let currentField = (0, _formViewFields2.getFormFieldByKey)(getFormFields(), e.key);
if (currentField !== undefined) {
if ((0, _kwikidToolkit.checkObjectKeyExists)(currentField, "connectedElements")) {
if ((0, _kwikidToolkit.checkObjectKeyExists)(currentField.connectedElements, "connectedFieldGroups")) {
const {
connectedFieldGroups
} = currentField.connectedElements;
for (const connectedFieldGroupConfig of connectedFieldGroups) {
await handleConnectedElementFieldGroup(currentField, connectedFieldGroupConfig, eventType);
}
}
if ((0, _kwikidToolkit.checkObjectKeyExists)(currentField.connectedElements, "connectedFields")) {
const {
connectedFields
} = currentField.connectedElements;
for (const connectedFieldConfig of connectedFields) {
currentField = await handleConnectedElementFields(currentField, connectedFieldConfig, eventType, eventType);
}
}
}
} else {
throw new Error("Field for the given key ['".concat(e.key, "'] is not found with eventType: '").concat(eventType, "'."));
}
});
const [showErrorNotification, setShowErrorNotification] = _react.default.useState(false);
const toggleErrorNotification = (0, _formView.logMethodReact)("toggleErrorNotification")(show => {
setShowErrorNotification(show);
});
// API Call Logic
const handleFieldApiCall = (0, _formView.logMethodReact)("handleFieldApiCall")(async (field, api) => {
api = await executeApiCall(api, {
FIELD_CONFIG: field,
API_CONFIG: api,
FORM_FIELDS: getFormFields(),
FORM_DATA: getFormData()
});
if (isValidRequestHeadersAndBody(api)) {
if ((0, _kwikidToolkit.checkObjectKeyExists)(field.api, "request")) {
updateFormData(_objectSpread(_objectSpread({}, getFormData()), {}, {
[field.key]: api.response.value
}));
}
const apis = new _formViewApis2.Apis({
FIELD_CONFIG: field,
API_CONFIG: api,
API_RESPONSE: api.response,
FORM_FIELDS: getFormFields(),
FORM_DATA: getFormData()
}, takeAction);
api = await apis.validateResponse();
} else {
setTimeout(() => {
field.api.status.value = _formViewApis.EApiStatusType.FAILED;
field.showLoader = false;
}, 500);
}
return {
field,
api
};
});
const handleApiCall = (0, _formView.logMethodReact)("handleApiCall")(async api => {
api = await executeApiCall(api, {
FORM_CONFIG: formConfig,
API_CONFIG: api,
FORM_FIELDS: getFormFields(),
FORM_DATA: getFormData()
});
const apis = new _formViewApis2.Apis({
FORM_CONFIG: formConfig,
API_CONFIG: api,
FORM_FIELDS: getFormFields(),
FORM_DATA: getFormData()
}, takeAction);
if (isValidRequestHeadersAndBody(api)) {
api = await apis.validateResponse();
}
return {
api
};
});
const executeApiCall = (0, _formView.logMethodReact)("executeApiCall")(async (api, object) => {
const apis = new _formViewApis2.Apis(object, takeAction);
api = await apis.setUrl();
api = await apis.setRequestHeaders();
api = await apis.validateRequestHeaders();
api = await apis.setRequestBody();
api = await apis.validateRequestBody();
let apiCallResponse = {};
let apiCallResponseStatusCode;
if (isValidRequestHeadersAndBody(api)) {
if (api.request.url.hasOwnProperty("type") && api.request.url.type === _formViewApis.EApiRequestUrlType.MOCK) {
var _api$request$url$prop, _api$request$url$prop2;
apiCallResponse = await new Promise(resolve => {
setTimeout(() => {
resolve(api.request.url.props.mockedData);
}, 1000); // 1000 ms = 1 sec
});
apiCallResponseStatusCode = (_api$request$url$prop = (_api$request$url$prop2 = api.request.url.props) === null || _api$request$url$prop2 === void 0 ? void 0 : _api$request$url$prop2.statusCode) !== null && _api$request$url$prop !== void 0 ? _api$request$url$prop : 200; // Default Status Code for Mocked APIs
} else {
var _api$request$method, _api$request, _api$request2, _api$request2$headers;
const url = api.request.url.value;
const method = (_api$request$method = (_api$request = api.request) === null || _api$request === void 0 ? void 0 : _api$request.method) !== null && _api$request$method !== void 0 ? _api$request$method : "POST";
const headers = _objectSpread({
"Content-Type": "application/json"
}, ((_api$request2 = api.request) === null || _api$request2 === void 0 ? void 0 : (_api$request2$headers = _api$request2.headers) === null || _api$request2$headers === void 0 ? void 0 : _api$request2$headers.value) || {});
if (method === "GET") {
try {
const response = await fetch(url, {
method,
headers: _objectSpread({}, headers)
});
apiCallResponse = await response.json();
apiCallResponseStatusCode = response.status;
} catch (err) {
apiCallResponse = {};
}
} else {
var _api$request$body$val, _api, _api$request3, _api$request3$body, _api2, _api2$request, _api2$request$body;
let body = JSON.stringify((_api$request$body$val = (_api = api) === null || _api === void 0 ? void 0 : (_api$request3 = _api.request) === null || _api$request3 === void 0 ? void 0 : (_api$request3$body = _api$request3.body) === null || _api$request3$body === void 0 ? void 0 : _api$request3$body.value) !== null && _api$request$body$val !== void 0 ? _api$request$body$val : {});
const isSecure = (_api2 = api) === null || _api2 === void 0 ? void 0 : (_api2$request = _api2.request) === null || _api2$request === void 0 ? void 0 : (_api2$request$body = _api2$request.body) === null || _api2$request$body === void 0 ? void 0 : _api2$request$body.isSecure;
if (isSecure) {
body = (0, _kwikidToolkit.encryptWithAES)(body);
}
try {
var _api3, _api3$response;
const response = await fetch(url, {
method,
headers: _objectSpread({}, headers),
body
});
const isSecure = (_api3 = api) === null || _api3 === void 0 ? void 0 : (_api3$response = _api3.response) === null || _api3$response === void 0 ? void 0 : _api3$response.isSecure;
if (isSecure) {
const encryptedResponse = await response.text();
const decryptedResponse = (0, _kwikidToolkit.decryptWithAES)(encryptedResponse);
apiCallResponse = JSON.parse(decryptedResponse);
} else {
apiCallResponse = await response.json();
}
apiCallResponseStatusCode = response.status;
} catch (err) {
apiCallResponse = {};
}
}
}
api.response = (0, _kwikidToolkit.setValueToObjectPath)(api.response, "value", apiCallResponse);
api.response = (0, _kwikidToolkit.setValueToObjectPath)(api.response, "status", apiCallResponseStatusCode);
}
return api;
});
const isValidRequestHeadersAndBody = (0, _formView.logMethodReact)("isValidRequestHeadersAndBody")(api => {
var _api$request4, _api$request4$body, _api$request5, _api$request6, _api$request6$headers, _api$request7;
const bodyValidation = (api === null || api === void 0 ? void 0 : (_api$request4 = api.request) === null || _api$request4 === void 0 ? void 0 : (_api$request4$body = _api$request4.body) === null || _api$request4$body === void 0 ? void 0 : _api$request4$body.validation) || (api === null || api === void 0 ? void 0 : (_api$request5 = api.request) === null || _api$request5 === void 0 ? void 0 : _api$request5.body);
const headersValidation = (api === null || api === void 0 ? void 0 : (_api$request6 = api.request) === null || _api$request6 === void 0 ? void 0 : (_api$request6$headers = _api$request6.headers) === null || _api$request6$headers === void 0 ? void 0 : _api$request6$headers.validation) || (api === null || api === void 0 ? void 0 : (_api$request7 = api.request) === null || _api$request7 === void 0 ? void 0 : _api$request7.headers);
if (!bodyValidation && !headersValidation) {
return false;
}
return ((bodyValidation === null || bodyValidation === void 0 ? void 0 : bodyValidation.is_valid) || false) && ((headersValidation === null || headersValidation === void 0 ? void 0 : headersValidation.is_valid) || false);
});
const handleOnClickApiCall = (0, _formView.logMethodReact)("handleOnClickApiCall")(async field => {
if (field.type === _formViewFields.EFieldType.API) {
// set button status to loading
field.api.status.value = _formViewApis.EApiStatusType.LOADING;
// field["showLoader"] = true; // TODO
setApiLoading(true);
// Determine API Call time
if ((0, _kwikidToolkit.checkObjectKeyExists)(field.api, "request")) {
await handleFieldApiCall(field, field === null || field === void 0 ? void 0 : field.api);
} else {
const apis = new _formViewApis2.Apis({
FIELD_CONFIG: field,
API_CONFIG: field.api,
FORM_FIELDS: getFormFields(),
FORM_DATA: getFormData()
}, takeAction);
await apis.callNextApi(field.api.entrypoint);
}
setTimeout(() => {
setApiLoading(false);
}, 300);
}
});
// Component Helpers
const fieldHide = (0, _formView.logMethodReact)("fieldHide")(fieldKey => {
const fields = getFormFields();
const field = (0, _formViewFields2.getFormFieldByKey)(fields, fieldKey);
const fieldIndex = (0, _formViewFields2.getFormFieldIndexByKey)(fields, fieldKey);
field.hidden = true;
fields[fieldIndex] = field;
updateFormFields(fields);
});
const fieldGroupHide = (0, _formView.logMethodReact)("fieldGroupHide")(fieldGroup => {
for (const fieldKey of formFieldGroups[fieldGroup]) {
fieldHide(fieldKey);
}
});
const fieldShow = (0, _formView.logMethodReact)("fieldShow")(fieldKey => {
const fields = getFormFields();
const fieldIndex = (0, _formViewFields2.getFormFieldIndexByKey)(fields, fieldKey);
const field = fields[fieldIndex];
field.hidden = false;
fields[fieldIndex] = (0, _kwikidToolkit.getObjectDeepCopy)(field);
updateFormFields(fields);
});
const fieldGroupShow = (0, _formView.logMethodReact)("fieldGroupShow")(fieldGroup => {
for (const fieldKey of formFieldGroups[fieldGroup]) {
fieldShow(fieldKey);
}
});
const fieldDisable = (0, _formView.logMethodReact)("fieldDisable")(fieldKey => {
const fields = getFormFields();
const fieldIndex = (0, _formViewFields2.getFormFieldIndexByKey)(fields, fieldKey);
const field = fields[fieldIndex];
if (field.isFormElement) {
field.disabled = true;
} else if (field.type === _formViewFields.EFieldType.BUTTON) {
field.disabled = true;
}
fields[fieldIndex] = (0, _kwikidToolkit.getObjectDeepCopy)(field);
updateFormFields(fields);
});
const fieldGroupDisable = (0, _formView.logMethodReact)("fieldGroupDisable")(fieldGroup => {
for (const fieldKey of formFieldGroups[fieldGroup]) {
fieldDisable(fieldKey);
}
});
const fieldEnable = (0, _formView.logMethodReact)("fieldEnable")(fieldKey => {
const fields = getFormFields();
const fieldIndex = (0, _formViewFields2.getFormFieldIndexByKey)(fields, fieldKey);
const field = fields[fieldIndex];
if (field.isFormElement) {
field.disabled = false;
} else if (field.type === _formViewFields.EFieldType.BUTTON) {
field.disabled = false;
}
fields[fieldIndex] = (0, _kwikidToolkit.getObjectDeepCopy)(field);
updateFormFields(fields);
});
const fieldGroupEnable = (0, _formView.logMethodReact)("fieldGroupEnable")(fieldGroup => {
for (const fieldKey of formFieldGroups[fieldGroup]) {
fieldEnable(fieldKey);
}
});
const fieldReset = (0, _formView.logMethodReact)("fieldReset")(fieldKey => {
// Find the field and its index in the formFields array
const fields = getFormFields();
const fieldIndex = (0, _formViewFields2.getFormFieldIndexByKey)(fields, fieldKey);
let field = fields[fieldIndex];
// Reset the value of the field in the formGroup
const resetValue = (0, _formViewFields2.convertFormFieldEmptyValueToKwikUIFormat)(field);
// Reset the messages and errors for the field
field = (0, _formViewFields2.removeFormFieldMessage)(field, {
type: _formViewCommons.EMessageType.WARNING,
message: ""
});
field = (0, _formViewFields2.removeFormFieldMessage)(field, {
type: _formViewCommons.EMessageType.SUCCESS,
message: ""
});
fieldErrorHide(fieldKey, {
type: _formViewCommons.EMessageType.ERROR,
message: ""
});
// Reset the value of the field in the formFields array
switch (field.type) {
case _formViewFields.EFieldType.API:
const fieldApiCall = field;
fieldApiCall.api.status.value = _formViewApis.EApiStatusType.DEFAULT;
field = fieldApiCall;
break;
default:
field.focus = false;
field.invalid = false;
field = field;
break;
}
fields[fieldIndex] = field;
updateFormData(_objectSpread(_objectSpread({}, getFormData()), {}, {
[fieldKey]: resetValue
}));
updateFormFields(fields);
});
const fieldErrorShow = (0, _formView.logMethodReact)("fieldErrorShow")((fieldKey, message) => {
const fields = getFormFields();
const fieldIndex = (0, _formViewFields2.getFormFieldIndexByKey)(fields, fieldKey);
let field = fields[fieldIndex];
field = (0, _formViewFields2.highlightFormFieldError)(field, true);
field = (0, _formViewFields2.appendFormFieldMessage)(field, message);
fields[fieldIndex] = field;
updateFormFields(fields);
});
const fieldErrorHide = (0, _formView.logMethodReact)("fieldErrorHide")((fieldKey, message) => {
const fields = getFormFields();
const fieldIndex = (0, _formViewFields2.getFormFieldIndexByKey)(fields, fieldKey);
let field = fields[fieldIndex];
field = (0, _formViewFields2.highlightFormFieldError)(field, false);
field = (0, _formViewFields2.removeFormFieldMessage)(field, message);
fields[fieldIndex] = field;
updateFormFields(fields);
});
const fieldMessageShow = (0, _formView.logMethodReact)("fieldMessageShow")((fieldKey, message) => {
const fields = getFormFields();
const fieldIndex = (0, _formViewFields2.getFormFieldIndexByKey)(fields, fieldKey);
let field = fields[fieldIndex];
field = (0, _formViewFields2.appendFormFieldMessage)(field, message);
fields[fieldIndex] = field;
updateFormFields(fields);
});
const fieldMessageHide = (0, _formView.logMethodReact)("fieldMessageHide")((fieldKey, message) => {
const fields = getFormFields();
const fieldIndex = (0, _formViewFields2.getFormFieldIndexByKey)(fields, fieldKey);
let field = fields[fieldIndex];
field = (0, _formViewFields2.removeFormFieldMessage)(field, message);
fields[fieldIndex] = field;
updateFormFields(fields);
});
const setValue = (0, _formView.logMethodReact)("setValue")(async (action, object) => {
const source = new _kwikidToolkit.Source(object);
const sourceValue = await source.getValueFromSource(action.props.value.source);
source.setValueToSource(action.props.value.destination, sourceValue);
object.FIELD_CONFIG = source.object.FIELD_CONFIG;
const fields = getFormFields();
const fieldIndex = (0, _formViewFields2.getFormFieldIndexByKey)(fields, object.FIELD_CONFIG.key);
fields[fieldIndex] = object.FIELD_CONFIG;
updateFormData(source.object.FORM_DATA);
updateFormFields(fields);
});
const setFieldDefaultValue = (0, _formView.logMethodReact)("setFieldDefaultValue")(async (action, object) => {
const source = new _kwikidToolkit.Source(object);
const sourceValue = await source.getValueFromSource(action.props.value.source);
source.setValueToSource({
key: _kwikidToolkit.ESourceKey.OBJECT,
props: {
object: {
key: "FIELD_CONFIG",
path: "default.value.value"
}
}
}, sourceValue);
source.setValueToSource({
key: _kwikidToolkit.ESourceKey.OBJECT,
props: {
object: {
key: "FORM_DATA",
path: String(action.props.fieldKey)
}
}
}, sourceValue);
object.FIELD_CONFIG = source.object.FIELD_CONFIG;
const fields = getFormFields();
const fieldIndex = (0, _formViewFields2.getFormFieldIndexByKey)(fields, object.FIELD_CONFIG.key);
fields[fieldIndex] = object.FIELD_CONFIG;
updateFormData(source.object.FORM_DATA);
updateFormFields(fields);
});
const setFieldValidity = (0, _formView.logMethodReact)("setFieldValidity")(async (action, object) => {
const source = new _kwikidToolkit.Source(object);
const sourceValue = action.props.valid;
source.setValueToSource({
key: _kwikidToolkit.ESourceKey.OBJECT,
props: {
object: {
key: "FIELD_CONFIG",
path: "validation.is_valid"
}
}
}, sourceValue);
object.API_CONFIG = source.object.API_CONFIG;
});
const setDropdownOptions = (0, _formView.logMethodReact)("setDropdownOptions")(async (action, object) => {
const source = new _kwikidToolkit.Source(object);
let sourceValue = await source.getValueFromSource(action.props.value.source);
if ((0, _kwikidToolkit.checkObjectKeyExists)(action.props, "options")) {
if ((0, _kwikidToolkit.checkObjectKeyExists)(action.props.options, "appendToPath")) {
const appendToPath = await source.getValueFromSource(action.props.options.appendToPath.source);
if ((0, _kwikidToolkit.isNotEmptyValue)(appendToPath)) {
const appendToPathStr = (0, _kwikidToolkit.replaceString)(appendToPath.match("".concat(action.props.options.appendToPath.filterSourceValue))[0], "[^a-zA-Z0-9_]", "_");
const optionsPath = "".concat(action.props.options.path).concat(appendToPathStr);
sourceValue = (0, _kwikidToolkit.getObjectValueFromPath)(sourceValue, optionsPath);
}
} else {
sourceValue = (0, _kwikidToolkit.getObjectValueFromPath)(sourceValue, action.props.options.path);
}
}
source.setValueToSource(action.props.value.destination, sourceValue);
object.FIELD_CONFIG = source.object.FIELD_CONFIG;
const fields = getFormFields();
const fieldIndex = (0, _formViewFields2.getFormFieldIndexByKey)(fields, object.FIELD_CONFIG.key);
fields[fieldIndex] = object.FIELD_CONFIG;
updateFormData(source.object.FORM_DATA);
updateFormFields(fields);
});
const apiCall = (0, _formView.logMethodReact)("apiCall")(async (action, object) => {
let apiConfig = formConfig.apis[action.props.formApiKey];
const response = await handleApiCall(apiConfig);
apiConfig = response.api;
updateFormConfig((0, _kwikidToolkit.setValueToObjectPath)(formConfig, "apis.".concat(action.props.formApiKey), apiConfig));
updateFormData((0, _kwikidToolkit.mergeObjects)(formData, {
[action.props.formApiKey]: apiConfig.response.value
}));
return apiConfig;
});
const fieldApiCall = (0, _formView.logMethodReact)("fieldApiCall")(async (action, object) => {
setApiLoading(true);
const apiConfig = await apiCall(action, object);
setTimeout(() => {
setApiLoading(false);
}, 300);
});
const fieldMultipleApiCalls = (0, _formView.logMethodReact)("fieldMultipleApiCalls")(async (action, object) => {
const entrypointApiKey = action.props.apiKey;
let field = (0, _formViewFields2.getFormFieldByKey)(formFields, action.props.fieldKey);
const {
endpoints
} = field.api;
const nextApiIndex = endpoints.findIndex(api => api.apiKey == entrypointApiKey);
const apiConfig = endpoints[nextApiIndex];
const response = await handleFieldApiCall(field, apiConfig);
field = response.field;
field.api.endpoints[nextApiIndex] = response.api;
});
const fieldMultipleApiCallsEnd = (0, _formView.logMethodReact)("fieldMultipleApiCallsEnd")(async (action, object) => {
const field = (0, _formViewFields2.getFormFieldByKey)(formFields, action.props.fieldKey);
let multipleApiCallResponses = {};
field.api.endpoints.map(api => {
if ((0, _kwikidToolkit.checkObjectKeyExists)(api.response, "value")) multipleApiCallResponses = (0, _kwikidToolkit.setValueToObjectPath)(multipleApiCallResponses, "".concat(api.apiKey), api.response.value);
});
updateFormData(_objectSpread(_objectSpread({}, formData), {}, {
[field.key]: multipleApiCallResponses
}));
});
const redirectToUrl = (0, _formView.logMethodReact)("redirectToUrl")(action => {
if ((0, _kwikidToolkit.checkObjectKeyExists)(action.props, "url")) {
if ((0, _kwikidToolkit.checkObjectKeyExists)(action.props.url, "url")) {
let timeout = 2000;
if ((0, _kwikidToolkit.checkObjectKeyExists)(action.props.url, "timeout") && typeof action.props.url.timeout === "number") {
timeout = action.props.url.timeout;
}
setTimeout(() => {
if ((0, _kwikidToolkit.checkObjectKeyExists)(action.props.url, "target")) {
window.open(action.props.url.url, action.props.url.target);
} else {
window.location.replace(action.props.url.url);
}
}, timeout);
}
}
});
const takeActionOnFieldGroup = (0, _formView.logMethodReact)("takeActionOnFieldGroup")(async (action, object) => {
switch (action.key) {
case _formViewActions.EActionKey.FIELD_GROUP_HIDE:
fieldGroupHide(action.props.groupKey);
break;
case _formViewActions.EActionKey.FIELD_GROUP_SHOW:
fieldGroupShow(action.props.groupKey);
break;
case _formViewActions.EActionKey.FIELD_GROUP_ENABLE:
fieldGroupEnable(action.props.groupKey);
break;
case _formViewActions.EActionKey.FIELD_GROUP_DISABLE:
fieldGroupDisable(action.props.groupKey);
break;
default:
break;
}
});
const takeAction = (0, _formView.logMethodReact)("takeAction")(async (action, object) => {
switch (action.key) {
case _formViewActions.EActionKey.FIELD_HIDE:
await fieldHide(action.props.fieldKey);
break;
case _formViewActions.EActionKey.FIELD_SHOW:
fieldShow(action.props.fieldKey);
break;
case _formViewActions.EActionKey.FIELD_DISABLE:
fieldDisable(action.props.fieldKey);
break;
case _formViewActions.EActionKey.FIELD_ENABLE:
fieldEnable(action.props.fieldKey);
break;
case _formViewActions.EActionKey.FIELD_RESET:
fieldReset(action.props.fieldKey);
break;
case _formViewActions.EActionKey.FIELD_ERROR_SHOW:
if ((0, _kwikidToolkit.checkObjectKeyExists)(action.props.message, "source")) {
const fieldErrorShow_Source = new _kwikidToolkit.Source(object);
let fieldErrorShowSourceValue = await fieldErrorShow_Source.getValueFromSource(action.props.message.source);
if (typeof fieldErrorShowSourceValue === "string" || typeof fieldErrorShowSourceValue === "number") {
fieldErrorShowSourceValue = String(fieldErrorShowSourceValue);
} else {
fieldErrorShowSourceValue = "";
}
action = (0, _kwikidToolkit.setValueToObjectPath)(action, "props.message.message", fieldErrorShowSourceValue);
}
action.props.message.message = (0, _configConverter2.updateLanguage)(action.props.message.message, (0, _configConverter2.getLanguage)());
fieldErrorShow(action.props.fieldKey, action.props.message);
break;
case _formViewActions.EActionKey.FIELD_ERROR_HIDE:
if ((0, _kwikidToolkit.checkObjectKeyExists)(action.props.message, "source")) {
const fieldErrorHide_Source = new _kwikidToolkit.Source(object);
let fieldErrorHideSourceValue = await fieldErrorHide_Source.getValueFromSource(action.props.message.source);
if (typeof fieldErrorHideSourceValue === "string" || typeof fieldErrorHideSourceValue === "number") {
fieldErrorHideSourceValue = String(fieldErrorHideSourceValue);
} else {
fieldErrorHideSourceValue = "";
}
action = (0, _kwikidToolkit.setValueToObjectPath)(action, "props.message.message", fieldErrorHideSourceValue);
}
fieldErrorHide(action.props.fieldKey, action.props.message);
break;
case _formViewActions.EActionKey.FIELD_MESSAGE_SHOW:
fieldMessageShow(action.props.fieldKey, action.props.message);
break;
case _formViewActions.EActionKey.FIELD_MESSAGES_HIDE:
fieldMessageHide(action.props.fieldKey, action.props.message);
break;
case _formViewActions.EActionKey.SET_VALUE:
await setValue(action, object);
break;
case _formViewActions.EActionKey.SET_FIELD_DEFAULT_VALUE:
await setFieldDefaultValue(action, object);
break;
case _formViewActions.EActionKey.SET_DROPDOWN_OPTIONS:
await setDropdownOptions(action, object);
break;
case _formViewActions.EActionKey.SET_FIELD_VALIDITY:
await setFieldValidity(action, object);
break;
case _formViewActions.EActionKey.HANDLE_CONNECTED_ELEMENTS:
handleConnectedElements({
key: action.props.fieldKey
}, "ON_ACTION");
break;
case _formViewActions.EActionKey.API_CALL:
await fieldApiCall(action, object);
break;
case _formViewActions.EActionKey.API_CALL_MULTIPLE:
await fieldMultipleApiCalls(action, object);
break;
case _formViewActions.EActionKey.API_CALL_MULTIPLE_END:
await fieldMultipleApiCallsEnd(action, object);
break;
case _formViewActions.EActionKey.REDIRECT_TO_URL:
if ((0, _kwikidToolkit.checkObjectKeyExists)(action.props.url, "source")) {
const redirectToUrl_Source = new _kwikidToolkit.Source(object);
let redirectToUrlSourceValue = await redirectToUrl_Source.getValueFromSource(action.props.url.source);
if ((0, _kwikidToolkit.isEmptyString)(redirectToUrlSourceValue)) {
redirectToUrlSourceValue = "";
}
action = (0, _kwikidToolkit.setValueToObjectPath)(action, "props.url.url", redirectToUrlSourceValue);
}
redirectToUrl(action);
break;
case _formViewActions.EActionKey.NOTIFICATION_ERROR_SHOW:
toggleErrorNotification(true);
break;
case _formViewActions.EActionKey.NOTIFICATION_ERROR_HIDE:
toggleErrorNotification(false);
break;
case _formViewActions.EActionKey.SAVE_FORM:
handleOnClickSaveForm(undefined);
break;
default:
break;
}
});
if (!(0, _kwikidToolkit.isNotEmptyValue)(formConfig)) return null;
if (loading) {
return /*#__PURE__*/_react.default.createElement(_Loader.default, {
customStyles: {
container: {
padding: "1rem"
}
},
loading: loading,
id: "loader",
loadingText: "Please wait...",
shape: "curved",
size: "s",
variant: "fullscreen"
});
}
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Loader.default, {
customStyles: {
container: {
padding: "1rem"
}
},
loading: apiLoading,
id: "loader",
loadingText: "Please wait...",
shape: "curved",
size: "s",
variant: "fullscreen"
}), /*#__PURE__*/_react.default.createElement(_Forms2.FormContainer, {
style: (_formConfigRef$curren = (_formConfigRef$curren2 = formConfigRef.current) === null || _formConfigRef$curren2 === void 0 ? void 0 : (_formConfigRef$curren3 = _formConfigRef$curren2.properties) === null || _formConfigRef$curren3 === void 0 ? void 0 : _formConfigRef$curren3.styles) !== null && _formConfigRef$curren !== void 0 ? _formConfigRef$curren : {}
}, /*#__PURE__*/_react.default.createElement(_FormHeader.default, {
title: (_formConfigRef$curren4 = formConfigRef.current) === null || _formConfigRef$curren4 === void 0 ? void 0 : _formConfigRef$curren4.title,
customStyles: {
container: (_formConfigRef$curren5 = formConfigRef.current) === null || _formConfigRef$curren5 === void 0 ? void 0 : (_formConfigRef$curren6 = _formConfigRef$curren5.properties) === null || _formConfigRef$curren6 === void 0 ? void 0 : (_formConfigRef$curren7 = _formConfigRef$curren6.header) === null || _formConfigRef$curren7 === void 0 ? void 0 : (_formConfigRef$curren8 = _formConfigRef$curren7.container) === null || _formConfigRef$curren8 === void 0 ? void 0 : _formConfigRef$curren8.styles,
title: (_formConfigRef$curren9 = formConfigRef.current) === null || _formConfigRef$curren9 === void 0 ? void 0 : (_formConfigRef$curren0 = _formConfigRef$curren9.properties) === null || _formConfigRef$curren0 === void 0 ? void 0 : (_formConfigRef$curren1 = _formConfigRef$curren0.header) === null || _formConfigRef$curren1 === void 0 ? void 0 : (_formConfigRef$curren10 = _formConfigRef$curren1.title) === null || _formConfigRef$curren10 === void 0 ? void 0 : _formConfigRef$curren10.styles
}
}), /*#__PURE__*/_react.default.createElement(_FormFields.default, {
isExecutingActions: isExecutingAction,
fields: (_getFormFields = getFormFields()) !== null && _getFormFields !== void 0 ? _getFormFields : [],
formData: (_getFormData = getFormData()) !== null && _getFormData !== void 0 ? _getFormData : {},
handleOnInputChange: handleOnInputChange,
handleOnInputValidation: handleOnInputValidation,
handleOnClickResetFormFields: handleOnClickResetFormFields,
handleOnClickApiCall: handleOnClickApiCall,
customStyles: {
container: (_formConfigRef$curren11 = formConfigRef.current) === null || _formConfigRef$curren11 === void 0 ? void 0 : (_formConfigRef$curren12 = _formConfigRef$curren11.properties) === null || _formConfigRef$curren12 =