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 = {
title: 'Start typing',
fields: [{
component: componentTypes.TEXT_FIELD,
name: 'length',
label: 'Length field',
helperText: 'min 5 characters, max 10',
validate: [{
type: validatorTypes.MIN_LENGTH,
threshold: 5,
}, {
type: validatorTypes.MAX_LENGTH,
threshold: 10,
}],
}, {
component: componentTypes.TEXT_FIELD,
name: 'exact-length',
label: 'Exact length field',
helperText: 'must be 3 characters long',
validate: [{
type: validatorTypes.EXACT_LENGTH,
threshold: 3,
}],
}],
};
const LengthValidators = () => (
<div>
</div>
label: 'Switch disabled',
component: components.SWITCH,
isDisabled: true,
},
{
name: 'switch_3',
label: 'Switch readOnly',
component: components.SWITCH,
isReadOnly: true,
},
{
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,
import React from 'react';
import FormRenderer, { componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
import { layoutMapper, formFieldsMapper } from '@data-driven-forms/pf4-component-mapper';
const schema = {
title: 'Start typing',
fields: [{
component: componentTypes.TEXT_FIELD,
name: 'regexp-pattern',
label: 'Regepx',
helperText: 'Value must be equal to Foo',
validate: [{
type: validatorTypes.PATTERN_VALIDATOR,
pattern: /^Foo$/,
}],
}, {
component: componentTypes.TEXT_FIELD,
name: 'string-pattern',
label: 'String pattern',
helperText: 'Value must be equal to Foo',
validate: [{
type: validatorTypes.PATTERN_VALIDATOR,
pattern: '^Foo$',
}],
component: componentTypes.FIELD_ARRAY,
name: 'nicePeople',
fieldKey: 'field_array',
label: 'Nice people',
description: 'This allow you to add nice people to the list dynamically',
fields: [{
component: componentTypes.TEXT_FIELD,
name: 'name',
label: 'Name',
placeholder: 'Borek',
isRequired: true,
validate: [{
type: validatorTypes.REQUIRED,
}],
}, {
component: componentTypes.TEXT_FIELD,
name: 'lastName',
label: 'Last Name',
placeholder: 'Stavitel',
}],
},
{
component: componentTypes.FIELD_ARRAY,
name: 'minItems',
label: 'A list with a minimal number of items',
validate: [{ type: validatorTypes.MIN_ITEMS_VALIDATOR, threshold: 3 }],
fields: [{
component: componentTypes.TEXT_FIELD,
label: 'Item',
}],
},
{
label: 'Switch disabled',
component: components.SWITCH,
isDisabled: true,
},
{
name: 'switch_3',
label: 'Switch readOnly',
component: components.SWITCH,
isReadOnly: true,
},
{
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,
label: 'Text Box unvisible',
title: 'Text Box unvisible',
isVisible: false,
component: components.TEXT_FIELD,
},
{
name: 'text_box_7',
label: 'Text Box with validator',
title: 'Text Box with validator',
validate: [
{
type: validators.PATTERN_VALIDATOR,
pattern: '[0-9]',
},
],
component: components.TEXT_FIELD,
},
{
name: 'text_box_8',
label: 'Text Box integer value',
title: 'Text Box integer value',
dataType: 'integer',
component: components.TEXT_FIELD,
type: 'number',
},
{
name: 'text_box_9',
label: 'Text Box string value',
title: 'Text Box string value',
dataType: 'string',
component: components.TEXT_FIELD,
},
import React from 'react';
import FormRenderer, { componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
import { layoutMapper, formFieldsMapper } from '@data-driven-forms/pf4-component-mapper';
import { Button } from '@material-ui/core';
const schema = {
title: 'Combination of PF4 form and MUI buttons',
fields: [{
component: componentTypes.TEXT_FIELD,
name: 'name',
label: 'Name',
isRequired: true,
validate: [{
type: validatorTypes.REQUIRED,
}],
}],
};
const FormButtons = ({ submitting, pristine, valid, form: { submit, reset }}) => {
return (
<div>
<button color="primary" style="{{" disabled="{">Submit</button>
<button style="{{" disabled="{">Reset</button>
<button>Cancel</button>
</div>
label: 'Text Box with validator',
title: 'Text Box with validator',
validate: [
{
type: validators.PATTERN_VALIDATOR,
pattern: '[0-9]',
},
],
component: components.TEXT_FIELD,
},
{
name: 'text_box_8',
label: 'Text Box integer value',
title: 'Text Box integer value',
dataType: 'integer',
component: components.TEXT_FIELD,
type: 'number',
},
{
name: 'text_box_9',
label: 'Text Box string value',
title: 'Text Box string value',
dataType: 'string',
component: components.TEXT_FIELD,
},
],
component: components.SUB_FORM,
},
{
title: 'Text areas',
key: '638',
fields: [
import { componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
import GenericComponentText from './examples-texts/generic-mui-component';
import TabsText from './examples-texts/tabs';
import CustomComponentText from './examples-texts/custom-component';
import WizardText from './examples-texts/wizard';
export const baseExamples = [{
component: componentTypes.TEXT_FIELD,
link: `?component=${componentTypes.TEXT_FIELD}`,
linkText: 'Text Field',
ContentText: GenericComponentText,
value: { fields: [{
component: componentTypes.TEXT_FIELD,
label: 'First name',
name: 'first-name',
}]},
canBeRequired: true,
variants: [{
name: 'isDisabled',
title: 'Disabled',
}, {
name: 'helperText',
title: 'Helper text',
component: 'input',
import { componentTypes, validatorTypes } from '@data-driven-forms/react-form-renderer';
import GenericComponentText from './examples-texts/generic-mui-component';
import TabsText from './examples-texts/tabs';
import CustomComponentText from './examples-texts/custom-component';
import WizardText from './examples-texts/wizard';
import SelectText from './examples-texts/select';
export const baseExamples = [{
component: componentTypes.TEXT_FIELD,
link: componentTypes.TEXT_FIELD,
linkText: 'Text Field',
ContentText: GenericComponentText,
value: { fields: [{
component: componentTypes.TEXT_FIELD,
label: 'First name',
name: 'first-name',
}]},
canBeRequired: true,
variants: [{
name: 'isDisabled',
title: 'Disabled',
}, {
name: 'helperText',
title: 'Helper text',
component: 'input',
}, {