Skip to content

Commit e97f410

Browse files
Hyperkid123Hyperkid123
committed
Fixed missing form template around component mapper example.
1 parent 16e3524 commit e97f410

4 files changed

Lines changed: 127 additions & 151 deletions

File tree

‎packages/react-form-renderer/src/components/form-renderer.js‎

Lines changed: 2 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React, { useEffect } from 'react';
2-
import { Form, useFormState } from 'react-final-form';
1+
import React from 'react';
2+
import { Form } from 'react-final-form';
33
import arrayMutators from 'final-form-arrays';
44
import PropTypes from 'prop-types';
55
import createFocusDecorator from 'final-form-focus';
@@ -28,32 +28,6 @@ FormContent.propTypes = {
2828
Template: PropTypes.oneOfType([PropTypes.node, PropTypes.element, PropTypes.func]).isRequired
2929
};
3030

31-
const useComponentSpy = (onStateUpdate) => {
32-
const state = useFormState();
33-
useEffect(() => {
34-
if (onStateUpdate) {
35-
onStateUpdate(state);
36-
}
37-
});
38-
};
39-
40-
const FormContent = ({ value, formFields, schema, onStateUpdate, Template }) => {
41-
useComponentSpy(onStateUpdate);
42-
return (
43-
<RendererContext.Provider key="FUCK" value={value}>
44-
<Template key="prdel" formFields={formFields} schema={schema} />
45-
</RendererContext.Provider>
46-
);
47-
};
48-
49-
FormContent.propTypes = {
50-
value: PropTypes.object.isRequired,
51-
formFields: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired,
52-
schema: PropTypes.object.isRequired,
53-
onStateUpdate: PropTypes.func,
54-
Template: PropTypes.oneOfType([PropTypes.node, PropTypes.element, PropTypes.func]).isRequired
55-
};
56-
5731
const FormRenderer = ({
5832
componentMapper,
5933
FormTemplate,

‎packages/react-renderer-demo/src/app/pages/live-editor.js‎

Lines changed: 14 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,12 @@
11
/* eslint no-console: "off" */
2-
import React, { useContext, useState } from 'react';
2+
import React, { useState } from 'react';
33
import Grid from '@material-ui/core/Grid';
44
import Paper from '@material-ui/core/Paper';
5-
import List from '@material-ui/core/List';
6-
import ListItem from '@material-ui/core/ListItem';
7-
import ListItemText from '@material-ui/core/ListItemText';
8-
import Typography from '@material-ui/core/Typography';
95
import FormRenderer from '@data-driven-forms/react-form-renderer';
106
import { componentTypes as components, validatorTypes as validators, defaultSchemaValidator } from '@data-driven-forms/react-form-renderer';
7+
import { formTemplate, componentMapper } from '@data-driven-forms/pf4-component-mapper';
118

129
import dynamic from 'next/dynamic';
13-
14-
import MapperContext from '@docs/components/mappers-context';
1510
const CodeEditor = dynamic(import('@docs/components/code-editor'), {
1611
ssr: false
1712
});
@@ -79,7 +74,7 @@ const baseStructure = {
7974
name: 'text_box_6',
8075
label: 'Text Box unvisible',
8176
title: 'Text Box unvisible',
82-
isVisible: false,
77+
hideField: true,
8378
component: components.TEXT_FIELD
8479
},
8580
{
@@ -491,8 +486,6 @@ const LiveEditor = () => {
491486
parsedSchema: baseStructure
492487
});
493488

494-
const mappers = useContext(MapperContext);
495-
496489
const onChange = (value) => {
497490
let schema;
498491
try {
@@ -503,7 +496,7 @@ const LiveEditor = () => {
503496
}
504497

505498
try {
506-
defaultSchemaValidator(schema, mappers.mappers.pf4.componentMapper);
499+
defaultSchemaValidator(schema, componentMapper);
507500
setState((state) => ({ ...state, parsedSchema: schema }));
508501
} catch (error) {
509502
console.warn('not correct json schema', error);
@@ -517,40 +510,21 @@ const LiveEditor = () => {
517510
<div style={{ width: '100%', paddingTop: 10, background: '#1d1f21' }}>
518511
<CodeEditor readOnly={false} mode="json" onChange={onChange} value={value} maxLines={50} />
519512
</div>
520-
<div>
521-
<Grid container spacing={6}>
522-
<Grid item xs={12} md={6}>
523-
<Typography variant="h6">Avaiable components:</Typography>
524-
<div>
525-
<List>
526-
{[...new Set(Object.values(components))].map((item) =>
527-
item === 'wizard' ? null : (
528-
<ListItem key={item}>
529-
<ListItemText primary={item} />
530-
</ListItem>
531-
)
532-
)}
533-
</List>
534-
</div>
535-
</Grid>
536-
</Grid>
537-
</div>
538513
</Grid>
539514
<Grid item md={6} xs={12}>
540515
<Paper square style={{ padding: 16, paddingLeft: 24 }}>
541516
<Grid container spacing={6}>
542517
<Grid item xs={12}>
543-
{mappers.loaded && (
544-
<div className="pf4">
545-
<FormRenderer
546-
componentMapper={mappers.mappers.pf4.componentMapper}
547-
schema={parsedSchema}
548-
onSubmit={console.log}
549-
onCancel={() => console.log('Cancel clicked')}
550-
canReset
551-
/>
552-
</div>
553-
)}
518+
<div className="pf4">
519+
<FormRenderer
520+
componentMapper={componentMapper}
521+
formTemplate={formTemplate()}
522+
schema={parsedSchema}
523+
onSubmit={console.log}
524+
onCancel={() => console.log('Cancel clicked')}
525+
canReset
526+
/>
527+
</div>
554528
</Grid>
555529
</Grid>
556530
</Paper>

‎packages/react-renderer-demo/src/app/src/doc-components/component-mapper/form-fields-mapper.js‎

Lines changed: 81 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,90 +1,112 @@
11
/* eslint react/prop-types: "off" */
2-
import React, { Fragment } from 'react';
3-
import FormRender, { componentTypes, useFieldApi } from '@data-driven-forms/react-form-renderer';
2+
import React, { useState } from 'react';
3+
import FormRender, { componentTypes, useFieldApi, useFormApi } from '@data-driven-forms/react-form-renderer';
44

55
import './form-fields-mapper-docs.css';
66

7-
const wrapperStyles = {
8-
padding: 16,
9-
borderRadius: 4,
10-
fontFamily: 'Roboto',
11-
};
12-
13-
const FormWrapper = ({ children, ...props }) => (<form style={ wrapperStyles } { ...props }>{ children }</form>);
14-
15-
const Title = ({ children, ...props }) => <h1>{ children }</h1>;
16-
17-
const Description = ({ children, ...props }) => <p >{ children }</p>;
18-
19-
const getButtonStyle = variant => ({
7+
const getButtonStyle = (variant) => ({
208
color: 'White',
219
backgroundColor: variant === 'primary' ? 'RebeccaPurple' : '#888',
2210
padding: '8px 16px',
2311
borderRadius: 4,
2412
cursor: 'pointer',
2513
border: 'none',
26-
marginRight: 4,
14+
marginRight: 4
2715
});
2816

29-
const Button = ({ children, label, variant, ...props }) => <button style={ getButtonStyle(variant) } { ...props }>{ label }</button>;
30-
31-
const TextField = ({ customProp, label, input, isRequired, meta: { error, touched }, FieldArrayProvider, dataType, ...props }) => (
32-
<div className={ `ddorg__demo-formGroup ${isRequired ? 'required' : ''} ${error ? 'error' : ''}` }>
33-
<label htmlFor={ input.name }>{ label }</label>
34-
<input id={ input.name } { ...input } { ...props } />
35-
{ touched && error && <p className="error-text">{ error }</p> }
36-
{ customProp && <p>This is a custom prop and has nothing to do with form schema</p> }
37-
</div>
17+
const Button = ({ children, label, variant, ...props }) => (
18+
<button style={getButtonStyle(variant)} {...props}>
19+
{label}
20+
</button>
3821
);
3922

40-
const CustomComponent = (props) => {
41-
const { input, meta, ...rest } = useFieldApi(props)
42-
return <TextField input={ input } meta={ input } { ...rest } />
23+
const FormTemplate = ({ formFields }) => {
24+
const { handleSubmit, onCancel } = useFormApi();
25+
return (
26+
<form
27+
onSubmit={(event) => {
28+
event.preventDefault();
29+
handleSubmit();
30+
}}
31+
>
32+
{formFields}
33+
<Button type="submit" variant="primary" label="Submit" />
34+
<Button type="button" label="cancel" onClick={onCancel} />
35+
</form>
36+
);
37+
};
38+
39+
const TextField = (props) => {
40+
const {
41+
customProp,
42+
label,
43+
input,
44+
isRequired,
45+
meta: { error, touched },
46+
FieldArrayProvider,
47+
dataType,
48+
...rest
49+
} = useFieldApi(props);
50+
return (
51+
<div className={`ddorg__demo-formGroup ${isRequired ? 'required' : ''} ${error ? 'error' : ''}`}>
52+
<label htmlFor={input.name}>{label}</label>
53+
<input id={input.name} {...input} {...rest} />
54+
{touched && error && <p className="error-text">{error}</p>}
55+
{customProp && <p>This is a custom prop and has nothing to do with form schema</p>}
56+
</div>
57+
);
4358
};
4459

4560
const componentMapper = {
4661
[componentTypes.TEXT_FIELD]: TextField,
47-
'custom-component-type': CustomComponent,
62+
'custom-component-type': TextField
4863
};
4964

5065
const ComponentMapper = () => {
66+
const [values, setValues] = useState({});
5167
const schema = {
52-
fields: [{
53-
component: componentTypes.TEXT_FIELD,
54-
name: 'first-name',
55-
label: 'First name',
56-
isRequired: true,
57-
validate: [ value => !value || value.lenght === 0 ? 'Required' : undefined ],
58-
customProp: true,
59-
}, {
60-
component: componentTypes.TEXT_FIELD,
61-
name: 'last-name',
62-
label: 'Last name',
63-
isRequired: true,
64-
validate: [ value => !value || value.lenght === 0 ? 'Required' : undefined ],
65-
}, {
66-
component: componentTypes.TEXT_FIELD,
67-
name: 'age',
68-
label: 'Your age',
69-
type: 'number',
70-
}, {
71-
component: 'custom-component-type',
72-
name: 'password',
73-
label: 'Your password',
74-
type: 'password',
75-
}],
68+
fields: [
69+
{
70+
component: componentTypes.TEXT_FIELD,
71+
name: 'first-name',
72+
label: 'First name',
73+
isRequired: true,
74+
validate: [(value) => (!value || value.lenght === 0 ? 'Required' : undefined)],
75+
customProp: true
76+
},
77+
{
78+
component: componentTypes.TEXT_FIELD,
79+
name: 'last-name',
80+
label: 'Last name',
81+
isRequired: true,
82+
validate: [(value) => (!value || value.lenght === 0 ? 'Required' : undefined)]
83+
},
84+
{
85+
component: componentTypes.TEXT_FIELD,
86+
name: 'age',
87+
label: 'Your age',
88+
type: 'number'
89+
},
90+
{
91+
component: 'custom-component-type',
92+
name: 'password',
93+
label: 'Your password',
94+
type: 'password'
95+
}
96+
],
7697
title: 'Custom form fields mapper and layout mapper',
77-
description: 'If you want to see the source code, please expand the code example.',
98+
description: 'If you want to see the source code, please expand the code example.'
7899
};
79100
return (
80101
<div>
81102
<FormRender
82-
componentMapper={ componentMapper }
83-
FormTemplate={ () => null }
84-
schema={ schema }
85-
onSubmit={ console.log }
86-
onCancel={ () => console.log('cancel action') }
103+
componentMapper={componentMapper}
104+
formTemplate={FormTemplate}
105+
schema={schema}
106+
onSubmit={(values) => setValues(values)}
107+
onCancel={() => console.log('cancel action')}
87108
/>
109+
<pre>{JSON.stringify(values, null, 2)}</pre>
88110
</div>
89111
);
90112
};

‎packages/react-renderer-demo/src/app/src/doc-components/get-started/get-started.js‎

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,36 @@ import FormRender, { componentTypes, validatorTypes } from '@data-driven-forms/r
33
import { componentMapper, FormTemplate } from '@data-driven-forms/pf4-component-mapper';
44

55
const schema = {
6-
fields: [{
7-
name: 'first-name',
8-
label: 'First name',
9-
component: componentTypes.TEXT_FIELD,
10-
isRequired: true,
11-
validate: [{
12-
type: validatorTypes.REQUIRED,
13-
}],
14-
}, {
15-
name: 'last-name',
16-
label: 'Last name',
17-
component: componentTypes.TEXT_FIELD,
18-
isRequired: true,
19-
validate: [{
20-
type: validatorTypes.REQUIRED,
21-
}],
22-
}, {
23-
name: 'age',
24-
label: 'Age',
25-
component: componentTypes.TEXT_FIELD,
26-
type: 'number',
27-
}],
6+
fields: [
7+
{
8+
name: 'first-name',
9+
label: 'First name',
10+
component: componentTypes.TEXT_FIELD,
11+
isRequired: true,
12+
validate: [
13+
{
14+
type: validatorTypes.REQUIRED
15+
}
16+
]
17+
},
18+
{
19+
name: 'last-name',
20+
label: 'Last name',
21+
component: componentTypes.TEXT_FIELD,
22+
isRequired: true,
23+
validate: [
24+
{
25+
type: validatorTypes.REQUIRED
26+
}
27+
]
28+
},
29+
{
30+
name: 'age',
31+
label: 'Age',
32+
component: componentTypes.TEXT_FIELD,
33+
type: 'number'
34+
}
35+
]
2836
};
2937

3038
const GetStartedForm = () => (
@@ -40,6 +48,4 @@ const GetStartedForm = () => (
4048
</div>
4149
);
4250

43-
GetStartedForm.displayName = 'GetStartedForm';
44-
4551
export default GetStartedForm;

0 commit comments

Comments
 (0)