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.
- package/es/ConfirmBaseForm/ConfirmBaseForm.js +2 -1
- package/es/DatePicker/DatePickerGroup.js +5 -2
- package/es/Field/Field.js +1 -1
- package/es/FieldArray/FieldArray.js +10 -7
- package/es/File/FileGroup.js +4 -2
- package/es/File/FileList.js +2 -1
- package/es/Form/Form.js +3 -1
- package/es/FormActions.js +5 -1
- package/es/FormDefaults.d.ts +3 -0
- package/es/FormDefaults.js +1 -0
- package/es/Group.js +6 -4
- package/es/Input/IconInputGroup.js +2 -1
- package/es/Input/InputGroup.js +2 -1
- package/es/Input/MoneyInputGroup.js +2 -1
- package/es/Input/NumberInputGroup.js +2 -1
- package/es/Input/StringInputGroup.js +2 -1
- package/es/Select/SelectGroup.js +7 -2
- package/es/StandardFormActions.js +2 -1
- package/es/SubmitFormButton.js +2 -1
- package/es/TextArea/TextAreaGroup.js +2 -1
- package/es/index.d.ts +1 -0
- package/es/index.js +2 -0
- package/lib/ConfirmBaseForm/ConfirmBaseForm.js +2 -1
- package/lib/DatePicker/DatePickerGroup.js +5 -2
- package/lib/Field/Field.js +1 -1
- package/lib/FieldArray/FieldArray.js +10 -7
- package/lib/File/FileGroup.js +4 -2
- package/lib/File/FileList.js +2 -1
- package/lib/Form/Form.js +3 -1
- package/lib/FormActions.js +5 -1
- package/lib/FormDefaults.d.ts +3 -0
- package/lib/FormDefaults.js +4 -0
- package/lib/Group.js +6 -4
- package/lib/Input/IconInputGroup.js +2 -1
- package/lib/Input/InputGroup.js +2 -1
- package/lib/Input/MoneyInputGroup.js +2 -1
- package/lib/Input/NumberInputGroup.js +2 -1
- package/lib/Input/StringInputGroup.js +2 -1
- package/lib/Select/SelectGroup.js +7 -2
- package/lib/StandardFormActions.js +2 -1
- package/lib/SubmitFormButton.js +2 -1
- package/lib/TextArea/TextAreaGroup.js +2 -1
- package/lib/index.d.ts +1 -0
- package/lib/index.js +4 -1
- package/package.json +2 -2
- package/src/AddressInput/__snapshots__/AddressInput.test.tsx.snap +11 -10
- package/src/ConfirmBaseForm/ConfirmBaseForm.tsx +7 -2
- package/src/ConfirmBaseForm/__snapshots__/ConfirmBaseForm.test.tsx.snap +2 -2
- package/src/ConfirmDeleteForm/__snapshots__/ConfirmDeleteForm.test.tsx.snap +2 -2
- package/src/DatePicker/DatePickerGroup.tsx +15 -4
- package/src/DatePicker/__snapshots__/DatePicker.test.tsx.snap +3 -2
- package/src/Field/Field.tsx +8 -1
- package/src/FieldArray/FieldArray.tsx +21 -9
- package/src/File/FileGroup.tsx +10 -2
- package/src/File/FileList.tsx +3 -1
- package/src/File/__snapshots__/FileGroup.test.tsx.snap +4 -3
- package/src/Form/Form.tsx +8 -1
- package/src/Form/__snapshots__/Form.test.tsx.snap +1 -0
- package/src/FormActions.tsx +8 -2
- package/src/FormDefaults.ts +1 -0
- package/src/Group.tsx +17 -6
- package/src/Input/IconInputGroup.tsx +5 -2
- package/src/Input/InputGroup.tsx +9 -2
- package/src/Input/MoneyInputGroup.tsx +5 -1
- package/src/Input/NumberInputGroup.tsx +5 -1
- package/src/Input/StringInputGroup.tsx +5 -1
- package/src/Input/__Tests__/__snapshots__/IconInputGroup.test.tsx.snap +3 -2
- package/src/Input/__Tests__/__snapshots__/MoneyInputGroup.test.tsx.snap +3 -2
- package/src/Input/__Tests__/__snapshots__/NumberInputGroup.test.tsx.snap +3 -2
- package/src/Input/__Tests__/__snapshots__/StringInputGroup.test.tsx.snap +3 -2
- package/src/Select/SelectGroup.tsx +10 -3
- package/src/Select/__tests__/__snapshots__/BooleanSelectGroup.test.tsx.snap +3 -2
- package/src/Select/__tests__/__snapshots__/NumberSelectGroup.test.tsx.snap +6 -4
- package/src/Select/__tests__/__snapshots__/StringSelectGroup.test.tsx.snap +6 -4
- package/src/StandardFormActions.tsx +4 -1
- package/src/SubmitFormButton.tsx +5 -1
- package/src/TextArea/TextAreaGroup.tsx +9 -2
- package/src/__Tests__/__snapshots__/StandardFormActions.test.tsx.snap +3 -2
- package/src/__Tests__/__snapshots__/SubmitFormButton.test.tsx.snap +2 -1
- 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' })
|
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
|
41
|
+
var _c = useStandardFormInput({
|
40
42
|
name: String(name),
|
41
43
|
validate: validate,
|
42
44
|
disabled: disabled,
|
43
|
-
}), input =
|
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:
|
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
|
53
|
-
|
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
|
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
|
}) }))] })));
|
package/es/File/FileGroup.js
CHANGED
@@ -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
|
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;
|
package/es/File/FileList.js
CHANGED
@@ -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:
|
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:
|
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 @@
|
|
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
|
-
'
|
20
|
-
disabled
|
21
|
-
|
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
|
}
|
package/es/Input/InputGroup.js
CHANGED
@@ -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
|
}
|
package/es/Select/SelectGroup.js
CHANGED
@@ -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,
|
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
|
}
|
package/es/SubmitFormButton.js
CHANGED
@@ -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' })
|
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");
|
package/lib/Field/Field.js
CHANGED
@@ -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
|
46
|
+
var _c = (0, useStandardField_1.default)({
|
45
47
|
name: String(name),
|
46
48
|
validate: validate,
|
47
49
|
disabled: disabled,
|
48
|
-
}), input =
|
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:
|
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
|
58
|
-
|
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
|
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
|
}) }))] })));
|
package/lib/File/FileGroup.js
CHANGED
@@ -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
|
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;
|
package/lib/File/FileList.js
CHANGED
@@ -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:
|
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,
|
package/lib/FormActions.js
CHANGED
@@ -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:
|
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
|
}
|