@uncinc/uncinc-react-kitchen-sink 2.3.3 → 2.3.4
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/dist/Context/withMapping.js +1 -6
- package/dist/components/Accordion/AccordionItem/index.js +0 -5
- package/dist/components/Accordion/AccordionItemVariant/index.js +0 -5
- package/dist/components/Accordion/index.js +0 -2
- package/dist/components/ApiAutocomplete/index.js +6 -12
- package/dist/components/Button/index.js +4 -10
- package/dist/components/Cookie/Checkbox/index.js +0 -2
- package/dist/components/Cookie/index.js +39 -34
- package/dist/components/FontSizeSwitcher/index.js +2 -8
- package/dist/components/Form/Checkbox/index.js +1 -4
- package/dist/components/Form/Checkbox/stories.js +0 -2
- package/dist/components/Form/Checkboxes/index.js +1 -7
- package/dist/components/Form/Checkboxes/index.test.js +8 -4
- package/dist/components/Form/Checkboxes/stories.js +1 -4
- package/dist/components/Form/Date/index.js +1 -4
- package/dist/components/Form/Date/stories.js +0 -2
- package/dist/components/Form/DatePicker/index.js +0 -2
- package/dist/components/Form/DatePicker/stories.js +0 -2
- package/dist/components/Form/DateSelect/index.js +110 -85
- package/dist/components/Form/DateSelect/stories.js +24 -15
- package/dist/components/Form/DateSelect/style.scss +10 -4
- package/dist/components/Form/Email/index.js +1 -4
- package/dist/components/Form/Email/stories.js +0 -2
- package/dist/components/Form/FormikWrapper/index.js +9 -15
- package/dist/components/Form/GenericFormElement/index.js +0 -2
- package/dist/components/Form/Number/index.js +1 -10
- package/dist/components/Form/Number/stories.js +0 -2
- package/dist/components/Form/RadioButtons/index.js +1 -7
- package/dist/components/Form/RadioButtons/index.test.js +8 -4
- package/dist/components/Form/RadioButtons/stories.js +1 -4
- package/dist/components/Form/SearchField/index.js +0 -2
- package/dist/components/Form/Select/Input/index.js +4 -14
- package/dist/components/Form/Select/index.js +1 -4
- package/dist/components/Form/Select/stories.js +0 -4
- package/dist/components/Form/TextField/index.js +0 -6
- package/dist/components/Form/TextField/index.test.js +8 -4
- package/dist/components/Form/TextField/stories.js +1 -4
- package/dist/components/Form/Textarea/index.js +0 -2
- package/dist/components/Form/Textarea/stories.js +0 -2
- package/dist/components/Hamburger/index.js +0 -2
- package/dist/components/Header/index.js +4 -9
- package/dist/components/Image/Background/index.js +1 -7
- package/dist/components/Image/LazyLoadWrapper/index.js +0 -12
- package/dist/components/Image/Picture/index.js +4 -19
- package/dist/components/Image/index.js +0 -4
- package/dist/components/InlineMenu/index.js +0 -9
- package/dist/components/Layout/Container/index.js +1 -4
- package/dist/components/Layout/Container/stories.js +0 -3
- package/dist/components/Layout/QuickLayout/Auto/index.js +0 -2
- package/dist/components/Layout/QuickLayout/Center/index.js +0 -2
- package/dist/components/Layout/QuickLayout/Clamp/index.js +0 -2
- package/dist/components/Layout/QuickLayout/Sidebar/index.js +0 -2
- package/dist/components/Layout/QuickLayout/SpaceBetween/index.js +0 -2
- package/dist/components/Layout/QuickLayout/Stack/index.js +1 -4
- package/dist/components/Layout/QuickLayout/Wrap/index.js +0 -2
- package/dist/components/Layout/QuickLayout/index.js +0 -9
- package/dist/components/Lottie/LottieAnimation/index.js +12 -17
- package/dist/components/Lottie/LottieAnimationWithMousePosition.js +8 -9
- package/dist/components/Lottie/index.js +3 -3
- package/dist/components/Lottie/stories.js +10 -5
- package/dist/components/MagicLine/index.js +0 -14
- package/dist/components/MagicLine/stories.js +0 -2
- package/dist/components/NavigationScroll/index.js +2 -12
- package/dist/components/Pagination/index.js +0 -7
- package/dist/components/SearchKit/Facets/ChipFacet/index.js +0 -2
- package/dist/components/SearchKit/Facets/HierarchicalFilterFacet/index.js +0 -2
- package/dist/components/SearchKit/Facets/HierarchicalMenuFacet/index.js +0 -2
- package/dist/components/SearchKit/Facets/SelectFacet/index.js +0 -6
- package/dist/components/SearchKit/Query/index.js +3 -6
- package/dist/components/SearchKit/SearchFacets/index.js +0 -7
- package/dist/components/SearchKit/SearchField/index.js +0 -9
- package/dist/components/SearchKit/SearchLoadMore/index.js +0 -7
- package/dist/components/SearchKit/SearchPage/index.js +3 -9
- package/dist/components/SearchKit/SearchPagination/index.js +0 -5
- package/dist/components/SearchKit/SearchReset/index.js +0 -2
- package/dist/components/SearchKit/SearchResults/index.js +6 -11
- package/dist/components/SearchKit/SearchSelectedFilters/index.js +0 -4
- package/dist/components/SearchKit/SearchSorting/index.js +0 -2
- package/dist/components/SearchKit/index.js +0 -3
- package/dist/components/SearchKit/stories.js +2 -7
- package/dist/components/Share/index.js +0 -3
- package/dist/components/Sliders/SliderRelated/index.js +1 -6
- package/dist/components/Sliders/SliderRelated/stories.js +1 -4
- package/dist/components/Webform/WebformActions/index.js +0 -2
- package/dist/components/Webform/WebformCheckbox/index.js +1 -8
- package/dist/components/Webform/WebformCheckboxes/index.js +1 -9
- package/dist/components/Webform/WebformContainer/index.js +5 -6
- package/dist/components/Webform/WebformDate/index.js +12 -18
- package/dist/components/Webform/WebformMapper/index.js +1 -18
- package/dist/components/Webform/WebformNumber/index.js +1 -4
- package/dist/components/Webform/WebformRadioButtons/index.js +1 -9
- package/dist/components/Webform/WebformSelect/index.js +1 -9
- package/dist/components/Webform/WebformTextField/index.js +1 -8
- package/dist/components/Webform/WebformTextarea/index.js +1 -8
- package/dist/components/Webform/WebformWizardPage/index.js +6 -8
- package/dist/components/Webform/index.js +1 -8
- package/dist/components/Webform/withStates.js +6 -19
- package/dist/components/WysiwygField/index.js +1 -8
- package/dist/components/WysiwygField/stories.js +0 -3
- package/dist/config/constants.js +3 -4
- package/dist/config/i18next/index.js +23 -0
- package/dist/config/i18next/locales/en.json +22 -0
- package/dist/config/i18next/locales/nl.json +22 -0
- package/dist/helpers/gtm.js +11 -15
- package/dist/helpers/link.js +0 -4
- package/dist/helpers/useValueForCurrentViewPort.js +20 -14
- package/dist/hooks/useOnScreen.js +2 -2
- package/dist/hooks/usePrevious.js +3 -2
- package/dist/hooks/useScrollPosition.js +0 -3
- package/dist/hooks/useWindowDimensions.js +0 -3
- package/package.json +14 -5
- package/dist/pages/api/graphql.js +0 -25
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React, { useState, useCallback, useEffect } from 'react';
|
|
2
2
|
import moment from 'moment';
|
|
3
3
|
import SelectInput from '../../Form/Select/Input';
|
|
4
|
-
|
|
5
4
|
const WebformDate = ({
|
|
6
5
|
entity,
|
|
7
6
|
setFieldValue,
|
|
@@ -22,28 +21,27 @@ const WebformDate = ({
|
|
|
22
21
|
const dateMax = parseInt(entity.get('#date_date_max')) || 2070;
|
|
23
22
|
const placeholderDay = 'Dag';
|
|
24
23
|
const placeholderMonth = 'Maand';
|
|
25
|
-
const placeholderYear = 'Jaar';
|
|
24
|
+
const placeholderYear = 'Jaar';
|
|
26
25
|
|
|
26
|
+
// Render all day options possible.
|
|
27
27
|
const renderDayOptions = useCallback(placeholder => {
|
|
28
28
|
const options = [];
|
|
29
|
-
|
|
30
29
|
if (placeholder) {
|
|
31
30
|
options.push({
|
|
32
31
|
value: placeholder,
|
|
33
32
|
label: placeholder
|
|
34
33
|
});
|
|
35
34
|
}
|
|
36
|
-
|
|
37
35
|
for (let index = 1; index <= 31; index++) {
|
|
38
36
|
options.push({
|
|
39
37
|
value: index,
|
|
40
38
|
label: index
|
|
41
39
|
});
|
|
42
40
|
}
|
|
43
|
-
|
|
44
41
|
return options;
|
|
45
|
-
}, []);
|
|
42
|
+
}, []);
|
|
46
43
|
|
|
44
|
+
// Render all options possible for months.
|
|
47
45
|
const renderMonthOptions = useCallback(() => {
|
|
48
46
|
const months = ['Januari', 'Februari', 'Maart', 'April', 'Mei', 'Juni', 'Juli', 'Augustus', 'September', 'October', 'November', 'December'];
|
|
49
47
|
return months.map((e, i) => {
|
|
@@ -52,19 +50,18 @@ const WebformDate = ({
|
|
|
52
50
|
label: e
|
|
53
51
|
};
|
|
54
52
|
});
|
|
55
|
-
}, []);
|
|
56
|
-
// the DateMin and DateMax variables.
|
|
53
|
+
}, []);
|
|
57
54
|
|
|
55
|
+
// Render all options for possible years from
|
|
56
|
+
// the DateMin and DateMax variables.
|
|
58
57
|
const renderYearOptions = useCallback(() => {
|
|
59
58
|
const options = [];
|
|
60
|
-
|
|
61
59
|
for (let index = dateMin; index <= dateMax; index++) {
|
|
62
60
|
options.push({
|
|
63
61
|
value: index,
|
|
64
62
|
label: index
|
|
65
63
|
});
|
|
66
64
|
}
|
|
67
|
-
|
|
68
65
|
return options;
|
|
69
66
|
}, [dateMax, dateMin]);
|
|
70
67
|
useEffect(() => {
|
|
@@ -73,28 +70,26 @@ const WebformDate = ({
|
|
|
73
70
|
errors[key] = requiredError || 'Dit is geen geldige geboortedatum.';
|
|
74
71
|
return;
|
|
75
72
|
}
|
|
76
|
-
|
|
77
73
|
if (day === placeholderDay || month === placeholderMonth || year === placeholderYear) {
|
|
78
74
|
errors[key] = requiredError || 'Dit is geen geldige geboortedatum.';
|
|
79
75
|
return;
|
|
80
|
-
}
|
|
81
|
-
|
|
76
|
+
}
|
|
82
77
|
|
|
78
|
+
// Transform state items to date object.
|
|
83
79
|
const birthdate = moment(`${year}-${month}-${day}`, 'YYYY-MM-DD');
|
|
84
80
|
setFieldValue(key, birthdate.format('YYYY-MM-DD'));
|
|
85
|
-
}, [day, month, year, key, setFieldValue, errors, requiredError]);
|
|
86
|
-
// set an error.
|
|
81
|
+
}, [day, month, year, key, setFieldValue, errors, requiredError]);
|
|
87
82
|
|
|
83
|
+
// If birthday is invalid, like 2000/02/30,
|
|
84
|
+
// set an error.
|
|
88
85
|
if (moment(values[key])._isValid === false || day === placeholderDay || month === placeholderMonth || year === placeholderYear) {
|
|
89
86
|
errors[key] = requiredError || 'Dit is geen geldige geboortedatum.';
|
|
90
87
|
} else {
|
|
91
88
|
delete errors[key];
|
|
92
89
|
}
|
|
93
|
-
|
|
94
90
|
if (!day || !month || !year) {
|
|
95
91
|
errors[key] = requiredError || 'Dit is een vereist veld.';
|
|
96
92
|
}
|
|
97
|
-
|
|
98
93
|
return /*#__PURE__*/React.createElement("div", {
|
|
99
94
|
className: "WebformDate",
|
|
100
95
|
onClick: () => {
|
|
@@ -132,5 +127,4 @@ const WebformDate = ({
|
|
|
132
127
|
className: "WebformDate_error WebformComponent--error"
|
|
133
128
|
}, errors[key]) : null);
|
|
134
129
|
};
|
|
135
|
-
|
|
136
130
|
export default WebformDate;
|
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign
|
|
2
|
-
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
2
|
import React from 'react';
|
|
4
3
|
import Immutable from 'immutable';
|
|
5
4
|
import WysiwygField from '../../WysiwygField';
|
|
@@ -14,7 +13,6 @@ import WebformActions from '../WebformActions';
|
|
|
14
13
|
import WebformContainer from '../WebformContainer';
|
|
15
14
|
import WebformNumber from '../WebformNumber';
|
|
16
15
|
import WebformWizardPage from '../WebformWizardPage';
|
|
17
|
-
|
|
18
16
|
const WebformMapper = props => {
|
|
19
17
|
const {
|
|
20
18
|
entities,
|
|
@@ -23,7 +21,6 @@ const WebformMapper = props => {
|
|
|
23
21
|
return entities.entrySeq().map(([key, entity]) => {
|
|
24
22
|
const mappedEntity = new Immutable.OrderedMap(entity);
|
|
25
23
|
const type = mappedEntity.get('#type');
|
|
26
|
-
|
|
27
24
|
if (overriddenComponents && overriddenComponents[type]) {
|
|
28
25
|
const OverriddenComponent = overriddenComponents[type];
|
|
29
26
|
return /*#__PURE__*/React.createElement(OverriddenComponent, _extends({}, props, {
|
|
@@ -31,7 +28,6 @@ const WebformMapper = props => {
|
|
|
31
28
|
entity: mappedEntity
|
|
32
29
|
}));
|
|
33
30
|
}
|
|
34
|
-
|
|
35
31
|
switch (type) {
|
|
36
32
|
case 'textfield':
|
|
37
33
|
{
|
|
@@ -40,7 +36,6 @@ const WebformMapper = props => {
|
|
|
40
36
|
entity: mappedEntity
|
|
41
37
|
}));
|
|
42
38
|
}
|
|
43
|
-
|
|
44
39
|
case 'textarea':
|
|
45
40
|
{
|
|
46
41
|
return /*#__PURE__*/React.createElement(WebformTextarea, _extends({}, props, {
|
|
@@ -48,7 +43,6 @@ const WebformMapper = props => {
|
|
|
48
43
|
entity: mappedEntity
|
|
49
44
|
}));
|
|
50
45
|
}
|
|
51
|
-
|
|
52
46
|
case 'checkbox':
|
|
53
47
|
{
|
|
54
48
|
return /*#__PURE__*/React.createElement(WebformCheckbox, _extends({}, props, {
|
|
@@ -56,7 +50,6 @@ const WebformMapper = props => {
|
|
|
56
50
|
entity: mappedEntity
|
|
57
51
|
}));
|
|
58
52
|
}
|
|
59
|
-
|
|
60
53
|
case 'radios':
|
|
61
54
|
{
|
|
62
55
|
return /*#__PURE__*/React.createElement(WebformRadioButtons, _extends({}, props, {
|
|
@@ -64,7 +57,6 @@ const WebformMapper = props => {
|
|
|
64
57
|
entity: mappedEntity
|
|
65
58
|
}));
|
|
66
59
|
}
|
|
67
|
-
|
|
68
60
|
case 'checkboxes':
|
|
69
61
|
{
|
|
70
62
|
return /*#__PURE__*/React.createElement(WebformCheckboxes, _extends({}, props, {
|
|
@@ -72,7 +64,6 @@ const WebformMapper = props => {
|
|
|
72
64
|
entity: mappedEntity
|
|
73
65
|
}));
|
|
74
66
|
}
|
|
75
|
-
|
|
76
67
|
case 'select':
|
|
77
68
|
{
|
|
78
69
|
return /*#__PURE__*/React.createElement(WebformSelect, _extends({}, props, {
|
|
@@ -80,7 +71,6 @@ const WebformMapper = props => {
|
|
|
80
71
|
entity: mappedEntity
|
|
81
72
|
}));
|
|
82
73
|
}
|
|
83
|
-
|
|
84
74
|
case 'date':
|
|
85
75
|
{
|
|
86
76
|
return /*#__PURE__*/React.createElement(WebformDate, _extends({}, props, {
|
|
@@ -88,7 +78,6 @@ const WebformMapper = props => {
|
|
|
88
78
|
entity: mappedEntity
|
|
89
79
|
}));
|
|
90
80
|
}
|
|
91
|
-
|
|
92
81
|
case 'webform_actions':
|
|
93
82
|
{
|
|
94
83
|
return /*#__PURE__*/React.createElement(WebformActions, _extends({}, props, {
|
|
@@ -96,7 +85,6 @@ const WebformMapper = props => {
|
|
|
96
85
|
entity: mappedEntity
|
|
97
86
|
}));
|
|
98
87
|
}
|
|
99
|
-
|
|
100
88
|
case 'container':
|
|
101
89
|
{
|
|
102
90
|
return /*#__PURE__*/React.createElement(WebformContainer, _extends({}, props, {
|
|
@@ -105,7 +93,6 @@ const WebformMapper = props => {
|
|
|
105
93
|
WebformMapper: WebformMapper
|
|
106
94
|
}));
|
|
107
95
|
}
|
|
108
|
-
|
|
109
96
|
case 'number':
|
|
110
97
|
{
|
|
111
98
|
return /*#__PURE__*/React.createElement(WebformNumber, _extends({}, props, {
|
|
@@ -113,7 +100,6 @@ const WebformMapper = props => {
|
|
|
113
100
|
entity: mappedEntity
|
|
114
101
|
}));
|
|
115
102
|
}
|
|
116
|
-
|
|
117
103
|
case 'wizard_page':
|
|
118
104
|
case 'webform_wizard_page':
|
|
119
105
|
{
|
|
@@ -123,7 +109,6 @@ const WebformMapper = props => {
|
|
|
123
109
|
WebformMapper: WebformMapper
|
|
124
110
|
}));
|
|
125
111
|
}
|
|
126
|
-
|
|
127
112
|
case 'processed_text':
|
|
128
113
|
{
|
|
129
114
|
return /*#__PURE__*/React.createElement(WysiwygField, {
|
|
@@ -133,7 +118,6 @@ const WebformMapper = props => {
|
|
|
133
118
|
html: mappedEntity.get('#text', '')
|
|
134
119
|
});
|
|
135
120
|
}
|
|
136
|
-
|
|
137
121
|
default:
|
|
138
122
|
{
|
|
139
123
|
return /*#__PURE__*/React.createElement("pre", {
|
|
@@ -143,5 +127,4 @@ const WebformMapper = props => {
|
|
|
143
127
|
}
|
|
144
128
|
});
|
|
145
129
|
};
|
|
146
|
-
|
|
147
130
|
export default WebformMapper;
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign
|
|
2
|
-
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
2
|
import React from 'react';
|
|
4
3
|
import FormikTextField from '../../Form/Number';
|
|
5
4
|
import withStates from '../withStates';
|
|
6
|
-
|
|
7
5
|
const WebformNumber = props => {
|
|
8
6
|
const {
|
|
9
7
|
entity,
|
|
@@ -38,5 +36,4 @@ const WebformNumber = props => {
|
|
|
38
36
|
value: props.values[key]
|
|
39
37
|
})));
|
|
40
38
|
};
|
|
41
|
-
|
|
42
39
|
export default withStates(WebformNumber);
|
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign
|
|
2
|
-
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
2
|
import React from 'react';
|
|
4
3
|
import { useTranslation } from 'react-i18next';
|
|
5
4
|
import Immutable from 'immutable';
|
|
6
5
|
import RadioButtons from '../../Form/RadioButtons';
|
|
7
6
|
import withStates from '../withStates';
|
|
8
|
-
|
|
9
7
|
const WebformRadioButtons = props => {
|
|
10
8
|
const {
|
|
11
9
|
entity,
|
|
@@ -26,21 +24,16 @@ const WebformRadioButtons = props => {
|
|
|
26
24
|
const otherLabel = entity.get('#other__option_label');
|
|
27
25
|
const otherPlaceholder = entity.get('#other__placeholder');
|
|
28
26
|
let options = entity.get('#options', Immutable.Map());
|
|
29
|
-
|
|
30
27
|
if (showOther) {
|
|
31
28
|
options = options.set('__other__', 'Anders');
|
|
32
29
|
}
|
|
33
|
-
|
|
34
30
|
function validation(value) {
|
|
35
31
|
let error;
|
|
36
|
-
|
|
37
32
|
if (required && !value) {
|
|
38
33
|
error = requiredError || t('Dit is een vereist veld.');
|
|
39
34
|
}
|
|
40
|
-
|
|
41
35
|
return error;
|
|
42
36
|
}
|
|
43
|
-
|
|
44
37
|
return /*#__PURE__*/React.createElement("div", {
|
|
45
38
|
className: "WebformRadioButtons"
|
|
46
39
|
}, /*#__PURE__*/React.createElement(RadioButtons, _extends({}, fieldProps, {
|
|
@@ -58,5 +51,4 @@ const WebformRadioButtons = props => {
|
|
|
58
51
|
otherPlaceholder: otherPlaceholder
|
|
59
52
|
})));
|
|
60
53
|
};
|
|
61
|
-
|
|
62
54
|
export default withStates(WebformRadioButtons);
|
|
@@ -1,11 +1,9 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign
|
|
2
|
-
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
2
|
import React from 'react';
|
|
4
3
|
import { useTranslation } from 'react-i18next';
|
|
5
4
|
import Immutable from 'immutable';
|
|
6
5
|
import Select from '../../Form/Select';
|
|
7
6
|
import withStates from '../withStates';
|
|
8
|
-
|
|
9
7
|
const WebformSelect = props => {
|
|
10
8
|
const {
|
|
11
9
|
entity,
|
|
@@ -26,21 +24,16 @@ const WebformSelect = props => {
|
|
|
26
24
|
const otherLabel = entity.get('#other__option_label');
|
|
27
25
|
const otherPlaceholder = entity.get('#other__placeholder');
|
|
28
26
|
let options = entity.get('#options', Immutable.Map());
|
|
29
|
-
|
|
30
27
|
if (showOther) {
|
|
31
28
|
options = options.set('__other__', 'Anders');
|
|
32
29
|
}
|
|
33
|
-
|
|
34
30
|
function validation(value) {
|
|
35
31
|
let error;
|
|
36
|
-
|
|
37
32
|
if (required && !value) {
|
|
38
33
|
error = requiredError || t('Dit is een vereist veld.');
|
|
39
34
|
}
|
|
40
|
-
|
|
41
35
|
return error;
|
|
42
36
|
}
|
|
43
|
-
|
|
44
37
|
return /*#__PURE__*/React.createElement("div", {
|
|
45
38
|
className: "WebformSelect"
|
|
46
39
|
}, /*#__PURE__*/React.createElement(Select, _extends({}, fieldProps, {
|
|
@@ -58,5 +51,4 @@ const WebformSelect = props => {
|
|
|
58
51
|
otherPlaceholder: otherPlaceholder
|
|
59
52
|
})));
|
|
60
53
|
};
|
|
61
|
-
|
|
62
54
|
export default withStates(WebformSelect);
|
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign
|
|
2
|
-
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
2
|
import React from 'react';
|
|
4
3
|
import { useTranslation } from 'react-i18next';
|
|
5
4
|
import FormikTextField from '../../Form/TextField';
|
|
6
5
|
import withStates from '../withStates';
|
|
7
|
-
|
|
8
6
|
const WebformTextField = props => {
|
|
9
7
|
const {
|
|
10
8
|
entity,
|
|
@@ -21,17 +19,13 @@ const WebformTextField = props => {
|
|
|
21
19
|
const requiredError = entity.get('#required_error');
|
|
22
20
|
const key = entity.get('#webform_key');
|
|
23
21
|
const type = props.type || "text";
|
|
24
|
-
|
|
25
22
|
const validation = props.validation || (value => {
|
|
26
23
|
let error;
|
|
27
|
-
|
|
28
24
|
if (required && !value) {
|
|
29
25
|
error = requiredError || t('Dit is een vereist veld.');
|
|
30
26
|
}
|
|
31
|
-
|
|
32
27
|
return error;
|
|
33
28
|
});
|
|
34
|
-
|
|
35
29
|
return /*#__PURE__*/React.createElement("div", {
|
|
36
30
|
className: "WebformTextField"
|
|
37
31
|
}, /*#__PURE__*/React.createElement(FormikTextField, _extends({}, fieldProps, {
|
|
@@ -47,5 +41,4 @@ const WebformTextField = props => {
|
|
|
47
41
|
value: props.values[key]
|
|
48
42
|
})));
|
|
49
43
|
};
|
|
50
|
-
|
|
51
44
|
export default withStates(WebformTextField);
|
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign
|
|
2
|
-
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
2
|
import React from 'react';
|
|
4
3
|
import { useTranslation } from 'react-i18next';
|
|
5
4
|
import FormikTextarea from '../../Form/Textarea';
|
|
6
5
|
import withStates from '../withStates';
|
|
7
|
-
|
|
8
6
|
const WebformTextarea = props => {
|
|
9
7
|
const {
|
|
10
8
|
entity,
|
|
@@ -21,17 +19,13 @@ const WebformTextarea = props => {
|
|
|
21
19
|
const placeholder = entity.get('#placeholder');
|
|
22
20
|
const requiredError = entity.get('#required_error');
|
|
23
21
|
const key = entity.get('#webform_key');
|
|
24
|
-
|
|
25
22
|
function validation(value) {
|
|
26
23
|
let error;
|
|
27
|
-
|
|
28
24
|
if (required && !value) {
|
|
29
25
|
error = requiredError || t('Dit is een vereist veld.');
|
|
30
26
|
}
|
|
31
|
-
|
|
32
27
|
return error;
|
|
33
28
|
}
|
|
34
|
-
|
|
35
29
|
return /*#__PURE__*/React.createElement("div", {
|
|
36
30
|
className: "WebformTextarea"
|
|
37
31
|
}, /*#__PURE__*/React.createElement(FormikTextarea, _extends({}, fieldProps, {
|
|
@@ -46,5 +40,4 @@ const WebformTextarea = props => {
|
|
|
46
40
|
value: props.values[key]
|
|
47
41
|
})));
|
|
48
42
|
};
|
|
49
|
-
|
|
50
43
|
export default withStates(WebformTextarea);
|
|
@@ -2,7 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import classnames from 'classnames';
|
|
3
3
|
import Immutable from 'immutable';
|
|
4
4
|
import Button from '../../Button';
|
|
5
|
-
import WebformContainer from '../WebformContainer';
|
|
5
|
+
import WebformContainer from '../WebformContainer';
|
|
6
|
+
// import WebformStepCounter from '../WebformStepCounter';
|
|
6
7
|
|
|
7
8
|
const WebformWizardPage = props => {
|
|
8
9
|
const {
|
|
@@ -19,12 +20,12 @@ const WebformWizardPage = props => {
|
|
|
19
20
|
const classes = classnames('WebformWizardPage', {
|
|
20
21
|
hidden: currentPage !== entity.get('#webform_key')
|
|
21
22
|
});
|
|
22
|
-
|
|
23
23
|
const collectInitialValuesFlat = entity => {
|
|
24
24
|
let output = new Immutable.List();
|
|
25
25
|
const mappedEntity = Immutable.fromJS(entity);
|
|
26
|
-
output = output.push(mappedEntity.get('#webform_key'));
|
|
26
|
+
output = output.push(mappedEntity.get('#webform_key'));
|
|
27
27
|
|
|
28
|
+
// Collect child items.
|
|
28
29
|
let children = Immutable.fromJS(entity);
|
|
29
30
|
children.keySeq().forEach(k => {
|
|
30
31
|
if (k.indexOf('#') === 0) {
|
|
@@ -37,15 +38,15 @@ const WebformWizardPage = props => {
|
|
|
37
38
|
});
|
|
38
39
|
return output;
|
|
39
40
|
};
|
|
40
|
-
|
|
41
41
|
const onNextButton = () => {
|
|
42
42
|
const {
|
|
43
43
|
setFieldTouched,
|
|
44
44
|
validateForm,
|
|
45
45
|
entity,
|
|
46
46
|
onNextPage
|
|
47
|
-
} = props;
|
|
47
|
+
} = props;
|
|
48
48
|
|
|
49
|
+
// Determine all children in this page.
|
|
49
50
|
const fieldsInThisPage = collectInitialValuesFlat(entity);
|
|
50
51
|
validateForm().then(validation => {
|
|
51
52
|
let validated = true;
|
|
@@ -56,13 +57,11 @@ const WebformWizardPage = props => {
|
|
|
56
57
|
setFieldTouched(invalidField);
|
|
57
58
|
}
|
|
58
59
|
});
|
|
59
|
-
|
|
60
60
|
if (validated) {
|
|
61
61
|
onNextPage();
|
|
62
62
|
}
|
|
63
63
|
});
|
|
64
64
|
};
|
|
65
|
-
|
|
66
65
|
return /*#__PURE__*/React.createElement("div", {
|
|
67
66
|
className: classes
|
|
68
67
|
}, /*#__PURE__*/React.createElement("h2", {
|
|
@@ -81,5 +80,4 @@ const WebformWizardPage = props => {
|
|
|
81
80
|
onClick: onNextButton
|
|
82
81
|
}, labelNext)));
|
|
83
82
|
};
|
|
84
|
-
|
|
85
83
|
export default WebformWizardPage;
|
|
@@ -2,43 +2,37 @@ import React, { useState, useRef } from 'react';
|
|
|
2
2
|
import Immutable from 'immutable';
|
|
3
3
|
import WebformMapper from './WebformMapper';
|
|
4
4
|
import FormikWrapper from '../Form/FormikWrapper';
|
|
5
|
-
|
|
6
5
|
const Webform = ({
|
|
7
6
|
entities
|
|
8
7
|
}) => {
|
|
9
8
|
const [currentPage, setCurrentPage] = useState(0);
|
|
10
9
|
const webformRef = useRef(null);
|
|
10
|
+
|
|
11
11
|
/**
|
|
12
12
|
* @description Scroll to the top of the webform component
|
|
13
13
|
*/
|
|
14
|
-
|
|
15
14
|
const scrollToTop = () => {
|
|
16
15
|
window.scrollTo(0, webformRef.getBoundingClientRect().top);
|
|
17
16
|
webformRef.scrollIntoView();
|
|
18
17
|
};
|
|
19
|
-
|
|
20
18
|
const onNextPage = () => {
|
|
21
19
|
setCurrentPage(currentPage + 1);
|
|
22
20
|
scrollToTop();
|
|
23
21
|
};
|
|
24
|
-
|
|
25
22
|
const onPreviousPage = () => {
|
|
26
23
|
setCurrentPage(currentPage - 1);
|
|
27
24
|
scrollToTop();
|
|
28
25
|
};
|
|
29
|
-
|
|
30
26
|
const collectPages = entities => {
|
|
31
27
|
let output = new Immutable.List();
|
|
32
28
|
entities.entrySeq().forEach(([key, entity]) => {
|
|
33
29
|
const mappedEntity = Immutable.fromJS(entity);
|
|
34
|
-
|
|
35
30
|
if (mappedEntity.get('#type') === 'webform_wizard_page') {
|
|
36
31
|
output = output.push(mappedEntity.get('#webform_key'));
|
|
37
32
|
}
|
|
38
33
|
});
|
|
39
34
|
return output;
|
|
40
35
|
};
|
|
41
|
-
|
|
42
36
|
const pages = collectPages(entities);
|
|
43
37
|
return /*#__PURE__*/React.createElement("div", {
|
|
44
38
|
className: "Webform",
|
|
@@ -52,5 +46,4 @@ const Webform = ({
|
|
|
52
46
|
currentPage: pages.get(currentPage)
|
|
53
47
|
})));
|
|
54
48
|
};
|
|
55
|
-
|
|
56
49
|
export default Webform;
|
|
@@ -1,13 +1,12 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
|
|
3
2
|
const determineVisibility = (entity, values) => {
|
|
4
3
|
let visible = true;
|
|
5
|
-
|
|
6
4
|
if (entity.hasIn(['#states', 'visible'])) {
|
|
7
5
|
visible = entity.getIn(['#states', 'visible']).keySeq().every(component => {
|
|
8
6
|
const condition = entity.getIn(['#states', 'visible', component]);
|
|
9
|
-
const fieldName = component.match(/input\[name="(.+)"\]/)[1];
|
|
7
|
+
const fieldName = component.match(/input\[name="(.+)"\]/)[1];
|
|
10
8
|
|
|
9
|
+
// Determine the type of condition.
|
|
11
10
|
if (condition.get('filled')) {
|
|
12
11
|
if (values[fieldName]) {
|
|
13
12
|
return true;
|
|
@@ -17,69 +16,57 @@ const determineVisibility = (entity, values) => {
|
|
|
17
16
|
return true;
|
|
18
17
|
}
|
|
19
18
|
} else if (condition.get('value')) {
|
|
20
|
-
const value = condition.get('value');
|
|
21
|
-
|
|
19
|
+
const value = condition.get('value');
|
|
20
|
+
// Check for subfield.
|
|
22
21
|
const matches = [...fieldName.matchAll(/(.*)\[(.*)\]/g)];
|
|
23
|
-
|
|
24
22
|
if (matches && matches.length > 0) {
|
|
25
23
|
const [, field] = matches[0];
|
|
26
|
-
|
|
27
24
|
if (values[field]) {
|
|
28
25
|
if (values[field].includes(value)) {
|
|
29
26
|
return true;
|
|
30
27
|
}
|
|
31
28
|
}
|
|
32
29
|
}
|
|
33
|
-
|
|
34
30
|
if (values[fieldName] === value) {
|
|
35
31
|
return true;
|
|
36
32
|
}
|
|
37
33
|
} else if (condition.get('checked')) {
|
|
38
34
|
// Check for subfield.
|
|
39
35
|
const matches = [...fieldName.matchAll(/(.*)\[(.*)\]/g)];
|
|
40
|
-
|
|
41
36
|
if (matches && matches.length > 0) {
|
|
42
37
|
const [, field, subField] = matches[0];
|
|
43
|
-
|
|
44
38
|
if (values[field]) {
|
|
45
39
|
if (values[field].includes(subField)) {
|
|
46
40
|
return true;
|
|
47
41
|
}
|
|
48
42
|
}
|
|
49
43
|
}
|
|
50
|
-
|
|
51
44
|
if (values[fieldName] === true) {
|
|
52
45
|
return true;
|
|
53
46
|
}
|
|
54
47
|
} else {
|
|
55
48
|
console.log('Condition not yet supported:', condition);
|
|
56
|
-
}
|
|
57
|
-
|
|
49
|
+
}
|
|
58
50
|
|
|
51
|
+
// By default, states will make a field invisible.
|
|
59
52
|
return false;
|
|
60
53
|
});
|
|
61
54
|
}
|
|
62
|
-
|
|
63
55
|
return visible;
|
|
64
56
|
};
|
|
65
|
-
|
|
66
57
|
const withStates = BaseComponent => props => {
|
|
67
58
|
const {
|
|
68
59
|
entity,
|
|
69
60
|
values
|
|
70
61
|
} = props;
|
|
71
62
|
const states = entity.get('#states');
|
|
72
|
-
|
|
73
63
|
if (states) {
|
|
74
64
|
const visible = entity.get('#visible', true);
|
|
75
65
|
const visibility = determineVisibility(entity, values);
|
|
76
|
-
|
|
77
66
|
if (!visible || !visibility) {
|
|
78
67
|
return null;
|
|
79
68
|
}
|
|
80
69
|
}
|
|
81
|
-
|
|
82
70
|
return /*#__PURE__*/React.createElement(BaseComponent, props, props.children);
|
|
83
71
|
};
|
|
84
|
-
|
|
85
72
|
export default withStates;
|
|
@@ -1,10 +1,8 @@
|
|
|
1
|
-
function _extends() { _extends = Object.assign
|
|
2
|
-
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
3
2
|
import React from 'react';
|
|
4
3
|
import PropTypes from 'prop-types';
|
|
5
4
|
import ReactHtmlParser from 'react-html-parser';
|
|
6
5
|
import Button from '../Button';
|
|
7
|
-
|
|
8
6
|
const WysiwygField = ({
|
|
9
7
|
html,
|
|
10
8
|
customElementHandler,
|
|
@@ -13,11 +11,9 @@ const WysiwygField = ({
|
|
|
13
11
|
const parsedHtml = ReactHtmlParser(html, {
|
|
14
12
|
transform: node => {
|
|
15
13
|
const customHandler = customElementHandler(node);
|
|
16
|
-
|
|
17
14
|
if (customHandler) {
|
|
18
15
|
return customHandler;
|
|
19
16
|
}
|
|
20
|
-
|
|
21
17
|
switch (node.name) {
|
|
22
18
|
case 'a':
|
|
23
19
|
{
|
|
@@ -33,10 +29,8 @@ const WysiwygField = ({
|
|
|
33
29
|
key: `${node.name}:${label}`
|
|
34
30
|
}, label);
|
|
35
31
|
}
|
|
36
|
-
|
|
37
32
|
break;
|
|
38
33
|
}
|
|
39
|
-
|
|
40
34
|
default:
|
|
41
35
|
{
|
|
42
36
|
break;
|
|
@@ -48,7 +42,6 @@ const WysiwygField = ({
|
|
|
48
42
|
className: "WysiwygField"
|
|
49
43
|
}, props), parsedHtml);
|
|
50
44
|
};
|
|
51
|
-
|
|
52
45
|
WysiwygField.propTypes = {
|
|
53
46
|
html: PropTypes.string.isRequired,
|
|
54
47
|
customElementHandler: PropTypes.func
|
|
@@ -7,7 +7,6 @@ const html = "<p>This is <em>some</em> example <a href='https://www.uncinc.nl'>H
|
|
|
7
7
|
export const Primary = () => /*#__PURE__*/React.createElement(WysiwygField, {
|
|
8
8
|
html: html
|
|
9
9
|
});
|
|
10
|
-
|
|
11
10
|
const Abbr = ({
|
|
12
11
|
title,
|
|
13
12
|
children
|
|
@@ -16,7 +15,6 @@ const Abbr = ({
|
|
|
16
15
|
title: title
|
|
17
16
|
}, children);
|
|
18
17
|
};
|
|
19
|
-
|
|
20
18
|
const htmlCustomHandler = `
|
|
21
19
|
<p>Lorem ipsum dolor sit amet, <abbr title="Ut ut tellus et augue feugiat sollicitudin sit amet viverra nisi.">consectetur adipiscing</abbr> elit. Aliquam in sodales tellus. Ut ut tellus et augue feugiat sollicitudin sit amet viverra nisi. Nulla malesuada erat non massa pellentesque, ut ultricies tellus sodales. Fusce ac feugiat ligula. In vel metus diam. Maecenas diam ex, tincidunt tempor nibh sed, suscipit semper lectus. Sed eu enim vel erat tempus mollis. Integer eget gravida orci. Nunc volutpat velit id dui semper tincidunt. Nulla maximus nisl nec volutpat faucibus. Integer vitae ullamcorper ex. Vestibulum facilisis convallis arcu, ac interdum libero malesuada eget.</p>
|
|
22
20
|
<p>Donec feugiat, nunc vitae euismod posuere, urna nisl elementum nibh, quis ultricies libero leo sed neque. Praesent vel vestibulum sem, eget congue purus. Nunc non volutpat urna, vitae ullamcorper justo. Suspendisse in tortor ex. Phasellus euismod eget neque vitae consequat. Vestibulum sem mi, dictum id consectetur at, hendrerit in massa. Mauris quis sem condimentum, condimentum enim sed, varius sem. Curabitur convallis tempus nulla, eget consectetur quam sagittis at. Nulla a feugiat tortor. Mauris fermentum lectus ac mauris cursus ornare.</p>
|
|
@@ -33,7 +31,6 @@ export const CustomHandlers = () => /*#__PURE__*/React.createElement(WysiwygFiel
|
|
|
33
31
|
title: element.attribs.title
|
|
34
32
|
}, element.children[0].data);
|
|
35
33
|
}
|
|
36
|
-
|
|
37
34
|
default:
|
|
38
35
|
{
|
|
39
36
|
return null;
|