@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.
Files changed (168) hide show
  1. package/dist/Context/KitchenSinkComponentMapperContext.js +11 -3
  2. package/dist/Context/ViewportContext.js +32 -19
  3. package/dist/Context/withMapping.js +26 -15
  4. package/dist/components/AbbreviationAnnotation/index.js +49 -27
  5. package/dist/components/AbbreviationAnnotation/stories.js +32 -21
  6. package/dist/components/AbbreviationAnnotation/stories.scss +1 -1
  7. package/dist/components/AbbreviationAnnotation/style.scss +0 -2
  8. package/dist/components/Accordion/AccordionItem/index.js +56 -36
  9. package/dist/components/Accordion/AccordionItemVariant/index.js +47 -25
  10. package/dist/components/Accordion/index.js +17 -10
  11. package/dist/components/Accordion/stories.js +38 -24
  12. package/dist/components/ApiAutocomplete/index.js +79 -51
  13. package/dist/components/ApiAutocomplete/stories.js +18 -9
  14. package/dist/components/Button/index.js +53 -39
  15. package/dist/components/Button/stories.js +52 -30
  16. package/dist/components/Cookie/Checkbox/index.js +24 -17
  17. package/dist/components/Cookie/index.js +164 -118
  18. package/dist/components/Cookie/stories.js +57 -39
  19. package/dist/components/Dialog/index.d.ts +38 -0
  20. package/dist/components/Dialog/index.js +96 -0
  21. package/dist/components/Dialog/stories.js +42 -0
  22. package/dist/components/Dialog/style.scss +72 -0
  23. package/dist/components/FontSizeSwitcher/index.js +63 -31
  24. package/dist/components/FontSizeSwitcher/stories.js +23 -9
  25. package/dist/components/Form/Checkbox/index.js +43 -37
  26. package/dist/components/Form/Checkbox/stories.js +20 -11
  27. package/dist/components/Form/Checkboxes/index.js +62 -57
  28. package/dist/components/Form/Checkboxes/index.test.js +113 -62
  29. package/dist/components/Form/Checkboxes/stories.js +23 -12
  30. package/dist/components/Form/Date/index.js +13 -5
  31. package/dist/components/Form/Date/stories.js +18 -9
  32. package/dist/components/Form/DatePicker/index.js +40 -34
  33. package/dist/components/Form/DatePicker/stories.js +18 -9
  34. package/dist/components/Form/DateSelect/index.js +102 -66
  35. package/dist/components/Form/DateSelect/stories.js +33 -12
  36. package/dist/components/Form/Email/index.js +13 -5
  37. package/dist/components/Form/Email/stories.js +18 -9
  38. package/dist/components/Form/FormikWrapper/index.js +52 -45
  39. package/dist/components/Form/GenericFormElement/index.js +39 -34
  40. package/dist/components/Form/Number/index.js +23 -18
  41. package/dist/components/Form/Number/stories.js +18 -9
  42. package/dist/components/Form/RadioButtons/index.js +53 -49
  43. package/dist/components/Form/RadioButtons/index.test.js +106 -57
  44. package/dist/components/Form/RadioButtons/stories.js +23 -12
  45. package/dist/components/Form/SearchField/index.js +37 -30
  46. package/dist/components/Form/Select/Input/index.js +74 -70
  47. package/dist/components/Form/Select/index.js +32 -24
  48. package/dist/components/Form/Select/stories.js +25 -15
  49. package/dist/components/Form/TextField/index.js +38 -33
  50. package/dist/components/Form/TextField/index.test.js +104 -56
  51. package/dist/components/Form/TextField/stories.js +23 -12
  52. package/dist/components/Form/Textarea/index.js +34 -27
  53. package/dist/components/Form/Textarea/stories.js +18 -9
  54. package/dist/components/Hamburger/index.js +30 -19
  55. package/dist/components/Hamburger/stories.js +42 -16
  56. package/dist/components/Header/index.js +70 -42
  57. package/dist/components/Header/stories.js +48 -28
  58. package/dist/components/Image/Background/index.js +36 -21
  59. package/dist/components/Image/LazyLoadWrapper/index.js +101 -64
  60. package/dist/components/Image/Picture/index.js +83 -66
  61. package/dist/components/Image/index.js +21 -15
  62. package/dist/components/Image/stories.js +87 -64
  63. package/dist/components/InlineMenu/index.js +62 -42
  64. package/dist/components/InlineMenu/stories.js +66 -55
  65. package/dist/components/Layout/Container/index.js +29 -21
  66. package/dist/components/Layout/Container/stories.js +104 -83
  67. package/dist/components/Layout/QuickLayout/Auto/index.js +19 -12
  68. package/dist/components/Layout/QuickLayout/Center/index.js +17 -10
  69. package/dist/components/Layout/QuickLayout/Clamp/index.js +20 -13
  70. package/dist/components/Layout/QuickLayout/Sidebar/index.js +20 -13
  71. package/dist/components/Layout/QuickLayout/SpaceBetween/index.js +20 -13
  72. package/dist/components/Layout/QuickLayout/Stack/index.js +21 -11
  73. package/dist/components/Layout/QuickLayout/Wrap/index.js +21 -14
  74. package/dist/components/Layout/QuickLayout/index.js +31 -21
  75. package/dist/components/Layout/QuickLayout/stories.js +102 -70
  76. package/dist/components/Lottie/LottieAnimation/index.js +74 -71
  77. package/dist/components/Lottie/LottieAnimationWithMousePosition.js +33 -20
  78. package/dist/components/Lottie/index.js +47 -34
  79. package/dist/components/Lottie/stories.js +54 -31
  80. package/dist/components/MagicLine/index.js +52 -29
  81. package/dist/components/MagicLine/stories.js +60 -46
  82. package/dist/components/NavigationScroll/index.js +76 -57
  83. package/dist/components/NavigationScroll/stories.js +19 -8
  84. package/dist/components/Pagination/index.js +54 -41
  85. package/dist/components/Pagination/stories.js +51 -28
  86. package/dist/components/SearchKit/Facets/ChipFacet/index.js +24 -16
  87. package/dist/components/SearchKit/Facets/ListFacet/index.js +24 -15
  88. package/dist/components/SearchKit/Facets/SelectFacet/index.js +39 -30
  89. package/dist/components/SearchKit/Query/index.js +41 -23
  90. package/dist/components/SearchKit/SearchFacets/index.js +36 -25
  91. package/dist/components/SearchKit/SearchField/index.js +50 -26
  92. package/dist/components/SearchKit/SearchLoadMore/index.js +22 -15
  93. package/dist/components/SearchKit/SearchPage/index.js +26 -11
  94. package/dist/components/SearchKit/SearchPagination/index.js +17 -10
  95. package/dist/components/SearchKit/SearchReset/index.js +33 -12
  96. package/dist/components/SearchKit/SearchResults/index.js +114 -61
  97. package/dist/components/SearchKit/SearchSelectedFilters/Filters/CustomValue/index.js +22 -0
  98. package/dist/components/SearchKit/SearchSelectedFilters/Filters/DateRange/index.js +24 -0
  99. package/dist/components/SearchKit/SearchSelectedFilters/Filters/NumericRange/index.js +24 -0
  100. package/dist/components/SearchKit/SearchSelectedFilters/Filters/Value/index.js +29 -0
  101. package/dist/components/SearchKit/SearchSelectedFilters/index.js +43 -30
  102. package/dist/components/SearchKit/SearchSelectedFilters/style.scss +4 -0
  103. package/dist/components/SearchKit/SearchSorting/index.js +29 -19
  104. package/dist/components/SearchKit/index.js +75 -49
  105. package/dist/components/SearchKit/stories.js +144 -183
  106. package/dist/components/Share/index.js +51 -43
  107. package/dist/components/Share/stories.js +16 -5
  108. package/dist/components/Sliders/SliderRelated/index.js +32 -25
  109. package/dist/components/Sliders/SliderRelated/stories.js +75 -57
  110. package/dist/components/Webform/WebformActions/index.js +19 -13
  111. package/dist/components/Webform/WebformCheckbox/index.js +32 -24
  112. package/dist/components/Webform/WebformCheckboxes/index.js +37 -29
  113. package/dist/components/Webform/WebformContainer/index.js +17 -11
  114. package/dist/components/Webform/WebformDate/index.js +77 -48
  115. package/dist/components/Webform/WebformMapper/index.js +53 -38
  116. package/dist/components/Webform/WebformNumber/index.js +31 -22
  117. package/dist/components/Webform/WebformRadioButtons/index.js +37 -29
  118. package/dist/components/Webform/WebformSelect/index.js +37 -29
  119. package/dist/components/Webform/WebformTextField/index.js +34 -26
  120. package/dist/components/Webform/WebformTextarea/index.js +32 -24
  121. package/dist/components/Webform/WebformWizardPage/index.js +56 -43
  122. package/dist/components/Webform/index.js +42 -20
  123. package/dist/components/Webform/stories.actions.js +35 -24
  124. package/dist/components/Webform/stories.checkboxes.js +40 -29
  125. package/dist/components/Webform/stories.checked.js +53 -42
  126. package/dist/components/Webform/stories.container.js +47 -36
  127. package/dist/components/Webform/stories.date.js +35 -24
  128. package/dist/components/Webform/stories.filled.js +53 -42
  129. package/dist/components/Webform/stories.number.js +36 -25
  130. package/dist/components/Webform/stories.radiobuttons.js +40 -29
  131. package/dist/components/Webform/stories.select.js +40 -29
  132. package/dist/components/Webform/stories.textarea.js +19 -8
  133. package/dist/components/Webform/stories.textfield.js +19 -8
  134. package/dist/components/Webform/stories.wizard.js +133 -122
  135. package/dist/components/Webform/withStates.js +49 -28
  136. package/dist/components/WysiwygField/index.js +30 -21
  137. package/dist/components/WysiwygField/stories.js +39 -29
  138. package/dist/components/index.js +111 -15
  139. package/dist/config/constants.js +38 -18
  140. package/dist/config/i18next/index.js +19 -11
  141. package/dist/config/i18next/locales/en.json +4 -0
  142. package/dist/config/i18next/locales/nl.json +7 -0
  143. package/dist/helpers/date.js +16 -0
  144. package/dist/helpers/gtm.js +27 -17
  145. package/dist/helpers/link.js +15 -6
  146. package/dist/helpers/useValueForCurrentViewPort.js +27 -10
  147. package/dist/hooks/useBoolean.d.ts +8 -0
  148. package/dist/hooks/useBoolean.js +38 -0
  149. package/dist/hooks/useClickOutside.d.ts +8 -0
  150. package/dist/hooks/useClickOutside.js +35 -0
  151. package/dist/hooks/useDialog.d.ts +10 -0
  152. package/dist/hooks/useDialog.js +39 -0
  153. package/dist/hooks/useDialogHelpers.d.ts +20 -0
  154. package/dist/hooks/useDialogHelpers.js +85 -0
  155. package/dist/hooks/useEscape.d.ts +6 -0
  156. package/dist/hooks/useEscape.js +24 -0
  157. package/dist/hooks/useOnScreen.js +27 -6
  158. package/dist/hooks/usePrevious.js +11 -6
  159. package/dist/hooks/useScrollPosition.js +25 -7
  160. package/dist/hooks/useTrapFocus.d.ts +10 -0
  161. package/dist/hooks/useTrapFocus.js +63 -0
  162. package/dist/hooks/useWindowDimensions.js +27 -11
  163. package/dist/index.js +398 -55
  164. package/dist/setupTests.js +9 -5
  165. package/package.json +44 -19
  166. package/dist/components/Form/SearchField/stories.js +0 -0
  167. package/dist/components/SearchKit/Facets/HierarchicalFilterFacet/index.js +0 -60
  168. package/dist/components/SearchKit/Facets/HierarchicalMenuFacet/index.js +0 -60
@@ -1,22 +1,31 @@
1
- import React from 'react';
2
- import FormikWrapper from '../FormikWrapper';
3
- import FormikDatePicker from '.';
4
- export default {
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
- export const DatePicker = () => {
8
- return /*#__PURE__*/React.createElement(FormikWrapper, null, /*#__PURE__*/React.createElement(FormikDatePicker, {
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
- let error;
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
- import React, { useState, useCallback, useEffect } from 'react';
2
- import { useFormikContext } from 'formik';
3
- import { useTranslation } from 'react-i18next';
4
- import GenericFormElement from '../GenericFormElement';
5
- import SelectInput from '../Select/Input';
6
- import './style.scss';
7
- const DateSelect = props => {
8
- const {
9
- title,
10
- fieldName,
11
- yearMin,
12
- yearMax,
13
- hideYear,
14
- fixedYear,
15
- required,
16
- displayRequiredIndicator,
17
- requiredError,
18
- notValidError,
19
- dayPlaceholder,
20
- monthPlaceholder,
21
- yearPlaceholder
22
- } = props;
23
- const {
24
- setFieldValue,
25
- isSubmitting,
26
- values
27
- } = useFormikContext();
28
- const {
29
- t
30
- } = useTranslation();
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
- const [day, setDay] = useState();
34
- const [month, setMonth] = useState();
35
- const [year, setYear] = useState();
36
- const [showError, setShowError] = useState();
37
- const [error, setError] = useState();
38
- const [dateNotValid, setDateNotValid] = useState();
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
- const dayOptions = useCallback(placeholder => {
42
- const options = [];
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 (let index = 1; index <= 31; index++) {
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
- const monthOptions = useCallback(() => {
60
- const 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')];
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
- const yearOptions = useCallback(() => {
71
- const options = [];
72
- for (let index = yearMin; index <= yearMax; index++) {
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
- const date = new Date(`${year}-${month}-${day}`);
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("dateSelect", '');
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("dateSelect", date);
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("dateSelect", '');
154
+ setFieldValue('dateSelect', '');
126
155
  }, [day, month, year]);
127
- return /*#__PURE__*/React.createElement(GenericFormElement, {
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__*/React.createElement(SelectInput, {
135
- id: `${fieldName}day`,
136
- fieldName: `${fieldName}day`,
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: day => setDay(day)
141
- }), /*#__PURE__*/React.createElement(SelectInput, {
142
- id: `${fieldName}month`,
143
- fieldName: `${fieldName}month`,
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: month => setMonth(month)
148
- }), !hideYear && /*#__PURE__*/React.createElement(SelectInput, {
149
- id: `${fieldName}year`,
150
- fieldName: `${fieldName}year`,
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: year => setYear(year)
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
- export default DateSelect;
204
+ var _default = DateSelect;
205
+ exports.default = _default;
@@ -1,22 +1,42 @@
1
- import React, { useState } from 'react';
2
- import FormikWrapper from '../FormikWrapper';
3
- import FormikDateSelect from '.';
4
- export default {
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
- export const DateSelect = () => {
8
- const [date, setDate] = useState('');
9
- return /*#__PURE__*/React.createElement(FormikWrapper, {
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__*/React.createElement(FormikDateSelect, {
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__*/React.createElement("p", null, "Selected date: ", date.toString()), /*#__PURE__*/React.createElement("input", {
29
- class: "submitButton",
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
- import React from 'react';
3
- import TextField from '../TextField';
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
- export default Email;
16
+ var _default = Email;
17
+ exports.default = _default;
@@ -1,22 +1,31 @@
1
- import React from 'react';
2
- import FormikWrapper from '../FormikWrapper';
3
- import FormikEmail from '.';
4
- export default {
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
- export const Email = () => {
8
- return /*#__PURE__*/React.createElement(FormikWrapper, null, /*#__PURE__*/React.createElement(FormikEmail, {
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
- let error;
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
- import React from 'react';
3
- import { Form, Formik } from 'formik';
4
- const renderChildrenRecursively = (child, childProps, displayRequiredIndicator) => {
5
- const {
6
- fieldName,
7
- type,
8
- htmlType,
9
- children
10
- } = child.props;
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__*/React.cloneElement(child, {
27
+ return /*#__PURE__*/_react.default.cloneElement(child, {
13
28
  disabled: childProps.isSubmitting
14
29
  }, children);
15
30
  }
16
- const fieldProps = {
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__*/React.cloneElement(child, {
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__*/React.createElement("span", null, subchild);
45
+ return /*#__PURE__*/_react.default.createElement("span", null, subchild);
34
46
  }
35
- const {
36
- fieldName,
37
- children
38
- } = subchild.props;
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__*/React.cloneElement(subchild, {
51
- ...childProps,
52
- ...fieldProps
53
- }, null);
59
+ return /*#__PURE__*/_react.default.cloneElement(subchild, _objectSpread(_objectSpread({}, childProps), fieldProps), null);
54
60
  }));
55
61
  };
56
- const FormikWrapper = props => {
57
- const {
58
- initialValues,
59
- onSubmit,
60
- displayRequiredIndicator,
61
- validate,
62
- validateOnChange,
63
- validateOnBlur,
64
- validateOnMount,
65
- onReset,
66
- ...restProps
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), childProps => /*#__PURE__*/React.createElement(Form, null, React.Children.map(props.children, child => {
77
- return renderChildrenRecursively(child, childProps, displayRequiredIndicator);
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
- export default FormikWrapper;
86
+ var _default = FormikWrapper;
87
+ exports.default = _default;