@boomerang-io/carbon-addons-boomerang-react
Version:
Carbon Addons for Boomerang apps
621 lines (613 loc) • 30.2 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var React = require('react');
var yup = require('yup');
var formik = require('formik');
var get = require('lodash.get');
var DataDrivenInput = require('../DataDrivenInput/DataDrivenInput.js');
var isUrl = require('../../tools/isUrl.js');
var customValidators = require('../../tools/yupAst/customValidators.js');
var astGenerator = require('../../tools/yupAst/astGenerator.js');
var settings = require('../../internal/settings.js');
var DataDrivenInputTypes = require('../../constants/DataDrivenInputTypes.js');
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
function _interopNamespace(e) {
if (e && e.__esModule) return e;
var n = Object.create(null);
if (e) {
Object.keys(e).forEach(function (k) {
if (k !== 'default') {
var d = Object.getOwnPropertyDescriptor(e, k);
Object.defineProperty(n, k, d.get ? d : {
enumerable: true,
get: function () { return e[k]; }
});
}
});
}
n.default = e;
return Object.freeze(n);
}
var React__default = /*#__PURE__*/_interopDefault(React);
var yup__namespace = /*#__PURE__*/_interopNamespace(yup);
var get__default = /*#__PURE__*/_interopDefault(get);
/*
IBM Confidential
694970X, 69497O0
© Copyright IBM Corp. 2022, 2024
*/
/**
*
* @param {string} value - value to test for valid property syntax
*/
function isPropertySyntaxValid({ value, customPropertySyntaxPattern, propsSyntaxFound }) {
// Look property pattern and capture group for the property itself
let match = value.match(customPropertySyntaxPattern);
// if the first matched group is truthy, then a property has been entered
// Empty properties are not valid
if (Array.isArray(match) && match.length === propsSyntaxFound) {
return true;
}
else {
return false;
}
}
function validateUrlWithProperties(customPropertySyntaxPattern, customPropertyStartsWithPattern) {
return function () {
return this.transform(function (value, originalValue) {
const propsSyntaxFound = value.match(customPropertyStartsWithPattern)?.length ?? 0;
if ((isUrl.default(value) && !Boolean(propsSyntaxFound)) ||
isPropertySyntaxValid({ value, customPropertySyntaxPattern, propsSyntaxFound })) {
return value;
}
return false;
});
};
}
function validateEmailWithProperties(customPropertySyntaxPattern, customPropertyStartsWithPattern) {
return function () {
return this.transform(function (value, originalValue) {
// Simple pattern for emails
const isValidEmail = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
const propsSyntaxFound = value.match(customPropertyStartsWithPattern)?.length ?? 0;
if ((isValidEmail && !Boolean(propsSyntaxFound)) ||
isPropertySyntaxValid({ value, customPropertySyntaxPattern, propsSyntaxFound })) {
return value;
}
return false;
});
};
}
function registerCustomPropertyMethods(customPropertySyntaxPattern, customPropertyStartsWithPattern) {
const validateUrl = validateUrlWithProperties(customPropertySyntaxPattern, customPropertyStartsWithPattern);
const validateEmail = validateEmailWithProperties(customPropertySyntaxPattern, customPropertyStartsWithPattern);
yup__namespace.addMethod(yup__namespace.string, "urlWithCustomProperty", validateUrl);
yup__namespace.addMethod(yup__namespace.string, "emailWithCustomProperty", validateEmail);
}
function getGoverningSelectKeysMap({ governingKey, governingJsonKey, governingKeys, inputs, }) {
if (Boolean(governingKey) && governingKey !== governingJsonKey)
governingKeys.unshift(governingKey);
const governingInput = inputs.find((input) => input.key === governingKey) ?? {};
/** Continue recursion if the governing select has a governingKey */
if (Boolean(governingInput.governingKey)) {
return getGoverningSelectKeysMap({
governingKey: governingInput.governingKey,
governingJsonKey,
governingKeys,
inputs,
});
}
else {
return governingKeys;
}
}
function getGoverningSelectDeepOptions({ formikValues, governingInputJsonObject, governingKeys, input, inputs, }) {
const nextKey = governingKeys.shift();
if (nextKey) {
const nextKeyInput = inputs.find((input) => input.key === nextKey) ?? {};
const nextInputJsonObject = governingInputJsonObject[nextKey].find((jsonElement) => jsonElement[nextKeyInput.jsonKey] === formikValues[nextKey]);
return getGoverningSelectDeepOptions({
formikValues,
governingInputJsonObject: nextInputJsonObject,
governingKeys,
input,
inputs,
});
}
else {
return governingInputJsonObject[input.key].map((option) => ({
label: option[input.jsonLabel],
value: option[input.jsonKey],
}));
}
}
async function handleGoverningSelectChange({ formikProps, input, inputs, isInputBeingChanged, selectedItem, }) {
const { key, value } = input;
const inputsGovernedByCurrentOne = inputs.filter((formikInput) => formikInput.governingKey === key);
if (selectedItem?.value !== value) {
/** Erase value of governed inputs */
if (inputsGovernedByCurrentOne.length) {
await inputsGovernedByCurrentOne.forEach(async (input) => {
await handleGoverningSelectChange({ formikProps, input, inputs, isInputBeingChanged: false, selectedItem: null });
});
}
// only the top governing select should display warnings if changed and reset touched status for governed ones
await formikProps.setFieldTouched(`['${key}']`, isInputBeingChanged);
formikProps.setFieldValue(`['${key}']`, selectedItem ? selectedItem.value : "");
formikProps.setFieldValue(`['${key}-keyLabel']`, selectedItem ? selectedItem.label : "");
}
}
function generateYupAst({ inputs, allowCustomPropertySyntax, customPropertySyntaxPattern, customPropertyStartsWithPattern, useCSVforArrays, }) {
if (allowCustomPropertySyntax) {
registerCustomPropertyMethods(customPropertySyntaxPattern, customPropertyStartsWithPattern);
}
let yupShape = {};
inputs.forEach((input) => {
let yupValidationArray = [];
const inputType = input.type ?? "";
if (!DataDrivenInputTypes.INPUT_TYPES_ARRAY.includes(inputType)) {
return;
}
if (inputType === DataDrivenInputTypes.DATE_TYPES.DATE) {
yupValidationArray.push(["yup.date", "Enter a valid date"]);
}
if (inputType === DataDrivenInputTypes.TEXT_AREA_TYPES.TEXT_AREA ||
inputType === DataDrivenInputTypes.TEXT_INPUT_TYPES.EMAIL ||
inputType === DataDrivenInputTypes.TEXT_INPUT_TYPES.PASSWORD ||
inputType === DataDrivenInputTypes.TEXT_INPUT_TYPES.SECURED ||
inputType === DataDrivenInputTypes.TEXT_INPUT_TYPES.TEL ||
inputType === DataDrivenInputTypes.TEXT_INPUT_TYPES.TEXT ||
inputType === DataDrivenInputTypes.TEXT_INPUT_TYPES.TIME ||
inputType === DataDrivenInputTypes.TEXT_INPUT_TYPES.URL ||
inputType === DataDrivenInputTypes.RADIO_TYPES.RADIO ||
inputType === DataDrivenInputTypes.SELECT_TYPES.SELECT ||
inputType?.startsWith(DataDrivenInputTypes.TEXT_EDITOR_TYPES.TEXT_EDITOR)) {
yupValidationArray.push(["yup.string"]);
// if (
// allowCustomPropertySyntax &&
// inputType !== TEXT_INPUT_TYPES.EMAIL &&
// inputType !== TEXT_INPUT_TYPES.URL &&
// inputType !== TEXT_INPUT_TYPES.SECURED &&
// inputType !== TEXT_INPUT_TYPES.PASSWORD
// )
// yupValidationArray.push(
// ['yup.customProperty'],
// ['yup.typeError', 'Enter valid syntax for a property']
// );
// Create a customValidator for each input b/c regex deserialization
// does not work currently
const { pattern } = input;
if (typeof pattern === "string") {
customValidators.addCustomValidator(`${input.key}-matches`, yup__namespace.string().test(`${input.key}-matches`, input.patternInvalidText || `Enter a value that matches pattern: ${input.pattern}`, (value) => {
if (!input.required && !Boolean(value)) {
return true;
}
else
return new RegExp(pattern).test(value);
}));
yupValidationArray.push([`${input.key}-matches`]);
}
//TODO: figure out how to update serialization in yup-ast so we can use the native "matches" validator
// if (input.pattern) {
// yupValidationArray.push([
// 'yup.matches',
// new RegExp(input.pattern),
// {
// message: `Enter a value that matches pattern ${input.pattern}`,
// excludeEmptyString: true,
// },
// ]);
// }
if (inputType === DataDrivenInputTypes.TEXT_INPUT_TYPES.EMAIL) {
if (allowCustomPropertySyntax)
yupValidationArray.push(["yup.emailWithCustomProperty"], ["yup.typeError", "Enter a valid email"]);
else
yupValidationArray.push(["yup.email", "Enter a valid email"]);
}
if (inputType === DataDrivenInputTypes.TEXT_INPUT_TYPES.URL) {
if (allowCustomPropertySyntax)
yupValidationArray.push(["yup.urlWithCustomProperty"], ["yup.typeError", "Enter a valid URL"]);
else
yupValidationArray.push(["yup.url", "Enter a valid URL"]);
}
}
if (inputType === DataDrivenInputTypes.TEXT_INPUT_TYPES.NUMBER) {
yupValidationArray.push(["yup.number", "Enter a number"]);
}
if (inputType === DataDrivenInputTypes.BOOLEAN_TYPES.BOOLEAN) {
yupValidationArray.push(["yup.boolean"]);
}
if (inputType === DataDrivenInputTypes.MULTI_SELECT_TYPES.MULTI_SELECT ||
inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE ||
inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE_NON_DELETABLE ||
inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR ||
inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE ||
inputType === DataDrivenInputTypes.CHECKBOX_TYPES.CHECKBOX) {
if (useCSVforArrays) {
yupValidationArray.push(["yup.string"]);
const { pattern } = input;
if (pattern === typeof "string") {
customValidators.addCustomValidator(`${input.key}-matches`, yup__namespace.string().test(`${input.key}-matches`, input.patternInvalidText || `Enter values that matches pattern: ${input.pattern}`, (csv) => {
const regexTester = new RegExp(pattern);
return csv?.split(",").every((val) => regexTester.test(val)) ?? false;
}));
yupValidationArray.push([`${input.key}-matches`]);
}
}
else {
yupValidationArray.push(["yup.array"]);
const { pattern } = input;
if (typeof pattern === "string") {
customValidators.addCustomValidator(`${input.key}-matches`, yup__namespace.array().test(`${input.key}-matches`, input.patternInvalidText || `Enter values that matches pattern: ${pattern}`, (values) => {
const regexTester = new RegExp(pattern);
return values?.every((val) => regexTester.test(val)) ?? false;
}));
yupValidationArray.push([`${input.key}-matches`]);
}
}
}
if (Object.values(DataDrivenInputTypes.TEXT_INPUT_TYPES).includes(inputType) ||
inputType === DataDrivenInputTypes.TEXT_AREA_TYPES.TEXT_AREA ||
inputType === DataDrivenInputTypes.TEXT_EDITOR_TYPES.TEXT_EDITOR) {
if (inputType === DataDrivenInputTypes.TEXT_INPUT_TYPES.NUMBER) {
if (input.min) {
yupValidationArray.push(["yup.min", input.min, `Enter value greater than ${input.min}`]);
}
if (input.max) {
yupValidationArray.push(["yup.max", input.max, `Enter value less than ${input.max}`]);
}
}
else {
if (input.min) {
yupValidationArray.push(["yup.min", input.min, `Enter at least ${input.min} characters`]);
}
if (input.max) {
yupValidationArray.push(["yup.max", input.max, `Enter at most ${input.max} characters`]);
}
}
}
if (Array.isArray(input.invalidValues)) {
yupValidationArray.push(["yup.notOneOf", input.invalidValues, `Enter an allowed value`]);
}
if (input.required) {
if (inputType === DataDrivenInputTypes.BOOLEAN_TYPES.BOOLEAN) {
yupValidationArray.push(["yup.oneOf", [true], "Toggle must be checked"]);
}
else {
yupValidationArray.push(["yup.required", `Enter a value for ${input.label}`]);
}
}
if (yupValidationArray.length > 0) {
yupShape[input.key] = yupValidationArray;
}
});
return [["yup.object"], ["yup.shape", yupShape]];
}
function generateYupSchema({ inputs, allowCustomPropertySyntax, customPropertySyntaxPattern, customPropertyStartsWithPattern, useCSVforArrays, validationSchemaExtension, }) {
let validationSchema = astGenerator.transformAll(generateYupAst({
inputs,
allowCustomPropertySyntax,
customPropertySyntaxPattern,
customPropertyStartsWithPattern,
useCSVforArrays,
}));
if (validationSchemaExtension) {
validationSchema = validationSchema.concat(validationSchemaExtension);
}
return validationSchema;
}
/**
* Get initial values of each input in array of inputs
*/
const determineInitialValues = (inputs, useCSVforArrays) => {
const values = {};
inputs.forEach((input) => {
let value = "";
let valueToCheck = input.value || input.defaultValue;
const isArrayInput = !useCSVforArrays && Object.values(DataDrivenInputTypes.ARRAY_INPUT_TYPES).includes(input.type);
if (isArrayInput) {
valueToCheck = input.value || input.defaultValue || input.values || input.defaultValues;
}
if (valueToCheck) {
switch (valueToCheck) {
case "false": {
value = false;
break;
}
case "true": {
value = true;
break;
}
default: {
value = valueToCheck;
}
}
}
values[input.key] = value;
});
return values;
};
/**
* Check if an input X needs to be conditionally rendered
* If it does, then find an input Y in the same section that has key equal to the input X's requiredForKey
* If input Y has a value that is present in input X's requiredValueOf array, then render X
*/
const conditionallyRenderInput = (input, values) => {
if (!input.conditionallyRender) {
return true;
}
if (input.requiredForKey && input.requiredValueOf) {
/**
* Check which input in this section has the key equal to requiredForKey and get its value
*/
const requiredForKeyInputValue = values[input.requiredForKey];
const valuesInputIsRenderedFor = input.requiredValueOf;
/**
* If the value of the input this input is required for is an array loop through those values to find a matching one
* by going through all of configured values for the input - the "requiredValueOf" of property
* Check for the value and the string of the value bc of how the services work. "true" and "false" are strings not boolean values
*/
if (Array.isArray(requiredForKeyInputValue)) {
for (let requiredForValue of valuesInputIsRenderedFor) {
for (let singleRequiredForKeyInputValue of requiredForKeyInputValue) {
if (requiredForValue === singleRequiredForKeyInputValue ||
requiredForValue === String(singleRequiredForKeyInputValue)) {
return true;
}
}
}
}
else {
for (let requiredForValue of valuesInputIsRenderedFor) {
if (requiredForValue === requiredForKeyInputValue || requiredForValue === String(requiredForKeyInputValue)) {
return true;
}
}
}
}
else {
return false;
}
};
/**
* Map of the input groups to specifc props to be passed
*/
const TYPE_PROPS = {
[DataDrivenInputTypes.INPUT_GROUPS.CHECKBOX]: (formikProps, { key }, inputs, useCSVforArrays) => ({
onChange: (value, id, event, selectedItems) => {
if (useCSVforArrays) {
formikProps.setFieldValue(`['${key}']`, selectedItems?.join() ?? "");
}
else {
formikProps.setFieldValue(`['${key}']`, selectedItems);
}
},
}),
[DataDrivenInputTypes.INPUT_GROUPS.CREATABLE]: (formikProps, { key }, inputs, useCSVforArrays) => ({
onChange: (createdItems) => {
formikProps.setFieldTouched(`['${key}']`, true);
if (useCSVforArrays) {
formikProps.setFieldValue(`['${key}']`, createdItems?.join() ?? "");
}
else {
formikProps.setFieldValue(`['${key}']`, createdItems);
}
},
onInputBlur: () => formikProps.setFieldTouched(`['${key}']`, true, true),
}),
[DataDrivenInputTypes.INPUT_GROUPS.DATE]: (formikProps, { key, type }) => type === DataDrivenInputTypes.DATE_TYPES.DATE_RANGE
? {
onChange: (dateArray) => formikProps.setFieldValue(`['${key}']`, dateArray?.map((date) => date.toISOString())),
}
: {
onChange: formikProps.handleChange,
onCalendarChange: (dateArray) => formikProps.setFieldValue(`['${key}']`, dateArray[0]?.toISOString()),
},
[DataDrivenInputTypes.INPUT_GROUPS.MULTI_SELECT]: (formikProps, { key }, inputs, useCSVforArrays) => ({
onChange: async ({ selectedItems }) => {
await formikProps.setFieldTouched(`['${key}']`, true);
if (useCSVforArrays) {
formikProps.setFieldValue(`['${key}']`, selectedItems ? selectedItems.map((item) => item && item.value).join() : "");
}
else {
formikProps.setFieldValue(`['${key}']`, selectedItems.map((item) => item && item.value));
}
},
onInputBlur: () => formikProps.setFieldTouched(`['${key}']`, true, true),
}),
[DataDrivenInputTypes.INPUT_GROUPS.RADIO]: (formikProps, { key }) => ({
onChange: (value) => formikProps.setFieldValue(`['${key}']`, value),
}),
[DataDrivenInputTypes.INPUT_GROUPS.SELECT]: (formikProps, input, inputs) => {
const { key, value } = input;
let typeProps = {
onChange: async ({ selectedItem }) => {
if (selectedItem.value !== value) {
await formikProps.setFieldTouched(`['${key}']`, true);
formikProps.setFieldValue(`['${key}']`, selectedItem ? selectedItem.value : "");
}
},
onInputBlur: () => formikProps.setFieldTouched(`['${key}']`, true, true),
};
/**
* Start Governing Selects logic if input contains governingJsonKey
*/
if (Boolean(input.governingJsonKey)) {
const { governingJsonKey, governingKey, jsonKey, jsonLabel } = input;
const governingJsonInput = inputs.find((input) => input.key === governingJsonKey);
/** Check if governingJson with all governing selects data exists as an array */
if (governingJsonInput && Array.isArray(governingJsonInput.governingJson)) {
const { governingJson } = governingJsonInput;
let governingOptions = [];
let governingDisabled = false;
/**
* Select "governingOptions"
* If current select is the top level governing select, just get the top level options from the json
*/
if (key === governingJsonKey) {
governingOptions = governingJson.map((option) => ({
label: option[jsonLabel],
value: option[jsonKey],
}));
}
else {
/** Check if the select that governs this one has a value and disable if it doesn't */
const governingSelectValue = formikProps.values[governingKey];
if (Boolean(governingSelectValue)) {
let governingKeys = getGoverningSelectKeysMap({
governingKey,
governingJsonKey,
governingKeys: [],
inputs,
});
governingOptions = getGoverningSelectDeepOptions({
formikValues: formikProps.values,
governingInputJsonObject: governingJson.find((jsonElement) => jsonElement[governingJsonInput.jsonKey] === formikProps.values[governingJsonKey]),
governingKeys: [...governingKeys],
input,
inputs,
});
}
else {
governingDisabled = true;
}
}
typeProps = {
...typeProps,
onChange: ({ selectedItem }) => handleGoverningSelectChange({ formikProps, input, inputs, selectedItem, isInputBeingChanged: true }),
governingOptions,
governingDisabled,
};
}
}
return typeProps;
},
[DataDrivenInputTypes.INPUT_GROUPS.TEXT_AREA]: (formikProps) => ({
onChange: formikProps.handleChange,
}),
[DataDrivenInputTypes.INPUT_GROUPS.TEXT_EDITOR]: (formikProps) => ({
onChange: formikProps.handleChange,
}),
[DataDrivenInputTypes.INPUT_GROUPS.TEXT_INPUT]: (formikProps) => ({
onChange: formikProps.handleChange,
}),
[DataDrivenInputTypes.INPUT_GROUPS.BOOLEAN]: (formikProps, { key }) => ({
onChange: (value) => {
formikProps.setFieldTouched(`['${key}']`, true, true);
formikProps.setFieldValue(`['${key}']`, value);
},
}),
};
function determineTypeProps(type, otherProps) {
const { checkboxListProps, creatableProps, dateProps, multiSelectProps, radioProps, selectProps, textAreaProps, textEditorProps, textInputProps, toggleProps, } = otherProps;
if (Object.values(DataDrivenInputTypes.CHECKBOX_TYPES).includes(type)) {
return {
typeProps: TYPE_PROPS[DataDrivenInputTypes.INPUT_GROUPS.CHECKBOX],
additionalTypeProps: checkboxListProps,
};
}
if (Object.values(DataDrivenInputTypes.CREATABLE_TYPES).includes(type)) {
return {
typeProps: TYPE_PROPS[DataDrivenInputTypes.INPUT_GROUPS.CREATABLE],
additionalTypeProps: creatableProps,
};
}
if (Object.values(DataDrivenInputTypes.DATE_TYPES).includes(type)) {
return {
typeProps: TYPE_PROPS[DataDrivenInputTypes.INPUT_GROUPS.DATE],
additionalTypeProps: dateProps,
};
}
if (Object.values(DataDrivenInputTypes.MULTI_SELECT_TYPES).includes(type)) {
return {
typeProps: TYPE_PROPS[DataDrivenInputTypes.INPUT_GROUPS.MULTI_SELECT],
additionalTypeProps: multiSelectProps,
};
}
if (Object.values(DataDrivenInputTypes.RADIO_TYPES).includes(type)) {
return {
typeProps: TYPE_PROPS[DataDrivenInputTypes.INPUT_GROUPS.RADIO],
additionalTypeProps: radioProps,
};
}
if (Object.values(DataDrivenInputTypes.SELECT_TYPES).includes(type)) {
return {
typeProps: TYPE_PROPS[DataDrivenInputTypes.INPUT_GROUPS.SELECT],
additionalTypeProps: selectProps,
};
}
if (Object.values(DataDrivenInputTypes.TEXT_AREA_TYPES).includes(type)) {
return {
typeProps: TYPE_PROPS[DataDrivenInputTypes.INPUT_GROUPS.TEXT_AREA],
additionalTypeProps: textAreaProps,
};
}
if (type.startsWith(DataDrivenInputTypes.TEXT_EDITOR_TYPES.TEXT_EDITOR)) {
return {
typeProps: TYPE_PROPS[DataDrivenInputTypes.INPUT_GROUPS.TEXT_EDITOR],
additionalTypeProps: textEditorProps,
};
}
if (Object.values(DataDrivenInputTypes.TEXT_INPUT_TYPES).includes(type)) {
return {
typeProps: TYPE_PROPS[DataDrivenInputTypes.INPUT_GROUPS.TEXT_INPUT],
additionalTypeProps: textInputProps,
};
}
if (Object.values(DataDrivenInputTypes.BOOLEAN_TYPES).includes(type)) {
return {
typeProps: TYPE_PROPS[DataDrivenInputTypes.INPUT_GROUPS.BOOLEAN],
additionalTypeProps: toggleProps,
};
}
return { typeProps: () => { }, additionalTypeProps: () => { } };
}
DynamicFormik.defaultProps = {
checkboxListProps: (...args) => ({}),
creatableProps: (...args) => ({}),
dateProps: (...args) => ({}),
multiSelectProps: (...args) => ({}),
radioProps: (...args) => ({}),
selectProps: (...args) => ({}),
textAreaProps: (...args) => ({}),
textEditorProps: (...args) => ({}),
textInputProps: (...args) => ({}),
toggleProps: (...args) => ({}),
};
function DynamicFormik({ additionalInitialValues = {}, allowCustomPropertySyntax = false, customPropertySyntaxPattern = /\$\{p:([a-zA-Z0-9_.-]+)\}|\$\(([a-zA-Z0-9_.-\s]+)\)/g, customPropertyStartsWithPattern = /\$\{|\$\(/g, children, dataDrivenInputProps, inputProps, initialValues, inputs, onSubmit, useCSVforArrays = false, validationSchema, validationSchemaExtension, ...otherProps }) {
return (React__default.default.createElement(formik.Formik, { initialValues: (Boolean(initialValues) && initialValues) || {
...determineInitialValues(inputs, useCSVforArrays),
...additionalInitialValues,
}, validationSchema: validationSchema ||
generateYupSchema({
inputs,
allowCustomPropertySyntax,
customPropertySyntaxPattern,
customPropertyStartsWithPattern,
useCSVforArrays,
validationSchemaExtension,
}), onSubmit: (values, actions) => {
if (onSubmit)
onSubmit(values, actions);
}, ...otherProps }, (formikProps) => {
const { values, touched, errors, handleBlur } = formikProps;
const finalInputs = inputs.filter((input) => conditionallyRenderInput(input, values));
const dataDrivenInputs = finalInputs.map((input) => {
const { key, type, value, // eslint-disable-line
...otherInputsProps } = input;
const inputValue = values[key] !== undefined &&
values[key] !== null &&
(Object.values(DataDrivenInputTypes.TEXT_INPUT_TYPES).includes(type) ||
type === DataDrivenInputTypes.TEXT_AREA_TYPES.TEXT_AREA ||
type === DataDrivenInputTypes.TEXT_EDITOR_TYPES.TEXT_EDITOR)
? values[key].toString()
: values[key];
const invalidText = get__default.default(errors, key);
const invalid = invalidText && get__default.default(touched, key);
const { typeProps = () => { }, additionalTypeProps = () => { } } = determineTypeProps(type, otherProps);
return (React__default.default.createElement(DataDrivenInput.default, { key: key, customComponent: input.customComponent, formikProps: formikProps, id: `['${key}']`, invalid: invalid, invalidText: invalidText, name: `['${key}']`, onBlur: handleBlur, type: type, value: inputValue, ...typeProps(formikProps, input, finalInputs, useCSVforArrays), ...otherInputsProps, ...inputProps, ...additionalTypeProps({ formikProps, input }), ...dataDrivenInputProps }));
});
return (React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-dynamic-formik` }, children({ inputs: dataDrivenInputs, formikProps })));
}));
}
exports.default = DynamicFormik;