cmspageblocks 1.0.22 → 1.0.26
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.
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "cmspageblocks",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.26",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"repository": {
|
|
@@ -44,7 +44,8 @@
|
|
|
44
44
|
"@rollup/plugin-json": "^4.1.0",
|
|
45
45
|
"@rollup/plugin-node-resolve": "^13.0.6",
|
|
46
46
|
"babel-eslint": "^10.1.0",
|
|
47
|
-
"
|
|
47
|
+
"bukazu-portal-react": "^2.0.21",
|
|
48
|
+
"eslint": "^8.6.0",
|
|
48
49
|
"eslint-config-prettier": "^8.3.0",
|
|
49
50
|
"eslint-plugin-jsx-a11y": "^6.4.1",
|
|
50
51
|
"eslint-plugin-prettier": "^4.0.0",
|
|
@@ -55,6 +56,7 @@
|
|
|
55
56
|
"rollup-plugin-import-css": "^3.0.2",
|
|
56
57
|
"rollup-plugin-node-polyfills": "^0.2.1",
|
|
57
58
|
"rollup-plugin-replace": "^2.2.0",
|
|
59
|
+
"styled-components": "^5.3.3",
|
|
58
60
|
"webpack": "^5",
|
|
59
61
|
"webpack-cli": "^4.6.0",
|
|
60
62
|
"webpack-dev-server": "^3.0.0"
|
package/src/components/Block.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react'
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
|
-
import {Text, Image, ImageSlider, Button, Map, SearchBar, ImageGallery, Portal, Embed} from './BlockTypes';
|
|
4
|
+
import {Text, Image, ImageSlider, Button, Map, SearchBar, ImageGallery, Portal, Embed, Form} from './BlockTypes';
|
|
5
5
|
import { BlockSelf } from '../Main.css'
|
|
6
6
|
|
|
7
7
|
function Block({pageBlock}) {
|
|
@@ -12,15 +12,16 @@ function Block({pageBlock}) {
|
|
|
12
12
|
}
|
|
13
13
|
|
|
14
14
|
switch(options.type) {
|
|
15
|
+
case 'bukazu_portal': return <Wrapper options={options} key={pageBlock.id}><Portal options={options} /></Wrapper>
|
|
15
16
|
case 'button': return <Wrapper options={options} key={pageBlock.id}><Button options={options} /></Wrapper>
|
|
16
|
-
case '
|
|
17
|
-
case '
|
|
18
|
-
case 'text': return <Wrapper options={options} key={pageBlock.id}><Text options={options} /></Wrapper>
|
|
17
|
+
case 'embed': return <Wrapper options={options} key={pageBlock.id}><Embed options={options} /></Wrapper>
|
|
18
|
+
case 'form': return <Wrapper options={options} key={pageBlock.id}><Form options={options} /></Wrapper>
|
|
19
19
|
case 'image': return <Wrapper options={options}><Image options={options} /></Wrapper>
|
|
20
20
|
case 'image_slider': return <Wrapper options={options} key={pageBlock.id}><ImageSlider options={options} /></Wrapper>
|
|
21
21
|
case 'imageGallery': return <Wrapper options={options} key={pageBlock.id}><ImageGallery options={options} /></Wrapper>
|
|
22
|
-
case '
|
|
23
|
-
case '
|
|
22
|
+
case 'map': return <Wrapper options={options} key={pageBlock.id}><Map options={options} /></Wrapper>
|
|
23
|
+
case 'searchbar': return <Wrapper options={options} key={pageBlock.id}><SearchBar options={options} /></Wrapper>
|
|
24
|
+
case 'text': return <Wrapper options={options} key={pageBlock.id}><Text options={options} /></Wrapper>
|
|
24
25
|
default: return <Wrapper options={options} key={pageBlock.id}>{options.type}</Wrapper>
|
|
25
26
|
}
|
|
26
27
|
|
|
@@ -1,129 +1,141 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
// import styled from 'styled-components';
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
3
|
+
import { Formik } from 'formik';
|
|
4
|
+
import styled from 'styled-components';
|
|
6
5
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
6
|
+
const Form = ({ options }) => {
|
|
7
|
+
const form = options.content
|
|
8
|
+
return (
|
|
9
|
+
<Formik
|
|
10
|
+
initialValues={{}}
|
|
11
|
+
onSubmit={(values, actions) => {
|
|
12
|
+
setTimeout(() => {
|
|
13
|
+
fetch(`https://cms.burobork.nl/recieve/form/${form.id}`, {
|
|
14
|
+
method: 'POST',
|
|
15
|
+
headers: { 'Content-Type': 'application/json' },
|
|
16
|
+
body: JSON.stringify(
|
|
17
|
+
{ form: {
|
|
18
|
+
locale: 'nl',
|
|
19
|
+
content: values,
|
|
20
|
+
}},
|
|
21
|
+
)
|
|
22
|
+
}).then((resp) => {
|
|
23
|
+
if (resp.ok === true) {
|
|
24
|
+
alert('Form has been sent!');
|
|
25
|
+
actions.resetForm({ values: {}})
|
|
26
|
+
} else {
|
|
27
|
+
alert('Please try again later.');
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
actions.setSubmitting(false);
|
|
31
|
+
}, 1000);
|
|
32
|
+
}}
|
|
33
|
+
render={({ values, errors, handleBlur, handleChange, handleSubmit }) => (
|
|
34
|
+
<FormContainer>
|
|
35
|
+
<form onSubmit={handleSubmit}>
|
|
36
|
+
{form.options.fields.map(field => {
|
|
37
|
+
if (field.type === 'select') {
|
|
38
|
+
return (
|
|
39
|
+
<div key={field.model}>
|
|
40
|
+
<label htmlFor={field.model}>{field.label}</label>
|
|
41
|
+
<select
|
|
42
|
+
id={field.model}
|
|
43
|
+
onChange={handleChange}
|
|
44
|
+
onBlur={handleBlur}
|
|
45
|
+
value={values[field.model]}
|
|
46
|
+
name={field.model}
|
|
47
|
+
>
|
|
48
|
+
{field.values.map(opt => (
|
|
49
|
+
<option key={opt.option_value} value={opt.option_value}>
|
|
50
|
+
{opt.label}
|
|
51
|
+
</option>
|
|
52
|
+
))}
|
|
53
|
+
</select>
|
|
54
|
+
</div>
|
|
55
|
+
);
|
|
56
|
+
} else if (field.type === 'textarea') {
|
|
57
|
+
return <div key={field.model}>
|
|
58
|
+
<label htmlFor={field.model}>
|
|
59
|
+
{field.label}
|
|
60
|
+
</label>
|
|
61
|
+
<textarea id={field.model} onChange={handleChange} onBlur={handleBlur} value={values[field.model]} name={field.model} rows="5">
|
|
51
62
|
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
63
|
+
</textarea>
|
|
64
|
+
</div>;
|
|
65
|
+
} else {
|
|
66
|
+
return (
|
|
67
|
+
<div key={field.model}>
|
|
68
|
+
<label htmlFor={field.model}>
|
|
69
|
+
{field.label}
|
|
70
|
+
<input
|
|
71
|
+
id={field.model}
|
|
72
|
+
type="text"
|
|
73
|
+
onChange={handleChange}
|
|
74
|
+
onBlur={handleBlur}
|
|
75
|
+
value={values[field.model]}
|
|
76
|
+
name={field.model}
|
|
77
|
+
required={field.required}
|
|
78
|
+
/>
|
|
79
|
+
</label>
|
|
80
|
+
{errors[field.name] && (
|
|
81
|
+
<div id="feedback">{errors[field.name]}</div>
|
|
82
|
+
)}
|
|
83
|
+
</div>
|
|
84
|
+
);
|
|
85
|
+
}
|
|
86
|
+
})}
|
|
87
|
+
<button type="submit">Verzenden</button>
|
|
88
|
+
</form>
|
|
89
|
+
</FormContainer>
|
|
90
|
+
)}
|
|
91
|
+
/>
|
|
92
|
+
);
|
|
93
|
+
};
|
|
83
94
|
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
95
|
+
Form.propTypes = {
|
|
96
|
+
options: PropTypes.object.isRequired,
|
|
97
|
+
};
|
|
87
98
|
|
|
88
|
-
|
|
99
|
+
export default Form;
|
|
89
100
|
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
101
|
+
const FormContainer = styled.div`
|
|
102
|
+
width: 100%;
|
|
103
|
+
select {
|
|
104
|
+
appearance: none;
|
|
105
|
+
background: #fff;
|
|
106
|
+
background-image: linear-gradient(45deg, transparent 50%, gray 50%),
|
|
107
|
+
linear-gradient(135deg, gray 50%, transparent 50%),
|
|
108
|
+
linear-gradient(to right, #ccc, #ccc);
|
|
109
|
+
background-position: calc(100% - 20px) calc(1em),
|
|
110
|
+
calc(100% - 15px) calc(1em), calc(100% - 2.5em);
|
|
111
|
+
background-size: 5px 5px, 5px 5px, 1px 1.5em;
|
|
112
|
+
background-repeat: no-repeat;
|
|
113
|
+
}
|
|
103
114
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
115
|
+
label {
|
|
116
|
+
display: flex;
|
|
117
|
+
flex-wrap: wrap;
|
|
118
|
+
flex-direction: column;
|
|
119
|
+
width: 100%;
|
|
120
|
+
margin: 8px 0;
|
|
121
|
+
}
|
|
122
|
+
input,
|
|
123
|
+
select,
|
|
124
|
+
textarea {
|
|
125
|
+
display: block;
|
|
126
|
+
box-sizing: border-box;
|
|
127
|
+
margin: 8px 0;
|
|
128
|
+
padding: 8px;
|
|
129
|
+
width: 100%;
|
|
130
|
+
appearance: none;
|
|
131
|
+
border: 1px solid rgba(0, 0, 0, 0.25);
|
|
132
|
+
}
|
|
133
|
+
button {
|
|
134
|
+
border: 0;
|
|
135
|
+
padding: 8px 16px;
|
|
136
|
+
font-size: 1.4rem;
|
|
137
|
+
line-height: 1.4;
|
|
138
|
+
font-weight: bold;
|
|
139
|
+
background: ${props => props.theme.primaryColor};
|
|
140
|
+
}
|
|
141
|
+
`;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import Button from './Button'
|
|
2
2
|
import Embed from './Embed'
|
|
3
|
-
|
|
3
|
+
import Form from './Form'
|
|
4
4
|
import Iframe from './Iframe'
|
|
5
5
|
import Image from './Image'
|
|
6
6
|
import ImageGallery from './ImageGallery'
|
|
@@ -13,6 +13,7 @@ import Text from './Text'
|
|
|
13
13
|
export {
|
|
14
14
|
Button,
|
|
15
15
|
Embed,
|
|
16
|
+
Form,
|
|
16
17
|
Image,
|
|
17
18
|
ImageGallery,
|
|
18
19
|
ImageSlider,
|