envoc-form 4.1.0 → 5.0.2

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 (231) hide show
  1. package/README.md +367 -176
  2. package/es/AddressInput/AddressInput.d.ts +24 -25
  3. package/es/AddressInput/AddressInput.js +20 -31
  4. package/es/AddressInput/UsStates.d.ts +3 -3
  5. package/es/AddressInput/UsStates.js +53 -53
  6. package/es/ConfirmBaseForm/ConfirmBaseForm.d.ts +26 -26
  7. package/es/ConfirmBaseForm/ConfirmBaseForm.js +42 -42
  8. package/es/ConfirmDeleteForm/ConfirmDeleteForm.d.ts +24 -24
  9. package/es/ConfirmDeleteForm/ConfirmDeleteForm.js +60 -60
  10. package/es/DatePicker/DatePickerGroup.d.ts +13 -14
  11. package/es/DatePicker/DatePickerGroup.js +87 -87
  12. package/es/DatePicker/DatePickerHelper.d.ts +3 -3
  13. package/es/DatePicker/DatePickerHelper.js +1 -1
  14. package/es/DatePicker/StringDateOnlyPickerGroup.d.ts +9 -10
  15. package/es/DatePicker/StringDateOnlyPickerGroup.js +29 -29
  16. package/es/DatePicker/StringDatePickerGroup.d.ts +9 -10
  17. package/es/DatePicker/StringDatePickerGroup.js +24 -24
  18. package/es/Field/CustomFieldInputProps.d.ts +7 -7
  19. package/es/Field/CustomFieldInputProps.js +1 -1
  20. package/es/Field/CustomFieldMetaProps.d.ts +4 -4
  21. package/es/Field/CustomFieldMetaProps.js +1 -1
  22. package/es/Field/Field.d.ts +28 -28
  23. package/es/Field/Field.js +51 -51
  24. package/es/Field/FieldErrorScrollTarget.d.ts +2 -3
  25. package/es/Field/FieldErrorScrollTarget.js +12 -12
  26. package/es/Field/FieldNameContext.d.ts +3 -3
  27. package/es/Field/FieldNameContext.js +3 -3
  28. package/es/Field/FieldSection.d.ts +7 -7
  29. package/es/Field/FieldSection.js +9 -20
  30. package/es/Field/InjectedFieldProps.d.ts +7 -7
  31. package/es/Field/InjectedFieldProps.js +1 -1
  32. package/es/Field/StandAloneInput.d.ts +13 -13
  33. package/es/Field/StandAloneInput.js +50 -50
  34. package/es/Field/useStandardField.d.ts +21 -21
  35. package/es/Field/useStandardField.js +92 -92
  36. package/es/FieldArray/FieldArray.d.ts +24 -24
  37. package/es/FieldArray/FieldArray.js +77 -88
  38. package/es/File/FileGroup.d.ts +10 -10
  39. package/es/File/FileGroup.js +53 -53
  40. package/es/File/FileList.d.ts +5 -6
  41. package/es/File/FileList.js +10 -21
  42. package/es/File/humanFileSize.d.ts +1 -1
  43. package/es/File/humanFileSize.js +6 -6
  44. package/es/Form/FocusError.d.ts +7 -7
  45. package/es/Form/FocusError.js +42 -42
  46. package/es/Form/Form.d.ts +33 -33
  47. package/es/Form/Form.js +141 -141
  48. package/es/Form/FormBasedPreventNavigation.d.ts +6 -7
  49. package/es/Form/FormBasedPreventNavigation.js +20 -20
  50. package/es/Form/LegacyFormBasedPreventNavigation.d.ts +17 -17
  51. package/es/Form/LegacyFormBasedPreventNavigation.js +69 -69
  52. package/es/Form/NewFormBasedPreventNavigation.d.ts +14 -14
  53. package/es/Form/NewFormBasedPreventNavigation.js +39 -39
  54. package/es/Form/ServerErrorContext.d.ts +11 -11
  55. package/es/Form/ServerErrorContext.js +9 -9
  56. package/es/FormActions.d.ts +12 -13
  57. package/es/FormActions.js +16 -27
  58. package/es/FormDefaults.d.ts +4 -4
  59. package/es/FormDefaults.js +2 -2
  60. package/es/Group.d.ts +16 -16
  61. package/es/Group.js +14 -25
  62. package/es/Input/IconInputGroup.d.ts +12 -12
  63. package/es/Input/IconInputGroup.js +43 -43
  64. package/es/Input/InputGroup.d.ts +12 -12
  65. package/es/Input/InputGroup.js +34 -34
  66. package/es/Input/MoneyInputGroup.d.ts +9 -9
  67. package/es/Input/MoneyInputGroup.js +43 -43
  68. package/es/Input/NumberInputGroup.d.ts +9 -9
  69. package/es/Input/NumberInputGroup.js +43 -43
  70. package/es/Input/PhoneNumberInputGroup.d.ts +10 -0
  71. package/es/Input/PhoneNumberInputGroup.js +47 -0
  72. package/es/Input/StringInputGroup.d.ts +8 -8
  73. package/es/Input/StringInputGroup.js +43 -43
  74. package/es/Normalization/NormalizationFunction.d.ts +4 -4
  75. package/es/Normalization/NormalizationFunction.js +1 -1
  76. package/es/Normalization/normalizers.d.ts +4 -4
  77. package/es/Normalization/normalizers.js +32 -32
  78. package/es/Select/BooleanSelectGroup.d.ts +7 -8
  79. package/es/Select/BooleanSelectGroup.js +28 -28
  80. package/es/Select/NumberSelectGroup.d.ts +9 -10
  81. package/es/Select/NumberSelectGroup.js +21 -21
  82. package/es/Select/SelectGroup.d.ts +27 -28
  83. package/es/Select/SelectGroup.js +65 -65
  84. package/es/Select/SelectGroupPropsHelper.d.ts +3 -3
  85. package/es/Select/SelectGroupPropsHelper.js +1 -1
  86. package/es/Select/StringSelectGroup.d.ts +9 -10
  87. package/es/Select/StringSelectGroup.js +21 -21
  88. package/es/StandardFormActions.d.ts +11 -11
  89. package/es/StandardFormActions.js +14 -25
  90. package/es/SubmitFormButton.d.ts +10 -10
  91. package/es/SubmitFormButton.js +40 -40
  92. package/es/TextArea/TextAreaGroup.d.ts +9 -9
  93. package/es/TextArea/TextAreaGroup.js +35 -35
  94. package/es/Validation/ValidatedApiResult.d.ts +6 -6
  95. package/es/Validation/ValidatedApiResult.js +1 -1
  96. package/es/Validation/ValidationError.d.ts +5 -5
  97. package/es/Validation/ValidationError.js +1 -1
  98. package/es/Validation/ValidationFunction.d.ts +4 -4
  99. package/es/Validation/ValidationFunction.js +1 -1
  100. package/es/Validation/validators.d.ts +18 -18
  101. package/es/Validation/validators.js +77 -77
  102. package/es/index.d.ts +75 -73
  103. package/es/index.js +51 -50
  104. package/es/setupTests.d.ts +1 -1
  105. package/es/setupTests.js +1 -1
  106. package/es/utils/objectContainsNonSerializableProperty.d.ts +1 -1
  107. package/es/utils/objectContainsNonSerializableProperty.js +14 -14
  108. package/es/utils/objectToFormData.d.ts +10 -10
  109. package/es/utils/objectToFormData.js +77 -77
  110. package/es/utils/typeChecks.d.ts +8 -8
  111. package/es/utils/typeChecks.js +18 -18
  112. package/lib/AddressInput/AddressInput.d.ts +24 -25
  113. package/lib/AddressInput/AddressInput.js +26 -37
  114. package/lib/AddressInput/UsStates.d.ts +3 -3
  115. package/lib/AddressInput/UsStates.js +55 -55
  116. package/lib/ConfirmBaseForm/ConfirmBaseForm.d.ts +26 -26
  117. package/lib/ConfirmBaseForm/ConfirmBaseForm.js +48 -48
  118. package/lib/ConfirmDeleteForm/ConfirmDeleteForm.d.ts +24 -24
  119. package/lib/ConfirmDeleteForm/ConfirmDeleteForm.js +66 -66
  120. package/lib/DatePicker/DatePickerGroup.d.ts +13 -14
  121. package/lib/DatePicker/DatePickerGroup.js +95 -95
  122. package/lib/DatePicker/DatePickerHelper.d.ts +3 -3
  123. package/lib/DatePicker/DatePickerHelper.js +2 -2
  124. package/lib/DatePicker/StringDateOnlyPickerGroup.d.ts +9 -10
  125. package/lib/DatePicker/StringDateOnlyPickerGroup.js +35 -35
  126. package/lib/DatePicker/StringDatePickerGroup.d.ts +9 -10
  127. package/lib/DatePicker/StringDatePickerGroup.js +30 -30
  128. package/lib/Field/CustomFieldInputProps.d.ts +7 -7
  129. package/lib/Field/CustomFieldInputProps.js +2 -2
  130. package/lib/Field/CustomFieldMetaProps.d.ts +4 -4
  131. package/lib/Field/CustomFieldMetaProps.js +2 -2
  132. package/lib/Field/Field.d.ts +28 -28
  133. package/lib/Field/Field.js +56 -56
  134. package/lib/Field/FieldErrorScrollTarget.d.ts +2 -3
  135. package/lib/Field/FieldErrorScrollTarget.js +15 -15
  136. package/lib/Field/FieldNameContext.d.ts +3 -3
  137. package/lib/Field/FieldNameContext.js +9 -9
  138. package/lib/Field/FieldSection.d.ts +7 -7
  139. package/lib/Field/FieldSection.js +12 -23
  140. package/lib/Field/InjectedFieldProps.d.ts +7 -7
  141. package/lib/Field/InjectedFieldProps.js +2 -2
  142. package/lib/Field/StandAloneInput.d.ts +13 -13
  143. package/lib/Field/StandAloneInput.js +76 -76
  144. package/lib/Field/useStandardField.d.ts +21 -21
  145. package/lib/Field/useStandardField.js +95 -95
  146. package/lib/FieldArray/FieldArray.d.ts +24 -24
  147. package/lib/FieldArray/FieldArray.js +83 -94
  148. package/lib/File/FileGroup.d.ts +10 -10
  149. package/lib/File/FileGroup.js +58 -58
  150. package/lib/File/FileList.d.ts +5 -6
  151. package/lib/File/FileList.js +13 -24
  152. package/lib/File/humanFileSize.d.ts +1 -1
  153. package/lib/File/humanFileSize.js +10 -10
  154. package/lib/Form/FocusError.d.ts +7 -7
  155. package/lib/Form/FocusError.js +48 -48
  156. package/lib/Form/Form.d.ts +33 -33
  157. package/lib/Form/Form.js +147 -147
  158. package/lib/Form/FormBasedPreventNavigation.d.ts +6 -7
  159. package/lib/Form/FormBasedPreventNavigation.js +26 -26
  160. package/lib/Form/LegacyFormBasedPreventNavigation.d.ts +17 -17
  161. package/lib/Form/LegacyFormBasedPreventNavigation.js +72 -72
  162. package/lib/Form/NewFormBasedPreventNavigation.d.ts +14 -14
  163. package/lib/Form/NewFormBasedPreventNavigation.js +42 -42
  164. package/lib/Form/ServerErrorContext.d.ts +11 -11
  165. package/lib/Form/ServerErrorContext.js +15 -15
  166. package/lib/FormActions.d.ts +12 -13
  167. package/lib/FormActions.js +22 -33
  168. package/lib/FormDefaults.d.ts +4 -4
  169. package/lib/FormDefaults.js +5 -5
  170. package/lib/Group.d.ts +16 -16
  171. package/lib/Group.js +20 -31
  172. package/lib/Input/IconInputGroup.d.ts +12 -12
  173. package/lib/Input/IconInputGroup.js +48 -48
  174. package/lib/Input/InputGroup.d.ts +12 -12
  175. package/lib/Input/InputGroup.js +39 -39
  176. package/lib/Input/MoneyInputGroup.d.ts +9 -9
  177. package/lib/Input/MoneyInputGroup.js +48 -48
  178. package/lib/Input/NumberInputGroup.d.ts +9 -9
  179. package/lib/Input/NumberInputGroup.js +48 -48
  180. package/lib/Input/PhoneNumberInputGroup.d.ts +10 -0
  181. package/lib/Input/PhoneNumberInputGroup.js +52 -0
  182. package/lib/Input/StringInputGroup.d.ts +8 -8
  183. package/lib/Input/StringInputGroup.js +48 -48
  184. package/lib/Normalization/NormalizationFunction.d.ts +4 -4
  185. package/lib/Normalization/NormalizationFunction.js +2 -2
  186. package/lib/Normalization/normalizers.d.ts +4 -4
  187. package/lib/Normalization/normalizers.js +37 -37
  188. package/lib/Select/BooleanSelectGroup.d.ts +7 -8
  189. package/lib/Select/BooleanSelectGroup.js +35 -35
  190. package/lib/Select/NumberSelectGroup.d.ts +9 -10
  191. package/lib/Select/NumberSelectGroup.js +29 -29
  192. package/lib/Select/SelectGroup.d.ts +27 -28
  193. package/lib/Select/SelectGroup.js +71 -71
  194. package/lib/Select/SelectGroupPropsHelper.d.ts +3 -3
  195. package/lib/Select/SelectGroupPropsHelper.js +2 -2
  196. package/lib/Select/StringSelectGroup.d.ts +9 -10
  197. package/lib/Select/StringSelectGroup.js +29 -29
  198. package/lib/StandardFormActions.d.ts +11 -11
  199. package/lib/StandardFormActions.js +20 -31
  200. package/lib/SubmitFormButton.d.ts +10 -10
  201. package/lib/SubmitFormButton.js +45 -45
  202. package/lib/TextArea/TextAreaGroup.d.ts +9 -9
  203. package/lib/TextArea/TextAreaGroup.js +40 -40
  204. package/lib/Validation/ValidatedApiResult.d.ts +6 -6
  205. package/lib/Validation/ValidatedApiResult.js +2 -2
  206. package/lib/Validation/ValidationError.d.ts +5 -5
  207. package/lib/Validation/ValidationError.js +2 -2
  208. package/lib/Validation/ValidationFunction.d.ts +4 -4
  209. package/lib/Validation/ValidationFunction.js +2 -2
  210. package/lib/Validation/validators.d.ts +18 -18
  211. package/lib/Validation/validators.js +90 -90
  212. package/lib/index.d.ts +75 -73
  213. package/lib/index.js +119 -117
  214. package/lib/setupTests.d.ts +1 -1
  215. package/lib/setupTests.js +3 -3
  216. package/lib/utils/objectContainsNonSerializableProperty.d.ts +1 -1
  217. package/lib/utils/objectContainsNonSerializableProperty.js +17 -17
  218. package/lib/utils/objectToFormData.d.ts +10 -10
  219. package/lib/utils/objectToFormData.js +79 -79
  220. package/lib/utils/typeChecks.d.ts +8 -8
  221. package/lib/utils/typeChecks.js +29 -29
  222. package/package.json +12 -12
  223. package/src/AddressInput/__snapshots__/AddressInput.test.tsx.snap +6 -8
  224. package/src/Input/PhoneNumberInputGroup.tsx +45 -0
  225. package/src/Input/__Tests__/PhoneNumberInputGroup.test.tsx +36 -0
  226. package/src/Input/__Tests__/__snapshots__/PhoneNumberInputGroup.test.tsx.snap +33 -0
  227. package/src/Select/__tests__/__snapshots__/BooleanSelectGroup.test.tsx.snap +6 -8
  228. package/src/Select/__tests__/__snapshots__/NumberSelectGroup.test.tsx.snap +12 -16
  229. package/src/Select/__tests__/__snapshots__/StringSelectGroup.test.tsx.snap +12 -16
  230. package/src/index.ts +3 -0
  231. package/src/utils/objectToFormData.test.tsx +1 -1
package/es/Form/Form.js CHANGED
@@ -1,141 +1,141 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- var __rest = (this && this.__rest) || function (s, e) {
13
- var t = {};
14
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
- t[p] = s[p];
16
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
- t[p[i]] = s[p[i]];
20
- }
21
- return t;
22
- };
23
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
24
- import { useContext, useMemo, useState, } from 'react';
25
- import classNames from 'classnames';
26
- import { Form as FormikFormWrapper, Formik, useFormikContext, } from 'formik';
27
- import FocusError from './FocusError';
28
- import FormBasedPreventNavigation from './FormBasedPreventNavigation';
29
- import { ServerErrorContext, } from './ServerErrorContext';
30
- import Field from '../Field/Field';
31
- import FieldArray from '../FieldArray/FieldArray';
32
- import { FormDefaults } from '../FormDefaults';
33
- import objectContainsNonSerializableProperty from '../utils/objectContainsNonSerializableProperty';
34
- import objectToFormData from '../utils/objectToFormData';
35
- /** Define a form. Uses [formik](https://formik.org/docs/overview). Usually contains many `<Field/>` components. */
36
- export default function Form(_a) {
37
- var children = _a.children, className = _a.className, style = _a.style, ignoreLostChanges = _a.ignoreLostChanges, onSubmit = _a.onSubmit, onFormDataSubmit = _a.onFormDataSubmit, initialValues = _a.initialValues, props = __rest(_a, ["children", "className", "style", "ignoreLostChanges", "onSubmit", "onFormDataSubmit", "initialValues"]);
38
- // formik resets all error on each blur (with our settings)
39
- // this means that ALL errors from the server disappear when any one field is blurred
40
- // So, we have to store server errors ourselves
41
- // Since we only use useStandardFormInput, that means there is only one consumer
42
- var _b = useState({}), serverErrors = _b[0], setServerErrors = _b[1];
43
- var serverErrorContextValue = useMemo(function () { return ({
44
- errors: serverErrors,
45
- getError: function (path) {
46
- var lowered = path.toLowerCase();
47
- return serverErrors && serverErrors[lowered];
48
- },
49
- setError: function (path, errorMessage) {
50
- var _a;
51
- var lowered = path.toLowerCase();
52
- setServerErrors(Object.assign({}, serverErrors, (_a = {},
53
- _a[lowered] = !errorMessage ? undefined : errorMessage,
54
- _a)));
55
- },
56
- }); }, [serverErrors]);
57
- return (_jsx(Formik, __assign({ validateOnChange: false, validateOnBlur: true, validateOnMount: false, initialValues: initialValues || {}, onSubmit: handleSubmit }, props, { children: _jsx(ServerErrorContext.Provider, __assign({ value: serverErrorContextValue }, { children: _jsxs(FormikFormWrapper, __assign({ className: classNames(className, FormDefaults.cssClassPrefix + 'form'), style: style }, { children: [_jsx(FocusError, { serverErrors: serverErrorContextValue }), _jsx(FormBasedPreventNavigation, { ignoreLostChanges: ignoreLostChanges }), children({
58
- // hack for ref forwarding
59
- Field: Field,
60
- FieldArray: FieldArray,
61
- })] })) })) })));
62
- function handleSubmit(values, formikBag) {
63
- var formData = undefined;
64
- var submitFunc;
65
- if (objectContainsNonSerializableProperty(values)) {
66
- formData = objectToFormData(values, {
67
- indices: true,
68
- dotNotation: true,
69
- allowEmptyArrays: true,
70
- noFileListBrackets: true,
71
- });
72
- if (onFormDataSubmit === undefined) {
73
- throw new Error('No onFormDataSubmit supplied for non-serializable properties.');
74
- }
75
- submitFunc = function () {
76
- return onFormDataSubmit(formData !== null && formData !== void 0 ? formData : new FormData(), formikBag);
77
- };
78
- }
79
- else {
80
- if (onSubmit === undefined) {
81
- formData = objectToFormData(values, {
82
- indices: true,
83
- dotNotation: true,
84
- allowEmptyArrays: true,
85
- noFileListBrackets: true,
86
- });
87
- if (onFormDataSubmit === undefined) {
88
- // This error should never occur, as this case is covered by RequireAtLeastOne type safety
89
- throw new Error('No onFormDataSubmit supplied for non-serializable properties.');
90
- }
91
- submitFunc = function () {
92
- return onFormDataSubmit(formData !== null && formData !== void 0 ? formData : new FormData(), formikBag);
93
- };
94
- }
95
- else {
96
- submitFunc = function () { return onSubmit(values, formikBag); };
97
- }
98
- }
99
- return submitFunc()
100
- .then(function (response) {
101
- return response;
102
- })
103
- .catch(function (err) {
104
- //this is an http error
105
- if (err &&
106
- err.response &&
107
- err.response.data &&
108
- err.response.data.validationFailures) {
109
- try {
110
- var serverErrors_1 = err.response.data.validationFailures.reduce(function (acc, value) {
111
- var _a;
112
- // for simplicity, just keep it to one server error at a time per path
113
- // don't care of the property name case changes
114
- var path = (_a = value.propertyName) === null || _a === void 0 ? void 0 : _a.toLowerCase();
115
- if (!!path && !!value.errorMessage) {
116
- acc[path] = value.errorMessage;
117
- }
118
- return acc;
119
- }, {});
120
- setServerErrors(serverErrors_1);
121
- }
122
- catch (err) {
123
- console.error('Failure to getErrorObject');
124
- console.error(err);
125
- throw err;
126
- }
127
- }
128
- throw err;
129
- });
130
- }
131
- }
132
- Form.DisplayFormState = DisplayFormState;
133
- function DisplayFormState() {
134
- var formState = useFormikContext();
135
- var serverErrorContext = useContext(ServerErrorContext);
136
- return (_jsx("div", __assign({ style: { margin: '1rem 0' } }, { children: _jsxs("pre", __assign({ style: {
137
- background: '#f6f8fa',
138
- fontSize: '.65rem',
139
- padding: '.5rem',
140
- } }, { children: [serverErrorContext && serverErrorContext.errors && (_jsxs("div", { children: [_jsx("strong", { children: "serverErrors = " }), JSON.stringify(serverErrorContext.errors, null, 2)] })), _jsx("strong", { children: "formState = " }), JSON.stringify(formState, null, 2)] })) })));
141
- }
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ var __rest = (this && this.__rest) || function (s, e) {
13
+ var t = {};
14
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
15
+ t[p] = s[p];
16
+ if (s != null && typeof Object.getOwnPropertySymbols === "function")
17
+ for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
18
+ if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
19
+ t[p[i]] = s[p[i]];
20
+ }
21
+ return t;
22
+ };
23
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
24
+ import { useContext, useMemo, useState, } from 'react';
25
+ import classNames from 'classnames';
26
+ import { Form as FormikFormWrapper, Formik, useFormikContext, } from 'formik';
27
+ import FocusError from './FocusError';
28
+ import FormBasedPreventNavigation from './FormBasedPreventNavigation';
29
+ import { ServerErrorContext, } from './ServerErrorContext';
30
+ import Field from '../Field/Field';
31
+ import FieldArray from '../FieldArray/FieldArray';
32
+ import { FormDefaults } from '../FormDefaults';
33
+ import objectContainsNonSerializableProperty from '../utils/objectContainsNonSerializableProperty';
34
+ import objectToFormData from '../utils/objectToFormData';
35
+ /** Define a form. Uses [formik](https://formik.org/docs/overview). Usually contains many `<Field/>` components. */
36
+ export default function Form(_a) {
37
+ var children = _a.children, className = _a.className, style = _a.style, ignoreLostChanges = _a.ignoreLostChanges, onSubmit = _a.onSubmit, onFormDataSubmit = _a.onFormDataSubmit, initialValues = _a.initialValues, props = __rest(_a, ["children", "className", "style", "ignoreLostChanges", "onSubmit", "onFormDataSubmit", "initialValues"]);
38
+ // formik resets all error on each blur (with our settings)
39
+ // this means that ALL errors from the server disappear when any one field is blurred
40
+ // So, we have to store server errors ourselves
41
+ // Since we only use useStandardFormInput, that means there is only one consumer
42
+ var _b = useState({}), serverErrors = _b[0], setServerErrors = _b[1];
43
+ var serverErrorContextValue = useMemo(function () { return ({
44
+ errors: serverErrors,
45
+ getError: function (path) {
46
+ var lowered = path.toLowerCase();
47
+ return serverErrors && serverErrors[lowered];
48
+ },
49
+ setError: function (path, errorMessage) {
50
+ var _a;
51
+ var lowered = path.toLowerCase();
52
+ setServerErrors(Object.assign({}, serverErrors, (_a = {},
53
+ _a[lowered] = !errorMessage ? undefined : errorMessage,
54
+ _a)));
55
+ },
56
+ }); }, [serverErrors]);
57
+ return (_jsx(Formik, __assign({ validateOnChange: false, validateOnBlur: true, validateOnMount: false, initialValues: initialValues || {}, onSubmit: handleSubmit }, props, { children: _jsx(ServerErrorContext.Provider, { value: serverErrorContextValue, children: _jsxs(FormikFormWrapper, { className: classNames(className, FormDefaults.cssClassPrefix + 'form'), style: style, children: [_jsx(FocusError, { serverErrors: serverErrorContextValue }), _jsx(FormBasedPreventNavigation, { ignoreLostChanges: ignoreLostChanges }), children({
58
+ // hack for ref forwarding
59
+ Field: Field,
60
+ FieldArray: FieldArray,
61
+ })] }) }) })));
62
+ function handleSubmit(values, formikBag) {
63
+ var formData = undefined;
64
+ var submitFunc;
65
+ if (objectContainsNonSerializableProperty(values)) {
66
+ formData = objectToFormData(values, {
67
+ indices: true,
68
+ dotNotation: true,
69
+ allowEmptyArrays: true,
70
+ noFileListBrackets: true,
71
+ });
72
+ if (onFormDataSubmit === undefined) {
73
+ throw new Error('No onFormDataSubmit supplied for non-serializable properties.');
74
+ }
75
+ submitFunc = function () {
76
+ return onFormDataSubmit(formData !== null && formData !== void 0 ? formData : new FormData(), formikBag);
77
+ };
78
+ }
79
+ else {
80
+ if (onSubmit === undefined) {
81
+ formData = objectToFormData(values, {
82
+ indices: true,
83
+ dotNotation: true,
84
+ allowEmptyArrays: true,
85
+ noFileListBrackets: true,
86
+ });
87
+ if (onFormDataSubmit === undefined) {
88
+ // This error should never occur, as this case is covered by RequireAtLeastOne type safety
89
+ throw new Error('No onFormDataSubmit supplied for non-serializable properties.');
90
+ }
91
+ submitFunc = function () {
92
+ return onFormDataSubmit(formData !== null && formData !== void 0 ? formData : new FormData(), formikBag);
93
+ };
94
+ }
95
+ else {
96
+ submitFunc = function () { return onSubmit(values, formikBag); };
97
+ }
98
+ }
99
+ return submitFunc()
100
+ .then(function (response) {
101
+ return response;
102
+ })
103
+ .catch(function (err) {
104
+ //this is an http error
105
+ if (err &&
106
+ err.response &&
107
+ err.response.data &&
108
+ err.response.data.validationFailures) {
109
+ try {
110
+ var serverErrors_1 = err.response.data.validationFailures.reduce(function (acc, value) {
111
+ var _a;
112
+ // for simplicity, just keep it to one server error at a time per path
113
+ // don't care of the property name case changes
114
+ var path = (_a = value.propertyName) === null || _a === void 0 ? void 0 : _a.toLowerCase();
115
+ if (!!path && !!value.errorMessage) {
116
+ acc[path] = value.errorMessage;
117
+ }
118
+ return acc;
119
+ }, {});
120
+ setServerErrors(serverErrors_1);
121
+ }
122
+ catch (err) {
123
+ console.error('Failure to getErrorObject');
124
+ console.error(err);
125
+ throw err;
126
+ }
127
+ }
128
+ throw err;
129
+ });
130
+ }
131
+ }
132
+ Form.DisplayFormState = DisplayFormState;
133
+ function DisplayFormState() {
134
+ var formState = useFormikContext();
135
+ var serverErrorContext = useContext(ServerErrorContext);
136
+ return (_jsx("div", { style: { margin: '1rem 0' }, children: _jsxs("pre", { style: {
137
+ background: '#f6f8fa',
138
+ fontSize: '.65rem',
139
+ padding: '.5rem',
140
+ }, children: [serverErrorContext && serverErrorContext.errors && (_jsxs("div", { children: [_jsx("strong", { children: "serverErrors = " }), JSON.stringify(serverErrorContext.errors, null, 2)] })), _jsx("strong", { children: "formState = " }), JSON.stringify(formState, null, 2)] }) }));
141
+ }
@@ -1,7 +1,6 @@
1
- /// <reference types="react" />
2
- export interface FormBasedPreventNavigationProps {
3
- ignoreLostChanges?: boolean;
4
- promptMessage?: string;
5
- }
6
- /** Prevent the user from navigating away from a form if there are any changes. */
7
- export default function FormBasedPreventNavigation({ ignoreLostChanges, promptMessage, }: FormBasedPreventNavigationProps): JSX.Element;
1
+ export interface FormBasedPreventNavigationProps {
2
+ ignoreLostChanges?: boolean;
3
+ promptMessage?: string;
4
+ }
5
+ /** Prevent the user from navigating away from a form if there are any changes. */
6
+ export default function FormBasedPreventNavigation({ ignoreLostChanges, promptMessage, }: FormBasedPreventNavigationProps): import("react/jsx-runtime").JSX.Element;
@@ -1,20 +1,20 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { useContext } from 'react';
3
- import { UNSAFE_NavigationContext as NavigationContext, } from 'react-router-dom';
4
- import { useFormikContext } from 'formik';
5
- import LegacyFormBasedPreventNavigation from './LegacyFormBasedPreventNavigation';
6
- import NewFormBasedPreventNavigation from './NewFormBasedPreventNavigation';
7
- /** Prevent the user from navigating away from a form if there are any changes. */
8
- export default function FormBasedPreventNavigation(_a) {
9
- var ignoreLostChanges = _a.ignoreLostChanges, _b = _a.promptMessage, promptMessage = _b === void 0 ? 'Changes you made may not be saved.' : _b;
10
- var _c = useFormikContext(), dirty = _c.dirty, isSubmitting = _c.isSubmitting;
11
- var preventNavigate = !ignoreLostChanges && dirty && !isSubmitting;
12
- var navigator = useContext(NavigationContext).navigator;
13
- var isUsingDataRouter = navigator.location === undefined;
14
- if (isUsingDataRouter) {
15
- return (_jsx(NewFormBasedPreventNavigation, { promptMessage: promptMessage, preventNavigate: preventNavigate, navigator: navigator }));
16
- }
17
- else {
18
- return (_jsx(LegacyFormBasedPreventNavigation, { promptMessage: promptMessage, preventNavigate: preventNavigate, navigator: navigator }));
19
- }
20
- }
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { useContext } from 'react';
3
+ import { UNSAFE_NavigationContext as NavigationContext, } from 'react-router-dom';
4
+ import { useFormikContext } from 'formik';
5
+ import LegacyFormBasedPreventNavigation from './LegacyFormBasedPreventNavigation';
6
+ import NewFormBasedPreventNavigation from './NewFormBasedPreventNavigation';
7
+ /** Prevent the user from navigating away from a form if there are any changes. */
8
+ export default function FormBasedPreventNavigation(_a) {
9
+ var ignoreLostChanges = _a.ignoreLostChanges, _b = _a.promptMessage, promptMessage = _b === void 0 ? 'Changes you made may not be saved.' : _b;
10
+ var _c = useFormikContext(), dirty = _c.dirty, isSubmitting = _c.isSubmitting;
11
+ var preventNavigate = !ignoreLostChanges && dirty && !isSubmitting;
12
+ var navigator = useContext(NavigationContext).navigator;
13
+ var isUsingDataRouter = navigator.location === undefined;
14
+ if (isUsingDataRouter) {
15
+ return (_jsx(NewFormBasedPreventNavigation, { promptMessage: promptMessage, preventNavigate: preventNavigate, navigator: navigator }));
16
+ }
17
+ else {
18
+ return (_jsx(LegacyFormBasedPreventNavigation, { promptMessage: promptMessage, preventNavigate: preventNavigate, navigator: navigator }));
19
+ }
20
+ }
@@ -1,17 +1,17 @@
1
- import type { History } from 'history';
2
- import { Navigator as BaseNavigator } from 'react-router-dom';
3
- interface Navigator extends BaseNavigator {
4
- block?: History['block'];
5
- }
6
- export interface FormBasedPreventNavigationProps {
7
- promptMessage?: string;
8
- preventNavigate: boolean;
9
- navigator: Navigator;
10
- }
11
- /** Only use this if the project uses `<BrowserRouter/>` or any router that does not support the new
12
- * [react-router Data API](https://reactrouter.com/en/main/routers/picking-a-router#using-v64-data-apis)
13
- *
14
- * Legacy function to prevent the user from navigating away from a form if there are any changes.
15
- */
16
- export default function LegacyFormBasedPreventNavigation({ promptMessage, preventNavigate, navigator, }: FormBasedPreventNavigationProps): null;
17
- export {};
1
+ import type { History } from 'history';
2
+ import { Navigator as BaseNavigator } from 'react-router-dom';
3
+ interface Navigator extends BaseNavigator {
4
+ block?: History['block'];
5
+ }
6
+ export interface FormBasedPreventNavigationProps {
7
+ promptMessage?: string;
8
+ preventNavigate: boolean;
9
+ navigator: Navigator;
10
+ }
11
+ /** Only use this if the project uses `<BrowserRouter/>` or any router that does not support the new
12
+ * [react-router Data API](https://reactrouter.com/en/main/routers/picking-a-router#using-v64-data-apis)
13
+ *
14
+ * Legacy function to prevent the user from navigating away from a form if there are any changes.
15
+ */
16
+ export default function LegacyFormBasedPreventNavigation({ promptMessage, preventNavigate, navigator, }: FormBasedPreventNavigationProps): null;
17
+ export {};
@@ -1,69 +1,69 @@
1
- var __assign = (this && this.__assign) || function () {
2
- __assign = Object.assign || function(t) {
3
- for (var s, i = 1, n = arguments.length; i < n; i++) {
4
- s = arguments[i];
5
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
- t[p] = s[p];
7
- }
8
- return t;
9
- };
10
- return __assign.apply(this, arguments);
11
- };
12
- import { useEffect } from 'react';
13
- /** Only use this if the project uses `<BrowserRouter/>` or any router that does not support the new
14
- * [react-router Data API](https://reactrouter.com/en/main/routers/picking-a-router#using-v64-data-apis)
15
- *
16
- * Legacy function to prevent the user from navigating away from a form if there are any changes.
17
- */
18
- export default function LegacyFormBasedPreventNavigation(_a) {
19
- var _b = _a.promptMessage, promptMessage = _b === void 0 ? 'Changes you made may not be saved.' : _b, preventNavigate = _a.preventNavigate, navigator = _a.navigator;
20
- useEffect(function () {
21
- if (!preventNavigate) {
22
- return;
23
- }
24
- var unblock = function () { };
25
- var push = navigator.push;
26
- // TODO: https://reactrouter.com/docs/en/v6/upgrading/v5#prompt-is-not-currently-supported
27
- // this is a workaround until we get native support for prompt on navigate
28
- if (navigator.block) {
29
- var blocker_1 = function (tx) {
30
- if (window.confirm(promptMessage)) {
31
- tx.retry();
32
- }
33
- };
34
- unblock = navigator.block(function (tx) {
35
- var autoUnblockingTx = __assign(__assign({}, tx), { retry: function () {
36
- // Automatically unblock the transition so it can play all the way
37
- // through before retrying it. TODO: Figure out how to re-enable
38
- // this block if the transition is cancelled for some reason.
39
- unblock();
40
- tx.retry();
41
- } });
42
- blocker_1(autoUnblockingTx);
43
- });
44
- }
45
- else {
46
- //https://gist.github.com/MarksCode/64e438c82b0b2a1161e01c88ca0d0355
47
- navigator.push = function () {
48
- var args = [];
49
- for (var _i = 0; _i < arguments.length; _i++) {
50
- args[_i] = arguments[_i];
51
- }
52
- if (window.confirm(promptMessage)) {
53
- push.apply(void 0, args);
54
- }
55
- };
56
- }
57
- window.addEventListener('beforeunload', beforeUnload);
58
- return function () {
59
- unblock();
60
- navigator.push = push;
61
- window.removeEventListener('beforeunload', beforeUnload);
62
- };
63
- function beforeUnload(e) {
64
- e.preventDefault();
65
- e.returnValue = promptMessage;
66
- }
67
- }, [preventNavigate, promptMessage, navigator]);
68
- return null;
69
- }
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ import { useEffect } from 'react';
13
+ /** Only use this if the project uses `<BrowserRouter/>` or any router that does not support the new
14
+ * [react-router Data API](https://reactrouter.com/en/main/routers/picking-a-router#using-v64-data-apis)
15
+ *
16
+ * Legacy function to prevent the user from navigating away from a form if there are any changes.
17
+ */
18
+ export default function LegacyFormBasedPreventNavigation(_a) {
19
+ var _b = _a.promptMessage, promptMessage = _b === void 0 ? 'Changes you made may not be saved.' : _b, preventNavigate = _a.preventNavigate, navigator = _a.navigator;
20
+ useEffect(function () {
21
+ if (!preventNavigate) {
22
+ return;
23
+ }
24
+ var unblock = function () { };
25
+ var push = navigator.push;
26
+ // TODO: https://reactrouter.com/docs/en/v6/upgrading/v5#prompt-is-not-currently-supported
27
+ // this is a workaround until we get native support for prompt on navigate
28
+ if (navigator.block) {
29
+ var blocker_1 = function (tx) {
30
+ if (window.confirm(promptMessage)) {
31
+ tx.retry();
32
+ }
33
+ };
34
+ unblock = navigator.block(function (tx) {
35
+ var autoUnblockingTx = __assign(__assign({}, tx), { retry: function () {
36
+ // Automatically unblock the transition so it can play all the way
37
+ // through before retrying it. TODO: Figure out how to re-enable
38
+ // this block if the transition is cancelled for some reason.
39
+ unblock();
40
+ tx.retry();
41
+ } });
42
+ blocker_1(autoUnblockingTx);
43
+ });
44
+ }
45
+ else {
46
+ //https://gist.github.com/MarksCode/64e438c82b0b2a1161e01c88ca0d0355
47
+ navigator.push = function () {
48
+ var args = [];
49
+ for (var _i = 0; _i < arguments.length; _i++) {
50
+ args[_i] = arguments[_i];
51
+ }
52
+ if (window.confirm(promptMessage)) {
53
+ push.apply(void 0, args);
54
+ }
55
+ };
56
+ }
57
+ window.addEventListener('beforeunload', beforeUnload);
58
+ return function () {
59
+ unblock();
60
+ navigator.push = push;
61
+ window.removeEventListener('beforeunload', beforeUnload);
62
+ };
63
+ function beforeUnload(e) {
64
+ e.preventDefault();
65
+ e.returnValue = promptMessage;
66
+ }
67
+ }, [preventNavigate, promptMessage, navigator]);
68
+ return null;
69
+ }
@@ -1,14 +1,14 @@
1
- import type { History } from 'history';
2
- import { Navigator as BaseNavigator } from 'react-router-dom';
3
- interface Navigator extends BaseNavigator {
4
- block?: History['block'];
5
- location: Location;
6
- }
7
- interface FormBasedPreventNavigationProps {
8
- promptMessage?: string;
9
- preventNavigate: boolean;
10
- navigator: Navigator;
11
- }
12
- /** Temporary function to allow backwards compatibility with routers that do not use the new Data API */
13
- export default function NewFormBasedPreventNavigation({ promptMessage, preventNavigate, navigator, }: FormBasedPreventNavigationProps): null;
14
- export {};
1
+ import type { History } from 'history';
2
+ import { Navigator as BaseNavigator } from 'react-router-dom';
3
+ interface Navigator extends BaseNavigator {
4
+ block?: History['block'];
5
+ location: Location;
6
+ }
7
+ interface FormBasedPreventNavigationProps {
8
+ promptMessage?: string;
9
+ preventNavigate: boolean;
10
+ navigator: Navigator;
11
+ }
12
+ /** Temporary function to allow backwards compatibility with routers that do not use the new Data API */
13
+ export default function NewFormBasedPreventNavigation({ promptMessage, preventNavigate, navigator, }: FormBasedPreventNavigationProps): null;
14
+ export {};
@@ -1,39 +1,39 @@
1
- import { useEffect } from 'react';
2
- import { unstable_usePrompt as usePrompt, } from 'react-router-dom';
3
- /** Temporary function to allow backwards compatibility with routers that do not use the new Data API */
4
- export default function NewFormBasedPreventNavigation(_a) {
5
- var _b = _a.promptMessage, promptMessage = _b === void 0 ? 'Changes you made may not be saved.' : _b, preventNavigate = _a.preventNavigate, navigator = _a.navigator;
6
- usePrompt({
7
- when: preventNavigate,
8
- message: promptMessage,
9
- });
10
- // TODO: Once react-router fully supports usePrompt and when we do not want to support routers
11
- // that do not support the react-router Data API we can remove this.
12
- useEffect(function () {
13
- if (!preventNavigate) {
14
- return;
15
- }
16
- var unblock = function () { };
17
- var push = navigator.push;
18
- navigator.push = function () {
19
- var args = [];
20
- for (var _i = 0; _i < arguments.length; _i++) {
21
- args[_i] = arguments[_i];
22
- }
23
- if (window.confirm(promptMessage)) {
24
- push.apply(void 0, args);
25
- }
26
- };
27
- window.addEventListener('beforeunload', beforeUnload);
28
- return function () {
29
- unblock();
30
- navigator.push = push;
31
- window.removeEventListener('beforeunload', beforeUnload);
32
- };
33
- function beforeUnload(e) {
34
- e.preventDefault();
35
- e.returnValue = promptMessage;
36
- }
37
- }, [preventNavigate, promptMessage, navigator]);
38
- return null;
39
- }
1
+ import { useEffect } from 'react';
2
+ import { unstable_usePrompt as usePrompt, } from 'react-router-dom';
3
+ /** Temporary function to allow backwards compatibility with routers that do not use the new Data API */
4
+ export default function NewFormBasedPreventNavigation(_a) {
5
+ var _b = _a.promptMessage, promptMessage = _b === void 0 ? 'Changes you made may not be saved.' : _b, preventNavigate = _a.preventNavigate, navigator = _a.navigator;
6
+ usePrompt({
7
+ when: preventNavigate,
8
+ message: promptMessage,
9
+ });
10
+ // TODO: Once react-router fully supports usePrompt and when we do not want to support routers
11
+ // that do not support the react-router Data API we can remove this.
12
+ useEffect(function () {
13
+ if (!preventNavigate) {
14
+ return;
15
+ }
16
+ var unblock = function () { };
17
+ var push = navigator.push;
18
+ navigator.push = function () {
19
+ var args = [];
20
+ for (var _i = 0; _i < arguments.length; _i++) {
21
+ args[_i] = arguments[_i];
22
+ }
23
+ if (window.confirm(promptMessage)) {
24
+ push.apply(void 0, args);
25
+ }
26
+ };
27
+ window.addEventListener('beforeunload', beforeUnload);
28
+ return function () {
29
+ unblock();
30
+ navigator.push = push;
31
+ window.removeEventListener('beforeunload', beforeUnload);
32
+ };
33
+ function beforeUnload(e) {
34
+ e.preventDefault();
35
+ e.returnValue = promptMessage;
36
+ }
37
+ }, [preventNavigate, promptMessage, navigator]);
38
+ return null;
39
+ }