kwikid-components-react
Version:
KwikID's Component Library in React
375 lines (374 loc) • 34.4 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 _fa = require("react-icons/fa6");
var _Button = _interopRequireDefault(require("../../../kwikui/button/Button"));
var _Html = _interopRequireDefault(require("../../../kwikui/html/Html"));
var _InputCheckbox = _interopRequireDefault(require("../../../kwikui/inputs/input-checkbox/InputCheckbox"));
var _InputDateTime = _interopRequireDefault(require("../../../kwikui/inputs/input-datetime/InputDateTime"));
var _InputNumber = _interopRequireDefault(require("../../../kwikui/inputs/input-number/InputNumber"));
var _InputPassword = _interopRequireDefault(require("../../../kwikui/inputs/input-password/InputPassword"));
var _InputRadio = _interopRequireDefault(require("../../../kwikui/inputs/input-radio/InputRadio"));
var _InputMultiSelect = _interopRequireDefault(require("../../../kwikui/inputs/input-select/InputMultiSelect"));
var _InputSelect = _interopRequireDefault(require("../../../kwikui/inputs/input-select/InputSelect"));
var _InputText = _interopRequireDefault(require("../../../kwikui/inputs/input-text/InputText"));
var _Textarea = _interopRequireDefault(require("../../../kwikui/inputs/textarea/Textarea"));
var _Messages = _interopRequireDefault(require("../../../kwikui/messages/Messages"));
var _formViewFields = require("../../helpers/form-view.fields.helper");
var _FormFields = require("./FormFields.style");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const isFieldRerender = (prev, current) => {
return prev === current;
};
const KwikIDFormField = /*#__PURE__*/_react.default.memo(_ref => {
var _field$api3, _field$api3$status, _field$properties$con, _field$properties, _field$messages, _field$properties2, _field$validators, _field$properties3, _field$properties4, _field$properties5, _field$properties6, _field$properties7, _field$validators2, _field$properties8, _field$properties9, _field$properties0, _field$properties1, _field$properties10, _field$validators3, _field$properties11, _field$properties12, _field$properties13, _field$properties14, _field$properties15, _field$validators4, _field$properties16, _field$properties17, _field$properties18, _field$properties19, _field$properties20, _field$properties21, _field$properties22, _field$properties23, _field$properties24, _field$properties25, _field$validators5, _field$properties26, _field$properties27, _field$properties28, _field$properties29, _field$properties30, _field$validators6, _field$properties31, _field$properties32, _field$properties33, _field$properties34, _field$validators7, _field$properties35, _field$properties36, _field$properties37, _field$properties38, _field$properties39, _field$validators8, _field$properties40, _field$properties41, _field$properties42, _field$properties43, _field$properties44, _field$validators9, _field$properties45, _field$properties46, _field$properties47, _field$validators0, _field$properties48, _field$properties49, _field$properties50, _field$properties51, _field$validators1, _field$properties52, _field$properties53, _field$priperties, _field$properties$con2, _field$properties54;
let {
field,
formData,
handleOnInputChange,
handleOnInputValidation,
handleOnClickResetFormFields,
handleOnClickApiCall
} = _ref;
switch (field.type) {
case "api":
let fieldTypeApiConfig = {
isLoading: false,
getLabel: () => {
var _field$api, _field$api$status, _field$api2, _field$api2$status;
return /*#__PURE__*/_react.default.createElement(_FormFields.KwikIDFormFieldTypeApi, null, /*#__PURE__*/_react.default.createElement("div", null, field === null || field === void 0 ? void 0 : (_field$api = field.api) === null || _field$api === void 0 ? void 0 : (_field$api$status = _field$api.status) === null || _field$api$status === void 0 ? void 0 : _field$api$status.labels[field === null || field === void 0 ? void 0 : (_field$api2 = field.api) === null || _field$api2 === void 0 ? void 0 : (_field$api2$status = _field$api2.status) === null || _field$api2$status === void 0 ? void 0 : _field$api2$status.value]));
},
customStyles: {
backgroundColor: "var(--kwikui-color-primary)",
borderColor: "var(--kwikui-color-primary)"
}
};
switch (field === null || field === void 0 ? void 0 : (_field$api3 = field.api) === null || _field$api3 === void 0 ? void 0 : (_field$api3$status = _field$api3.status) === null || _field$api3$status === void 0 ? void 0 : _field$api3$status.value) {
case "default":
fieldTypeApiConfig = {
isLoading: false,
getLabel: () => {
var _field$api4, _field$api4$status, _field$api5, _field$api5$status;
return /*#__PURE__*/_react.default.createElement(_FormFields.KwikIDFormFieldTypeApi, null, /*#__PURE__*/_react.default.createElement("div", null, field === null || field === void 0 ? void 0 : (_field$api4 = field.api) === null || _field$api4 === void 0 ? void 0 : (_field$api4$status = _field$api4.status) === null || _field$api4$status === void 0 ? void 0 : _field$api4$status.labels[field === null || field === void 0 ? void 0 : (_field$api5 = field.api) === null || _field$api5 === void 0 ? void 0 : (_field$api5$status = _field$api5.status) === null || _field$api5$status === void 0 ? void 0 : _field$api5$status.value]));
},
customStyles: {
backgroundColor: "var(--kwikui-color-primary)",
borderColor: "var(--kwikui-color-primary)"
}
};
break;
case "loading":
fieldTypeApiConfig = {
isLoading: true,
getLabel: () => {
var _field$api6, _field$api6$status, _field$api7, _field$api7$status;
return /*#__PURE__*/_react.default.createElement(_FormFields.KwikIDFormFieldTypeApi, null, /*#__PURE__*/_react.default.createElement("div", null, field === null || field === void 0 ? void 0 : (_field$api6 = field.api) === null || _field$api6 === void 0 ? void 0 : (_field$api6$status = _field$api6.status) === null || _field$api6$status === void 0 ? void 0 : _field$api6$status.labels[field === null || field === void 0 ? void 0 : (_field$api7 = field.api) === null || _field$api7 === void 0 ? void 0 : (_field$api7$status = _field$api7.status) === null || _field$api7$status === void 0 ? void 0 : _field$api7$status.value]));
},
customStyles: {
minWidth: "100px"
}
};
break;
case "retry":
fieldTypeApiConfig = {
isLoading: false,
getLabel: () => {
var _field$api8, _field$api8$status, _field$api9, _field$api9$status;
return /*#__PURE__*/_react.default.createElement(_FormFields.KwikIDFormFieldTypeApi, null, /*#__PURE__*/_react.default.createElement("div", null, field === null || field === void 0 ? void 0 : (_field$api8 = field.api) === null || _field$api8 === void 0 ? void 0 : (_field$api8$status = _field$api8.status) === null || _field$api8$status === void 0 ? void 0 : _field$api8$status.labels[field === null || field === void 0 ? void 0 : (_field$api9 = field.api) === null || _field$api9 === void 0 ? void 0 : (_field$api9$status = _field$api9.status) === null || _field$api9$status === void 0 ? void 0 : _field$api9$status.value]), /*#__PURE__*/_react.default.createElement(_fa.FaRotate, null));
}
};
break;
case "success":
fieldTypeApiConfig = {
isLoading: false,
getLabel: () => {
var _field$api0, _field$api0$status, _field$api1, _field$api1$status;
return /*#__PURE__*/_react.default.createElement(_FormFields.KwikIDFormFieldTypeApi, null, /*#__PURE__*/_react.default.createElement("div", null, field === null || field === void 0 ? void 0 : (_field$api0 = field.api) === null || _field$api0 === void 0 ? void 0 : (_field$api0$status = _field$api0.status) === null || _field$api0$status === void 0 ? void 0 : _field$api0$status.labels[field === null || field === void 0 ? void 0 : (_field$api1 = field.api) === null || _field$api1 === void 0 ? void 0 : (_field$api1$status = _field$api1.status) === null || _field$api1$status === void 0 ? void 0 : _field$api1$status.value]), /*#__PURE__*/_react.default.createElement(_fa.FaRegCircleCheck, null));
},
customStyles: {
backgroundColor: "#34b41f",
borderColor: "#34b41f"
}
};
break;
case "failed":
fieldTypeApiConfig = {
isLoading: false,
getLabel: () => {
var _field$api10, _field$api10$status, _field$api11, _field$api11$status;
return /*#__PURE__*/_react.default.createElement(_FormFields.KwikIDFormFieldTypeApi, null, /*#__PURE__*/_react.default.createElement("div", null, field === null || field === void 0 ? void 0 : (_field$api10 = field.api) === null || _field$api10 === void 0 ? void 0 : (_field$api10$status = _field$api10.status) === null || _field$api10$status === void 0 ? void 0 : _field$api10$status.labels[field === null || field === void 0 ? void 0 : (_field$api11 = field.api) === null || _field$api11 === void 0 ? void 0 : (_field$api11$status = _field$api11.status) === null || _field$api11$status === void 0 ? void 0 : _field$api11$status.value]), /*#__PURE__*/_react.default.createElement(_fa.FaRegCircleXmark, null));
},
customStyles: {
backgroundColor: "#dd4c1e",
borderColor: "#dd4c1e"
}
};
break;
default:
break;
}
return /*#__PURE__*/_react.default.createElement(_FormFields.KwikIDFormFieldTypeApiContainer, {
style: (_field$properties$con = field === null || field === void 0 ? void 0 : (_field$properties = field.properties) === null || _field$properties === void 0 ? void 0 : _field$properties.containerStyles) !== null && _field$properties$con !== void 0 ? _field$properties$con : {},
id: "field_".concat(field.key)
}, /*#__PURE__*/_react.default.createElement(_Button.default, {
disabled: field === null || field === void 0 ? void 0 : field.disabled,
id: field.key,
customStyles: fieldTypeApiConfig.customStyles,
loading: fieldTypeApiConfig.isLoading,
onClick: () => {
handleOnClickApiCall(field);
}
}, fieldTypeApiConfig.getLabel()), (0, _kwikidToolkit.isNotEmptyValue)(field === null || field === void 0 ? void 0 : field.messages) && /*#__PURE__*/_react.default.createElement(_Messages.default, {
messages: (_field$messages = field === null || field === void 0 ? void 0 : field.messages) !== null && _field$messages !== void 0 ? _field$messages : [],
id: field.key
}));
case "checkbox":
return /*#__PURE__*/_react.default.createElement(_InputCheckbox.default, {
customStyles: field === null || field === void 0 ? void 0 : field.styles,
disabled: field === null || field === void 0 ? void 0 : field.disabled,
id: field === null || field === void 0 ? void 0 : field.key,
label: field === null || field === void 0 ? void 0 : field.label,
messages: field === null || field === void 0 ? void 0 : field.messages,
placeholder: "".concat(field === null || field === void 0 ? void 0 : (_field$properties2 = field.properties) === null || _field$properties2 === void 0 ? void 0 : _field$properties2.placeholder).concat(field !== null && field !== void 0 && field.required ? " *" : ""),
required: field === null || field === void 0 ? void 0 : (_field$validators = field.validators) === null || _field$validators === void 0 ? void 0 : _field$validators.required,
shape: field === null || field === void 0 ? void 0 : (_field$properties3 = field.properties) === null || _field$properties3 === void 0 ? void 0 : _field$properties3.shape,
size: field === null || field === void 0 ? void 0 : (_field$properties4 = field.properties) === null || _field$properties4 === void 0 ? void 0 : _field$properties4.size,
value: (0, _formViewFields.convertFormFieldValueToKwikUIFormat)(field, formData[field.key]) || "",
onInput: handleOnInputChange,
onInputValidate: handleOnInputValidation
});
case "datetime":
return /*#__PURE__*/_react.default.createElement(_InputDateTime.default, {
customStyles: field === null || field === void 0 ? void 0 : field.styles,
disabled: field === null || field === void 0 ? void 0 : field.disabled,
id: field === null || field === void 0 ? void 0 : field.key,
label: field === null || field === void 0 ? void 0 : field.label,
messages: field === null || field === void 0 ? void 0 : field.messages,
placeholder: "".concat(field === null || field === void 0 ? void 0 : (_field$properties5 = field.properties) === null || _field$properties5 === void 0 ? void 0 : _field$properties5.placeholder).concat(field !== null && field !== void 0 && field.required ? " *" : ""),
postfix: field === null || field === void 0 ? void 0 : (_field$properties6 = field.properties) === null || _field$properties6 === void 0 ? void 0 : _field$properties6.postfix,
prefix: field === null || field === void 0 ? void 0 : (_field$properties7 = field.properties) === null || _field$properties7 === void 0 ? void 0 : _field$properties7.prefix,
required: field === null || field === void 0 ? void 0 : (_field$validators2 = field.validators) === null || _field$validators2 === void 0 ? void 0 : _field$validators2.required,
shape: field === null || field === void 0 ? void 0 : (_field$properties8 = field.properties) === null || _field$properties8 === void 0 ? void 0 : _field$properties8.shape,
size: field === null || field === void 0 ? void 0 : (_field$properties9 = field.properties) === null || _field$properties9 === void 0 ? void 0 : _field$properties9.size,
value: (0, _formViewFields.convertFormFieldTypeDateToKwikUIFormat)(formData[field.key]) || "",
variant: "datetime",
onInput: handleOnInputChange,
onInputValidate: handleOnInputValidation
});
case "date":
return /*#__PURE__*/_react.default.createElement(_InputDateTime.default, {
customStyles: field === null || field === void 0 ? void 0 : field.styles,
disabled: field === null || field === void 0 ? void 0 : field.disabled,
id: field === null || field === void 0 ? void 0 : field.key,
label: field === null || field === void 0 ? void 0 : field.label,
messages: field === null || field === void 0 ? void 0 : field.messages,
placeholder: "".concat(field === null || field === void 0 ? void 0 : (_field$properties0 = field.properties) === null || _field$properties0 === void 0 ? void 0 : _field$properties0.placeholder).concat(field !== null && field !== void 0 && field.required ? " *" : ""),
postfix: field === null || field === void 0 ? void 0 : (_field$properties1 = field.properties) === null || _field$properties1 === void 0 ? void 0 : _field$properties1.postfix,
prefix: field === null || field === void 0 ? void 0 : (_field$properties10 = field.properties) === null || _field$properties10 === void 0 ? void 0 : _field$properties10.prefix,
required: field === null || field === void 0 ? void 0 : (_field$validators3 = field.validators) === null || _field$validators3 === void 0 ? void 0 : _field$validators3.required,
shape: field === null || field === void 0 ? void 0 : (_field$properties11 = field.properties) === null || _field$properties11 === void 0 ? void 0 : _field$properties11.shape,
size: field === null || field === void 0 ? void 0 : (_field$properties12 = field.properties) === null || _field$properties12 === void 0 ? void 0 : _field$properties12.size,
value: (0, _formViewFields.convertFormFieldTypeDateToKwikUIFormat)(formData[field.key]) || "",
variant: "date",
onInput: handleOnInputChange,
onInputValidate: handleOnInputValidation
});
case "time":
return /*#__PURE__*/_react.default.createElement(_InputDateTime.default, {
customStyles: field === null || field === void 0 ? void 0 : field.styles,
disabled: field === null || field === void 0 ? void 0 : field.disabled,
id: field === null || field === void 0 ? void 0 : field.key,
label: field === null || field === void 0 ? void 0 : field.label,
messages: field === null || field === void 0 ? void 0 : field.messages,
placeholder: "".concat(field === null || field === void 0 ? void 0 : (_field$properties13 = field.properties) === null || _field$properties13 === void 0 ? void 0 : _field$properties13.placeholder).concat(field !== null && field !== void 0 && field.required ? " *" : ""),
postfix: field === null || field === void 0 ? void 0 : (_field$properties14 = field.properties) === null || _field$properties14 === void 0 ? void 0 : _field$properties14.postfix,
prefix: field === null || field === void 0 ? void 0 : (_field$properties15 = field.properties) === null || _field$properties15 === void 0 ? void 0 : _field$properties15.prefix,
required: field === null || field === void 0 ? void 0 : (_field$validators4 = field.validators) === null || _field$validators4 === void 0 ? void 0 : _field$validators4.required,
shape: field === null || field === void 0 ? void 0 : (_field$properties16 = field.properties) === null || _field$properties16 === void 0 ? void 0 : _field$properties16.shape,
size: field === null || field === void 0 ? void 0 : (_field$properties17 = field.properties) === null || _field$properties17 === void 0 ? void 0 : _field$properties17.size,
value: (0, _formViewFields.convertFormFieldTypeDateToKwikUIFormat)(formData[field.key]) || "",
variant: "time",
onInput: handleOnInputChange,
onInputValidate: handleOnInputValidation
});
case "html":
return /*#__PURE__*/_react.default.createElement(_Html.default, {
htmlString: field === null || field === void 0 ? void 0 : field.html
});
case "number":
return /*#__PURE__*/_react.default.createElement(_InputNumber.default, {
customStyles: field === null || field === void 0 ? void 0 : field.styles,
delimiter: field === null || field === void 0 ? void 0 : (_field$properties18 = field.properties) === null || _field$properties18 === void 0 ? void 0 : _field$properties18.delimiter,
disabled: field === null || field === void 0 ? void 0 : field.disabled,
id: field === null || field === void 0 ? void 0 : field.key,
label: field === null || field === void 0 ? void 0 : field.label,
max: field === null || field === void 0 ? void 0 : (_field$properties19 = field.properties) === null || _field$properties19 === void 0 ? void 0 : _field$properties19.max,
messages: field === null || field === void 0 ? void 0 : field.messages,
min: field === null || field === void 0 ? void 0 : (_field$properties20 = field.properties) === null || _field$properties20 === void 0 ? void 0 : _field$properties20.min,
placeholder: "".concat(field === null || field === void 0 ? void 0 : (_field$properties21 = field.properties) === null || _field$properties21 === void 0 ? void 0 : _field$properties21.placeholder).concat(field !== null && field !== void 0 && field.required ? " *" : ""),
postfix: field === null || field === void 0 ? void 0 : (_field$properties22 = field.properties) === null || _field$properties22 === void 0 ? void 0 : _field$properties22.postfix,
prefix: field === null || field === void 0 ? void 0 : (_field$properties23 = field.properties) === null || _field$properties23 === void 0 ? void 0 : _field$properties23.prefix,
shape: field === null || field === void 0 ? void 0 : (_field$properties24 = field.properties) === null || _field$properties24 === void 0 ? void 0 : _field$properties24.shape,
size: field === null || field === void 0 ? void 0 : (_field$properties25 = field.properties) === null || _field$properties25 === void 0 ? void 0 : _field$properties25.size,
required: field === null || field === void 0 ? void 0 : (_field$validators5 = field.validators) === null || _field$validators5 === void 0 ? void 0 : _field$validators5.required,
value: (0, _formViewFields.convertFormFieldValueToKwikUIFormat)(field, formData[field.key]) || "",
onInput: handleOnInputChange,
onInputValidate: handleOnInputValidation
});
case "password":
return /*#__PURE__*/_react.default.createElement(_InputPassword.default, {
customStyles: field === null || field === void 0 ? void 0 : field.styles,
disabled: field === null || field === void 0 ? void 0 : field.disabled,
id: field === null || field === void 0 ? void 0 : field.key,
label: field === null || field === void 0 ? void 0 : field.label,
messages: field === null || field === void 0 ? void 0 : field.messages,
placeholder: "".concat(field === null || field === void 0 ? void 0 : (_field$properties26 = field.properties) === null || _field$properties26 === void 0 ? void 0 : _field$properties26.placeholder).concat(field !== null && field !== void 0 && field.required ? " *" : ""),
postfix: field === null || field === void 0 ? void 0 : (_field$properties27 = field.properties) === null || _field$properties27 === void 0 ? void 0 : _field$properties27.postfix,
prefix: field === null || field === void 0 ? void 0 : (_field$properties28 = field.properties) === null || _field$properties28 === void 0 ? void 0 : _field$properties28.prefix,
shape: field === null || field === void 0 ? void 0 : (_field$properties29 = field.properties) === null || _field$properties29 === void 0 ? void 0 : _field$properties29.shape,
size: field === null || field === void 0 ? void 0 : (_field$properties30 = field.properties) === null || _field$properties30 === void 0 ? void 0 : _field$properties30.size,
required: field === null || field === void 0 ? void 0 : (_field$validators6 = field.validators) === null || _field$validators6 === void 0 ? void 0 : _field$validators6.required,
value: (0, _formViewFields.convertFormFieldValueToKwikUIFormat)(field, formData[field.key]) || "",
onInput: handleOnInputChange,
onInputValidate: handleOnInputValidation
});
case "radio":
return /*#__PURE__*/_react.default.createElement(_InputRadio.default, {
customStyles: field === null || field === void 0 ? void 0 : field.styles,
disabled: field === null || field === void 0 ? void 0 : field.disabled,
id: field === null || field === void 0 ? void 0 : field.key,
isClearable: field === null || field === void 0 ? void 0 : (_field$properties31 = field.properties) === null || _field$properties31 === void 0 ? void 0 : _field$properties31.clearable,
isSearchable: field === null || field === void 0 ? void 0 : (_field$properties32 = field.properties) === null || _field$properties32 === void 0 ? void 0 : _field$properties32.searchable,
label: field === null || field === void 0 ? void 0 : field.label,
messages: field === null || field === void 0 ? void 0 : field.messages,
options: field === null || field === void 0 ? void 0 : field.options,
orientation: field === null || field === void 0 ? void 0 : (_field$properties33 = field.properties) === null || _field$properties33 === void 0 ? void 0 : _field$properties33.orientation,
size: field === null || field === void 0 ? void 0 : (_field$properties34 = field.properties) === null || _field$properties34 === void 0 ? void 0 : _field$properties34.size,
required: field === null || field === void 0 ? void 0 : (_field$validators7 = field.validators) === null || _field$validators7 === void 0 ? void 0 : _field$validators7.required,
value: (0, _formViewFields.convertFormFieldValueToKwikUIFormat)(field, formData[field.key]) || "",
onInput: handleOnInputChange,
onInputValidate: handleOnInputValidation
});
case "select":
return /*#__PURE__*/_react.default.createElement(_InputSelect.default, {
customStyles: field === null || field === void 0 ? void 0 : field.styles,
disabled: field === null || field === void 0 ? void 0 : field.disabled,
id: field === null || field === void 0 ? void 0 : field.key,
isClearable: field === null || field === void 0 ? void 0 : (_field$properties35 = field.properties) === null || _field$properties35 === void 0 ? void 0 : _field$properties35.clearable,
isSearchable: field === null || field === void 0 ? void 0 : (_field$properties36 = field.properties) === null || _field$properties36 === void 0 ? void 0 : _field$properties36.searchable,
label: field === null || field === void 0 ? void 0 : field.label,
messages: field === null || field === void 0 ? void 0 : field.messages,
options: field === null || field === void 0 ? void 0 : field.options,
placeholder: "".concat(field === null || field === void 0 ? void 0 : (_field$properties37 = field.properties) === null || _field$properties37 === void 0 ? void 0 : _field$properties37.placeholder).concat(field !== null && field !== void 0 && field.required ? " *" : ""),
shape: field === null || field === void 0 ? void 0 : (_field$properties38 = field.properties) === null || _field$properties38 === void 0 ? void 0 : _field$properties38.shape,
size: field === null || field === void 0 ? void 0 : (_field$properties39 = field.properties) === null || _field$properties39 === void 0 ? void 0 : _field$properties39.size,
required: field === null || field === void 0 ? void 0 : (_field$validators8 = field.validators) === null || _field$validators8 === void 0 ? void 0 : _field$validators8.required,
value: (0, _formViewFields.convertFormFieldValueToKwikUIFormat)(field, formData[field.key]) || "",
onInput: handleOnInputChange,
onInputValidate: handleOnInputValidation
});
case "multiselect":
return /*#__PURE__*/_react.default.createElement(_InputMultiSelect.default, {
customStyles: field === null || field === void 0 ? void 0 : field.styles,
disabled: field === null || field === void 0 ? void 0 : field.disabled,
id: field === null || field === void 0 ? void 0 : field.key,
isClearable: field === null || field === void 0 ? void 0 : (_field$properties40 = field.properties) === null || _field$properties40 === void 0 ? void 0 : _field$properties40.clearable,
isSearchable: field === null || field === void 0 ? void 0 : (_field$properties41 = field.properties) === null || _field$properties41 === void 0 ? void 0 : _field$properties41.searchable,
label: field === null || field === void 0 ? void 0 : field.label,
messages: field === null || field === void 0 ? void 0 : field.messages,
options: field === null || field === void 0 ? void 0 : field.options,
placeholder: "".concat(field === null || field === void 0 ? void 0 : (_field$properties42 = field.properties) === null || _field$properties42 === void 0 ? void 0 : _field$properties42.placeholder).concat(field !== null && field !== void 0 && field.required ? " *" : ""),
shape: field === null || field === void 0 ? void 0 : (_field$properties43 = field.properties) === null || _field$properties43 === void 0 ? void 0 : _field$properties43.shape,
size: field === null || field === void 0 ? void 0 : (_field$properties44 = field.properties) === null || _field$properties44 === void 0 ? void 0 : _field$properties44.size,
required: field === null || field === void 0 ? void 0 : (_field$validators9 = field.validators) === null || _field$validators9 === void 0 ? void 0 : _field$validators9.required,
value: (0, _formViewFields.convertFormFieldValueToKwikUIFormat)(field, formData[field.key]) || "",
onInput: handleOnInputChange,
onInputValidate: handleOnInputValidation
});
case "text":
return /*#__PURE__*/_react.default.createElement(_InputText.default, {
customStyles: field === null || field === void 0 ? void 0 : field.styles,
disabled: field === null || field === void 0 ? void 0 : field.disabled,
id: field === null || field === void 0 ? void 0 : field.key,
label: field === null || field === void 0 ? void 0 : field.label,
messages: field === null || field === void 0 ? void 0 : field.messages,
placeholder: "".concat(field === null || field === void 0 ? void 0 : (_field$properties45 = field.properties) === null || _field$properties45 === void 0 ? void 0 : _field$properties45.placeholder).concat(field !== null && field !== void 0 && field.required ? " *" : ""),
postfix: field === null || field === void 0 ? void 0 : (_field$properties46 = field.properties) === null || _field$properties46 === void 0 ? void 0 : _field$properties46.postfix,
prefix: field === null || field === void 0 ? void 0 : (_field$properties47 = field.properties) === null || _field$properties47 === void 0 ? void 0 : _field$properties47.prefix,
required: field === null || field === void 0 ? void 0 : (_field$validators0 = field.validators) === null || _field$validators0 === void 0 ? void 0 : _field$validators0.required,
shape: field === null || field === void 0 ? void 0 : (_field$properties48 = field.properties) === null || _field$properties48 === void 0 ? void 0 : _field$properties48.shape,
size: field === null || field === void 0 ? void 0 : (_field$properties49 = field.properties) === null || _field$properties49 === void 0 ? void 0 : _field$properties49.size,
textCase: field === null || field === void 0 ? void 0 : (_field$properties50 = field.properties) === null || _field$properties50 === void 0 ? void 0 : _field$properties50.textCase,
value: (0, _formViewFields.convertFormFieldValueToKwikUIFormat)(field, formData[field.key]) || "",
onInput: handleOnInputChange,
onInputValidate: handleOnInputValidation
});
case "textarea":
return /*#__PURE__*/_react.default.createElement(_Textarea.default, {
customStyles: field === null || field === void 0 ? void 0 : field.styles,
disabled: field === null || field === void 0 ? void 0 : field.disabled,
id: field === null || field === void 0 ? void 0 : field.key,
label: field === null || field === void 0 ? void 0 : field.label,
messages: field === null || field === void 0 ? void 0 : field.messages,
placeholder: "".concat(field === null || field === void 0 ? void 0 : (_field$properties51 = field.properties) === null || _field$properties51 === void 0 ? void 0 : _field$properties51.placeholder).concat(field !== null && field !== void 0 && field.required ? " *" : ""),
required: field === null || field === void 0 ? void 0 : (_field$validators1 = field.validators) === null || _field$validators1 === void 0 ? void 0 : _field$validators1.required,
shape: field === null || field === void 0 ? void 0 : (_field$properties52 = field.properties) === null || _field$properties52 === void 0 ? void 0 : _field$properties52.shape,
size: field === null || field === void 0 ? void 0 : (_field$properties53 = field.properties) === null || _field$properties53 === void 0 ? void 0 : _field$properties53.size,
textCase: field === null || field === void 0 ? void 0 : (_field$priperties = field.priperties) === null || _field$priperties === void 0 ? void 0 : _field$priperties.textCase,
value: (0, _formViewFields.convertFormFieldValueToKwikUIFormat)(field, formData[field.key]) || "",
onInput: handleOnInputChange,
onInputValidate: handleOnInputValidation
});
case "title":
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_FormFields.KwikIDFormFieldTypeTitle, {
style: (_field$properties$con2 = field === null || field === void 0 ? void 0 : (_field$properties54 = field.properties) === null || _field$properties54 === void 0 ? void 0 : _field$properties54.containerStyles) !== null && _field$properties$con2 !== void 0 ? _field$properties$con2 : {},
id: "field_".concat(field.key)
}, /*#__PURE__*/_react.default.createElement("div", null, field === null || field === void 0 ? void 0 : field.label), (field === null || field === void 0 ? void 0 : field.reset) && /*#__PURE__*/_react.default.createElement(_Button.default, {
appearance: "outlined",
size: "xs",
onClick: () => {
handleOnClickResetFormFields(field);
}
}, "Reset")));
default:
return null;
}
}, isFieldRerender);
const KwikIDFormFields = _ref2 => {
var _customStyles$contain;
let {
isExecutingAction,
customStyles,
fields,
formData,
handleOnInputValidation,
handleOnInputChange,
handleOnClickResetFormFields,
handleOnClickApiCall
} = _ref2;
if (isExecutingAction) {
return null;
}
return /*#__PURE__*/_react.default.createElement(_FormFields.FormMain, {
style: (_customStyles$contain = customStyles === null || customStyles === void 0 ? void 0 : customStyles.container) !== null && _customStyles$contain !== void 0 ? _customStyles$contain : {}
}, fields.map(field => {
if (field.hidden) {
return null;
}
return /*#__PURE__*/_react.default.createElement("div", {
key: "".concat(field.key)
}, /*#__PURE__*/_react.default.createElement(KwikIDFormField, {
field: field,
formData: formData,
handleOnInputChange: handleOnInputChange,
handleOnInputValidation: handleOnInputValidation,
handleOnClickResetFormFields: handleOnClickResetFormFields,
handleOnClickApiCall: handleOnClickApiCall
}));
}));
};
var _default = exports.default = /*#__PURE__*/_react.default.memo(KwikIDFormFields);