umwd-components 0.1.37 → 0.1.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -12,10 +12,65 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
12
12
|
var React = require('react');
|
|
13
13
|
require('prop-types');
|
|
14
14
|
var material = require('@mui/material');
|
|
15
|
+
var isEmail = require('validator/lib/isEmail');
|
|
15
16
|
|
|
16
17
|
function ContactForm({
|
|
17
18
|
...args
|
|
18
19
|
}) {
|
|
20
|
+
const [formValues, setFormValues] = React.useState({
|
|
21
|
+
name: "",
|
|
22
|
+
email: "",
|
|
23
|
+
subject: "",
|
|
24
|
+
message: ""
|
|
25
|
+
});
|
|
26
|
+
const [formErrors, setFormErrors] = React.useState({});
|
|
27
|
+
const handleBlur = e => {
|
|
28
|
+
console.log(e.target.id);
|
|
29
|
+
console.log(e.target.value);
|
|
30
|
+
const errors = validate(formValues);
|
|
31
|
+
console.log(errors);
|
|
32
|
+
setFormErrors({
|
|
33
|
+
...formErrors,
|
|
34
|
+
[e.target.id]: errors[e.target.id]
|
|
35
|
+
});
|
|
36
|
+
};
|
|
37
|
+
const handleChange = e => {
|
|
38
|
+
const {
|
|
39
|
+
id,
|
|
40
|
+
value
|
|
41
|
+
} = e.target;
|
|
42
|
+
setFormValues({
|
|
43
|
+
...formValues,
|
|
44
|
+
[id]: value
|
|
45
|
+
});
|
|
46
|
+
console.log("formValues", formValues);
|
|
47
|
+
};
|
|
48
|
+
const handleClear = () => {
|
|
49
|
+
setFormValues({});
|
|
50
|
+
};
|
|
51
|
+
const handleSendCallback = () => {
|
|
52
|
+
console.log("Send callback");
|
|
53
|
+
};
|
|
54
|
+
const validate = values => {
|
|
55
|
+
console.log("values from validate", values);
|
|
56
|
+
let errors = {};
|
|
57
|
+
if (values.name === "") {
|
|
58
|
+
errors.name = "Name is required";
|
|
59
|
+
}
|
|
60
|
+
if (values.email === "") {
|
|
61
|
+
errors.email = "Email is required";
|
|
62
|
+
} else if (!isEmail(values.email)) {
|
|
63
|
+
errors.email = "Invalid email";
|
|
64
|
+
}
|
|
65
|
+
if (values.subject === "") {
|
|
66
|
+
errors.subject = "Subject is required";
|
|
67
|
+
}
|
|
68
|
+
if (values.message === "") {
|
|
69
|
+
errors.message = "Message is required";
|
|
70
|
+
}
|
|
71
|
+
console.log("errors from validate", errors);
|
|
72
|
+
return errors;
|
|
73
|
+
};
|
|
19
74
|
return /*#__PURE__*/React.createElement(material.Stack, {
|
|
20
75
|
spacing: 2
|
|
21
76
|
}, /*#__PURE__*/React.createElement(material.Typography, {
|
|
@@ -27,22 +82,54 @@ function ContactForm({
|
|
|
27
82
|
}, "We're open for any suggestion or just to have a chat"), /*#__PURE__*/React.createElement(material.TextField, {
|
|
28
83
|
id: "name",
|
|
29
84
|
label: "Name",
|
|
30
|
-
|
|
85
|
+
value: formValues.name,
|
|
86
|
+
variant: "outlined",
|
|
87
|
+
onBlur: e => handleBlur(e),
|
|
88
|
+
onChange: e => handleChange(e),
|
|
89
|
+
error: formErrors.name != undefined ? true : false,
|
|
90
|
+
helperText: formErrors.name
|
|
31
91
|
}), /*#__PURE__*/React.createElement(material.TextField, {
|
|
32
92
|
id: "email",
|
|
33
93
|
label: "Email",
|
|
34
|
-
|
|
94
|
+
value: formValues.email,
|
|
95
|
+
variant: "outlined",
|
|
96
|
+
onBlur: handleBlur,
|
|
97
|
+
onChange: handleChange,
|
|
98
|
+
error: formErrors.email != undefined ? true : false,
|
|
99
|
+
helperText: formErrors.email
|
|
35
100
|
}), /*#__PURE__*/React.createElement(material.TextField, {
|
|
36
101
|
id: "subject",
|
|
37
102
|
label: "Subject",
|
|
38
|
-
|
|
103
|
+
value: formValues.subject,
|
|
104
|
+
variant: "outlined",
|
|
105
|
+
onBlur: handleBlur,
|
|
106
|
+
onChange: handleChange,
|
|
107
|
+
error: formErrors.subject != undefined,
|
|
108
|
+
helperText: formErrors.subject
|
|
39
109
|
}), /*#__PURE__*/React.createElement(material.TextField, {
|
|
40
110
|
id: "message",
|
|
41
111
|
label: "Message",
|
|
112
|
+
value: formValues.message,
|
|
42
113
|
variant: "outlined",
|
|
43
114
|
multiline: true,
|
|
44
|
-
minRows: 5
|
|
45
|
-
|
|
115
|
+
minRows: 5,
|
|
116
|
+
onBlur: handleBlur,
|
|
117
|
+
onChange: handleChange,
|
|
118
|
+
error: formErrors.message != undefined,
|
|
119
|
+
helperText: formErrors.message
|
|
120
|
+
}), /*#__PURE__*/React.createElement(material.Stack, {
|
|
121
|
+
direction: "row",
|
|
122
|
+
spacing: 2,
|
|
123
|
+
justifyContent: "end"
|
|
124
|
+
}, /*#__PURE__*/React.createElement(material.Button, {
|
|
125
|
+
variant: "outlined",
|
|
126
|
+
color: "primary",
|
|
127
|
+
onClick: () => handleClear
|
|
128
|
+
}, "Clear"), /*#__PURE__*/React.createElement(material.Button, {
|
|
129
|
+
variant: "contained",
|
|
130
|
+
color: "primary",
|
|
131
|
+
onClick: handleSendCallback
|
|
132
|
+
}, "Send")));
|
|
46
133
|
}
|
|
47
134
|
ContactForm.propTypes = {};
|
|
48
135
|
|
|
@@ -7,11 +7,66 @@
|
|
|
7
7
|
|
|
8
8
|
import React from 'react';
|
|
9
9
|
import 'prop-types';
|
|
10
|
-
import { Stack, Typography, TextField } from '@mui/material';
|
|
10
|
+
import { Stack, Typography, TextField, Button } from '@mui/material';
|
|
11
|
+
import isEmail from 'validator/lib/isEmail';
|
|
11
12
|
|
|
12
13
|
function ContactForm({
|
|
13
14
|
...args
|
|
14
15
|
}) {
|
|
16
|
+
const [formValues, setFormValues] = React.useState({
|
|
17
|
+
name: "",
|
|
18
|
+
email: "",
|
|
19
|
+
subject: "",
|
|
20
|
+
message: ""
|
|
21
|
+
});
|
|
22
|
+
const [formErrors, setFormErrors] = React.useState({});
|
|
23
|
+
const handleBlur = e => {
|
|
24
|
+
console.log(e.target.id);
|
|
25
|
+
console.log(e.target.value);
|
|
26
|
+
const errors = validate(formValues);
|
|
27
|
+
console.log(errors);
|
|
28
|
+
setFormErrors({
|
|
29
|
+
...formErrors,
|
|
30
|
+
[e.target.id]: errors[e.target.id]
|
|
31
|
+
});
|
|
32
|
+
};
|
|
33
|
+
const handleChange = e => {
|
|
34
|
+
const {
|
|
35
|
+
id,
|
|
36
|
+
value
|
|
37
|
+
} = e.target;
|
|
38
|
+
setFormValues({
|
|
39
|
+
...formValues,
|
|
40
|
+
[id]: value
|
|
41
|
+
});
|
|
42
|
+
console.log("formValues", formValues);
|
|
43
|
+
};
|
|
44
|
+
const handleClear = () => {
|
|
45
|
+
setFormValues({});
|
|
46
|
+
};
|
|
47
|
+
const handleSendCallback = () => {
|
|
48
|
+
console.log("Send callback");
|
|
49
|
+
};
|
|
50
|
+
const validate = values => {
|
|
51
|
+
console.log("values from validate", values);
|
|
52
|
+
let errors = {};
|
|
53
|
+
if (values.name === "") {
|
|
54
|
+
errors.name = "Name is required";
|
|
55
|
+
}
|
|
56
|
+
if (values.email === "") {
|
|
57
|
+
errors.email = "Email is required";
|
|
58
|
+
} else if (!isEmail(values.email)) {
|
|
59
|
+
errors.email = "Invalid email";
|
|
60
|
+
}
|
|
61
|
+
if (values.subject === "") {
|
|
62
|
+
errors.subject = "Subject is required";
|
|
63
|
+
}
|
|
64
|
+
if (values.message === "") {
|
|
65
|
+
errors.message = "Message is required";
|
|
66
|
+
}
|
|
67
|
+
console.log("errors from validate", errors);
|
|
68
|
+
return errors;
|
|
69
|
+
};
|
|
15
70
|
return /*#__PURE__*/React.createElement(Stack, {
|
|
16
71
|
spacing: 2
|
|
17
72
|
}, /*#__PURE__*/React.createElement(Typography, {
|
|
@@ -23,22 +78,54 @@ function ContactForm({
|
|
|
23
78
|
}, "We're open for any suggestion or just to have a chat"), /*#__PURE__*/React.createElement(TextField, {
|
|
24
79
|
id: "name",
|
|
25
80
|
label: "Name",
|
|
26
|
-
|
|
81
|
+
value: formValues.name,
|
|
82
|
+
variant: "outlined",
|
|
83
|
+
onBlur: e => handleBlur(e),
|
|
84
|
+
onChange: e => handleChange(e),
|
|
85
|
+
error: formErrors.name != undefined ? true : false,
|
|
86
|
+
helperText: formErrors.name
|
|
27
87
|
}), /*#__PURE__*/React.createElement(TextField, {
|
|
28
88
|
id: "email",
|
|
29
89
|
label: "Email",
|
|
30
|
-
|
|
90
|
+
value: formValues.email,
|
|
91
|
+
variant: "outlined",
|
|
92
|
+
onBlur: handleBlur,
|
|
93
|
+
onChange: handleChange,
|
|
94
|
+
error: formErrors.email != undefined ? true : false,
|
|
95
|
+
helperText: formErrors.email
|
|
31
96
|
}), /*#__PURE__*/React.createElement(TextField, {
|
|
32
97
|
id: "subject",
|
|
33
98
|
label: "Subject",
|
|
34
|
-
|
|
99
|
+
value: formValues.subject,
|
|
100
|
+
variant: "outlined",
|
|
101
|
+
onBlur: handleBlur,
|
|
102
|
+
onChange: handleChange,
|
|
103
|
+
error: formErrors.subject != undefined,
|
|
104
|
+
helperText: formErrors.subject
|
|
35
105
|
}), /*#__PURE__*/React.createElement(TextField, {
|
|
36
106
|
id: "message",
|
|
37
107
|
label: "Message",
|
|
108
|
+
value: formValues.message,
|
|
38
109
|
variant: "outlined",
|
|
39
110
|
multiline: true,
|
|
40
|
-
minRows: 5
|
|
41
|
-
|
|
111
|
+
minRows: 5,
|
|
112
|
+
onBlur: handleBlur,
|
|
113
|
+
onChange: handleChange,
|
|
114
|
+
error: formErrors.message != undefined,
|
|
115
|
+
helperText: formErrors.message
|
|
116
|
+
}), /*#__PURE__*/React.createElement(Stack, {
|
|
117
|
+
direction: "row",
|
|
118
|
+
spacing: 2,
|
|
119
|
+
justifyContent: "end"
|
|
120
|
+
}, /*#__PURE__*/React.createElement(Button, {
|
|
121
|
+
variant: "outlined",
|
|
122
|
+
color: "primary",
|
|
123
|
+
onClick: () => handleClear
|
|
124
|
+
}, "Clear"), /*#__PURE__*/React.createElement(Button, {
|
|
125
|
+
variant: "contained",
|
|
126
|
+
color: "primary",
|
|
127
|
+
onClick: handleSendCallback
|
|
128
|
+
}, "Send")));
|
|
42
129
|
}
|
|
43
130
|
ContactForm.propTypes = {};
|
|
44
131
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "umwd-components",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.38",
|
|
4
4
|
"description": "UMWD Component library",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
@@ -72,7 +72,8 @@
|
|
|
72
72
|
"next": "^14.1.0",
|
|
73
73
|
"prop-types": "^15.8.1",
|
|
74
74
|
"react": "^18.2.0",
|
|
75
|
-
"react-dom": "^18.2.0"
|
|
75
|
+
"react-dom": "^18.2.0",
|
|
76
|
+
"validator": "^13.11.0"
|
|
76
77
|
},
|
|
77
78
|
"dependencies": {
|
|
78
79
|
"next-router-mock": "^0.9.12",
|
|
@@ -2,9 +2,64 @@
|
|
|
2
2
|
|
|
3
3
|
import React from "react";
|
|
4
4
|
import PropTypes from "prop-types";
|
|
5
|
-
import { TextField, Typography, Stack } from "@mui/material";
|
|
5
|
+
import { TextField, Typography, Stack, Button } from "@mui/material";
|
|
6
|
+
import isEmail from "validator/lib/isEmail";
|
|
6
7
|
|
|
7
8
|
function ContactForm({ ...args }) {
|
|
9
|
+
const [formValues, setFormValues] = React.useState({
|
|
10
|
+
name: "",
|
|
11
|
+
email: "",
|
|
12
|
+
subject: "",
|
|
13
|
+
message: "",
|
|
14
|
+
});
|
|
15
|
+
const [formErrors, setFormErrors] = React.useState({});
|
|
16
|
+
|
|
17
|
+
const handleBlur = (e) => {
|
|
18
|
+
console.log(e.target.id);
|
|
19
|
+
console.log(e.target.value);
|
|
20
|
+
const errors = validate(formValues);
|
|
21
|
+
console.log(errors);
|
|
22
|
+
setFormErrors({ ...formErrors, [e.target.id]: errors[e.target.id] });
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
const handleChange = (e) => {
|
|
26
|
+
const { id, value } = e.target;
|
|
27
|
+
setFormValues({ ...formValues, [id]: value });
|
|
28
|
+
console.log("formValues", formValues);
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
const handleClear = () => {
|
|
32
|
+
setFormValues({});
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
const handleSendCallback = () => {
|
|
36
|
+
console.log("Send callback");
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
const validate = (values) => {
|
|
40
|
+
console.log("values from validate", values);
|
|
41
|
+
let errors = {};
|
|
42
|
+
|
|
43
|
+
if (values.name === "") {
|
|
44
|
+
errors.name = "Name is required";
|
|
45
|
+
}
|
|
46
|
+
if (values.email === "") {
|
|
47
|
+
errors.email = "Email is required";
|
|
48
|
+
} else if (!isEmail(values.email)) {
|
|
49
|
+
errors.email = "Invalid email";
|
|
50
|
+
}
|
|
51
|
+
if (values.subject === "") {
|
|
52
|
+
errors.subject = "Subject is required";
|
|
53
|
+
}
|
|
54
|
+
if (values.message === "") {
|
|
55
|
+
errors.message = "Message is required";
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
console.log("errors from validate", errors);
|
|
59
|
+
|
|
60
|
+
return errors;
|
|
61
|
+
};
|
|
62
|
+
|
|
8
63
|
return (
|
|
9
64
|
<Stack spacing={2}>
|
|
10
65
|
<Typography variant="h6" align="center">
|
|
@@ -13,16 +68,60 @@ function ContactForm({ ...args }) {
|
|
|
13
68
|
<Typography variant="body1" align="center">
|
|
14
69
|
We're open for any suggestion or just to have a chat
|
|
15
70
|
</Typography>
|
|
16
|
-
<TextField
|
|
17
|
-
|
|
18
|
-
|
|
71
|
+
<TextField
|
|
72
|
+
id="name"
|
|
73
|
+
label="Name"
|
|
74
|
+
value={formValues.name}
|
|
75
|
+
variant="outlined"
|
|
76
|
+
onBlur={(e) => handleBlur(e)}
|
|
77
|
+
onChange={(e) => handleChange(e)}
|
|
78
|
+
error={formErrors.name != undefined ? true : false}
|
|
79
|
+
helperText={formErrors.name}
|
|
80
|
+
/>
|
|
81
|
+
<TextField
|
|
82
|
+
id="email"
|
|
83
|
+
label="Email"
|
|
84
|
+
value={formValues.email}
|
|
85
|
+
variant="outlined"
|
|
86
|
+
onBlur={handleBlur}
|
|
87
|
+
onChange={handleChange}
|
|
88
|
+
error={formErrors.email != undefined ? true : false}
|
|
89
|
+
helperText={formErrors.email}
|
|
90
|
+
/>
|
|
91
|
+
<TextField
|
|
92
|
+
id="subject"
|
|
93
|
+
label="Subject"
|
|
94
|
+
value={formValues.subject}
|
|
95
|
+
variant="outlined"
|
|
96
|
+
onBlur={handleBlur}
|
|
97
|
+
onChange={handleChange}
|
|
98
|
+
error={formErrors.subject != undefined}
|
|
99
|
+
helperText={formErrors.subject}
|
|
100
|
+
/>
|
|
19
101
|
<TextField
|
|
20
102
|
id="message"
|
|
21
103
|
label="Message"
|
|
104
|
+
value={formValues.message}
|
|
22
105
|
variant="outlined"
|
|
23
106
|
multiline
|
|
24
107
|
minRows={5}
|
|
108
|
+
onBlur={handleBlur}
|
|
109
|
+
onChange={handleChange}
|
|
110
|
+
error={formErrors.message != undefined}
|
|
111
|
+
helperText={formErrors.message}
|
|
25
112
|
/>
|
|
113
|
+
<Stack direction={"row"} spacing={2} justifyContent={"end"}>
|
|
114
|
+
<Button variant="outlined" color="primary" onClick={() => handleClear}>
|
|
115
|
+
Clear
|
|
116
|
+
</Button>
|
|
117
|
+
<Button
|
|
118
|
+
variant="contained"
|
|
119
|
+
color="primary"
|
|
120
|
+
onClick={handleSendCallback}
|
|
121
|
+
>
|
|
122
|
+
Send
|
|
123
|
+
</Button>
|
|
124
|
+
</Stack>
|
|
26
125
|
</Stack>
|
|
27
126
|
);
|
|
28
127
|
}
|