envoc-form 4.0.1-3 → 4.0.1-5

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 (80) hide show
  1. package/es/ConfirmBaseForm/ConfirmBaseForm.js +2 -1
  2. package/es/DatePicker/DatePickerGroup.js +5 -2
  3. package/es/Field/Field.js +1 -1
  4. package/es/FieldArray/FieldArray.js +10 -7
  5. package/es/File/FileGroup.js +4 -2
  6. package/es/File/FileList.js +2 -1
  7. package/es/Form/Form.js +3 -1
  8. package/es/FormActions.js +5 -1
  9. package/es/FormDefaults.d.ts +3 -0
  10. package/es/FormDefaults.js +1 -0
  11. package/es/Group.js +6 -4
  12. package/es/Input/IconInputGroup.js +2 -1
  13. package/es/Input/InputGroup.js +2 -1
  14. package/es/Input/MoneyInputGroup.js +2 -1
  15. package/es/Input/NumberInputGroup.js +2 -1
  16. package/es/Input/StringInputGroup.js +2 -1
  17. package/es/Select/SelectGroup.js +7 -2
  18. package/es/StandardFormActions.js +2 -1
  19. package/es/SubmitFormButton.js +2 -1
  20. package/es/TextArea/TextAreaGroup.js +2 -1
  21. package/es/index.d.ts +1 -0
  22. package/es/index.js +2 -0
  23. package/lib/ConfirmBaseForm/ConfirmBaseForm.js +2 -1
  24. package/lib/DatePicker/DatePickerGroup.js +5 -2
  25. package/lib/Field/Field.js +1 -1
  26. package/lib/FieldArray/FieldArray.js +10 -7
  27. package/lib/File/FileGroup.js +4 -2
  28. package/lib/File/FileList.js +2 -1
  29. package/lib/Form/Form.js +3 -1
  30. package/lib/FormActions.js +5 -1
  31. package/lib/FormDefaults.d.ts +3 -0
  32. package/lib/FormDefaults.js +4 -0
  33. package/lib/Group.js +6 -4
  34. package/lib/Input/IconInputGroup.js +2 -1
  35. package/lib/Input/InputGroup.js +2 -1
  36. package/lib/Input/MoneyInputGroup.js +2 -1
  37. package/lib/Input/NumberInputGroup.js +2 -1
  38. package/lib/Input/StringInputGroup.js +2 -1
  39. package/lib/Select/SelectGroup.js +7 -2
  40. package/lib/StandardFormActions.js +2 -1
  41. package/lib/SubmitFormButton.js +2 -1
  42. package/lib/TextArea/TextAreaGroup.js +2 -1
  43. package/lib/index.d.ts +1 -0
  44. package/lib/index.js +4 -1
  45. package/package.json +2 -2
  46. package/src/AddressInput/__snapshots__/AddressInput.test.tsx.snap +11 -10
  47. package/src/ConfirmBaseForm/ConfirmBaseForm.tsx +7 -2
  48. package/src/ConfirmBaseForm/__snapshots__/ConfirmBaseForm.test.tsx.snap +2 -2
  49. package/src/ConfirmDeleteForm/__snapshots__/ConfirmDeleteForm.test.tsx.snap +2 -2
  50. package/src/DatePicker/DatePickerGroup.tsx +15 -4
  51. package/src/DatePicker/__snapshots__/DatePicker.test.tsx.snap +3 -2
  52. package/src/Field/Field.tsx +8 -1
  53. package/src/FieldArray/FieldArray.tsx +21 -9
  54. package/src/File/FileGroup.tsx +10 -2
  55. package/src/File/FileList.tsx +3 -1
  56. package/src/File/__snapshots__/FileGroup.test.tsx.snap +4 -3
  57. package/src/Form/Form.tsx +8 -1
  58. package/src/Form/__snapshots__/Form.test.tsx.snap +1 -0
  59. package/src/FormActions.tsx +8 -2
  60. package/src/FormDefaults.ts +1 -0
  61. package/src/Group.tsx +17 -6
  62. package/src/Input/IconInputGroup.tsx +5 -2
  63. package/src/Input/InputGroup.tsx +9 -2
  64. package/src/Input/MoneyInputGroup.tsx +5 -1
  65. package/src/Input/NumberInputGroup.tsx +5 -1
  66. package/src/Input/StringInputGroup.tsx +5 -1
  67. package/src/Input/__Tests__/__snapshots__/IconInputGroup.test.tsx.snap +3 -2
  68. package/src/Input/__Tests__/__snapshots__/MoneyInputGroup.test.tsx.snap +3 -2
  69. package/src/Input/__Tests__/__snapshots__/NumberInputGroup.test.tsx.snap +3 -2
  70. package/src/Input/__Tests__/__snapshots__/StringInputGroup.test.tsx.snap +3 -2
  71. package/src/Select/SelectGroup.tsx +10 -3
  72. package/src/Select/__tests__/__snapshots__/BooleanSelectGroup.test.tsx.snap +3 -2
  73. package/src/Select/__tests__/__snapshots__/NumberSelectGroup.test.tsx.snap +6 -4
  74. package/src/Select/__tests__/__snapshots__/StringSelectGroup.test.tsx.snap +6 -4
  75. package/src/StandardFormActions.tsx +4 -1
  76. package/src/SubmitFormButton.tsx +5 -1
  77. package/src/TextArea/TextAreaGroup.tsx +9 -2
  78. package/src/__Tests__/__snapshots__/StandardFormActions.test.tsx.snap +3 -2
  79. package/src/__Tests__/__snapshots__/SubmitFormButton.test.tsx.snap +2 -1
  80. package/src/index.ts +3 -0
@@ -23,12 +23,13 @@ var __rest = (this && this.__rest) || function (s, e) {
23
23
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
24
24
  import classNames from 'classnames';
25
25
  import { useAxiosRequest } from 'envoc-request';
26
+ import { FormDefaults } from '../FormDefaults';
26
27
  // TODO: ask about how we should use 'children'
27
28
  export default function ConfirmBaseForm(_a) {
28
29
  var handleCancel = _a.handleCancel, request = _a.request, style = _a.style, title = _a.title, children = _a.children, props = __rest(_a, ["handleCancel", "request", "style", "title", "children"]);
29
30
  var webRequest = useAxiosRequest(Object.assign({}, request, { autoExecute: false }));
30
31
  var onCancel = handleCancel !== null && handleCancel !== void 0 ? handleCancel : goBack;
31
- return (_jsxs("div", __assign({ style: __assign({ textAlign: 'center' }, style) }, props, { children: [_jsx("h3", { children: title }), children, _jsx("button", __assign({ className: classNames('confirm-base-form-yes-button'), type: "button", onClick: webRequest.submitRequest }, { children: "Yes" })), _jsx("button", __assign({ className: classNames('confirm-base-form-cancel-button'), type: "button", onClick: onCancel }, { children: "Cancel" }))] })));
32
+ return (_jsxs("div", __assign({ style: __assign({ textAlign: 'center' }, style) }, props, { children: [_jsx("h3", { children: title }), children, _jsx("button", __assign({ className: classNames(FormDefaults.cssClassPrefix + 'confirm-base-form-yes-button'), type: "button", onClick: webRequest.submitRequest }, { children: "Yes" })), _jsx("button", __assign({ className: classNames(FormDefaults.cssClassPrefix + 'confirm-base-form-cancel-button'), type: "button", onClick: onCancel }, { children: "Cancel" }))] })));
32
33
  function goBack() {
33
34
  window.history.back();
34
35
  }
@@ -26,10 +26,11 @@ import DatePicker from 'react-date-picker/dist/entry.nostyle';
26
26
  import classnames from 'classnames';
27
27
  import parseISO from 'date-fns/parseISO';
28
28
  import Group from '../Group';
29
+ import { FormDefaults } from '../FormDefaults';
29
30
  export default function DatePickerGroup(_a) {
30
31
  var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, disabled = _a.disabled, convert = _a.convert, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "disabled", "convert"]);
31
32
  var _b = useState(null), displayDate = _b[0], setDisplayDate = _b[1];
32
- return (_jsx(Group, __assign({ input: input, meta: meta, label: label, helpText: helpText, className: classnames(className, 'date-picker'), disabled: disabled }, { children: _jsx(DatePicker, __assign({}, rest, { className: classnames('date-picker', className), value: displayDate, onChange: handleChange })) })));
33
+ return (_jsx(Group, __assign({ input: input, meta: meta, label: label, helpText: helpText, className: classnames(className, FormDefaults.cssClassPrefix + 'date-picker'), disabled: disabled }, { children: _jsx(DatePicker, __assign({}, rest, { className: classnames(FormDefaults.cssClassPrefix + 'date-picker', className), value: displayDate, onChange: handleChange })) })));
33
34
  function handleChange(e) {
34
35
  var onChange = input.onChange;
35
36
  if (onChange === null) {
@@ -59,7 +60,9 @@ export default function DatePickerGroup(_a) {
59
60
  }
60
61
  }
61
62
  export function convertToTimeZoneInsensitiveISOString(date) {
62
- var year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(date);
63
+ var year = new Intl.DateTimeFormat('en', { year: 'numeric' })
64
+ .format(date)
65
+ .padStart(4, '0');
63
66
  var month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(date);
64
67
  var day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(date);
65
68
  return "".concat(year, "-").concat(month, "-").concat(day, "T00:00:00.000Z");
package/es/Field/Field.js CHANGED
@@ -39,7 +39,7 @@ function Field(_a, ref) {
39
39
  }), input = _b[0], meta = _b[1];
40
40
  // a bit of a hack so JSX is happy with us
41
41
  var Wrapped = Component;
42
- return (_jsx(FieldNameContext.Provider, __assign({ value: input.name }, { children: _jsx(Wrapped, __assign({}, rest, { ref: ref, id: input.id, input: input, meta: meta })) })));
42
+ return (_jsx(FieldNameContext.Provider, __assign({ value: input.name }, { children: _jsx(Wrapped, __assign({}, rest, { ref: ref, id: input.id, input: input, meta: meta, disabled: disabled })) })));
43
43
  }
44
44
  // hack to get forwarded refs to work
45
45
  var FieldWithRef = React.forwardRef(Field);
@@ -34,26 +34,29 @@ import classNames from 'classnames';
34
34
  import Field from '../Field/Field';
35
35
  import { FieldNameContext } from '../Field/FieldNameContext';
36
36
  import useStandardFormInput from '../Field/useStandardField';
37
+ import { FormDefaults } from '../FormDefaults';
37
38
  export default function FieldArray(_a) {
39
+ var _b;
38
40
  var name = _a.name, label = _a.label, validate = _a.validate, disabled = _a.disabled, children = _a.children, rest = __rest(_a, ["name", "label", "validate", "disabled", "children"]);
39
- var _b = useStandardFormInput({
41
+ var _c = useStandardFormInput({
40
42
  name: String(name),
41
43
  validate: validate,
42
44
  disabled: disabled,
43
- }), input = _b[0], meta = _b[1];
45
+ }), input = _c[0], meta = _c[1];
44
46
  var values = !input.value
45
47
  ? []
46
48
  : Array.isArray(input.value)
47
49
  ? input.value
48
50
  : [];
49
- return (_jsxs("div", __assign({ className: "field-array" }, { children: [_jsxs("div", __assign({ className: "field-array-header" }, { children: [_jsx("div", __assign({ className: "field-array-title" }, { children: label })), _jsx("button", __assign({ className: classNames('add-array-item-button', { disabled: disabled }), title: "Add Item", type: "button", onClick: addItem }, { children: "+" }))] })), _jsx("div", __assign({ className: "field-array-body" }, { children: values.map(function (value, index) {
51
+ return (_jsxs("div", __assign({ className: FormDefaults.cssClassPrefix + 'field-array' }, { children: [_jsxs("div", __assign({ className: FormDefaults.cssClassPrefix + 'field-array-header' }, { children: [_jsx("div", __assign({ className: FormDefaults.cssClassPrefix + 'field-array-title' }, { children: label })), _jsx("button", __assign({ className: classNames(FormDefaults.cssClassPrefix + 'add-array-item-button', (_b = {}, _b[FormDefaults.cssClassPrefix + 'disabled'] = disabled, _b)), title: "Add Item", type: "button", onClick: addItem }, { children: "+" }))] })), _jsx("div", __assign({ className: FormDefaults.cssClassPrefix + 'field-array-body' }, { children: values.map(function (value, index) {
52
+ var _a, _b;
50
53
  var itemName = "".concat(input.name, "[").concat(index, "]");
51
- return (_jsxs("div", __assign({ className: classNames('field-array-item', {
52
- removed: value.isDeleted,
53
- }), role: "listitem" }, { children: [_jsx(FieldNameContext.Provider, __assign({ value: itemName }, { children: children({
54
+ return (_jsxs("div", __assign({ className: classNames(FormDefaults.cssClassPrefix + 'field-array-item', (_a = {},
55
+ _a[FormDefaults.cssClassPrefix + 'removed'] = value.isDeleted,
56
+ _a)), role: "listitem" }, { children: [_jsx(FieldNameContext.Provider, __assign({ value: itemName }, { children: children({
54
57
  Field: Field,
55
58
  FieldArray: FieldArray,
56
- }) })), _jsx("button", __assign({ className: classNames('remove-array-item-button', { disabled: disabled }), type: "button", title: "Remove Item", onClick: function () { return removeItem(value); } }, { children: "-" }))] }), (value && value['form-input-array-key']) ||
59
+ }) })), _jsx("button", __assign({ className: classNames(FormDefaults.cssClassPrefix + 'remove-array-item-button', (_b = {}, _b[FormDefaults.cssClassPrefix + 'disabled'] = disabled, _b)), type: "button", title: "Remove Item", onClick: function () { return removeItem(value); } }, { children: "-" }))] }), (value && value['form-input-array-key']) ||
57
60
  (value && value['id']) ||
58
61
  itemName));
59
62
  }) }))] })));
@@ -25,9 +25,11 @@ import React from 'react';
25
25
  import classNames from 'classnames';
26
26
  import FileList from './FileList';
27
27
  import Group from '../Group';
28
+ import { FormDefaults } from '../FormDefaults';
28
29
  function FileGroup(_a, ref) {
30
+ var _b;
29
31
  var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, multiple = _a.multiple, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "multiple"]);
30
- return (_jsxs(Group, __assign({ input: input, meta: meta, label: label, helpText: helpText, className: classNames(className, { multiple: multiple }, 'file-group') }, { children: [_jsx("input", __assign({}, input, rest, { multiple: multiple, onChange: function (e) {
32
+ return (_jsxs(Group, __assign({ input: input, meta: meta, label: label, helpText: helpText, className: classNames(className, (_b = {}, _b[FormDefaults.cssClassPrefix + 'multiple'] = multiple, _b), FormDefaults.cssClassPrefix + 'file-group') }, { children: [_jsx("input", __assign({}, input, rest, { multiple: multiple, onChange: function (e) {
31
33
  var _a, _b;
32
34
  if (!((_b = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b.length)) {
33
35
  input.onChange(undefined);
@@ -44,7 +46,7 @@ function FileGroup(_a, ref) {
44
46
  input.onChange(files);
45
47
  }
46
48
  }
47
- }, value: undefined, ref: ref, type: "file", className: classNames(className, 'file-group') })), _jsx(FileList, { files: input.value })] })));
49
+ }, value: undefined, ref: ref, type: "file", className: classNames(className, FormDefaults.cssClassPrefix + 'file-group') })), _jsx(FileList, { files: input.value })] })));
48
50
  }
49
51
  var FileGroupWithRef = React.forwardRef(FileGroup);
50
52
  export default FileGroupWithRef;
@@ -10,9 +10,10 @@ var __assign = (this && this.__assign) || function () {
10
10
  return __assign.apply(this, arguments);
11
11
  };
12
12
  import { jsx as _jsx } from "react/jsx-runtime";
13
+ import { FormDefaults } from '../FormDefaults';
13
14
  export default function FileList(_a) {
14
15
  var files = _a.files, rejectedFiles = _a.rejectedFiles;
15
- return (_jsx("div", __assign({ className: "file-list" }, { children: !files ? null : Array.isArray(files) ? (files.map(function (x, i) { return _jsx(File, { file: x }, i); })) : (_jsx(File, { file: files })) })));
16
+ return (_jsx("div", __assign({ className: FormDefaults.cssClassPrefix + 'file-list' }, { children: !files ? null : Array.isArray(files) ? (files.map(function (x, i) { return _jsx(File, { file: x }, i); })) : (_jsx(File, { file: files })) })));
16
17
  }
17
18
  function File(_a) {
18
19
  var file = _a.file;
package/es/Form/Form.js CHANGED
@@ -22,6 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
24
24
  import { useContext, useMemo, useState, } from 'react';
25
+ import classNames from 'classnames';
25
26
  import { Form as FormikFormWrapper, Formik, useFormikContext, } from 'formik';
26
27
  import FocusError from './FocusError';
27
28
  import FormBasedPreventNavigation from './FormBasedPreventNavigation';
@@ -30,6 +31,7 @@ import Field from '../Field/Field';
30
31
  import FieldArray from '../FieldArray/FieldArray';
31
32
  import objectContainsNonSerializableProperty from '../utils/objectContainsNonSerializableProperty';
32
33
  import objectToFormData from '../utils/objectToFormData';
34
+ import { FormDefaults } from '../FormDefaults';
33
35
  export default function Form(_a) {
34
36
  var children = _a.children, className = _a.className, style = _a.style, ignoreLostChanges = _a.ignoreLostChanges, onSubmit = _a.onSubmit, initialValues = _a.initialValues, props = __rest(_a, ["children", "className", "style", "ignoreLostChanges", "onSubmit", "initialValues"]);
35
37
  // formik resets all error on each blur (with our settings)
@@ -51,7 +53,7 @@ export default function Form(_a) {
51
53
  _a)));
52
54
  },
53
55
  }); }, [serverErrors]);
54
- 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: className, style: style }, { children: [_jsx(FocusError, { serverErrors: serverErrorContextValue }), _jsx(FormBasedPreventNavigation, { ignoreLostChanges: ignoreLostChanges }), children({
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({
55
57
  // hack for ref forwarding
56
58
  Field: Field,
57
59
  FieldArray: FieldArray,
package/es/FormActions.js CHANGED
@@ -10,12 +10,16 @@ var __assign = (this && this.__assign) || function () {
10
10
  return __assign.apply(this, arguments);
11
11
  };
12
12
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
13
+ import { FormDefaults } from './FormDefaults';
13
14
  import { useFormikContext } from 'formik';
14
15
  import SubmitFormButton from './SubmitFormButton';
15
16
  export default function FormActions(_a) {
16
17
  var allowPristineSubmit = _a.allowPristineSubmit, handleCancel = _a.handleCancel, disabled = _a.disabled;
17
18
  var isSubmitting = useFormikContext().isSubmitting;
18
- return (_jsxs(_Fragment, { children: [_jsx(SubmitFormButton, { className: "form-actions", allowPristineSubmit: allowPristineSubmit, disabled: disabled }), _jsx("button", __assign({ type: "button", className: "form-actions cancel-form-button", disabled: isSubmitting || disabled, onClick: handleCancel || goBack }, { children: "Cancel" }))] }));
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" }))] }));
19
23
  function goBack() {
20
24
  window.history.back();
21
25
  }
@@ -0,0 +1,3 @@
1
+ export declare const FormDefaults: {
2
+ cssClassPrefix: string;
3
+ };
@@ -0,0 +1 @@
1
+ export var FormDefaults = { cssClassPrefix: 'envoc-form-' };
package/es/Group.js CHANGED
@@ -11,12 +11,14 @@ var __assign = (this && this.__assign) || function () {
11
11
  };
12
12
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
13
  import classNames from 'classnames';
14
+ import { FormDefaults } from './FormDefaults';
14
15
  import FieldErrorScrollTarget from './Field/FieldErrorScrollTarget';
15
16
  /** contains standard field bits like a label, helper text, error scroll target, validation message container, etc */
16
17
  export default function Group(_a) {
18
+ var _b;
17
19
  var className = _a.className, children = _a.children, label = _a.label, helpText = _a.helpText, meta = _a.meta, input = _a.input, disabled = _a.disabled;
18
- return (_jsxs("div", __assign({ className: classNames(className, 'group', {
19
- 'is-invalid': meta.error,
20
- disabled: disabled,
21
- }) }, { children: [_jsx(FieldErrorScrollTarget, {}), meta.warning && _jsx("div", __assign({ className: "warning" }, { children: meta.warning })), _jsx("label", __assign({ htmlFor: input.id }, { children: label })), children, meta.error && _jsx("div", __assign({ className: "error" }, { children: meta.error })), helpText && _jsx("div", __assign({ className: "help" }, { children: helpText }))] })));
20
+ return (_jsxs("div", __assign({ className: classNames(className, FormDefaults.cssClassPrefix + 'group', (_b = {},
21
+ _b[FormDefaults.cssClassPrefix + 'invalid'] = meta.error,
22
+ _b[FormDefaults.cssClassPrefix + 'disabled'] = disabled,
23
+ _b)) }, { children: [_jsx(FieldErrorScrollTarget, {}), meta.warning && (_jsx("div", __assign({ className: FormDefaults.cssClassPrefix + 'warning' }, { children: meta.warning }))), _jsx("label", __assign({ htmlFor: input.id }, { children: label })), children, meta.error && (_jsx("div", __assign({ className: FormDefaults.cssClassPrefix + 'error' }, { children: meta.error }))), helpText && (_jsx("div", __assign({ className: FormDefaults.cssClassPrefix + 'help' }, { children: helpText })))] })));
22
24
  }
@@ -24,10 +24,11 @@ import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
24
24
  import React from 'react';
25
25
  import classNames from 'classnames';
26
26
  import InputGroupWithRef from './InputGroup';
27
+ import { FormDefaults } from '../FormDefaults';
27
28
  function IconInputGroup(_a, ref) {
28
29
  var icon = _a.icon, className = _a.className, rest = __rest(_a, ["icon", "className"]);
29
30
  var input = rest.input;
30
- return (_jsx(_Fragment, { children: _jsx(InputGroupWithRef, __assign({ icon: icon, ref: ref, className: classNames(className, 'icon-input-group'), value: input.value || '', onChange: function (e) {
31
+ return (_jsx(_Fragment, { children: _jsx(InputGroupWithRef, __assign({ icon: icon, ref: ref, className: classNames(className, FormDefaults.cssClassPrefix + 'icon-input-group'), value: input.value || '', onChange: function (e) {
31
32
  if (!e.target.value) {
32
33
  input.onChange(undefined);
33
34
  }
@@ -24,10 +24,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
24
24
  import React from 'react';
25
25
  import classNames from 'classnames';
26
26
  import Group from '../Group';
27
+ import { FormDefaults } from '../FormDefaults';
27
28
  /** generic controlled <input/> wrapped by a Group */
28
29
  function InputGroup(_a, ref) {
29
30
  var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, disabled = _a.disabled, onChange = _a.onChange, value = _a.value, icon = _a.icon, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "disabled", "onChange", "value", "icon"]);
30
- return (_jsxs(Group, __assign({ input: input, meta: meta, disabled: disabled, label: label, helpText: helpText, className: classNames(className, 'input-group') }, { children: [icon, _jsx("input", __assign({}, input, rest, { value: value, onChange: onChange, ref: ref, className: classNames(className, 'input-group') }))] })));
31
+ return (_jsxs(Group, __assign({ input: input, meta: meta, disabled: disabled, label: label, helpText: helpText, className: classNames(className, FormDefaults.cssClassPrefix + 'input-group') }, { children: [icon, _jsx("input", __assign({}, input, rest, { value: value, onChange: onChange, ref: ref, className: classNames(className, FormDefaults.cssClassPrefix + 'input-group') }))] })));
31
32
  }
32
33
  var InputGroupWithRef = React.forwardRef(InputGroup);
33
34
  export default InputGroupWithRef;
@@ -24,11 +24,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
24
24
  import React from 'react';
25
25
  import classNames from 'classnames';
26
26
  import InputGroup from './InputGroup';
27
+ import { FormDefaults } from '../FormDefaults';
27
28
  function MoneyInputGroup(_a, ref) {
28
29
  var parseFunc = _a.parseFunc, className = _a.className, rest = __rest(_a, ["parseFunc", "className"]);
29
30
  var effectiveParse = parseFunc !== null && parseFunc !== void 0 ? parseFunc : parseFloat;
30
31
  var input = rest.input;
31
- return (_jsx(InputGroup, __assign({ ref: ref, step: 0.01, min: 0 }, rest, { type: "number", className: classNames(className, 'money-group'), value: input.value || '', onChange: function (e) {
32
+ return (_jsx(InputGroup, __assign({ ref: ref, step: 0.01, min: 0 }, rest, { type: "number", className: classNames(className, FormDefaults.cssClassPrefix + 'money-group'), value: input.value || '', onChange: function (e) {
32
33
  if (!e.target.value) {
33
34
  input.onChange(undefined);
34
35
  }
@@ -24,11 +24,12 @@ import { jsx as _jsx } from "react/jsx-runtime";
24
24
  import React from 'react';
25
25
  import classNames from 'classnames';
26
26
  import InputGroup from './InputGroup';
27
+ import { FormDefaults } from '../FormDefaults';
27
28
  function NumberInputGroup(_a, ref) {
28
29
  var parseFunc = _a.parseFunc, className = _a.className, rest = __rest(_a, ["parseFunc", "className"]);
29
30
  var effectiveParse = parseFunc !== null && parseFunc !== void 0 ? parseFunc : parseFloat;
30
31
  var input = rest.input;
31
- return (_jsx(InputGroup, __assign({ ref: ref }, rest, { type: "number", className: classNames(className, 'number-group'), value: input.value || '', onChange: function (e) {
32
+ return (_jsx(InputGroup, __assign({ ref: ref }, rest, { type: "number", className: classNames(className, FormDefaults.cssClassPrefix + 'number-group'), value: input.value || '', onChange: function (e) {
32
33
  if (!e.target.value) {
33
34
  input.onChange(undefined);
34
35
  }
@@ -24,10 +24,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
24
24
  import React from 'react';
25
25
  import classNames from 'classnames';
26
26
  import InputGroup from './InputGroup';
27
+ import { FormDefaults } from '../FormDefaults';
27
28
  function StringInputGroup(_a, ref) {
28
29
  var className = _a.className, rest = __rest(_a, ["className"]);
29
30
  var input = rest.input;
30
- return (_jsx(InputGroup, __assign({ ref: ref }, rest, { className: classNames(className, 'string-group'), value: input.value || '', onChange: function (e) {
31
+ return (_jsx(InputGroup, __assign({ ref: ref }, rest, { className: classNames(className, FormDefaults.cssClassPrefix + 'string-group'), value: input.value || '', onChange: function (e) {
31
32
  if (!e.target.value) {
32
33
  input.onChange(undefined);
33
34
  }
@@ -24,8 +24,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
24
24
  import { default as ReactSelect } from 'react-select';
25
25
  import classNames from 'classnames';
26
26
  import Group from '../Group';
27
+ import { FormDefaults } from '../FormDefaults';
27
28
  // TODO: we could also name this "ReactSelectGroup" or similar but the types are strongly defined now so kept the names consistent
28
29
  export default function SelectGroup(_a) {
30
+ var _b;
29
31
  var input = _a.input, meta = _a.meta, className = _a.className, options = _a.options, multiple = _a.multiple, placeholder = _a.placeholder, rest = __rest(_a, ["input", "meta", "className", "options", "multiple", "placeholder"]);
30
32
  var effectiveOptions = !options
31
33
  ? []
@@ -40,14 +42,17 @@ export default function SelectGroup(_a) {
40
42
  ? options.resp
41
43
  : [];
42
44
  var isLoading = (options && 'loading' in options && options.loading) || false;
43
- return (_jsx(Group, __assign({}, rest, { input: input, meta: meta, className: classNames(className, { multiple: multiple, 'is-loading': isLoading }, 'select-group') }, { children: _jsx(ReactSelect, { inputId: input.id, isMulti: multiple, options: effectiveOptions, onBlur: input.onBlur, value: getValue(), onChange: function (e) {
45
+ return (_jsx(Group, __assign({}, rest, { input: input, meta: meta, className: classNames(className, (_b = {},
46
+ _b[FormDefaults.cssClassPrefix + 'multiple'] = multiple,
47
+ _b[FormDefaults.cssClassPrefix + 'loading'] = isLoading,
48
+ _b), FormDefaults.cssClassPrefix + 'select-group') }, { children: _jsx(ReactSelect, { inputId: input.id, isMulti: multiple, options: effectiveOptions, onBlur: input.onBlur, value: getValue(), onChange: function (e) {
44
49
  if (multiple === true) {
45
50
  input.onChange(e === null || e === void 0 ? void 0 : e.map(function (x) { return x.value; }));
46
51
  }
47
52
  else {
48
53
  input.onChange(e === null || e === void 0 ? void 0 : e.value);
49
54
  }
50
- }, getOptionLabel: function (option) { var _a; return (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : ''; }, className: classNames(className, 'select-group'), classNamePrefix: "react-select", menuPortalTarget: document.body, menuPlacement: "auto", placeholder: placeholder }) })));
55
+ }, getOptionLabel: function (option) { var _a; return (_a = option === null || option === void 0 ? void 0 : option.label) !== null && _a !== void 0 ? _a : ''; }, className: classNames(className, FormDefaults.cssClassPrefix + 'select-group'), classNamePrefix: "react-select", menuPortalTarget: document.body, menuPlacement: "auto", placeholder: placeholder }) })));
51
56
  function getValue() {
52
57
  if (multiple) {
53
58
  return effectiveOptions.filter(function (o) {
@@ -13,10 +13,11 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
13
13
  import classNames from 'classnames';
14
14
  import { useFormikContext } from 'formik';
15
15
  import SubmitFormButton from './SubmitFormButton';
16
+ import { FormDefaults } from './FormDefaults';
16
17
  export default function StandardFormActions(_a) {
17
18
  var allowPristineSubmit = _a.allowPristineSubmit, handleCancel = _a.handleCancel;
18
19
  var isSubmitting = useFormikContext().isSubmitting;
19
- return (_jsxs(_Fragment, { children: [_jsx(SubmitFormButton, { allowPristineSubmit: allowPristineSubmit }), "\u00A0", _jsx("button", __assign({ className: classNames('standard-form-actions-cancel-button'), type: "button", disabled: isSubmitting, onClick: handleCancel || goBack }, { children: "Cancel" }))] }));
20
+ return (_jsxs(_Fragment, { children: [_jsx(SubmitFormButton, { allowPristineSubmit: allowPristineSubmit }), "\u00A0", _jsx("button", __assign({ className: classNames(FormDefaults.cssClassPrefix + 'standard-form-actions-cancel-button'), type: "button", disabled: isSubmitting, onClick: handleCancel || goBack }, { children: "Cancel" }))] }));
20
21
  function goBack() {
21
22
  window.history.back();
22
23
  }
@@ -24,6 +24,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
24
24
  import React from 'react';
25
25
  import classNames from 'classnames';
26
26
  import { useFormikContext } from 'formik';
27
+ import { FormDefaults } from './FormDefaults';
27
28
  function SubmitFormButton(_a, ref) {
28
29
  var allowPristineSubmit = _a.allowPristineSubmit, children = _a.children, disabled = _a.disabled, title = _a.title, className = _a.className, props = __rest(_a, ["allowPristineSubmit", "children", "disabled", "title", "className"]);
29
30
  var _b = useFormikContext(), isSubmitting = _b.isSubmitting, dirty = _b.dirty;
@@ -32,6 +33,6 @@ function SubmitFormButton(_a, ref) {
32
33
  ? 'Loading, please wait...'
33
34
  : preventSubmit
34
35
  ? "You haven't made any changes"
35
- : '', className: classNames('submit-form-button', className) }, { children: children || 'Submit' })));
36
+ : '', className: classNames(FormDefaults.cssClassPrefix + 'submit-form-button', className) }, { children: children || 'Submit' })));
36
37
  }
37
38
  export default React.forwardRef(SubmitFormButton);
@@ -24,10 +24,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
24
24
  import React from 'react';
25
25
  import classNames from 'classnames';
26
26
  import Group from '../Group';
27
+ import { FormDefaults } from '../FormDefaults';
27
28
  /** generic controlled <textarea/> wrapped by a Group */
28
29
  function TextAreaGroup(_a, ref) {
29
30
  var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, disabled = _a.disabled, icon = _a.icon, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "disabled", "icon"]);
30
- return (_jsxs(Group, __assign({ input: input, meta: meta, disabled: disabled, label: label, helpText: helpText, className: classNames(className, 'text-area-group') }, { children: [icon, _jsx("textarea", __assign({}, input, rest, { value: input.value, onChange: function (val) { return input.onChange(val.target.value); }, ref: ref, className: classNames(className, 'text-area-group') }))] })));
31
+ return (_jsxs(Group, __assign({ input: input, meta: meta, disabled: disabled, label: label, helpText: helpText, className: classNames(className, FormDefaults.cssClassPrefix + 'text-area-group') }, { children: [icon, _jsx("textarea", __assign({}, input, rest, { value: input.value, onChange: function (val) { return input.onChange(val.target.value); }, ref: ref, className: classNames(className, FormDefaults.cssClassPrefix + 'text-area-group') }))] })));
31
32
  }
32
33
  var TextAreaGroupWithRef = React.forwardRef(TextAreaGroup);
33
34
  export default TextAreaGroupWithRef;
package/es/index.d.ts CHANGED
@@ -37,6 +37,7 @@ export { default as FormActions } from './FormActions';
37
37
  export type { FormActionsProps as FormActionsProps } from './FormActions';
38
38
  export { default as StandardFormActions } from './StandardFormActions';
39
39
  export type { StandardFormActionsProps as StandardFormActionsProps } from './StandardFormActions';
40
+ export { FormDefaults } from './FormDefaults';
40
41
  export { default as Group } from './Group';
41
42
  export type { GroupProps as GroupProps } from './Group';
42
43
  export { default as IconInputGroup } from './Input/IconInputGroup';
package/es/index.js CHANGED
@@ -26,6 +26,8 @@ export { default as Form } from './Form/Form';
26
26
  export { ServerErrorContext } from './Form/ServerErrorContext';
27
27
  export { default as FormActions } from './FormActions';
28
28
  export { default as StandardFormActions } from './StandardFormActions';
29
+ // FormDefaults
30
+ export { FormDefaults } from './FormDefaults';
29
31
  // Input
30
32
  export { default as Group } from './Group';
31
33
  export { default as IconInputGroup } from './Input/IconInputGroup';
@@ -28,12 +28,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
28
28
  var jsx_runtime_1 = require("react/jsx-runtime");
29
29
  var classnames_1 = __importDefault(require("classnames"));
30
30
  var envoc_request_1 = require("envoc-request");
31
+ var FormDefaults_1 = require("../FormDefaults");
31
32
  // TODO: ask about how we should use 'children'
32
33
  function ConfirmBaseForm(_a) {
33
34
  var handleCancel = _a.handleCancel, request = _a.request, style = _a.style, title = _a.title, children = _a.children, props = __rest(_a, ["handleCancel", "request", "style", "title", "children"]);
34
35
  var webRequest = (0, envoc_request_1.useAxiosRequest)(Object.assign({}, request, { autoExecute: false }));
35
36
  var onCancel = handleCancel !== null && handleCancel !== void 0 ? handleCancel : goBack;
36
- return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: __assign({ textAlign: 'center' }, style) }, props, { children: [(0, jsx_runtime_1.jsx)("h3", { children: title }), children, (0, jsx_runtime_1.jsx)("button", __assign({ className: (0, classnames_1.default)('confirm-base-form-yes-button'), type: "button", onClick: webRequest.submitRequest }, { children: "Yes" })), (0, jsx_runtime_1.jsx)("button", __assign({ className: (0, classnames_1.default)('confirm-base-form-cancel-button'), type: "button", onClick: onCancel }, { children: "Cancel" }))] })));
37
+ return ((0, jsx_runtime_1.jsxs)("div", __assign({ style: __assign({ textAlign: 'center' }, style) }, props, { children: [(0, jsx_runtime_1.jsx)("h3", { children: title }), children, (0, jsx_runtime_1.jsx)("button", __assign({ className: (0, classnames_1.default)(FormDefaults_1.FormDefaults.cssClassPrefix + 'confirm-base-form-yes-button'), type: "button", onClick: webRequest.submitRequest }, { children: "Yes" })), (0, jsx_runtime_1.jsx)("button", __assign({ className: (0, classnames_1.default)(FormDefaults_1.FormDefaults.cssClassPrefix + 'confirm-base-form-cancel-button'), type: "button", onClick: onCancel }, { children: "Cancel" }))] })));
37
38
  function goBack() {
38
39
  window.history.back();
39
40
  }
@@ -32,10 +32,11 @@ var entry_nostyle_1 = __importDefault(require("react-date-picker/dist/entry.nost
32
32
  var classnames_1 = __importDefault(require("classnames"));
33
33
  var parseISO_1 = __importDefault(require("date-fns/parseISO"));
34
34
  var Group_1 = __importDefault(require("../Group"));
35
+ var FormDefaults_1 = require("../FormDefaults");
35
36
  function DatePickerGroup(_a) {
36
37
  var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, disabled = _a.disabled, convert = _a.convert, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "disabled", "convert"]);
37
38
  var _b = (0, react_1.useState)(null), displayDate = _b[0], setDisplayDate = _b[1];
38
- return ((0, jsx_runtime_1.jsx)(Group_1.default, __assign({ input: input, meta: meta, label: label, helpText: helpText, className: (0, classnames_1.default)(className, 'date-picker'), disabled: disabled }, { children: (0, jsx_runtime_1.jsx)(entry_nostyle_1.default, __assign({}, rest, { className: (0, classnames_1.default)('date-picker', className), value: displayDate, onChange: handleChange })) })));
39
+ return ((0, jsx_runtime_1.jsx)(Group_1.default, __assign({ input: input, meta: meta, label: label, helpText: helpText, className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'date-picker'), disabled: disabled }, { children: (0, jsx_runtime_1.jsx)(entry_nostyle_1.default, __assign({}, rest, { className: (0, classnames_1.default)(FormDefaults_1.FormDefaults.cssClassPrefix + 'date-picker', className), value: displayDate, onChange: handleChange })) })));
39
40
  function handleChange(e) {
40
41
  var onChange = input.onChange;
41
42
  if (onChange === null) {
@@ -66,7 +67,9 @@ function DatePickerGroup(_a) {
66
67
  }
67
68
  exports.default = DatePickerGroup;
68
69
  function convertToTimeZoneInsensitiveISOString(date) {
69
- var year = new Intl.DateTimeFormat('en', { year: 'numeric' }).format(date);
70
+ var year = new Intl.DateTimeFormat('en', { year: 'numeric' })
71
+ .format(date)
72
+ .padStart(4, '0');
70
73
  var month = new Intl.DateTimeFormat('en', { month: '2-digit' }).format(date);
71
74
  var day = new Intl.DateTimeFormat('en', { day: '2-digit' }).format(date);
72
75
  return "".concat(year, "-").concat(month, "-").concat(day, "T00:00:00.000Z");
@@ -44,7 +44,7 @@ function Field(_a, ref) {
44
44
  }), input = _b[0], meta = _b[1];
45
45
  // a bit of a hack so JSX is happy with us
46
46
  var Wrapped = Component;
47
- return ((0, jsx_runtime_1.jsx)(FieldNameContext_1.FieldNameContext.Provider, __assign({ value: input.name }, { children: (0, jsx_runtime_1.jsx)(Wrapped, __assign({}, rest, { ref: ref, id: input.id, input: input, meta: meta })) })));
47
+ return ((0, jsx_runtime_1.jsx)(FieldNameContext_1.FieldNameContext.Provider, __assign({ value: input.name }, { children: (0, jsx_runtime_1.jsx)(Wrapped, __assign({}, rest, { ref: ref, id: input.id, input: input, meta: meta, disabled: disabled })) })));
48
48
  }
49
49
  // hack to get forwarded refs to work
50
50
  var FieldWithRef = react_1.default.forwardRef(Field);
@@ -39,26 +39,29 @@ var classnames_1 = __importDefault(require("classnames"));
39
39
  var Field_1 = __importDefault(require("../Field/Field"));
40
40
  var FieldNameContext_1 = require("../Field/FieldNameContext");
41
41
  var useStandardField_1 = __importDefault(require("../Field/useStandardField"));
42
+ var FormDefaults_1 = require("../FormDefaults");
42
43
  function FieldArray(_a) {
44
+ var _b;
43
45
  var name = _a.name, label = _a.label, validate = _a.validate, disabled = _a.disabled, children = _a.children, rest = __rest(_a, ["name", "label", "validate", "disabled", "children"]);
44
- var _b = (0, useStandardField_1.default)({
46
+ var _c = (0, useStandardField_1.default)({
45
47
  name: String(name),
46
48
  validate: validate,
47
49
  disabled: disabled,
48
- }), input = _b[0], meta = _b[1];
50
+ }), input = _c[0], meta = _c[1];
49
51
  var values = !input.value
50
52
  ? []
51
53
  : Array.isArray(input.value)
52
54
  ? input.value
53
55
  : [];
54
- return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "field-array" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "field-array-header" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "field-array-title" }, { children: label })), (0, jsx_runtime_1.jsx)("button", __assign({ className: (0, classnames_1.default)('add-array-item-button', { disabled: disabled }), title: "Add Item", type: "button", onClick: addItem }, { children: "+" }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "field-array-body" }, { children: values.map(function (value, index) {
56
+ return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: FormDefaults_1.FormDefaults.cssClassPrefix + 'field-array' }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: FormDefaults_1.FormDefaults.cssClassPrefix + 'field-array-header' }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: FormDefaults_1.FormDefaults.cssClassPrefix + 'field-array-title' }, { children: label })), (0, jsx_runtime_1.jsx)("button", __assign({ className: (0, classnames_1.default)(FormDefaults_1.FormDefaults.cssClassPrefix + 'add-array-item-button', (_b = {}, _b[FormDefaults_1.FormDefaults.cssClassPrefix + 'disabled'] = disabled, _b)), title: "Add Item", type: "button", onClick: addItem }, { children: "+" }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: FormDefaults_1.FormDefaults.cssClassPrefix + 'field-array-body' }, { children: values.map(function (value, index) {
57
+ var _a, _b;
55
58
  var itemName = "".concat(input.name, "[").concat(index, "]");
56
- return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)('field-array-item', {
57
- removed: value.isDeleted,
58
- }), role: "listitem" }, { children: [(0, jsx_runtime_1.jsx)(FieldNameContext_1.FieldNameContext.Provider, __assign({ value: itemName }, { children: children({
59
+ return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)(FormDefaults_1.FormDefaults.cssClassPrefix + 'field-array-item', (_a = {},
60
+ _a[FormDefaults_1.FormDefaults.cssClassPrefix + 'removed'] = value.isDeleted,
61
+ _a)), role: "listitem" }, { children: [(0, jsx_runtime_1.jsx)(FieldNameContext_1.FieldNameContext.Provider, __assign({ value: itemName }, { children: children({
59
62
  Field: Field_1.default,
60
63
  FieldArray: FieldArray,
61
- }) })), (0, jsx_runtime_1.jsx)("button", __assign({ className: (0, classnames_1.default)('remove-array-item-button', { disabled: disabled }), type: "button", title: "Remove Item", onClick: function () { return removeItem(value); } }, { children: "-" }))] }), (value && value['form-input-array-key']) ||
64
+ }) })), (0, jsx_runtime_1.jsx)("button", __assign({ className: (0, classnames_1.default)(FormDefaults_1.FormDefaults.cssClassPrefix + 'remove-array-item-button', (_b = {}, _b[FormDefaults_1.FormDefaults.cssClassPrefix + 'disabled'] = disabled, _b)), type: "button", title: "Remove Item", onClick: function () { return removeItem(value); } }, { children: "-" }))] }), (value && value['form-input-array-key']) ||
62
65
  (value && value['id']) ||
63
66
  itemName));
64
67
  }) }))] })));
@@ -30,9 +30,11 @@ var react_1 = __importDefault(require("react"));
30
30
  var classnames_1 = __importDefault(require("classnames"));
31
31
  var FileList_1 = __importDefault(require("./FileList"));
32
32
  var Group_1 = __importDefault(require("../Group"));
33
+ var FormDefaults_1 = require("../FormDefaults");
33
34
  function FileGroup(_a, ref) {
35
+ var _b;
34
36
  var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, multiple = _a.multiple, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "multiple"]);
35
- return ((0, jsx_runtime_1.jsxs)(Group_1.default, __assign({ input: input, meta: meta, label: label, helpText: helpText, className: (0, classnames_1.default)(className, { multiple: multiple }, 'file-group') }, { children: [(0, jsx_runtime_1.jsx)("input", __assign({}, input, rest, { multiple: multiple, onChange: function (e) {
37
+ return ((0, jsx_runtime_1.jsxs)(Group_1.default, __assign({ input: input, meta: meta, label: label, helpText: helpText, className: (0, classnames_1.default)(className, (_b = {}, _b[FormDefaults_1.FormDefaults.cssClassPrefix + 'multiple'] = multiple, _b), FormDefaults_1.FormDefaults.cssClassPrefix + 'file-group') }, { children: [(0, jsx_runtime_1.jsx)("input", __assign({}, input, rest, { multiple: multiple, onChange: function (e) {
36
38
  var _a, _b;
37
39
  if (!((_b = (_a = e === null || e === void 0 ? void 0 : e.target) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b.length)) {
38
40
  input.onChange(undefined);
@@ -49,7 +51,7 @@ function FileGroup(_a, ref) {
49
51
  input.onChange(files);
50
52
  }
51
53
  }
52
- }, value: undefined, ref: ref, type: "file", className: (0, classnames_1.default)(className, 'file-group') })), (0, jsx_runtime_1.jsx)(FileList_1.default, { files: input.value })] })));
54
+ }, value: undefined, ref: ref, type: "file", className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'file-group') })), (0, jsx_runtime_1.jsx)(FileList_1.default, { files: input.value })] })));
53
55
  }
54
56
  var FileGroupWithRef = react_1.default.forwardRef(FileGroup);
55
57
  exports.default = FileGroupWithRef;
@@ -12,9 +12,10 @@ var __assign = (this && this.__assign) || function () {
12
12
  };
13
13
  Object.defineProperty(exports, "__esModule", { value: true });
14
14
  var jsx_runtime_1 = require("react/jsx-runtime");
15
+ var FormDefaults_1 = require("../FormDefaults");
15
16
  function FileList(_a) {
16
17
  var files = _a.files, rejectedFiles = _a.rejectedFiles;
17
- return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "file-list" }, { children: !files ? null : Array.isArray(files) ? (files.map(function (x, i) { return (0, jsx_runtime_1.jsx)(File, { file: x }, i); })) : ((0, jsx_runtime_1.jsx)(File, { file: files })) })));
18
+ return ((0, jsx_runtime_1.jsx)("div", __assign({ className: FormDefaults_1.FormDefaults.cssClassPrefix + 'file-list' }, { children: !files ? null : Array.isArray(files) ? (files.map(function (x, i) { return (0, jsx_runtime_1.jsx)(File, { file: x }, i); })) : ((0, jsx_runtime_1.jsx)(File, { file: files })) })));
18
19
  }
19
20
  exports.default = FileList;
20
21
  function File(_a) {
package/lib/Form/Form.js CHANGED
@@ -27,6 +27,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
27
27
  Object.defineProperty(exports, "__esModule", { value: true });
28
28
  var jsx_runtime_1 = require("react/jsx-runtime");
29
29
  var react_1 = require("react");
30
+ var classnames_1 = __importDefault(require("classnames"));
30
31
  var formik_1 = require("formik");
31
32
  var FocusError_1 = __importDefault(require("./FocusError"));
32
33
  var FormBasedPreventNavigation_1 = __importDefault(require("./FormBasedPreventNavigation"));
@@ -35,6 +36,7 @@ var Field_1 = __importDefault(require("../Field/Field"));
35
36
  var FieldArray_1 = __importDefault(require("../FieldArray/FieldArray"));
36
37
  var objectContainsNonSerializableProperty_1 = __importDefault(require("../utils/objectContainsNonSerializableProperty"));
37
38
  var objectToFormData_1 = __importDefault(require("../utils/objectToFormData"));
39
+ var FormDefaults_1 = require("../FormDefaults");
38
40
  function Form(_a) {
39
41
  var children = _a.children, className = _a.className, style = _a.style, ignoreLostChanges = _a.ignoreLostChanges, onSubmit = _a.onSubmit, initialValues = _a.initialValues, props = __rest(_a, ["children", "className", "style", "ignoreLostChanges", "onSubmit", "initialValues"]);
40
42
  // formik resets all error on each blur (with our settings)
@@ -56,7 +58,7 @@ function Form(_a) {
56
58
  _a)));
57
59
  },
58
60
  }); }, [serverErrors]);
59
- return ((0, jsx_runtime_1.jsx)(formik_1.Formik, __assign({ validateOnChange: false, validateOnBlur: true, validateOnMount: false, initialValues: initialValues || {}, onSubmit: handleSubmit }, props, { children: (0, jsx_runtime_1.jsx)(ServerErrorContext_1.ServerErrorContext.Provider, __assign({ value: serverErrorContextValue }, { children: (0, jsx_runtime_1.jsxs)(formik_1.Form, __assign({ className: className, style: style }, { children: [(0, jsx_runtime_1.jsx)(FocusError_1.default, { serverErrors: serverErrorContextValue }), (0, jsx_runtime_1.jsx)(FormBasedPreventNavigation_1.default, { ignoreLostChanges: ignoreLostChanges }), children({
61
+ return ((0, jsx_runtime_1.jsx)(formik_1.Formik, __assign({ validateOnChange: false, validateOnBlur: true, validateOnMount: false, initialValues: initialValues || {}, onSubmit: handleSubmit }, props, { children: (0, jsx_runtime_1.jsx)(ServerErrorContext_1.ServerErrorContext.Provider, __assign({ value: serverErrorContextValue }, { children: (0, jsx_runtime_1.jsxs)(formik_1.Form, __assign({ className: (0, classnames_1.default)(className, FormDefaults_1.FormDefaults.cssClassPrefix + 'form'), style: style }, { children: [(0, jsx_runtime_1.jsx)(FocusError_1.default, { serverErrors: serverErrorContextValue }), (0, jsx_runtime_1.jsx)(FormBasedPreventNavigation_1.default, { ignoreLostChanges: ignoreLostChanges }), children({
60
62
  // hack for ref forwarding
61
63
  Field: Field_1.default,
62
64
  FieldArray: FieldArray_1.default,
@@ -15,12 +15,16 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
17
  var jsx_runtime_1 = require("react/jsx-runtime");
18
+ var FormDefaults_1 = require("./FormDefaults");
18
19
  var formik_1 = require("formik");
19
20
  var SubmitFormButton_1 = __importDefault(require("./SubmitFormButton"));
20
21
  function FormActions(_a) {
21
22
  var allowPristineSubmit = _a.allowPristineSubmit, handleCancel = _a.handleCancel, disabled = _a.disabled;
22
23
  var isSubmitting = (0, formik_1.useFormikContext)().isSubmitting;
23
- return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SubmitFormButton_1.default, { className: "form-actions", allowPristineSubmit: allowPristineSubmit, disabled: disabled }), (0, jsx_runtime_1.jsx)("button", __assign({ type: "button", className: "form-actions cancel-form-button", disabled: isSubmitting || disabled, onClick: handleCancel || goBack }, { children: "Cancel" }))] }));
24
+ return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SubmitFormButton_1.default, { className: FormDefaults_1.FormDefaults.cssClassPrefix + 'form-actions', allowPristineSubmit: allowPristineSubmit, disabled: disabled }), (0, jsx_runtime_1.jsx)("button", __assign({ type: "button", className: FormDefaults_1.FormDefaults.cssClassPrefix +
25
+ 'form-actions ' +
26
+ FormDefaults_1.FormDefaults.cssClassPrefix +
27
+ 'cancel-form-button', disabled: isSubmitting || disabled, onClick: handleCancel || goBack }, { children: "Cancel" }))] }));
24
28
  function goBack() {
25
29
  window.history.back();
26
30
  }
@@ -0,0 +1,3 @@
1
+ export declare const FormDefaults: {
2
+ cssClassPrefix: string;
3
+ };
@@ -0,0 +1,4 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.FormDefaults = void 0;
4
+ exports.FormDefaults = { cssClassPrefix: 'envoc-form-' };