envoc-form 4.0.1-9 → 5.0.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 (276) hide show
  1. package/README.md +5173 -12
  2. package/es/AddressInput/AddressInput.d.ts +24 -15
  3. package/es/AddressInput/AddressInput.js +20 -21
  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 -12
  7. package/es/ConfirmBaseForm/ConfirmBaseForm.js +42 -36
  8. package/es/ConfirmDeleteForm/ConfirmDeleteForm.d.ts +24 -11
  9. package/es/ConfirmDeleteForm/ConfirmDeleteForm.js +60 -55
  10. package/es/DatePicker/DatePickerGroup.d.ts +13 -9
  11. package/es/DatePicker/DatePickerGroup.js +87 -77
  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 -5
  15. package/es/DatePicker/StringDateOnlyPickerGroup.js +29 -24
  16. package/es/DatePicker/StringDatePickerGroup.d.ts +9 -5
  17. package/es/DatePicker/StringDatePickerGroup.js +24 -19
  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 -22
  23. package/es/Field/Field.js +51 -46
  24. package/es/Field/FieldErrorScrollTarget.d.ts +2 -2
  25. package/es/Field/FieldErrorScrollTarget.js +12 -11
  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 -9
  33. package/es/Field/StandAloneInput.js +50 -49
  34. package/es/Field/useStandardField.d.ts +21 -15
  35. package/es/Field/useStandardField.js +92 -93
  36. package/es/FieldArray/FieldArray.d.ts +24 -15
  37. package/es/FieldArray/FieldArray.js +77 -83
  38. package/es/File/FileGroup.d.ts +10 -8
  39. package/es/File/FileGroup.js +53 -52
  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 -5
  45. package/es/Form/FocusError.js +42 -41
  46. package/es/Form/Form.d.ts +33 -27
  47. package/es/Form/Form.js +141 -140
  48. package/es/Form/FormBasedPreventNavigation.d.ts +6 -5
  49. package/es/Form/FormBasedPreventNavigation.js +20 -53
  50. package/es/Form/LegacyFormBasedPreventNavigation.d.ts +17 -0
  51. package/es/Form/LegacyFormBasedPreventNavigation.js +69 -0
  52. package/es/Form/NewFormBasedPreventNavigation.d.ts +14 -0
  53. package/es/Form/NewFormBasedPreventNavigation.js +39 -0
  54. package/es/Form/ServerErrorContext.d.ts +11 -10
  55. package/es/Form/ServerErrorContext.js +9 -8
  56. package/es/FormActions.d.ts +12 -7
  57. package/es/FormActions.js +16 -26
  58. package/es/FormDefaults.d.ts +4 -3
  59. package/es/FormDefaults.js +2 -1
  60. package/es/Group.d.ts +16 -13
  61. package/es/Group.js +14 -24
  62. package/es/Input/IconInputGroup.d.ts +12 -9
  63. package/es/Input/IconInputGroup.js +43 -41
  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 -7
  67. package/es/Input/MoneyInputGroup.js +43 -42
  68. package/es/Input/NumberInputGroup.d.ts +9 -7
  69. package/es/Input/NumberInputGroup.js +43 -42
  70. package/es/Input/StringInputGroup.d.ts +8 -7
  71. package/es/Input/StringInputGroup.js +43 -41
  72. package/es/Normalization/NormalizationFunction.d.ts +4 -4
  73. package/es/Normalization/NormalizationFunction.js +1 -1
  74. package/es/Normalization/normalizers.d.ts +4 -2
  75. package/es/Normalization/normalizers.js +32 -30
  76. package/es/Select/BooleanSelectGroup.d.ts +7 -7
  77. package/es/Select/BooleanSelectGroup.js +28 -27
  78. package/es/Select/NumberSelectGroup.d.ts +9 -8
  79. package/es/Select/NumberSelectGroup.js +21 -19
  80. package/es/Select/SelectGroup.d.ts +27 -22
  81. package/es/Select/SelectGroup.js +65 -64
  82. package/es/Select/SelectGroupPropsHelper.d.ts +3 -3
  83. package/es/Select/SelectGroupPropsHelper.js +1 -1
  84. package/es/Select/StringSelectGroup.d.ts +9 -8
  85. package/es/Select/StringSelectGroup.js +21 -19
  86. package/es/StandardFormActions.d.ts +11 -6
  87. package/es/StandardFormActions.js +14 -24
  88. package/es/SubmitFormButton.d.ts +10 -7
  89. package/es/SubmitFormButton.js +40 -39
  90. package/es/TextArea/TextAreaGroup.d.ts +9 -8
  91. package/es/TextArea/TextAreaGroup.js +35 -34
  92. package/es/Validation/ValidatedApiResult.d.ts +6 -6
  93. package/es/Validation/ValidatedApiResult.js +1 -1
  94. package/es/Validation/ValidationError.d.ts +5 -5
  95. package/es/Validation/ValidationError.js +1 -1
  96. package/es/Validation/ValidationFunction.d.ts +4 -4
  97. package/es/Validation/ValidationFunction.js +1 -1
  98. package/es/Validation/validators.d.ts +18 -15
  99. package/es/Validation/validators.js +77 -73
  100. package/es/index.d.ts +73 -73
  101. package/es/index.js +50 -50
  102. package/es/setupTests.d.ts +1 -0
  103. package/es/setupTests.js +1 -0
  104. package/es/utils/objectContainsNonSerializableProperty.d.ts +1 -1
  105. package/es/utils/objectContainsNonSerializableProperty.js +14 -14
  106. package/es/utils/objectToFormData.d.ts +10 -10
  107. package/es/utils/objectToFormData.js +77 -77
  108. package/es/utils/typeChecks.d.ts +8 -8
  109. package/es/utils/typeChecks.js +18 -18
  110. package/lib/AddressInput/AddressInput.d.ts +24 -15
  111. package/lib/AddressInput/AddressInput.js +26 -27
  112. package/lib/AddressInput/UsStates.d.ts +3 -3
  113. package/lib/AddressInput/UsStates.js +55 -55
  114. package/lib/ConfirmBaseForm/ConfirmBaseForm.d.ts +26 -12
  115. package/lib/ConfirmBaseForm/ConfirmBaseForm.js +48 -42
  116. package/lib/ConfirmDeleteForm/ConfirmDeleteForm.d.ts +24 -11
  117. package/lib/ConfirmDeleteForm/ConfirmDeleteForm.js +66 -61
  118. package/lib/DatePicker/DatePickerGroup.d.ts +13 -9
  119. package/lib/DatePicker/DatePickerGroup.js +95 -85
  120. package/lib/DatePicker/DatePickerHelper.d.ts +3 -3
  121. package/lib/DatePicker/DatePickerHelper.js +2 -2
  122. package/lib/DatePicker/StringDateOnlyPickerGroup.d.ts +9 -5
  123. package/lib/DatePicker/StringDateOnlyPickerGroup.js +35 -30
  124. package/lib/DatePicker/StringDatePickerGroup.d.ts +9 -5
  125. package/lib/DatePicker/StringDatePickerGroup.js +30 -25
  126. package/lib/Field/CustomFieldInputProps.d.ts +7 -7
  127. package/lib/Field/CustomFieldInputProps.js +2 -2
  128. package/lib/Field/CustomFieldMetaProps.d.ts +4 -4
  129. package/lib/Field/CustomFieldMetaProps.js +2 -2
  130. package/lib/Field/Field.d.ts +28 -22
  131. package/lib/Field/Field.js +56 -51
  132. package/lib/Field/FieldErrorScrollTarget.d.ts +2 -2
  133. package/lib/Field/FieldErrorScrollTarget.js +15 -14
  134. package/lib/Field/FieldNameContext.d.ts +3 -3
  135. package/lib/Field/FieldNameContext.js +9 -9
  136. package/lib/Field/FieldSection.d.ts +7 -7
  137. package/lib/Field/FieldSection.js +12 -23
  138. package/lib/Field/InjectedFieldProps.d.ts +7 -7
  139. package/lib/Field/InjectedFieldProps.js +2 -2
  140. package/lib/Field/StandAloneInput.d.ts +13 -9
  141. package/lib/Field/StandAloneInput.js +76 -75
  142. package/lib/Field/useStandardField.d.ts +21 -15
  143. package/lib/Field/useStandardField.js +95 -96
  144. package/lib/FieldArray/FieldArray.d.ts +24 -15
  145. package/lib/FieldArray/FieldArray.js +83 -89
  146. package/lib/File/FileGroup.d.ts +10 -8
  147. package/lib/File/FileGroup.js +58 -57
  148. package/lib/File/FileList.d.ts +5 -6
  149. package/lib/File/FileList.js +13 -24
  150. package/lib/File/humanFileSize.d.ts +1 -1
  151. package/lib/File/humanFileSize.js +10 -10
  152. package/lib/Form/FocusError.d.ts +7 -5
  153. package/lib/Form/FocusError.js +48 -47
  154. package/lib/Form/Form.d.ts +33 -27
  155. package/lib/Form/Form.js +147 -146
  156. package/lib/Form/FormBasedPreventNavigation.d.ts +6 -5
  157. package/lib/Form/FormBasedPreventNavigation.js +26 -56
  158. package/lib/Form/LegacyFormBasedPreventNavigation.d.ts +17 -0
  159. package/lib/Form/LegacyFormBasedPreventNavigation.js +72 -0
  160. package/lib/Form/NewFormBasedPreventNavigation.d.ts +14 -0
  161. package/lib/Form/NewFormBasedPreventNavigation.js +42 -0
  162. package/lib/Form/ServerErrorContext.d.ts +11 -10
  163. package/lib/Form/ServerErrorContext.js +15 -14
  164. package/lib/FormActions.d.ts +12 -7
  165. package/lib/FormActions.js +22 -32
  166. package/lib/FormDefaults.d.ts +4 -3
  167. package/lib/FormDefaults.js +5 -4
  168. package/lib/Group.d.ts +16 -13
  169. package/lib/Group.js +20 -30
  170. package/lib/Input/IconInputGroup.d.ts +12 -9
  171. package/lib/Input/IconInputGroup.js +48 -46
  172. package/lib/Input/InputGroup.d.ts +12 -12
  173. package/lib/Input/InputGroup.js +39 -39
  174. package/lib/Input/MoneyInputGroup.d.ts +9 -7
  175. package/lib/Input/MoneyInputGroup.js +48 -47
  176. package/lib/Input/NumberInputGroup.d.ts +9 -7
  177. package/lib/Input/NumberInputGroup.js +48 -47
  178. package/lib/Input/StringInputGroup.d.ts +8 -7
  179. package/lib/Input/StringInputGroup.js +48 -46
  180. package/lib/Normalization/NormalizationFunction.d.ts +4 -4
  181. package/lib/Normalization/NormalizationFunction.js +2 -2
  182. package/lib/Normalization/normalizers.d.ts +4 -2
  183. package/lib/Normalization/normalizers.js +37 -35
  184. package/lib/Select/BooleanSelectGroup.d.ts +7 -7
  185. package/lib/Select/BooleanSelectGroup.js +35 -34
  186. package/lib/Select/NumberSelectGroup.d.ts +9 -8
  187. package/lib/Select/NumberSelectGroup.js +29 -27
  188. package/lib/Select/SelectGroup.d.ts +27 -22
  189. package/lib/Select/SelectGroup.js +71 -70
  190. package/lib/Select/SelectGroupPropsHelper.d.ts +3 -3
  191. package/lib/Select/SelectGroupPropsHelper.js +2 -2
  192. package/lib/Select/StringSelectGroup.d.ts +9 -8
  193. package/lib/Select/StringSelectGroup.js +29 -27
  194. package/lib/StandardFormActions.d.ts +11 -6
  195. package/lib/StandardFormActions.js +20 -30
  196. package/lib/SubmitFormButton.d.ts +10 -7
  197. package/lib/SubmitFormButton.js +45 -44
  198. package/lib/TextArea/TextAreaGroup.d.ts +9 -8
  199. package/lib/TextArea/TextAreaGroup.js +40 -39
  200. package/lib/Validation/ValidatedApiResult.d.ts +6 -6
  201. package/lib/Validation/ValidatedApiResult.js +2 -2
  202. package/lib/Validation/ValidationError.d.ts +5 -5
  203. package/lib/Validation/ValidationError.js +2 -2
  204. package/lib/Validation/ValidationFunction.d.ts +4 -4
  205. package/lib/Validation/ValidationFunction.js +2 -2
  206. package/lib/Validation/validators.d.ts +18 -15
  207. package/lib/Validation/validators.js +90 -86
  208. package/lib/index.d.ts +73 -73
  209. package/lib/index.js +117 -117
  210. package/lib/setupTests.d.ts +1 -0
  211. package/lib/setupTests.js +3 -0
  212. package/lib/utils/objectContainsNonSerializableProperty.d.ts +1 -1
  213. package/lib/utils/objectContainsNonSerializableProperty.js +17 -17
  214. package/lib/utils/objectToFormData.d.ts +10 -10
  215. package/lib/utils/objectToFormData.js +79 -79
  216. package/lib/utils/typeChecks.d.ts +8 -8
  217. package/lib/utils/typeChecks.js +29 -29
  218. package/package.json +14 -11
  219. package/src/AddressInput/AddressInput.tsx +15 -5
  220. package/src/AddressInput/__snapshots__/AddressInput.test.tsx.snap +14 -12
  221. package/src/ConfirmBaseForm/ConfirmBaseForm.tsx +14 -0
  222. package/src/ConfirmDeleteForm/ConfirmDeleteForm.tsx +13 -0
  223. package/src/DatePicker/DatePicker.test.tsx +1 -1
  224. package/src/DatePicker/DatePickerGroup.tsx +18 -7
  225. package/src/DatePicker/StringDateOnlyPickerGroup.tsx +7 -2
  226. package/src/DatePicker/StringDatePickerGroup.tsx +7 -1
  227. package/src/Field/Field.tsx +20 -7
  228. package/src/Field/FieldErrorScrollTarget.tsx +1 -0
  229. package/src/Field/StandAloneInput.tsx +4 -0
  230. package/src/Field/useStandardField.ts +13 -9
  231. package/src/FieldArray/FieldArray.tsx +14 -5
  232. package/src/File/FileGroup.tsx +9 -3
  233. package/src/File/FileList.tsx +2 -2
  234. package/src/Form/FocusError.tsx +3 -0
  235. package/src/Form/Form.tsx +6 -0
  236. package/src/Form/FormBasedPreventNavigation.tsx +28 -46
  237. package/src/Form/LegacyFormBasedPreventNavigation.tsx +77 -0
  238. package/src/Form/NewFormBasedPreventNavigation.tsx +59 -0
  239. package/src/Form/ServerErrorContext.ts +1 -0
  240. package/src/FormActions.tsx +7 -0
  241. package/src/FormDefaults.ts +1 -0
  242. package/src/Group.tsx +12 -4
  243. package/src/Input/IconInputGroup.tsx +5 -2
  244. package/src/Input/InputGroup.tsx +13 -5
  245. package/src/Input/MoneyInputGroup.tsx +3 -1
  246. package/src/Input/NumberInputGroup.tsx +3 -1
  247. package/src/Input/StringInputGroup.tsx +3 -2
  248. package/src/Input/__Tests__/__snapshots__/IconInputGroup.test.tsx.snap +1 -0
  249. package/src/Input/__Tests__/__snapshots__/MoneyInputGroup.test.tsx.snap +1 -0
  250. package/src/Input/__Tests__/__snapshots__/NumberInputGroup.test.tsx.snap +1 -0
  251. package/src/Input/__Tests__/__snapshots__/StringInputGroup.test.tsx.snap +1 -0
  252. package/src/Normalization/normalizers.ts +4 -2
  253. package/src/Select/BooleanSelectGroup.tsx +2 -1
  254. package/src/Select/NumberSelectGroup.tsx +4 -2
  255. package/src/Select/SelectGroup.tsx +13 -2
  256. package/src/Select/StringSelectGroup.tsx +2 -0
  257. package/src/Select/__tests__/__snapshots__/BooleanSelectGroup.test.tsx.snap +6 -8
  258. package/src/Select/__tests__/__snapshots__/NumberSelectGroup.test.tsx.snap +12 -16
  259. package/src/Select/__tests__/__snapshots__/StringSelectGroup.test.tsx.snap +12 -16
  260. package/src/StandardFormActions.tsx +5 -0
  261. package/src/SubmitFormButton.tsx +5 -1
  262. package/src/TextArea/TextAreaGroup.tsx +6 -4
  263. package/src/Validation/validators.ts +19 -14
  264. package/src/__Tests__/FormTestBase.tsx +9 -8
  265. package/src/__Tests__/RealisticForm.test.tsx +82 -0
  266. package/src/index.ts +4 -4
  267. package/src/setupTests.ts +1 -0
  268. package/src/utils/objectToFormData.test.tsx +1 -1
  269. package/es/__Tests__/FormTestBase.d.ts +0 -27
  270. package/es/__Tests__/FormTestBase.js +0 -83
  271. package/es/__Tests__/index.d.ts +0 -2
  272. package/es/__Tests__/index.js +0 -2
  273. package/lib/__Tests__/FormTestBase.d.ts +0 -27
  274. package/lib/__Tests__/FormTestBase.js +0 -86
  275. package/lib/__Tests__/index.d.ts +0 -2
  276. package/lib/__Tests__/index.js +0 -8
package/es/Form/Form.js CHANGED
@@ -1,140 +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
- export default function Form(_a) {
36
- 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"]);
37
- // formik resets all error on each blur (with our settings)
38
- // this means that ALL errors from the server disappear when any one field is blurred
39
- // So, we have to store server errors ourselves
40
- // Since we only use useStandardFormInput, that means there is only one consumer
41
- var _b = useState({}), serverErrors = _b[0], setServerErrors = _b[1];
42
- var serverErrorContextValue = useMemo(function () { return ({
43
- errors: serverErrors,
44
- getError: function (path) {
45
- var lowered = path.toLowerCase();
46
- return serverErrors && serverErrors[lowered];
47
- },
48
- setError: function (path, errorMessage) {
49
- var _a;
50
- var lowered = path.toLowerCase();
51
- setServerErrors(Object.assign({}, serverErrors, (_a = {},
52
- _a[lowered] = !errorMessage ? undefined : errorMessage,
53
- _a)));
54
- },
55
- }); }, [serverErrors]);
56
- 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({
57
- // hack for ref forwarding
58
- Field: Field,
59
- FieldArray: FieldArray,
60
- })] })) })) })));
61
- function handleSubmit(values, formikBag) {
62
- var formData = undefined;
63
- var submitFunc;
64
- if (objectContainsNonSerializableProperty(values)) {
65
- formData = objectToFormData(values, {
66
- indices: true,
67
- dotNotation: true,
68
- allowEmptyArrays: true,
69
- noFileListBrackets: true,
70
- });
71
- if (onFormDataSubmit === undefined) {
72
- throw new Error('No onFormDataSubmit supplied for non-serializable properties.');
73
- }
74
- submitFunc = function () {
75
- return onFormDataSubmit(formData !== null && formData !== void 0 ? formData : new FormData(), formikBag);
76
- };
77
- }
78
- else {
79
- if (onSubmit === undefined) {
80
- formData = objectToFormData(values, {
81
- indices: true,
82
- dotNotation: true,
83
- allowEmptyArrays: true,
84
- noFileListBrackets: true,
85
- });
86
- if (onFormDataSubmit === undefined) {
87
- // This error should never occur, as this case is covered by RequireAtLeastOne type safety
88
- throw new Error('No onFormDataSubmit supplied for non-serializable properties.');
89
- }
90
- submitFunc = function () {
91
- return onFormDataSubmit(formData !== null && formData !== void 0 ? formData : new FormData(), formikBag);
92
- };
93
- }
94
- else {
95
- submitFunc = function () { return onSubmit(values, formikBag); };
96
- }
97
- }
98
- return submitFunc()
99
- .then(function (response) {
100
- return response;
101
- })
102
- .catch(function (err) {
103
- //this is an http error
104
- if (err &&
105
- err.response &&
106
- err.response.data &&
107
- err.response.data.validationFailures) {
108
- try {
109
- var serverErrors_1 = err.response.data.validationFailures.reduce(function (acc, value) {
110
- var _a;
111
- // for simplicity, just keep it to one server error at a time per path
112
- // don't care of the property name case changes
113
- var path = (_a = value.propertyName) === null || _a === void 0 ? void 0 : _a.toLowerCase();
114
- if (!!path && !!value.errorMessage) {
115
- acc[path] = value.errorMessage;
116
- }
117
- return acc;
118
- }, {});
119
- setServerErrors(serverErrors_1);
120
- }
121
- catch (err) {
122
- console.error('Failure to getErrorObject');
123
- console.error(err);
124
- throw err;
125
- }
126
- }
127
- throw err;
128
- });
129
- }
130
- }
131
- Form.DisplayFormState = DisplayFormState;
132
- function DisplayFormState() {
133
- var formState = useFormikContext();
134
- var serverErrorContext = useContext(ServerErrorContext);
135
- return (_jsx("div", __assign({ style: { margin: '1rem 0' } }, { children: _jsxs("pre", __assign({ style: {
136
- background: '#f6f8fa',
137
- fontSize: '.65rem',
138
- padding: '.5rem',
139
- } }, { 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)] })) })));
140
- }
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,5 +1,6 @@
1
- export interface FormBasedPreventNavigationProps {
2
- ignoreLostChanges?: boolean;
3
- promptMessage?: string;
4
- }
5
- export default function FormBasedPreventNavigation({ ignoreLostChanges, promptMessage, }: FormBasedPreventNavigationProps): null;
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,53 +1,20 @@
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 { useContext, useEffect } from 'react';
13
- // see: https://gist.github.com/rmorse/426ffcc579922a82749934826fa9f743
14
- import { UNSAFE_NavigationContext as NavigationContext, } from 'react-router-dom';
15
- import { useFormikContext } from 'formik';
16
- export default function FormBasedPreventNavigation(_a) {
17
- var ignoreLostChanges = _a.ignoreLostChanges, _b = _a.promptMessage, promptMessage = _b === void 0 ? 'Changes you made may not be saved.' : _b;
18
- var _c = useFormikContext(), dirty = _c.dirty, isSubmitting = _c.isSubmitting;
19
- var preventNavigate = !ignoreLostChanges && dirty && !isSubmitting;
20
- var navigator = useContext(NavigationContext).navigator;
21
- useEffect(function () {
22
- if (!preventNavigate) {
23
- return;
24
- }
25
- // TODO: https://reactrouter.com/docs/en/v6/upgrading/v5#prompt-is-not-currently-supported
26
- // this is a workaround until we get native support for prompt on navigate
27
- var blocker = function (tx) {
28
- if (window.confirm(promptMessage)) {
29
- tx.retry();
30
- }
31
- };
32
- var unblock = navigator.block(function (tx) {
33
- var autoUnblockingTx = __assign(__assign({}, tx), { retry: function () {
34
- // Automatically unblock the transition so it can play all the way
35
- // through before retrying it. TODO: Figure out how to re-enable
36
- // this block if the transition is cancelled for some reason.
37
- unblock();
38
- tx.retry();
39
- } });
40
- blocker(autoUnblockingTx);
41
- });
42
- window.addEventListener('beforeunload', beforeUnload);
43
- return function () {
44
- unblock();
45
- window.removeEventListener('beforeunload', beforeUnload);
46
- };
47
- function beforeUnload(e) {
48
- e.preventDefault();
49
- e.returnValue = promptMessage;
50
- }
51
- }, [preventNavigate, promptMessage, navigator]);
52
- return null;
53
- }
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
+ }
@@ -0,0 +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 {};
@@ -0,0 +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
+ }
@@ -0,0 +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 {};
@@ -0,0 +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,10 +1,11 @@
1
- import React from 'react';
2
- export interface ServerErrors {
3
- [path: string]: string;
4
- }
5
- export interface ServerErrorContextProps {
6
- errors: ServerErrors;
7
- getError: (path: string) => string | undefined;
8
- setError: (path: string, errorMessage: string | undefined) => void;
9
- }
10
- export declare const ServerErrorContext: React.Context<ServerErrorContextProps>;
1
+ import React from 'react';
2
+ export interface ServerErrors {
3
+ [path: string]: string;
4
+ }
5
+ export interface ServerErrorContextProps {
6
+ errors: ServerErrors;
7
+ getError: (path: string) => string | undefined;
8
+ setError: (path: string, errorMessage: string | undefined) => void;
9
+ }
10
+ /** Context to store the API errors from the server for the form. */
11
+ export declare const ServerErrorContext: React.Context<ServerErrorContextProps>;
@@ -1,8 +1,9 @@
1
- import React from 'react';
2
- export var ServerErrorContext = React.createContext({
3
- errors: {},
4
- getError: function (path) {
5
- return undefined;
6
- },
7
- setError: function (path, errorMessage) { },
8
- });
1
+ import React from 'react';
2
+ /** Context to store the API errors from the server for the form. */
3
+ export var ServerErrorContext = React.createContext({
4
+ errors: {},
5
+ getError: function (path) {
6
+ return undefined;
7
+ },
8
+ setError: function (path, errorMessage) { },
9
+ });
@@ -1,7 +1,12 @@
1
- /// <reference types="react" />
2
- export interface FormActionsProps {
3
- allowPristineSubmit?: boolean;
4
- handleCancel?: () => void;
5
- disabled?: boolean;
6
- }
7
- export default function FormActions({ allowPristineSubmit, handleCancel, disabled, }: FormActionsProps): JSX.Element;
1
+ export interface FormActionsProps {
2
+ /** Allow the form to be submitted without any changes. By default this is not allowed. */
3
+ allowPristineSubmit?: boolean;
4
+ /** The cancel button's `onClick`.
5
+ * @defaultValue `window.history.back()`
6
+ */
7
+ handleCancel?: () => void;
8
+ /** Whether both buttons should be disabled. */
9
+ disabled?: boolean;
10
+ }
11
+ /** Standard cancel and submit buttons. */
12
+ export default function FormActions({ allowPristineSubmit, handleCancel, disabled, }: FormActionsProps): import("react/jsx-runtime").JSX.Element;
package/es/FormActions.js CHANGED
@@ -1,26 +1,16 @@
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 { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
13
- import { FormDefaults } from './FormDefaults';
14
- import { useFormikContext } from 'formik';
15
- import SubmitFormButton from './SubmitFormButton';
16
- export default function FormActions(_a) {
17
- var allowPristineSubmit = _a.allowPristineSubmit, handleCancel = _a.handleCancel, disabled = _a.disabled;
18
- var isSubmitting = useFormikContext().isSubmitting;
19
- return (_jsxs(_Fragment, { children: [_jsx(SubmitFormButton, { className: FormDefaults.cssClassPrefix + 'form-actions', allowPristineSubmit: allowPristineSubmit, disabled: disabled }), _jsx("button", __assign({ type: "button", className: FormDefaults.cssClassPrefix +
20
- 'form-actions ' +
21
- FormDefaults.cssClassPrefix +
22
- 'cancel-form-button', disabled: isSubmitting || disabled, onClick: handleCancel || goBack }, { children: "Cancel" }))] }));
23
- function goBack() {
24
- window.history.back();
25
- }
26
- }
1
+ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { FormDefaults } from './FormDefaults';
3
+ import { useFormikContext } from 'formik';
4
+ import SubmitFormButton from './SubmitFormButton';
5
+ /** Standard cancel and submit buttons. */
6
+ export default function FormActions(_a) {
7
+ var allowPristineSubmit = _a.allowPristineSubmit, handleCancel = _a.handleCancel, disabled = _a.disabled;
8
+ var isSubmitting = useFormikContext().isSubmitting;
9
+ return (_jsxs(_Fragment, { children: [_jsx(SubmitFormButton, { className: FormDefaults.cssClassPrefix + 'form-actions', allowPristineSubmit: allowPristineSubmit, disabled: disabled }), _jsx("button", { type: "button", className: FormDefaults.cssClassPrefix +
10
+ 'form-actions ' +
11
+ FormDefaults.cssClassPrefix +
12
+ 'cancel-form-button', disabled: isSubmitting || disabled, onClick: handleCancel || goBack, children: "Cancel" })] }));
13
+ function goBack() {
14
+ window.history.back();
15
+ }
16
+ }