Skip to content

Commit e95b4fb

Browse files
BlundertBlundert
authored
Merge pull request #48 from Wavelop/release/0.3.0
Release/0.3.0
2 parents cd0533d + 8164583 commit e95b4fb

File tree

31 files changed

+1104
-92
lines changed

31 files changed

+1104
-92
lines changed

‎example/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
"@material-ui/pickers": "^3.2.8",
7070
"@material-ui/styles": "4.7.1",
7171
"await-to": "0.1.0",
72-
"axios": "0.19.2",
72+
"axios": "0.21.1",
7373
"classnames": "2.2.6",
7474
"clsx": "1.0.4",
7575
"color": "3.1.2",

‎example/src/components/App/index.jsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,16 @@ const CustomLayout = Loadable({
5151
}
5252
});
5353

54+
const MultipleForm = Loadable({
55+
loader: () =>
56+
import("Screens").then(screens => {
57+
return screens.MultipleForm;
58+
}),
59+
loading() {
60+
return <Spinner />;
61+
}
62+
});
63+
5464
function App() {
5565
return (
5666
<TranslateProvider>
@@ -77,6 +87,11 @@ function App() {
7787
path="/custom-layout"
7888
component={CustomLayout}
7989
/>
90+
<PublicRoute
91+
exact={true}
92+
path="/multiple"
93+
component={MultipleForm}
94+
/>
8095
</Switch>
8196
</Router>
8297
</Layout>

‎example/src/screens/CustomLayout/config.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { CustomInput, CustomRow, DatePicker } from "Components";
22
import { validations } from "@wavelop/dynamic-form";
3+
import { TextField } from "@wavelop/dynamic-form-material-ui-components";
34

45
const { required, pattern } = validations;
56

@@ -15,7 +16,7 @@ export const form = ({ t }) => {
1516
name: "progetto",
1617
label: "Progetto",
1718
helperText: "Seleziona il progetto",
18-
tag: CustomInput,
19+
tag: TextField,
1920
validations: [
2021
{
2122
kind: required,

‎example/src/screens/MultipleForm/config.js‎

Lines changed: 112 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,112 @@
1+
import { CustomInput, CustomRow, DatePicker } from "Components";
2+
import { validations } from "@wavelop/dynamic-form";
3+
4+
const { required, pattern } = validations;
5+
6+
export const form = ({ t }) => {
7+
8+
return [
9+
{
10+
name: "row1",
11+
tag: "row",
12+
customRow: CustomRow,
13+
fields: [
14+
{
15+
name: "progetto",
16+
label: "Progetto",
17+
helperText: "Seleziona il progetto",
18+
tag: CustomInput,
19+
validations: [
20+
{
21+
kind: required,
22+
message: t("Error.message.required")
23+
}
24+
]
25+
},
26+
{
27+
name: "cell2",
28+
tag: "row",
29+
customRow: CustomRow,
30+
fields: [
31+
{
32+
name: "attivita",
33+
label: "Attività",
34+
helperText: "Seleziona il tipo di attività",
35+
tag: CustomInput,
36+
validations: [
37+
{
38+
kind: required,
39+
message: t("Error.message.required")
40+
}
41+
]
42+
},
43+
{
44+
name: "postazione",
45+
label: "Postazione",
46+
helperText: "Seleziona la postazione",
47+
tag: CustomInput,
48+
validations: [
49+
{
50+
kind: required,
51+
message: t("Error.message.required")
52+
}
53+
]
54+
},
55+
]
56+
},
57+
]
58+
},
59+
{
60+
name: "row2",
61+
tag: "row",
62+
customRow: CustomRow,
63+
fields: [
64+
{
65+
name: "descrizione",
66+
label: "Descrizione",
67+
helperText: "Inserisci una descrizione",
68+
tag: CustomInput,
69+
validations: [
70+
{
71+
kind: required,
72+
message: t("Error.message.required")
73+
}
74+
]
75+
},
76+
{
77+
name: "link",
78+
label: "Link di riferimento",
79+
helperText: "Inserisci un link di riferimenti",
80+
tag: CustomInput,
81+
validations: [
82+
{
83+
kind: required,
84+
message: t("Error.message.required")
85+
},
86+
{
87+
kind: pattern,
88+
reg: /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w.-]+)+[\w\-._~:/?#[\]@!$&'()*+,;=.]+$/,
89+
negate: true,
90+
message: t("Wavelop.error.message.link.pattern")
91+
}
92+
]
93+
},
94+
{
95+
name: "dateInline",
96+
label: "Date picker Default",
97+
helperText: "Inserisci una data valida",
98+
tag: DatePicker,
99+
dataManipulatorIn: (date) => {
100+
return date ? new Date(date) : new Date();
101+
},
102+
validations: [
103+
{
104+
kind: required,
105+
message: t("Error.message.required")
106+
}
107+
]
108+
},
109+
]
110+
}
111+
];
112+
}

‎example/src/screens/MultipleForm/index.jsx‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
// import from 3rd party
2+
import React from "react";
3+
import PropTypes from "prop-types";
4+
5+
// import from application dependency
6+
import { Button, FormLayout } from "Components";
7+
import { useTranslate, useTranslateState } from "Translate";
8+
import { withRouter } from "Services";
9+
import {
10+
DynamicForm,
11+
useDynamicForm,
12+
withDynamicForm,
13+
} from "@wavelop/dynamic-form";
14+
15+
import { form as formConfig } from "./config.js";
16+
17+
function MultipleForm1(props) {
18+
19+
const { language } = useTranslateState()
20+
21+
const dynamicForm = useDynamicForm();
22+
23+
// Custom Hooks
24+
const i18n = useTranslate();
25+
const { t } = i18n;
26+
27+
const onSubmit = (kind) => event => {
28+
29+
event.preventDefault();
30+
31+
try {
32+
const { state, stateCrypted, stateFull, stateGroupedByRows } = dynamicForm.submit();
33+
34+
console.log(kind, state, stateCrypted, stateFull, stateGroupedByRows);
35+
36+
props.update({state});
37+
38+
} catch ({errors}) {
39+
props.update({errors});
40+
}
41+
};
42+
43+
return (
44+
<section style={{
45+
maxWidth: "1024px",
46+
margin: "0 auto"
47+
}}>
48+
49+
<form onSubmit={onSubmit(0)}>
50+
<DynamicForm
51+
config={formConfig({
52+
t,
53+
dynamics: {
54+
locale: language
55+
}
56+
})}
57+
updateErrorAtBlur={true}
58+
layout={FormLayout}
59+
/>
60+
61+
<Button
62+
type="submit"
63+
fullWidth
64+
variant="contained"
65+
color="primary"
66+
>
67+
{t("Signup.confirm")}
68+
</Button>
69+
</form>
70+
</section>
71+
);
72+
}
73+
74+
MultipleForm1.propTypes = {
75+
classes: PropTypes.object
76+
};
77+
78+
const Form1 = withDynamicForm({ encryption: (value) => {
79+
return window.btoa(value);
80+
}})(MultipleForm1);
81+
82+
function MultipleForm2(props) {
83+
84+
const { language } = useTranslateState()
85+
86+
const dynamicForm = useDynamicForm();
87+
88+
// Custom Hooks
89+
const i18n = useTranslate();
90+
const { t } = i18n;
91+
92+
const onSubmit = (kind) => event => {
93+
94+
event.preventDefault();
95+
96+
try {
97+
const { state, stateCrypted, stateFull, stateGroupedByRows } = dynamicForm.submit();
98+
99+
console.log(kind, state, stateCrypted, stateFull, stateGroupedByRows);
100+
101+
props.update({state});
102+
103+
} catch ({errors}) {
104+
props.update({errors});
105+
}
106+
};
107+
108+
return (
109+
<section style={{
110+
maxWidth: "1024px",
111+
margin: "0 auto"
112+
}}>
113+
114+
<form onSubmit={onSubmit(1)}>
115+
<DynamicForm
116+
config={formConfig({
117+
t,
118+
dynamics: {
119+
locale: language
120+
}
121+
})}
122+
updateErrorAtBlur={true}
123+
layout={FormLayout}
124+
/>
125+
126+
<Button
127+
type="submit"
128+
fullWidth
129+
variant="contained"
130+
color="primary"
131+
>
132+
{t("Signup.confirm")}
133+
</Button>
134+
</form>
135+
</section>
136+
);
137+
}
138+
139+
MultipleForm2.propTypes = {
140+
classes: PropTypes.object
141+
};
142+
143+
const Form2 = withDynamicForm({ encryption: (value) => {
144+
return window.btoa(value);
145+
}})(MultipleForm2);
146+
147+
function Signup() {
148+
149+
return (
150+
<section style={{
151+
maxWidth: "1024px",
152+
margin: "0 auto"
153+
}}>
154+
155+
<Form1 update={(result) => {
156+
console.log(result);
157+
}} />
158+
159+
<Form2 update={(result) => {
160+
console.log(result);
161+
}} />
162+
163+
</section>
164+
);
165+
}
166+
167+
Signup.propTypes = {
168+
classes: PropTypes.object
169+
};
170+
171+
export default withRouter()(Signup);

‎example/src/screens/MultipleForm/index.test.js‎

Whitespace-only changes.

‎example/src/screens/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
11
export { default as Signup } from './Signup';
22
export { default as SignupPreloadData } from './SignupPreloadData';
3-
export { default as CustomLayout } from './CustomLayout';
3+
export { default as CustomLayout } from './CustomLayout';
4+
export { default as MultipleForm } from './MultipleForm';

‎example/src/services/Crypt/index.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
// TODO: remove this file
2-
31
/* global CONFIG */
42
import { JSEncrypt } from "jsencrypt";
53
import * as sha1 from "sha1";

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@dynamic-form/wavelop",
3-
"version": "0.2.0",
3+
"version": "0.3.1",
44
"description": "Dynamic form from configuration with React",
55
"author": "Wavelop",
66
"license": "MIT",

‎packages/base-components/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@wavelop/dynamic-form-base-components",
3-
"version": "0.2.0",
3+
"version": "0.3.1",
44
"description": "Dynamic Form: basic components",
55
"author": "Wavelop",
66
"license": "MIT",

0 commit comments

Comments
 (0)