Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
const schema = {
fields: [{
name: 'first-name',
label: 'First name',
component: componentTypes.TEXT_FIELD,
isRequired: true,
validate: [{
type: validatorTypes.REQUIRED,
}],
}, {
name: 'last-name',
label: 'Last name',
component: componentTypes.TEXT_FIELD,
isRequired: true,
validate: [{
type: validatorTypes.REQUIRED,
}],
}, {
name: 'age',
label: 'Age',
component: componentTypes.TEXT_FIELD,
type: 'number',
}],
};
const GetStartedForm = () => (
<div>
</div>
},
{
name: 'text_box_2',
label: 'Text Box with help',
title: 'Text Box with help',
helperText: 'Helper text',
component: components.TEXT_FIELD,
},
{
name: 'text_box_3',
label: 'Text Box required',
title: 'Text Box required',
isRequired: true,
component: components.TEXT_FIELD,
validate: [
{ type: validators.REQUIRED },
],
},
{
name: 'text_box_4',
label: 'Text Box readonly',
title: 'Text Box readonly',
isReadOnly: true,
component: components.TEXT_FIELD,
},
{
name: 'text_box_5',
label: 'Text Box default',
title: 'Text Box default',
component: components.TEXT_FIELD,
},
{
validate: curr.name === 'isRequired' && !curr.value ? acc.validate.filter(({ type }) =>
type === validatorTypes.REQUIRED) : curr.validate ? [ ...acc.validate, ...curr.validate ] : [ ...acc.validate ],
});}, { validate: []});
type: validatorTypes.REQUIRED,
}],
isRequired: true,
}],
}, {
stepKey: 'google',
title: 'Configure google',
name: 'step-3',
nextStep: 'summary',
showTitle: false,
fields: [{
component: componentTypes.TEXT_FIELD,
name: 'google.google-field',
label: 'Google field part',
validate: [{
type: validatorTypes.REQUIRED,
}],
}],
}, {
fields: [{
name: 'summary',
component: 'summary',
}],
stepKey: 'summary',
name: 'summary',
substepOf: 'Summary',
title: 'Summary',
}],
}],
};
export const wizardSchemaSimple = {
},
{
name: 'text_box_2',
label: 'Text Box with help',
title: 'Text Box with help',
helperText: 'Helper text',
component: components.TEXT_FIELD,
},
{
name: 'text_box_3',
label: 'Text Box required',
title: 'Text Box required',
isRequired: true,
component: components.TEXT_FIELD,
validate: [
{ type: validators.REQUIRED },
],
},
{
name: 'text_box_4',
label: 'Text Box readonly',
title: 'Text Box readonly',
isReadOnly: true,
component: components.TEXT_FIELD,
},
{
name: 'text_box_5',
label: 'Text Box default',
title: 'Text Box default',
component: components.TEXT_FIELD,
},
{
},
{
name: 'text_box_2',
label: 'Text Box with help',
title: 'Text Box with help',
helperText: 'Helper text',
component: components.TEXT_FIELD,
},
{
name: 'text_box_3',
label: 'Text Box required',
title: 'Text Box required',
isRequired: true,
component: components.TEXT_FIELD,
validate: [
{ type: validators.REQUIRED },
],
},
{
name: 'text_box_4',
label: 'Text Box readonly',
title: 'Text Box readonly',
isReadOnly: true,
component: components.TEXT_FIELD,
},
{
name: 'text_box_5',
label: 'Text Box default',
title: 'Text Box default',
component: components.TEXT_FIELD,
},
{
import React from 'react';
import FormRender, { componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
import { formFieldsMapper, layoutMapper } from '@data-driven-forms/pf4-component-mapper';
const schema = {
fields: [{
name: 'first-name',
label: 'First name',
component: componentTypes.TEXT_FIELD,
isRequired: true,
validate: [{
type: validatorTypes.REQUIRED,
}],
}, {
name: 'last-name',
label: 'Last name',
component: componentTypes.TEXT_FIELD,
isRequired: true,
validate: [{
type: validatorTypes.REQUIRED,
}],
}, {
name: 'age',
label: 'Age',
component: componentTypes.TEXT_FIELD,
type: 'number',
}],
};
validate: curr.name === 'isRequired' && !curr.value ? acc.validate.filter(({ type }) =>
type === validatorTypes.REQUIRED) : curr.validate ? [ ...acc.validate, ...curr.validate ] : [ ...acc.validate ],
});}, { validate: []});
if (!baseStructure) {
this.state = {
notFound: true,
component: props.router.query.component,
};
} else {
this.state = {
...baseStructure,
variants: [
...baseStructure.variants,
{ name: 'name', title: 'Name', value: baseStructure.value.fields[0].name, component: 'input' },
...(baseStructure.canBeRequired ? [{
name: 'isRequired',
title: 'Required',
validate: [{
type: validatorTypes.REQUIRED,
}],
}] : []),
],
value: JSON.stringify(baseStructure.value, null, 2),
parsedSchema: baseStructure.value,
activeMapper: 'mui',
frameHeight: 360,
openTooltip: false,
};
}
this.mapperVariants = {
mui: {
formFieldsMapper: {
...props.mappers.mui.formFieldsMapper,
[componentTypes.WIZARD]: MuiWizard,
}, {
component: componentTypes.SELECT_COMPONENT,
name: 'source-type',
label: 'Source type',
isRequired: true,
options: [{
label: 'Please Choose',
}, {
value: 'aws',
label: 'Aws',
}, {
value: 'google',
label: 'Google',
}],
validate: [{
type: validatorTypes.REQUIRED,
}],
}],
}, {
title: 'Configure AWS',
name: 'step-2',
stepKey: 'aws',
nextStep: 'summary',
fields: [{
component: componentTypes.TEXT_FIELD,
name: 'aws-field',
label: 'Aws field part',
}],
}, {
stepKey: 'google',
title: 'Configure google',
name: 'step-3',