kwikid-components-react/components/forms/form-view/form-fields/FormFields.js

KwikID's Component Library in React

"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$properties10, _field$properties11, _field$properties12, _field$validators3, _field$properties13, _field$properties14, _field$properties15, _field$properties16, _field$properties17, _field$validators4, _field$properties18, _field$properties19, _field$properties20, _field$properties21, _field$properties22, _field$properties23, _field$properties24, _field$properties25, _field$properties26, _field$properties27, _field$validators5, _field$properties28, _field$properties29, _field$properties30, _field$properties31, _field$properties32, _field$validators6, _field$properties33, _field$properties34, _field$properties35, _field$properties36, _field$validators7, _field$properties37, _field$properties38, _field$properties39, _field$properties40, _field$properties41, _field$validators8, _field$properties42, _field$properties43, _field$properties44, _field$properties45, _field$properties46, _field$validators9, _field$properties47, _field$properties48, _field$properties49, _field$validators10, _field$properties50, _field$properties51, _field$properties52, _field$properties53, _field$validators11, _field$properties54, _field$properties55, _field$priperties, _field$properties$con2, _field$properties56;
  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$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.FaRegCircleCheck, null));
            },
            customStyles: {
              backgroundColor: "#34b41f",
              borderColor: "#34b41f"
            }
          };
          break;
        case "failed":
          fieldTypeApiConfig = {
            isLoading: false,
            getLabel: () => {
              var _field$api12, _field$api12$status, _field$api13, _field$api13$status;
              return /*#__PURE__*/_react.default.createElement(_FormFields.KwikIDFormFieldTypeApi, null, /*#__PURE__*/_react.default.createElement("div", null, field === null || field === void 0 ? void 0 : (_field$api12 = field.api) === null || _field$api12 === void 0 ? void 0 : (_field$api12$status = _field$api12.status) === null || _field$api12$status === void 0 ? void 0 : _field$api12$status.labels[field === null || field === void 0 ? void 0 : (_field$api13 = field.api) === null || _field$api13 === void 0 ? void 0 : (_field$api13$status = _field$api13.status) === null || _field$api13$status === void 0 ? void 0 : _field$api13$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_${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: `${field === null || field === void 0 ? void 0 : (_field$properties2 = field.properties) === null || _field$properties2 === void 0 ? void 0 : _field$properties2.placeholder}${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: `${field === null || field === void 0 ? void 0 : (_field$properties5 = field.properties) === null || _field$properties5 === void 0 ? void 0 : _field$properties5.placeholder}${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: `${field === null || field === void 0 ? void 0 : (_field$properties10 = field.properties) === null || _field$properties10 === void 0 ? void 0 : _field$properties10.placeholder}${field !== null && field !== void 0 && field.required ? " *" : ""}`,
        postfix: field === null || field === void 0 ? void 0 : (_field$properties11 = field.properties) === null || _field$properties11 === void 0 ? void 0 : _field$properties11.postfix,
        prefix: field === null || field === void 0 ? void 0 : (_field$properties12 = field.properties) === null || _field$properties12 === void 0 ? void 0 : _field$properties12.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$properties13 = field.properties) === null || _field$properties13 === void 0 ? void 0 : _field$properties13.shape,
        size: field === null || field === void 0 ? void 0 : (_field$properties14 = field.properties) === null || _field$properties14 === void 0 ? void 0 : _field$properties14.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: `${field === null || field === void 0 ? void 0 : (_field$properties15 = field.properties) === null || _field$properties15 === void 0 ? void 0 : _field$properties15.placeholder}${field !== null && field !== void 0 && field.required ? " *" : ""}`,
        postfix: field === null || field === void 0 ? void 0 : (_field$properties16 = field.properties) === null || _field$properties16 === void 0 ? void 0 : _field$properties16.postfix,
        prefix: field === null || field === void 0 ? void 0 : (_field$properties17 = field.properties) === null || _field$properties17 === void 0 ? void 0 : _field$properties17.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$properties18 = field.properties) === null || _field$properties18 === void 0 ? void 0 : _field$properties18.shape,
        size: field === null || field === void 0 ? void 0 : (_field$properties19 = field.properties) === null || _field$properties19 === void 0 ? void 0 : _field$properties19.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$properties20 = field.properties) === null || _field$properties20 === void 0 ? void 0 : _field$properties20.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$properties21 = field.properties) === null || _field$properties21 === void 0 ? void 0 : _field$properties21.max,
        messages: field === null || field === void 0 ? void 0 : field.messages,
        min: field === null || field === void 0 ? void 0 : (_field$properties22 = field.properties) === null || _field$properties22 === void 0 ? void 0 : _field$properties22.min,
        placeholder: `${field === null || field === void 0 ? void 0 : (_field$properties23 = field.properties) === null || _field$properties23 === void 0 ? void 0 : _field$properties23.placeholder}${field !== null && field !== void 0 && field.required ? " *" : ""}`,
        postfix: field === null || field === void 0 ? void 0 : (_field$properties24 = field.properties) === null || _field$properties24 === void 0 ? void 0 : _field$properties24.postfix,
        prefix: field === null || field === void 0 ? void 0 : (_field$properties25 = field.properties) === null || _field$properties25 === void 0 ? void 0 : _field$properties25.prefix,
        shape: field === null || field === void 0 ? void 0 : (_field$properties26 = field.properties) === null || _field$properties26 === void 0 ? void 0 : _field$properties26.shape,
        size: field === null || field === void 0 ? void 0 : (_field$properties27 = field.properties) === null || _field$properties27 === void 0 ? void 0 : _field$properties27.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: `${field === null || field === void 0 ? void 0 : (_field$properties28 = field.properties) === null || _field$properties28 === void 0 ? void 0 : _field$properties28.placeholder}${field !== null && field !== void 0 && field.required ? " *" : ""}`,
        postfix: field === null || field === void 0 ? void 0 : (_field$properties29 = field.properties) === null || _field$properties29 === void 0 ? void 0 : _field$properties29.postfix,
        prefix: field === null || field === void 0 ? void 0 : (_field$properties30 = field.properties) === null || _field$properties30 === void 0 ? void 0 : _field$properties30.prefix,
        shape: field === null || field === void 0 ? void 0 : (_field$properties31 = field.properties) === null || _field$properties31 === void 0 ? void 0 : _field$properties31.shape,
        size: field === null || field === void 0 ? void 0 : (_field$properties32 = field.properties) === null || _field$properties32 === void 0 ? void 0 : _field$properties32.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$properties33 = field.properties) === null || _field$properties33 === void 0 ? void 0 : _field$properties33.clearable,
        isSearchable: field === null || field === void 0 ? void 0 : (_field$properties34 = field.properties) === null || _field$properties34 === void 0 ? void 0 : _field$properties34.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$properties35 = field.properties) === null || _field$properties35 === void 0 ? void 0 : _field$properties35.orientation,
        size: field === null || field === void 0 ? void 0 : (_field$properties36 = field.properties) === null || _field$properties36 === void 0 ? void 0 : _field$properties36.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$properties37 = field.properties) === null || _field$properties37 === void 0 ? void 0 : _field$properties37.clearable,
        isSearchable: field === null || field === void 0 ? void 0 : (_field$properties38 = field.properties) === null || _field$properties38 === void 0 ? void 0 : _field$properties38.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: `${field === null || field === void 0 ? void 0 : (_field$properties39 = field.properties) === null || _field$properties39 === void 0 ? void 0 : _field$properties39.placeholder}${field !== null && field !== void 0 && field.required ? " *" : ""}`,
        shape: field === null || field === void 0 ? void 0 : (_field$properties40 = field.properties) === null || _field$properties40 === void 0 ? void 0 : _field$properties40.shape,
        size: field === null || field === void 0 ? void 0 : (_field$properties41 = field.properties) === null || _field$properties41 === void 0 ? void 0 : _field$properties41.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$properties42 = field.properties) === null || _field$properties42 === void 0 ? void 0 : _field$properties42.clearable,
        isSearchable: field === null || field === void 0 ? void 0 : (_field$properties43 = field.properties) === null || _field$properties43 === void 0 ? void 0 : _field$properties43.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: `${field === null || field === void 0 ? void 0 : (_field$properties44 = field.properties) === null || _field$properties44 === void 0 ? void 0 : _field$properties44.placeholder}${field !== null && field !== void 0 && field.required ? " *" : ""}`,
        shape: field === null || field === void 0 ? void 0 : (_field$properties45 = field.properties) === null || _field$properties45 === void 0 ? void 0 : _field$properties45.shape,
        size: field === null || field === void 0 ? void 0 : (_field$properties46 = field.properties) === null || _field$properties46 === void 0 ? void 0 : _field$properties46.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: `${field === null || field === void 0 ? void 0 : (_field$properties47 = field.properties) === null || _field$properties47 === void 0 ? void 0 : _field$properties47.placeholder}${field !== null && field !== void 0 && field.required ? " *" : ""}`,
        postfix: field === null || field === void 0 ? void 0 : (_field$properties48 = field.properties) === null || _field$properties48 === void 0 ? void 0 : _field$properties48.postfix,
        prefix: field === null || field === void 0 ? void 0 : (_field$properties49 = field.properties) === null || _field$properties49 === void 0 ? void 0 : _field$properties49.prefix,
        required: field === null || field === void 0 ? void 0 : (_field$validators10 = field.validators) === null || _field$validators10 === void 0 ? void 0 : _field$validators10.required,
        shape: field === null || field === void 0 ? void 0 : (_field$properties50 = field.properties) === null || _field$properties50 === void 0 ? void 0 : _field$properties50.shape,
        size: field === null || field === void 0 ? void 0 : (_field$properties51 = field.properties) === null || _field$properties51 === void 0 ? void 0 : _field$properties51.size,
        textCase: field === null || field === void 0 ? void 0 : (_field$properties52 = field.properties) === null || _field$properties52 === void 0 ? void 0 : _field$properties52.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: `${field === null || field === void 0 ? void 0 : (_field$properties53 = field.properties) === null || _field$properties53 === void 0 ? void 0 : _field$properties53.placeholder}${field !== null && field !== void 0 && field.required ? " *" : ""}`,
        required: field === null || field === void 0 ? void 0 : (_field$validators11 = field.validators) === null || _field$validators11 === void 0 ? void 0 : _field$validators11.required,
        shape: field === null || field === void 0 ? void 0 : (_field$properties54 = field.properties) === null || _field$properties54 === void 0 ? void 0 : _field$properties54.shape,
        size: field === null || field === void 0 ? void 0 : (_field$properties55 = field.properties) === null || _field$properties55 === void 0 ? void 0 : _field$properties55.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$properties56 = field.properties) === null || _field$properties56 === void 0 ? void 0 : _field$properties56.containerStyles) !== null && _field$properties$con2 !== void 0 ? _field$properties$con2 : {},
        id: `field_${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: `${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);