@uncinc/uncinc-react-kitchen-sink 2.3.6 → 2.4.1
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/KitchenSinkComponentMapperContext.js +11 -3
- package/dist/Context/ViewportContext.js +32 -19
- package/dist/Context/withMapping.js +26 -15
- package/dist/components/AbbreviationAnnotation/index.js +49 -27
- package/dist/components/AbbreviationAnnotation/stories.js +32 -21
- package/dist/components/AbbreviationAnnotation/stories.scss +1 -1
- package/dist/components/AbbreviationAnnotation/style.scss +0 -2
- package/dist/components/Accordion/AccordionItem/index.js +56 -36
- package/dist/components/Accordion/AccordionItemVariant/index.js +47 -25
- package/dist/components/Accordion/index.js +17 -10
- package/dist/components/Accordion/stories.js +38 -24
- package/dist/components/ApiAutocomplete/index.js +79 -51
- package/dist/components/ApiAutocomplete/stories.js +18 -9
- package/dist/components/Button/index.js +53 -39
- package/dist/components/Button/stories.js +52 -30
- package/dist/components/Cookie/Checkbox/index.js +24 -17
- package/dist/components/Cookie/index.js +164 -118
- package/dist/components/Cookie/stories.js +57 -39
- package/dist/components/Dialog/index.d.ts +38 -0
- package/dist/components/Dialog/index.js +96 -0
- package/dist/components/Dialog/stories.js +42 -0
- package/dist/components/Dialog/style.scss +72 -0
- package/dist/components/FontSizeSwitcher/index.js +63 -31
- package/dist/components/FontSizeSwitcher/stories.js +23 -9
- package/dist/components/Form/Checkbox/index.js +43 -37
- package/dist/components/Form/Checkbox/stories.js +20 -11
- package/dist/components/Form/Checkboxes/index.js +62 -57
- package/dist/components/Form/Checkboxes/index.test.js +113 -62
- package/dist/components/Form/Checkboxes/stories.js +23 -12
- package/dist/components/Form/Date/index.js +13 -5
- package/dist/components/Form/Date/stories.js +18 -9
- package/dist/components/Form/DatePicker/index.js +40 -34
- package/dist/components/Form/DatePicker/stories.js +18 -9
- package/dist/components/Form/DateSelect/index.js +102 -66
- package/dist/components/Form/DateSelect/stories.js +33 -12
- package/dist/components/Form/Email/index.js +13 -5
- package/dist/components/Form/Email/stories.js +18 -9
- package/dist/components/Form/FormikWrapper/index.js +52 -45
- package/dist/components/Form/GenericFormElement/index.js +39 -34
- package/dist/components/Form/Number/index.js +23 -18
- package/dist/components/Form/Number/stories.js +18 -9
- package/dist/components/Form/RadioButtons/index.js +53 -49
- package/dist/components/Form/RadioButtons/index.test.js +106 -57
- package/dist/components/Form/RadioButtons/stories.js +23 -12
- package/dist/components/Form/SearchField/index.js +37 -30
- package/dist/components/Form/Select/Input/index.js +74 -70
- package/dist/components/Form/Select/index.js +32 -24
- package/dist/components/Form/Select/stories.js +25 -15
- package/dist/components/Form/TextField/index.js +38 -33
- package/dist/components/Form/TextField/index.test.js +104 -56
- package/dist/components/Form/TextField/stories.js +23 -12
- package/dist/components/Form/Textarea/index.js +34 -27
- package/dist/components/Form/Textarea/stories.js +18 -9
- package/dist/components/Hamburger/index.js +30 -19
- package/dist/components/Hamburger/stories.js +42 -16
- package/dist/components/Header/index.js +70 -42
- package/dist/components/Header/stories.js +48 -28
- package/dist/components/Image/Background/index.js +36 -21
- package/dist/components/Image/LazyLoadWrapper/index.js +101 -64
- package/dist/components/Image/Picture/index.js +83 -66
- package/dist/components/Image/index.js +21 -15
- package/dist/components/Image/stories.js +87 -64
- package/dist/components/InlineMenu/index.js +62 -42
- package/dist/components/InlineMenu/stories.js +66 -55
- package/dist/components/Layout/Container/index.js +29 -21
- package/dist/components/Layout/Container/stories.js +104 -83
- package/dist/components/Layout/QuickLayout/Auto/index.js +19 -12
- package/dist/components/Layout/QuickLayout/Center/index.js +17 -10
- package/dist/components/Layout/QuickLayout/Clamp/index.js +20 -13
- package/dist/components/Layout/QuickLayout/Sidebar/index.js +20 -13
- package/dist/components/Layout/QuickLayout/SpaceBetween/index.js +20 -13
- package/dist/components/Layout/QuickLayout/Stack/index.js +21 -11
- package/dist/components/Layout/QuickLayout/Wrap/index.js +21 -14
- package/dist/components/Layout/QuickLayout/index.js +31 -21
- package/dist/components/Layout/QuickLayout/stories.js +102 -70
- package/dist/components/Lottie/LottieAnimation/index.js +74 -71
- package/dist/components/Lottie/LottieAnimationWithMousePosition.js +33 -20
- package/dist/components/Lottie/index.js +47 -34
- package/dist/components/Lottie/stories.js +54 -31
- package/dist/components/MagicLine/index.js +52 -29
- package/dist/components/MagicLine/stories.js +60 -46
- package/dist/components/NavigationScroll/index.js +76 -57
- package/dist/components/NavigationScroll/stories.js +19 -8
- package/dist/components/Pagination/index.js +54 -41
- package/dist/components/Pagination/stories.js +51 -28
- package/dist/components/SearchKit/Facets/ChipFacet/index.js +24 -16
- package/dist/components/SearchKit/Facets/ListFacet/index.js +24 -15
- package/dist/components/SearchKit/Facets/SelectFacet/index.js +39 -30
- package/dist/components/SearchKit/Query/index.js +41 -23
- package/dist/components/SearchKit/SearchFacets/index.js +36 -25
- package/dist/components/SearchKit/SearchField/index.js +50 -26
- package/dist/components/SearchKit/SearchLoadMore/index.js +22 -15
- package/dist/components/SearchKit/SearchPage/index.js +26 -11
- package/dist/components/SearchKit/SearchPagination/index.js +17 -10
- package/dist/components/SearchKit/SearchReset/index.js +33 -12
- package/dist/components/SearchKit/SearchResults/index.js +114 -61
- package/dist/components/SearchKit/SearchSelectedFilters/Filters/CustomValue/index.js +22 -0
- package/dist/components/SearchKit/SearchSelectedFilters/Filters/DateRange/index.js +24 -0
- package/dist/components/SearchKit/SearchSelectedFilters/Filters/NumericRange/index.js +24 -0
- package/dist/components/SearchKit/SearchSelectedFilters/Filters/Value/index.js +29 -0
- package/dist/components/SearchKit/SearchSelectedFilters/index.js +43 -30
- package/dist/components/SearchKit/SearchSelectedFilters/style.scss +4 -0
- package/dist/components/SearchKit/SearchSorting/index.js +29 -19
- package/dist/components/SearchKit/index.js +75 -49
- package/dist/components/SearchKit/stories.js +144 -183
- package/dist/components/Share/index.js +51 -43
- package/dist/components/Share/stories.js +16 -5
- package/dist/components/Sliders/SliderRelated/index.js +32 -25
- package/dist/components/Sliders/SliderRelated/stories.js +75 -57
- package/dist/components/Webform/WebformActions/index.js +19 -13
- package/dist/components/Webform/WebformCheckbox/index.js +32 -24
- package/dist/components/Webform/WebformCheckboxes/index.js +37 -29
- package/dist/components/Webform/WebformContainer/index.js +17 -11
- package/dist/components/Webform/WebformDate/index.js +77 -48
- package/dist/components/Webform/WebformMapper/index.js +53 -38
- package/dist/components/Webform/WebformNumber/index.js +31 -22
- package/dist/components/Webform/WebformRadioButtons/index.js +37 -29
- package/dist/components/Webform/WebformSelect/index.js +37 -29
- package/dist/components/Webform/WebformTextField/index.js +34 -26
- package/dist/components/Webform/WebformTextarea/index.js +32 -24
- package/dist/components/Webform/WebformWizardPage/index.js +56 -43
- package/dist/components/Webform/index.js +42 -20
- package/dist/components/Webform/stories.actions.js +35 -24
- package/dist/components/Webform/stories.checkboxes.js +40 -29
- package/dist/components/Webform/stories.checked.js +53 -42
- package/dist/components/Webform/stories.container.js +47 -36
- package/dist/components/Webform/stories.date.js +35 -24
- package/dist/components/Webform/stories.filled.js +53 -42
- package/dist/components/Webform/stories.number.js +36 -25
- package/dist/components/Webform/stories.radiobuttons.js +40 -29
- package/dist/components/Webform/stories.select.js +40 -29
- package/dist/components/Webform/stories.textarea.js +19 -8
- package/dist/components/Webform/stories.textfield.js +19 -8
- package/dist/components/Webform/stories.wizard.js +133 -122
- package/dist/components/Webform/withStates.js +49 -28
- package/dist/components/WysiwygField/index.js +30 -21
- package/dist/components/WysiwygField/stories.js +39 -29
- package/dist/components/index.js +111 -15
- package/dist/config/constants.js +38 -18
- package/dist/config/i18next/index.js +19 -11
- package/dist/config/i18next/locales/en.json +4 -0
- package/dist/config/i18next/locales/nl.json +7 -0
- package/dist/helpers/date.js +16 -0
- package/dist/helpers/gtm.js +27 -17
- package/dist/helpers/link.js +15 -6
- package/dist/helpers/useValueForCurrentViewPort.js +27 -10
- package/dist/hooks/useBoolean.d.ts +8 -0
- package/dist/hooks/useBoolean.js +38 -0
- package/dist/hooks/useClickOutside.d.ts +8 -0
- package/dist/hooks/useClickOutside.js +35 -0
- package/dist/hooks/useDialog.d.ts +10 -0
- package/dist/hooks/useDialog.js +39 -0
- package/dist/hooks/useDialogHelpers.d.ts +20 -0
- package/dist/hooks/useDialogHelpers.js +85 -0
- package/dist/hooks/useEscape.d.ts +6 -0
- package/dist/hooks/useEscape.js +24 -0
- package/dist/hooks/useOnScreen.js +27 -6
- package/dist/hooks/usePrevious.js +11 -6
- package/dist/hooks/useScrollPosition.js +25 -7
- package/dist/hooks/useTrapFocus.d.ts +10 -0
- package/dist/hooks/useTrapFocus.js +63 -0
- package/dist/hooks/useWindowDimensions.js +27 -11
- package/dist/index.js +398 -55
- package/dist/setupTests.js +9 -5
- package/package.json +44 -19
- package/dist/components/Form/SearchField/stories.js +0 -0
- package/dist/components/SearchKit/Facets/HierarchicalFilterFacet/index.js +0 -60
- package/dist/components/SearchKit/Facets/HierarchicalMenuFacet/index.js +0 -60
|
@@ -1,22 +1,31 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.DatePicker = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _FormikWrapper = _interopRequireDefault(require("../FormikWrapper"));
|
|
9
|
+
var _ = _interopRequireDefault(require("."));
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
var _default = {
|
|
5
12
|
title: 'Molecules/Form'
|
|
6
13
|
};
|
|
7
|
-
|
|
8
|
-
|
|
14
|
+
exports.default = _default;
|
|
15
|
+
var DatePicker = function DatePicker() {
|
|
16
|
+
return /*#__PURE__*/_react.default.createElement(_FormikWrapper.default, null, /*#__PURE__*/_react.default.createElement(_.default, {
|
|
9
17
|
title: "Date",
|
|
10
18
|
required: true,
|
|
11
19
|
description: "This is a test input.",
|
|
12
20
|
placeholder: "This is a placeholder",
|
|
13
21
|
fieldName: "date",
|
|
14
|
-
validation: value
|
|
15
|
-
|
|
22
|
+
validation: function validation(value) {
|
|
23
|
+
var error;
|
|
16
24
|
if (!value) {
|
|
17
25
|
error = 'Dit is een vereist veld.';
|
|
18
26
|
}
|
|
19
27
|
return error;
|
|
20
28
|
}
|
|
21
29
|
}));
|
|
22
|
-
};
|
|
30
|
+
};
|
|
31
|
+
exports.DatePicker = DatePicker;
|
|
@@ -1,52 +1,82 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _formik = require("formik");
|
|
10
|
+
var _reactI18next = require("react-i18next");
|
|
11
|
+
var _GenericFormElement = _interopRequireDefault(require("../GenericFormElement"));
|
|
12
|
+
var _Input = _interopRequireDefault(require("../Select/Input"));
|
|
13
|
+
require("./style.scss");
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
16
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
18
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
19
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
20
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
21
|
+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
22
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
23
|
+
var DateSelect = function DateSelect(props) {
|
|
24
|
+
var title = props.title,
|
|
25
|
+
fieldName = props.fieldName,
|
|
26
|
+
yearMin = props.yearMin,
|
|
27
|
+
yearMax = props.yearMax,
|
|
28
|
+
hideYear = props.hideYear,
|
|
29
|
+
fixedYear = props.fixedYear,
|
|
30
|
+
required = props.required,
|
|
31
|
+
displayRequiredIndicator = props.displayRequiredIndicator,
|
|
32
|
+
requiredError = props.requiredError,
|
|
33
|
+
notValidError = props.notValidError,
|
|
34
|
+
dayPlaceholder = props.dayPlaceholder,
|
|
35
|
+
monthPlaceholder = props.monthPlaceholder,
|
|
36
|
+
yearPlaceholder = props.yearPlaceholder;
|
|
37
|
+
var _useFormikContext = (0, _formik.useFormikContext)(),
|
|
38
|
+
setFieldValue = _useFormikContext.setFieldValue,
|
|
39
|
+
isSubmitting = _useFormikContext.isSubmitting,
|
|
40
|
+
values = _useFormikContext.values;
|
|
41
|
+
var _useTranslation = (0, _reactI18next.useTranslation)(),
|
|
42
|
+
t = _useTranslation.t;
|
|
31
43
|
|
|
32
44
|
// Set all states for the date.
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
45
|
+
var _useState = (0, _react.useState)(),
|
|
46
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
47
|
+
day = _useState2[0],
|
|
48
|
+
setDay = _useState2[1];
|
|
49
|
+
var _useState3 = (0, _react.useState)(),
|
|
50
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
51
|
+
month = _useState4[0],
|
|
52
|
+
setMonth = _useState4[1];
|
|
53
|
+
var _useState5 = (0, _react.useState)(),
|
|
54
|
+
_useState6 = _slicedToArray(_useState5, 2),
|
|
55
|
+
year = _useState6[0],
|
|
56
|
+
setYear = _useState6[1];
|
|
57
|
+
var _useState7 = (0, _react.useState)(),
|
|
58
|
+
_useState8 = _slicedToArray(_useState7, 2),
|
|
59
|
+
showError = _useState8[0],
|
|
60
|
+
setShowError = _useState8[1];
|
|
61
|
+
var _useState9 = (0, _react.useState)(),
|
|
62
|
+
_useState10 = _slicedToArray(_useState9, 2),
|
|
63
|
+
error = _useState10[0],
|
|
64
|
+
setError = _useState10[1];
|
|
65
|
+
var _useState11 = (0, _react.useState)(),
|
|
66
|
+
_useState12 = _slicedToArray(_useState11, 2),
|
|
67
|
+
dateNotValid = _useState12[0],
|
|
68
|
+
setDateNotValid = _useState12[1];
|
|
39
69
|
|
|
40
70
|
// List all day options
|
|
41
|
-
|
|
42
|
-
|
|
71
|
+
var dayOptions = (0, _react.useCallback)(function (placeholder) {
|
|
72
|
+
var options = [];
|
|
43
73
|
if (placeholder) {
|
|
44
74
|
options.push({
|
|
45
75
|
value: placeholder,
|
|
46
76
|
label: placeholder
|
|
47
77
|
});
|
|
48
78
|
}
|
|
49
|
-
for (
|
|
79
|
+
for (var index = 1; index <= 31; index++) {
|
|
50
80
|
options.push({
|
|
51
81
|
value: index,
|
|
52
82
|
label: index
|
|
@@ -56,9 +86,9 @@ const DateSelect = props => {
|
|
|
56
86
|
}, []);
|
|
57
87
|
|
|
58
88
|
// List all month options
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
return months.map((e, i)
|
|
89
|
+
var monthOptions = (0, _react.useCallback)(function () {
|
|
90
|
+
var months = [t('dateselect.months.jan', 'Januari'), t('dateselect.months.feb', 'Februari'), t('dateselect.months.mar', 'Maart'), t('dateselect.months.apr', 'April'), t('dateselect.months.may', 'Mei'), t('dateselect.months.jun', 'Juni'), t('dateselect.months.jul', 'Juli'), t('dateselect.months.aug', 'Augustus'), t('dateselect.months.sep', 'September'), t('dateselect.months.oct', 'Oktober'), t('dateselect.months.nov', 'November'), t('dateselect.months.dec', 'December')];
|
|
91
|
+
return months.map(function (e, i) {
|
|
62
92
|
return {
|
|
63
93
|
value: i + 1,
|
|
64
94
|
label: e
|
|
@@ -67,9 +97,9 @@ const DateSelect = props => {
|
|
|
67
97
|
}, []);
|
|
68
98
|
|
|
69
99
|
// List all options for possible years from the yearMin and yearMax variables.
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
for (
|
|
100
|
+
var yearOptions = (0, _react.useCallback)(function () {
|
|
101
|
+
var options = [];
|
|
102
|
+
for (var index = yearMin; index <= yearMax; index++) {
|
|
73
103
|
options.push({
|
|
74
104
|
value: index,
|
|
75
105
|
label: index
|
|
@@ -79,23 +109,22 @@ const DateSelect = props => {
|
|
|
79
109
|
}, [yearMin, yearMax]);
|
|
80
110
|
|
|
81
111
|
// Check if all fields are filled
|
|
82
|
-
useEffect(()
|
|
112
|
+
(0, _react.useEffect)(function () {
|
|
83
113
|
if (isSubmitting) {
|
|
84
114
|
if (required && !values[fieldName]) {
|
|
85
115
|
!dateNotValid && setError(requiredError);
|
|
86
116
|
setShowError(true);
|
|
87
|
-
return;
|
|
88
117
|
}
|
|
89
118
|
}
|
|
90
119
|
}, [isSubmitting]);
|
|
91
120
|
|
|
92
121
|
// Validation and setting either an error or the FieldValue
|
|
93
|
-
useEffect(()
|
|
122
|
+
(0, _react.useEffect)(function () {
|
|
94
123
|
hideYear && setYear(fixedYear || new Date().getFullYear());
|
|
95
124
|
|
|
96
125
|
// All options are filled, start validation
|
|
97
126
|
if (day && month && year) {
|
|
98
|
-
|
|
127
|
+
var date = new Date("".concat(year, "-").concat(month, "-").concat(day));
|
|
99
128
|
if (!(
|
|
100
129
|
// Take note of the exclamation mark
|
|
101
130
|
date.getDate() === day && date.getMonth() + 1 === month && date.getFullYear() === year)) {
|
|
@@ -106,14 +135,14 @@ const DateSelect = props => {
|
|
|
106
135
|
setError(notValidError);
|
|
107
136
|
setShowError(true);
|
|
108
137
|
setDateNotValid(true);
|
|
109
|
-
setFieldValue(
|
|
138
|
+
setFieldValue('dateSelect', '');
|
|
110
139
|
return;
|
|
111
140
|
}
|
|
112
141
|
|
|
113
142
|
// The Date is valid, so we hide previous errors and set the FieldValue
|
|
114
143
|
setShowError(false);
|
|
115
144
|
setDateNotValid(false);
|
|
116
|
-
setFieldValue(
|
|
145
|
+
setFieldValue('dateSelect', date);
|
|
117
146
|
return;
|
|
118
147
|
}
|
|
119
148
|
|
|
@@ -122,36 +151,42 @@ const DateSelect = props => {
|
|
|
122
151
|
// so that validation - and also the useEffect on isSubmitting - can do it's job.
|
|
123
152
|
setShowError(false);
|
|
124
153
|
setDateNotValid(false);
|
|
125
|
-
setFieldValue(
|
|
154
|
+
setFieldValue('dateSelect', '');
|
|
126
155
|
}, [day, month, year]);
|
|
127
|
-
return /*#__PURE__*/
|
|
156
|
+
return /*#__PURE__*/_react.default.createElement(_GenericFormElement.default, {
|
|
128
157
|
className: "DateSelect",
|
|
129
158
|
title: title,
|
|
130
159
|
required: required,
|
|
131
160
|
displayRequiredIndicator: displayRequiredIndicator,
|
|
132
161
|
error: error,
|
|
133
162
|
touched: showError
|
|
134
|
-
}, /*#__PURE__*/
|
|
135
|
-
id:
|
|
136
|
-
fieldName:
|
|
163
|
+
}, /*#__PURE__*/_react.default.createElement(_Input.default, {
|
|
164
|
+
id: "".concat(fieldName, "day"),
|
|
165
|
+
fieldName: "".concat(fieldName, "day"),
|
|
137
166
|
options: dayOptions(),
|
|
138
167
|
value: day,
|
|
139
168
|
placeholder: dayPlaceholder,
|
|
140
|
-
onChange:
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
169
|
+
onChange: function onChange(day) {
|
|
170
|
+
return setDay(day);
|
|
171
|
+
}
|
|
172
|
+
}), /*#__PURE__*/_react.default.createElement(_Input.default, {
|
|
173
|
+
id: "".concat(fieldName, "month"),
|
|
174
|
+
fieldName: "".concat(fieldName, "month"),
|
|
144
175
|
options: monthOptions(),
|
|
145
176
|
value: month,
|
|
146
177
|
placeholder: monthPlaceholder,
|
|
147
|
-
onChange:
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
178
|
+
onChange: function onChange(month) {
|
|
179
|
+
return setMonth(month);
|
|
180
|
+
}
|
|
181
|
+
}), !hideYear && /*#__PURE__*/_react.default.createElement(_Input.default, {
|
|
182
|
+
id: "".concat(fieldName, "year"),
|
|
183
|
+
fieldName: "".concat(fieldName, "year"),
|
|
151
184
|
options: yearOptions(),
|
|
152
185
|
value: year,
|
|
153
186
|
placeholder: yearPlaceholder,
|
|
154
|
-
onChange:
|
|
187
|
+
onChange: function onChange(year) {
|
|
188
|
+
return setYear(year);
|
|
189
|
+
}
|
|
155
190
|
}));
|
|
156
191
|
};
|
|
157
192
|
DateSelect.defaultProps = {
|
|
@@ -166,4 +201,5 @@ DateSelect.defaultProps = {
|
|
|
166
201
|
monthPlaceholder: 'Maand',
|
|
167
202
|
yearPlaceholder: 'Jaar'
|
|
168
203
|
};
|
|
169
|
-
|
|
204
|
+
var _default = DateSelect;
|
|
205
|
+
exports.default = _default;
|
|
@@ -1,22 +1,42 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = exports.DateSelect = void 0;
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _FormikWrapper = _interopRequireDefault(require("../FormikWrapper"));
|
|
10
|
+
var _ = _interopRequireDefault(require("."));
|
|
11
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
13
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
14
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
15
|
+
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
16
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
17
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
18
|
+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
19
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
20
|
+
var _default = {
|
|
5
21
|
title: 'Molecules/Form'
|
|
6
22
|
};
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
23
|
+
exports.default = _default;
|
|
24
|
+
var DateSelect = function DateSelect() {
|
|
25
|
+
var _useState = (0, _react.useState)(''),
|
|
26
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
27
|
+
date = _useState2[0],
|
|
28
|
+
setDate = _useState2[1];
|
|
29
|
+
return /*#__PURE__*/_react.default.createElement(_FormikWrapper.default, {
|
|
10
30
|
initialValues: {
|
|
11
31
|
dateSelect: date
|
|
12
32
|
},
|
|
13
33
|
validateOnBlur: true,
|
|
14
34
|
displayRequiredIndicator: "required",
|
|
15
|
-
onSubmit: (values, form)
|
|
35
|
+
onSubmit: function onSubmit(values, form) {
|
|
16
36
|
form.setSubmitting(false);
|
|
17
37
|
setDate(values.dateSelect);
|
|
18
38
|
}
|
|
19
|
-
}, /*#__PURE__*/
|
|
39
|
+
}, /*#__PURE__*/_react.default.createElement(_.default, {
|
|
20
40
|
title: "Pick a date",
|
|
21
41
|
fieldName: "dateSelect",
|
|
22
42
|
required: true,
|
|
@@ -25,9 +45,10 @@ export const DateSelect = () => {
|
|
|
25
45
|
yearPlaceholder: "Year",
|
|
26
46
|
requiredError: "Please fill all fields.",
|
|
27
47
|
notValidError: "That's not a valid date."
|
|
28
|
-
}), /*#__PURE__*/
|
|
29
|
-
|
|
48
|
+
}), /*#__PURE__*/_react.default.createElement("p", null, "Selected date: ", date.toString()), /*#__PURE__*/_react.default.createElement("input", {
|
|
49
|
+
className: "submitButton",
|
|
30
50
|
type: "submit",
|
|
31
51
|
value: "Pick date"
|
|
32
52
|
}));
|
|
33
|
-
};
|
|
53
|
+
};
|
|
54
|
+
exports.DateSelect = DateSelect;
|
|
@@ -1,9 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _TextField = _interopRequireDefault(require("../TextField"));
|
|
9
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
1
10
|
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); }
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
const Email = props => {
|
|
5
|
-
return /*#__PURE__*/React.createElement(TextField, _extends({}, props, {
|
|
11
|
+
var Email = function Email(props) {
|
|
12
|
+
return /*#__PURE__*/_react.default.createElement(_TextField.default, _extends({}, props, {
|
|
6
13
|
type: "email"
|
|
7
14
|
}));
|
|
8
15
|
};
|
|
9
|
-
|
|
16
|
+
var _default = Email;
|
|
17
|
+
exports.default = _default;
|
|
@@ -1,22 +1,31 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.Email = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _FormikWrapper = _interopRequireDefault(require("../FormikWrapper"));
|
|
9
|
+
var _ = _interopRequireDefault(require("."));
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
var _default = {
|
|
5
12
|
title: 'Molecules/Form'
|
|
6
13
|
};
|
|
7
|
-
|
|
8
|
-
|
|
14
|
+
exports.default = _default;
|
|
15
|
+
var Email = function Email() {
|
|
16
|
+
return /*#__PURE__*/_react.default.createElement(_FormikWrapper.default, null, /*#__PURE__*/_react.default.createElement(_.default, {
|
|
9
17
|
title: "Email address",
|
|
10
18
|
required: true,
|
|
11
19
|
description: "This is a test input.",
|
|
12
20
|
placeholder: "This is a placeholder",
|
|
13
21
|
fieldName: "email",
|
|
14
|
-
validation: value
|
|
15
|
-
|
|
22
|
+
validation: function validation(value) {
|
|
23
|
+
var error;
|
|
16
24
|
if (!value) {
|
|
17
25
|
error = 'Dit is een vereist veld.';
|
|
18
26
|
}
|
|
19
27
|
return error;
|
|
20
28
|
}
|
|
21
29
|
}));
|
|
22
|
-
};
|
|
30
|
+
};
|
|
31
|
+
exports.Email = Email;
|
|
@@ -1,28 +1,40 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _formik = require("formik");
|
|
9
|
+
var _excluded = ["initialValues", "onSubmit", "displayRequiredIndicator", "validate", "validateOnChange", "validateOnBlur", "validateOnMount", "onReset"];
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
|
|
1
12
|
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); }
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
13
|
+
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
14
|
+
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
15
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
16
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
17
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
18
|
+
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
19
|
+
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
|
|
20
|
+
var renderChildrenRecursively = function renderChildrenRecursively(child, childProps, displayRequiredIndicator) {
|
|
21
|
+
var _child$props = child.props,
|
|
22
|
+
fieldName = _child$props.fieldName,
|
|
23
|
+
type = _child$props.type,
|
|
24
|
+
htmlType = _child$props.htmlType,
|
|
25
|
+
children = _child$props.children;
|
|
11
26
|
if (type === 'submit' || htmlType === 'submit') {
|
|
12
|
-
return /*#__PURE__*/
|
|
27
|
+
return /*#__PURE__*/_react.default.cloneElement(child, {
|
|
13
28
|
disabled: childProps.isSubmitting
|
|
14
29
|
}, children);
|
|
15
30
|
}
|
|
16
|
-
|
|
31
|
+
var fieldProps = {
|
|
17
32
|
touched: childProps.touched[fieldName],
|
|
18
33
|
error: childProps.errors[fieldName],
|
|
19
34
|
value: childProps.values[fieldName],
|
|
20
35
|
displayRequiredIndicator: displayRequiredIndicator
|
|
21
36
|
};
|
|
22
|
-
return /*#__PURE__*/
|
|
23
|
-
...child.props,
|
|
24
|
-
...fieldProps
|
|
25
|
-
}, React.Children.map(children, subchild => {
|
|
37
|
+
return /*#__PURE__*/_react.default.cloneElement(child, _objectSpread(_objectSpread({}, child.props), fieldProps), _react.default.Children.map(children, function (subchild) {
|
|
26
38
|
// Happens when we conditionally render elements.
|
|
27
39
|
if (!subchild) {
|
|
28
40
|
return null;
|
|
@@ -30,42 +42,34 @@ const renderChildrenRecursively = (child, childProps, displayRequiredIndicator)
|
|
|
30
42
|
|
|
31
43
|
// Happens for simple text nodes.
|
|
32
44
|
if (!subchild.props) {
|
|
33
|
-
return /*#__PURE__*/
|
|
45
|
+
return /*#__PURE__*/_react.default.createElement("span", null, subchild);
|
|
34
46
|
}
|
|
35
|
-
|
|
36
|
-
fieldName,
|
|
37
|
-
children
|
|
38
|
-
|
|
39
|
-
const fieldProps = {
|
|
47
|
+
var _subchild$props = subchild.props,
|
|
48
|
+
fieldName = _subchild$props.fieldName,
|
|
49
|
+
children = _subchild$props.children;
|
|
50
|
+
var fieldProps = {
|
|
40
51
|
touched: childProps.touched[fieldName],
|
|
41
52
|
error: childProps.errors[fieldName],
|
|
42
53
|
value: childProps.values[fieldName],
|
|
43
54
|
displayRequiredIndicator: displayRequiredIndicator
|
|
44
55
|
};
|
|
45
56
|
if (children) {
|
|
46
|
-
return renderChildrenRecursively(subchild, {
|
|
47
|
-
...childProps
|
|
48
|
-
}, displayRequiredIndicator);
|
|
57
|
+
return renderChildrenRecursively(subchild, _objectSpread({}, childProps), displayRequiredIndicator);
|
|
49
58
|
}
|
|
50
|
-
return /*#__PURE__*/
|
|
51
|
-
...childProps,
|
|
52
|
-
...fieldProps
|
|
53
|
-
}, null);
|
|
59
|
+
return /*#__PURE__*/_react.default.cloneElement(subchild, _objectSpread(_objectSpread({}, childProps), fieldProps), null);
|
|
54
60
|
}));
|
|
55
61
|
};
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
} = props;
|
|
68
|
-
return /*#__PURE__*/React.createElement(Formik, _extends({
|
|
62
|
+
var FormikWrapper = function FormikWrapper(props) {
|
|
63
|
+
var initialValues = props.initialValues,
|
|
64
|
+
onSubmit = props.onSubmit,
|
|
65
|
+
displayRequiredIndicator = props.displayRequiredIndicator,
|
|
66
|
+
validate = props.validate,
|
|
67
|
+
validateOnChange = props.validateOnChange,
|
|
68
|
+
validateOnBlur = props.validateOnBlur,
|
|
69
|
+
validateOnMount = props.validateOnMount,
|
|
70
|
+
onReset = props.onReset,
|
|
71
|
+
restProps = _objectWithoutProperties(props, _excluded);
|
|
72
|
+
return /*#__PURE__*/_react.default.createElement(_formik.Formik, _extends({
|
|
69
73
|
initialValues: initialValues || {},
|
|
70
74
|
onSubmit: onSubmit,
|
|
71
75
|
validate: validate,
|
|
@@ -73,8 +77,11 @@ const FormikWrapper = props => {
|
|
|
73
77
|
validateOnBlur: validateOnBlur,
|
|
74
78
|
validateOnMount: validateOnMount,
|
|
75
79
|
onReset: onReset
|
|
76
|
-
}, restProps),
|
|
77
|
-
return
|
|
78
|
-
|
|
80
|
+
}, restProps), function (childProps) {
|
|
81
|
+
return /*#__PURE__*/_react.default.createElement(_formik.Form, null, _react.default.Children.map(props.children, function (child) {
|
|
82
|
+
return renderChildrenRecursively(child, childProps, displayRequiredIndicator);
|
|
83
|
+
}));
|
|
84
|
+
});
|
|
79
85
|
};
|
|
80
|
-
|
|
86
|
+
var _default = FormikWrapper;
|
|
87
|
+
exports.default = _default;
|