Skip to content

Commit c3a5aaf

Browse files
Hyperkid123Hyperkid123
committed
Added mapper docs generator
1 parent 10dc958 commit c3a5aaf

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+2450
-13
lines changed

‎packages/react-renderer-demo/src/app/examples/pf4/components/action-mapper.js

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import React from 'react';
2+
import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
3+
import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
4+
5+
import TextField from '@data-driven-forms/pf4-component-mapper/dist/cjs/text-field';
6+
import FormTemplate from '@data-driven-forms/pf4-component-mapper/dist/cjs/form-template';
7+
8+
const translateLabel = (id, locale = 'en') =>
9+
({
10+
en: {
11+
name: 'User name',
12+
password: 'Password'
13+
},
14+
jp: {
15+
name: '名前',
16+
password: 'パスワード'
17+
}
18+
}[locale][id]);
19+
20+
const schema = {
21+
title: 'Action Mapper example (translated strings)',
22+
fields: [
23+
{
24+
component: componentTypes.TEXT_FIELD,
25+
name: 'name',
26+
actions: {
27+
label: ['translateLabel', 'name', 'jp']
28+
}
29+
},
30+
{
31+
component: componentTypes.TEXT_FIELD,
32+
name: 'password',
33+
actions: {
34+
label: ['translateLabel', 'password', 'jp']
35+
}
36+
}
37+
]
38+
};
39+
40+
const componentMapper = {
41+
[componentTypes.TEXT_FIELD]: TextField
42+
};
43+
44+
const actionMapper = {
45+
translateLabel
46+
};
47+
48+
const ActionMapper = () => (
49+
<div className="pf4">
50+
<FormRenderer FormTemplate={FormTemplate} actionMapper={actionMapper} componentMapper={componentMapper} schema={schema} onSubmit={console.log} />
51+
</div>
52+
);
53+
54+
export default ActionMapper;

‎packages/react-renderer-demo/src/app/examples/pf4/components/clear-on-unmount.js

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React, { useState } from 'react';
2+
import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
3+
import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
4+
import FormTemplate from '@data-driven-forms/pf4-component-mapper/dist/cjs/form-template';
5+
import TextField from '@data-driven-forms/pf4-component-mapper/dist/cjs/text-field';
6+
import { Title } from '@patternfly/react-core/dist/js/components/Title/Title';
7+
8+
const componentMapper = {
9+
[componentTypes.TEXT_FIELD]: TextField
10+
};
11+
12+
const schema = {
13+
fields: [
14+
{
15+
component: componentTypes.TEXT_FIELD,
16+
name: 'condition-1',
17+
label: 'First condition',
18+
helperText: 'Type John to show conditional fields'
19+
},
20+
{
21+
component: componentTypes.TEXT_FIELD,
22+
name: 'dependent-1',
23+
label: 'Depends on "First condition" field value',
24+
helperText: 'Change "First condition" field value to hide this field and delete this field value from state',
25+
clearOnUnmount: true,
26+
condition: {
27+
when: 'condition-1',
28+
is: 'John'
29+
}
30+
},
31+
{
32+
component: componentTypes.TEXT_FIELD,
33+
name: 'dependent-2',
34+
label: 'Depends on "First condition" field value',
35+
helperText: 'Change "First condition" field value to hide this field. When this field appears again it will preserve its previous value.',
36+
condition: {
37+
when: 'condition-1',
38+
is: 'John'
39+
}
40+
}
41+
]
42+
};
43+
44+
const ClearOnUnmount = () => {
45+
const [values, setValues] = useState({});
46+
return (
47+
<div className="pf4">
48+
<FormRenderer
49+
FormTemplate={FormTemplate}
50+
componentMapper={componentMapper}
51+
schema={schema}
52+
onSubmit={console.log}
53+
debug={({ values }) => setValues(values)}
54+
/>
55+
<div style={{ marginTop: 16 }}>
56+
<Title size="md">Form values</Title>
57+
<pre>{JSON.stringify(values, null, 2)}</pre>
58+
</div>
59+
</div>
60+
);
61+
};
62+
63+
export default ClearOnUnmount;

‎packages/react-renderer-demo/src/app/examples/pf4/components/cleared-value.js

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import React, { useState } from 'react';
2+
import FormRenderer from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
3+
import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
4+
import FormTemplate from '@data-driven-forms/pf4-component-mapper/dist/cjs/form-template';
5+
import TextField from '@data-driven-forms/pf4-component-mapper/dist/cjs/text-field';
6+
import { Title } from '@patternfly/react-core/dist/js/components/Title/Title';
7+
8+
const schema = {
9+
fields: [
10+
{
11+
component: componentTypes.TEXT_FIELD,
12+
name: 'field-with-initial-value',
13+
label: 'Will be set to null when you delete value from input'
14+
},
15+
{
16+
component: componentTypes.TEXT_FIELD,
17+
name: 'field-withouth-initial-value',
18+
label: 'Value will be undefined when field is empty'
19+
}
20+
]
21+
};
22+
23+
const componentMapper = {
24+
[componentTypes.TEXT_FIELD]: TextField
25+
};
26+
27+
const ClearedValueExample = () => {
28+
const [values, setValues] = useState({});
29+
return (
30+
<div className="pf4">
31+
<FormRenderer
32+
initialValues={{
33+
'field-with-initial-value': 'Delete me!'
34+
}}
35+
clearedValue={null}
36+
FormTemplate={FormTemplate}
37+
componentMapper={componentMapper}
38+
schema={schema}
39+
onSubmit={console.log}
40+
debug={({ values }) => setValues(values)}
41+
/>
42+
<div style={{ marginTop: 16 }}>
43+
<Title size="md">Form values</Title>
44+
<pre>{JSON.stringify(values, null, 2)}</pre>
45+
</div>
46+
</div>
47+
);
48+
};
49+
50+
export default ClearedValueExample;

‎packages/react-renderer-demo/src/app/examples/pf4/components/component-mapper/form-fields-mapper-docs.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
.ddorg__demo-formGroup {
2+
display: flex;
3+
flex-direction: column;
4+
margin-bottom: 16px;
5+
}
6+
.ddorg__demo-formGroup input {
7+
width: 100%;
8+
padding: 12px 20px;
9+
margin: 8px 0;
10+
display: inline-block;
11+
border: 1px solid #ccc;
12+
border-radius: 4px;
13+
box-sizing: border-box;
14+
}
15+
.ddorg__demo-formGroup p {
16+
margin-top: 0;
17+
margin-bottom: 4px;
18+
}
19+
.ddorg__demo-formGroup.required label::after {
20+
content: "*";
21+
color: red;
22+
margin-left: 2px;
23+
}
24+
.ddorg__demo-formGroup.required p.error-text {
25+
color: orangered;
26+
}

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

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
/* eslint react/prop-types: "off" */
2+
import React, { useState } from 'react';
3+
import FormRender from '@data-driven-forms/react-form-renderer/dist/cjs/form-renderer';
4+
import componentTypes from '@data-driven-forms/react-form-renderer/dist/cjs/component-types';
5+
import useFieldApi from '@data-driven-forms/react-form-renderer/dist/cjs/use-field-api';
6+
import useFormApi from '@data-driven-forms/react-form-renderer/dist/cjs/use-form-api';
7+
8+
import './form-fields-mapper-docs.css';
9+
10+
const getButtonStyle = (variant) => ({
11+
color: 'White',
12+
backgroundColor: variant === 'primary' ? 'RebeccaPurple' : '#888',
13+
padding: '8px 16px',
14+
borderRadius: 4,
15+
cursor: 'pointer',
16+
border: 'none',
17+
marginRight: 4
18+
});
19+
20+
const Button = ({ children, label, variant, ...props }) => (
21+
<button style={getButtonStyle(variant)} {...props}>
22+
{label}
23+
</button>
24+
);
25+
26+
const FormTemplate = ({ formFields }) => {
27+
const { handleSubmit, onCancel } = useFormApi();
28+
return (
29+
<form
30+
onSubmit={(event) => {
31+
event.preventDefault();
32+
handleSubmit();
33+
}}
34+
>
35+
{formFields}
36+
<Button type="submit" variant="primary" label="Submit" />
37+
<Button type="button" label="cancel" onClick={onCancel} />
38+
</form>
39+
);
40+
};
41+
42+
const TextField = (props) => {
43+
const {
44+
customProp,
45+
label,
46+
input,
47+
isRequired,
48+
meta: { error, touched },
49+
FieldArrayProvider,
50+
dataType,
51+
...rest
52+
} = useFieldApi(props);
53+
return (
54+
<div className={`ddorg__demo-formGroup ${isRequired ? 'required' : ''} ${error ? 'error' : ''}`}>
55+
<label htmlFor={input.name}>{label}</label>
56+
<input id={input.name} {...input} {...rest} />
57+
{touched && error && <p className="error-text">{error}</p>}
58+
{customProp && <p>This is a custom prop and has nothing to do with form schema</p>}
59+
</div>
60+
);
61+
};
62+
63+
const componentMapper = {
64+
[componentTypes.TEXT_FIELD]: TextField,
65+
'custom-component-type': TextField
66+
};
67+
68+
const ComponentMapper = () => {
69+
const [values, setValues] = useState({});
70+
const schema = {
71+
fields: [
72+
{
73+
component: componentTypes.TEXT_FIELD,
74+
name: 'first-name',
75+
label: 'First name',
76+
isRequired: true,
77+
validate: [(value) => (!value || value.lenght === 0 ? 'Required' : undefined)],
78+
customProp: true
79+
},
80+
{
81+
component: componentTypes.TEXT_FIELD,
82+
name: 'last-name',
83+
label: 'Last name',
84+
isRequired: true,
85+
validate: [(value) => (!value || value.lenght === 0 ? 'Required' : undefined)]
86+
},
87+
{
88+
component: componentTypes.TEXT_FIELD,
89+
name: 'age',
90+
label: 'Your age',
91+
type: 'number'
92+
},
93+
{
94+
component: 'custom-component-type',
95+
name: 'password',
96+
label: 'Your password',
97+
type: 'password'
98+
}
99+
]
100+
};
101+
return (
102+
<div>
103+
<FormRender
104+
componentMapper={componentMapper}
105+
FormTemplate={FormTemplate}
106+
schema={schema}
107+
onSubmit={(values) => setValues(values)}
108+
onCancel={() => console.log('cancel action')}
109+
/>
110+
<pre>{JSON.stringify(values, null, 2)}</pre>
111+
</div>
112+
);
113+
};
114+
115+
export default ComponentMapper;

0 commit comments

Comments
 (0)