envoc-form 5.0.3 → 5.0.4-0
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/README.md +4650 -1250
- package/dist/index.cjs +21523 -0
- package/dist/index.d.ts +575 -0
- package/dist/index.js +21456 -0
- package/package.json +107 -111
- package/dist/css/envoc-form-styles.css +0 -3
- package/dist/css/envoc-form-styles.css.map +0 -1
- package/es/AddressInput/AddressInput.d.ts +0 -24
- package/es/AddressInput/AddressInput.js +0 -20
- package/es/AddressInput/UsStates.d.ts +0 -3
- package/es/AddressInput/UsStates.js +0 -53
- package/es/ConfirmBaseForm/ConfirmBaseForm.d.ts +0 -26
- package/es/ConfirmBaseForm/ConfirmBaseForm.js +0 -42
- package/es/ConfirmDeleteForm/ConfirmDeleteForm.d.ts +0 -24
- package/es/ConfirmDeleteForm/ConfirmDeleteForm.js +0 -60
- package/es/DatePicker/DatePickerGroup.d.ts +0 -13
- package/es/DatePicker/DatePickerGroup.js +0 -87
- package/es/DatePicker/DatePickerHelper.d.ts +0 -3
- package/es/DatePicker/DatePickerHelper.js +0 -1
- package/es/DatePicker/StringDateOnlyPickerGroup.d.ts +0 -9
- package/es/DatePicker/StringDateOnlyPickerGroup.js +0 -29
- package/es/DatePicker/StringDatePickerGroup.d.ts +0 -9
- package/es/DatePicker/StringDatePickerGroup.js +0 -24
- package/es/Field/CustomFieldInputProps.d.ts +0 -7
- package/es/Field/CustomFieldInputProps.js +0 -1
- package/es/Field/CustomFieldMetaProps.d.ts +0 -4
- package/es/Field/CustomFieldMetaProps.js +0 -1
- package/es/Field/Field.d.ts +0 -28
- package/es/Field/Field.js +0 -51
- package/es/Field/FieldErrorScrollTarget.d.ts +0 -2
- package/es/Field/FieldErrorScrollTarget.js +0 -12
- package/es/Field/FieldNameContext.d.ts +0 -3
- package/es/Field/FieldNameContext.js +0 -3
- package/es/Field/FieldSection.d.ts +0 -7
- package/es/Field/FieldSection.js +0 -9
- package/es/Field/InjectedFieldProps.d.ts +0 -7
- package/es/Field/InjectedFieldProps.js +0 -1
- package/es/Field/StandAloneInput.d.ts +0 -13
- package/es/Field/StandAloneInput.js +0 -50
- package/es/Field/useStandardField.d.ts +0 -21
- package/es/Field/useStandardField.js +0 -92
- package/es/FieldArray/FieldArray.d.ts +0 -24
- package/es/FieldArray/FieldArray.js +0 -77
- package/es/File/FileGroup.d.ts +0 -10
- package/es/File/FileGroup.js +0 -53
- package/es/File/FileList.d.ts +0 -5
- package/es/File/FileList.js +0 -10
- package/es/File/humanFileSize.d.ts +0 -1
- package/es/File/humanFileSize.js +0 -6
- package/es/Form/FocusError.d.ts +0 -7
- package/es/Form/FocusError.js +0 -42
- package/es/Form/Form.d.ts +0 -33
- package/es/Form/Form.js +0 -141
- package/es/Form/FormBasedPreventNavigation.d.ts +0 -6
- package/es/Form/FormBasedPreventNavigation.js +0 -20
- package/es/Form/LegacyFormBasedPreventNavigation.d.ts +0 -17
- package/es/Form/LegacyFormBasedPreventNavigation.js +0 -69
- package/es/Form/NewFormBasedPreventNavigation.d.ts +0 -14
- package/es/Form/NewFormBasedPreventNavigation.js +0 -39
- package/es/Form/ServerErrorContext.d.ts +0 -11
- package/es/Form/ServerErrorContext.js +0 -9
- package/es/FormActions.d.ts +0 -12
- package/es/FormActions.js +0 -16
- package/es/FormDefaults.d.ts +0 -4
- package/es/FormDefaults.js +0 -2
- package/es/Group.d.ts +0 -16
- package/es/Group.js +0 -14
- package/es/Input/IconInputGroup.d.ts +0 -12
- package/es/Input/IconInputGroup.js +0 -43
- package/es/Input/InputGroup.d.ts +0 -12
- package/es/Input/InputGroup.js +0 -34
- package/es/Input/MoneyInputGroup.d.ts +0 -9
- package/es/Input/MoneyInputGroup.js +0 -43
- package/es/Input/NumberInputGroup.d.ts +0 -9
- package/es/Input/NumberInputGroup.js +0 -43
- package/es/Input/PhoneNumberInputGroup.d.ts +0 -10
- package/es/Input/PhoneNumberInputGroup.js +0 -47
- package/es/Input/StringInputGroup.d.ts +0 -8
- package/es/Input/StringInputGroup.js +0 -43
- package/es/Normalization/NormalizationFunction.d.ts +0 -4
- package/es/Normalization/NormalizationFunction.js +0 -1
- package/es/Normalization/normalizers.d.ts +0 -4
- package/es/Normalization/normalizers.js +0 -32
- package/es/Select/BooleanSelectGroup.d.ts +0 -7
- package/es/Select/BooleanSelectGroup.js +0 -28
- package/es/Select/NumberSelectGroup.d.ts +0 -9
- package/es/Select/NumberSelectGroup.js +0 -21
- package/es/Select/SelectGroup.d.ts +0 -27
- package/es/Select/SelectGroup.js +0 -65
- package/es/Select/SelectGroupPropsHelper.d.ts +0 -3
- package/es/Select/SelectGroupPropsHelper.js +0 -1
- package/es/Select/StringSelectGroup.d.ts +0 -9
- package/es/Select/StringSelectGroup.js +0 -21
- package/es/StandardFormActions.d.ts +0 -11
- package/es/StandardFormActions.js +0 -14
- package/es/SubmitFormButton.d.ts +0 -10
- package/es/SubmitFormButton.js +0 -40
- package/es/TextArea/TextAreaGroup.d.ts +0 -9
- package/es/TextArea/TextAreaGroup.js +0 -35
- package/es/Validation/ValidatedApiResult.d.ts +0 -6
- package/es/Validation/ValidatedApiResult.js +0 -1
- package/es/Validation/ValidationError.d.ts +0 -5
- package/es/Validation/ValidationError.js +0 -1
- package/es/Validation/ValidationFunction.d.ts +0 -4
- package/es/Validation/ValidationFunction.js +0 -1
- package/es/Validation/validators.d.ts +0 -18
- package/es/Validation/validators.js +0 -77
- package/es/index.d.ts +0 -75
- package/es/index.js +0 -51
- package/es/setupTests.d.ts +0 -1
- package/es/setupTests.js +0 -1
- package/es/utils/objectContainsNonSerializableProperty.d.ts +0 -1
- package/es/utils/objectContainsNonSerializableProperty.js +0 -14
- package/es/utils/objectToFormData.d.ts +0 -10
- package/es/utils/objectToFormData.js +0 -77
- package/es/utils/typeChecks.d.ts +0 -8
- package/es/utils/typeChecks.js +0 -18
- package/lib/AddressInput/AddressInput.d.ts +0 -24
- package/lib/AddressInput/AddressInput.js +0 -26
- package/lib/AddressInput/UsStates.d.ts +0 -3
- package/lib/AddressInput/UsStates.js +0 -55
- package/lib/ConfirmBaseForm/ConfirmBaseForm.d.ts +0 -26
- package/lib/ConfirmBaseForm/ConfirmBaseForm.js +0 -48
- package/lib/ConfirmDeleteForm/ConfirmDeleteForm.d.ts +0 -24
- package/lib/ConfirmDeleteForm/ConfirmDeleteForm.js +0 -66
- package/lib/DatePicker/DatePickerGroup.d.ts +0 -13
- package/lib/DatePicker/DatePickerGroup.js +0 -95
- package/lib/DatePicker/DatePickerHelper.d.ts +0 -3
- package/lib/DatePicker/DatePickerHelper.js +0 -2
- package/lib/DatePicker/StringDateOnlyPickerGroup.d.ts +0 -9
- package/lib/DatePicker/StringDateOnlyPickerGroup.js +0 -35
- package/lib/DatePicker/StringDatePickerGroup.d.ts +0 -9
- package/lib/DatePicker/StringDatePickerGroup.js +0 -30
- package/lib/Field/CustomFieldInputProps.d.ts +0 -7
- package/lib/Field/CustomFieldInputProps.js +0 -2
- package/lib/Field/CustomFieldMetaProps.d.ts +0 -4
- package/lib/Field/CustomFieldMetaProps.js +0 -2
- package/lib/Field/Field.d.ts +0 -28
- package/lib/Field/Field.js +0 -56
- package/lib/Field/FieldErrorScrollTarget.d.ts +0 -2
- package/lib/Field/FieldErrorScrollTarget.js +0 -15
- package/lib/Field/FieldNameContext.d.ts +0 -3
- package/lib/Field/FieldNameContext.js +0 -9
- package/lib/Field/FieldSection.d.ts +0 -7
- package/lib/Field/FieldSection.js +0 -12
- package/lib/Field/InjectedFieldProps.d.ts +0 -7
- package/lib/Field/InjectedFieldProps.js +0 -2
- package/lib/Field/StandAloneInput.d.ts +0 -13
- package/lib/Field/StandAloneInput.js +0 -76
- package/lib/Field/useStandardField.d.ts +0 -21
- package/lib/Field/useStandardField.js +0 -95
- package/lib/FieldArray/FieldArray.d.ts +0 -24
- package/lib/FieldArray/FieldArray.js +0 -83
- package/lib/File/FileGroup.d.ts +0 -10
- package/lib/File/FileGroup.js +0 -58
- package/lib/File/FileList.d.ts +0 -5
- package/lib/File/FileList.js +0 -13
- package/lib/File/humanFileSize.d.ts +0 -1
- package/lib/File/humanFileSize.js +0 -10
- package/lib/Form/FocusError.d.ts +0 -7
- package/lib/Form/FocusError.js +0 -48
- package/lib/Form/Form.d.ts +0 -33
- package/lib/Form/Form.js +0 -147
- package/lib/Form/FormBasedPreventNavigation.d.ts +0 -6
- package/lib/Form/FormBasedPreventNavigation.js +0 -26
- package/lib/Form/LegacyFormBasedPreventNavigation.d.ts +0 -17
- package/lib/Form/LegacyFormBasedPreventNavigation.js +0 -72
- package/lib/Form/NewFormBasedPreventNavigation.d.ts +0 -14
- package/lib/Form/NewFormBasedPreventNavigation.js +0 -42
- package/lib/Form/ServerErrorContext.d.ts +0 -11
- package/lib/Form/ServerErrorContext.js +0 -15
- package/lib/FormActions.d.ts +0 -12
- package/lib/FormActions.js +0 -22
- package/lib/FormDefaults.d.ts +0 -4
- package/lib/FormDefaults.js +0 -5
- package/lib/Group.d.ts +0 -16
- package/lib/Group.js +0 -20
- package/lib/Input/IconInputGroup.d.ts +0 -12
- package/lib/Input/IconInputGroup.js +0 -48
- package/lib/Input/InputGroup.d.ts +0 -12
- package/lib/Input/InputGroup.js +0 -39
- package/lib/Input/MoneyInputGroup.d.ts +0 -9
- package/lib/Input/MoneyInputGroup.js +0 -48
- package/lib/Input/NumberInputGroup.d.ts +0 -9
- package/lib/Input/NumberInputGroup.js +0 -48
- package/lib/Input/PhoneNumberInputGroup.d.ts +0 -10
- package/lib/Input/PhoneNumberInputGroup.js +0 -52
- package/lib/Input/StringInputGroup.d.ts +0 -8
- package/lib/Input/StringInputGroup.js +0 -48
- package/lib/Normalization/NormalizationFunction.d.ts +0 -4
- package/lib/Normalization/NormalizationFunction.js +0 -2
- package/lib/Normalization/normalizers.d.ts +0 -4
- package/lib/Normalization/normalizers.js +0 -37
- package/lib/Select/BooleanSelectGroup.d.ts +0 -7
- package/lib/Select/BooleanSelectGroup.js +0 -35
- package/lib/Select/NumberSelectGroup.d.ts +0 -9
- package/lib/Select/NumberSelectGroup.js +0 -29
- package/lib/Select/SelectGroup.d.ts +0 -27
- package/lib/Select/SelectGroup.js +0 -71
- package/lib/Select/SelectGroupPropsHelper.d.ts +0 -3
- package/lib/Select/SelectGroupPropsHelper.js +0 -2
- package/lib/Select/StringSelectGroup.d.ts +0 -9
- package/lib/Select/StringSelectGroup.js +0 -29
- package/lib/StandardFormActions.d.ts +0 -11
- package/lib/StandardFormActions.js +0 -20
- package/lib/SubmitFormButton.d.ts +0 -10
- package/lib/SubmitFormButton.js +0 -45
- package/lib/TextArea/TextAreaGroup.d.ts +0 -9
- package/lib/TextArea/TextAreaGroup.js +0 -40
- package/lib/Validation/ValidatedApiResult.d.ts +0 -6
- package/lib/Validation/ValidatedApiResult.js +0 -2
- package/lib/Validation/ValidationError.d.ts +0 -5
- package/lib/Validation/ValidationError.js +0 -2
- package/lib/Validation/ValidationFunction.d.ts +0 -4
- package/lib/Validation/ValidationFunction.js +0 -2
- package/lib/Validation/validators.d.ts +0 -18
- package/lib/Validation/validators.js +0 -90
- package/lib/index.d.ts +0 -75
- package/lib/index.js +0 -119
- package/lib/setupTests.d.ts +0 -1
- package/lib/setupTests.js +0 -3
- package/lib/utils/objectContainsNonSerializableProperty.d.ts +0 -1
- package/lib/utils/objectContainsNonSerializableProperty.js +0 -17
- package/lib/utils/objectToFormData.d.ts +0 -10
- package/lib/utils/objectToFormData.js +0 -79
- package/lib/utils/typeChecks.d.ts +0 -8
- package/lib/utils/typeChecks.js +0 -29
- package/src/AddressInput/AddressInput.test.tsx +0 -27
- package/src/AddressInput/AddressInput.tsx +0 -82
- package/src/AddressInput/UsStates.ts +0 -55
- package/src/AddressInput/__snapshots__/AddressInput.test.tsx.snap +0 -182
- package/src/ConfirmBaseForm/ConfirmBaseForm.test.tsx +0 -24
- package/src/ConfirmBaseForm/ConfirmBaseForm.tsx +0 -74
- package/src/ConfirmBaseForm/__snapshots__/ConfirmBaseForm.test.tsx.snap +0 -23
- package/src/ConfirmDeleteForm/ConfirmDeleteForm.test.tsx +0 -24
- package/src/ConfirmDeleteForm/ConfirmDeleteForm.tsx +0 -87
- package/src/ConfirmDeleteForm/__snapshots__/ConfirmDeleteForm.test.tsx.snap +0 -25
- package/src/DatePicker/DatePicker.test.tsx +0 -48
- package/src/DatePicker/DatePickerGroup.tsx +0 -115
- package/src/DatePicker/DatePickerHelper.ts +0 -4
- package/src/DatePicker/StringDateOnlyPickerGroup.tsx +0 -28
- package/src/DatePicker/StringDatePickerGroup.tsx +0 -20
- package/src/DatePicker/__snapshots__/DatePicker.test.tsx.snap +0 -152
- package/src/Field/CustomFieldInputProps.ts +0 -10
- package/src/Field/CustomFieldMetaProps.ts +0 -5
- package/src/Field/Field.tsx +0 -113
- package/src/Field/FieldErrorScrollTarget.tsx +0 -12
- package/src/Field/FieldNameContext.ts +0 -6
- package/src/Field/FieldSection.tsx +0 -18
- package/src/Field/InjectedFieldProps.ts +0 -8
- package/src/Field/StandAloneInput.tsx +0 -55
- package/src/Field/useStandardField.ts +0 -125
- package/src/FieldArray/FieldArray.tsx +0 -154
- package/src/File/FileGroup.test.tsx +0 -35
- package/src/File/FileGroup.tsx +0 -85
- package/src/File/FileList.tsx +0 -21
- package/src/File/__snapshots__/FileGroup.test.tsx.snap +0 -34
- package/src/File/humanFileSize.ts +0 -8
- package/src/Form/FocusError.tsx +0 -55
- package/src/Form/Form.test.tsx +0 -14
- package/src/Form/Form.tsx +0 -237
- package/src/Form/FormBasedPreventNavigation.tsx +0 -56
- package/src/Form/LegacyFormBasedPreventNavigation.tsx +0 -77
- package/src/Form/NewFormBasedPreventNavigation.tsx +0 -59
- package/src/Form/ServerErrorContext.ts +0 -18
- package/src/Form/__snapshots__/Form.test.tsx.snap +0 -10
- package/src/FormActions.tsx +0 -47
- package/src/FormDefaults.ts +0 -2
- package/src/Group.tsx +0 -62
- package/src/Input/IconInputGroup.tsx +0 -54
- package/src/Input/InputGroup.tsx +0 -72
- package/src/Input/MoneyInputGroup.tsx +0 -50
- package/src/Input/NumberInputGroup.tsx +0 -48
- package/src/Input/PhoneNumberInputGroup.tsx +0 -45
- package/src/Input/StringInputGroup.tsx +0 -53
- package/src/Input/__Tests__/IconInputGroup.test.tsx +0 -35
- package/src/Input/__Tests__/MoneyInputGroup.test.tsx +0 -37
- package/src/Input/__Tests__/NumberInputGroup.test.tsx +0 -35
- package/src/Input/__Tests__/PhoneNumberInputGroup.test.tsx +0 -36
- package/src/Input/__Tests__/StringInputGroup.test.tsx +0 -27
- package/src/Input/__Tests__/__snapshots__/IconInputGroup.test.tsx.snap +0 -32
- package/src/Input/__Tests__/__snapshots__/MoneyInputGroup.test.tsx.snap +0 -34
- package/src/Input/__Tests__/__snapshots__/NumberInputGroup.test.tsx.snap +0 -32
- package/src/Input/__Tests__/__snapshots__/PhoneNumberInputGroup.test.tsx.snap +0 -33
- package/src/Input/__Tests__/__snapshots__/StringInputGroup.test.tsx.snap +0 -31
- package/src/Normalization/NormalizationFunction.ts +0 -4
- package/src/Normalization/normalizers.ts +0 -44
- package/src/Select/BooleanSelectGroup.tsx +0 -28
- package/src/Select/NumberSelectGroup.tsx +0 -16
- package/src/Select/SelectGroup.tsx +0 -124
- package/src/Select/SelectGroupPropsHelper.ts +0 -4
- package/src/Select/StringSelectGroup.tsx +0 -16
- package/src/Select/__tests__/BooleanSelectGroup.test.tsx +0 -35
- package/src/Select/__tests__/NumberSelectGroup.test.tsx +0 -87
- package/src/Select/__tests__/StringSelectGroup.test.tsx +0 -89
- package/src/Select/__tests__/__snapshots__/BooleanSelectGroup.test.tsx.snap +0 -98
- package/src/Select/__tests__/__snapshots__/NumberSelectGroup.test.tsx.snap +0 -195
- package/src/Select/__tests__/__snapshots__/StringSelectGroup.test.tsx.snap +0 -195
- package/src/StandardFormActions.tsx +0 -41
- package/src/SubmitFormButton.tsx +0 -54
- package/src/TextArea/TextAreaGroup.tsx +0 -64
- package/src/Validation/ValidatedApiResult.ts +0 -8
- package/src/Validation/ValidationError.ts +0 -6
- package/src/Validation/ValidationFunction.ts +0 -4
- package/src/Validation/validators.test.tsx +0 -81
- package/src/Validation/validators.ts +0 -97
- package/src/__Tests__/FormTestBase.tsx +0 -64
- package/src/__Tests__/RealisticForm.test.tsx +0 -82
- package/src/__Tests__/StandardFormActions.test.tsx +0 -17
- package/src/__Tests__/SubmitFormButton.test.tsx +0 -17
- package/src/__Tests__/__snapshots__/StandardFormActions.test.tsx.snap +0 -27
- package/src/__Tests__/__snapshots__/SubmitFormButton.test.tsx.snap +0 -20
- package/src/__Tests__/index.ts +0 -3
- package/src/_variables.scss +0 -11
- package/src/index.ts +0 -153
- package/src/react-app-env.d.ts +0 -1
- package/src/setupTests.ts +0 -1
- package/src/styles.scss +0 -0
- package/src/utils/objectContainsNonSerializableProperty.test.tsx +0 -49
- package/src/utils/objectContainsNonSerializableProperty.ts +0 -17
- package/src/utils/objectToFormData.test.tsx +0 -76
- package/src/utils/objectToFormData.ts +0 -105
- package/src/utils/typeChecks.ts +0 -18
package/es/Form/FocusError.js
DELETED
@@ -1,42 +0,0 @@
|
|
1
|
-
import { useEffect } from 'react';
|
2
|
-
import { useFormikContext } from 'formik';
|
3
|
-
import smoothscroll from 'smoothscroll-polyfill';
|
4
|
-
/** Function to scroll to the field that has an error. */
|
5
|
-
export default function FocusError(props) {
|
6
|
-
var _a = useFormikContext(), errors = _a.errors, isSubmitting = _a.isSubmitting, isValidating = _a.isValidating;
|
7
|
-
smoothscroll.polyfill();
|
8
|
-
useEffect(function () {
|
9
|
-
if (!isSubmitting || isValidating) {
|
10
|
-
return;
|
11
|
-
}
|
12
|
-
//This block handles any front-end input validation errors
|
13
|
-
//e.g. required fields, max characters, etc
|
14
|
-
var keys = Object.keys(errors);
|
15
|
-
if (keys.length > 0) {
|
16
|
-
return scrollToErrorElement(keys);
|
17
|
-
}
|
18
|
-
//This block handles any input-specific server-side errors
|
19
|
-
//e.g. improper email formatting, invalid phone number, etc.
|
20
|
-
if (props.serverErrors.errors &&
|
21
|
-
Object.values(props.serverErrors.errors).some(function (x) { return !!x; })) {
|
22
|
-
var names = Object.keys(props.serverErrors.errors);
|
23
|
-
return scrollToErrorElement(names);
|
24
|
-
}
|
25
|
-
}, [errors, isSubmitting, isValidating, props]);
|
26
|
-
return null;
|
27
|
-
}
|
28
|
-
var scrollToErrorElement = function (keys) {
|
29
|
-
var firstErrorElement = document.getElementById("".concat(keys[0].toLowerCase(), "-error-scroll-target"));
|
30
|
-
if (!firstErrorElement || !firstErrorElement.parentNode) {
|
31
|
-
return;
|
32
|
-
}
|
33
|
-
firstErrorElement = firstErrorElement.parentNode;
|
34
|
-
var headerOffset = -110;
|
35
|
-
var y = firstErrorElement.getBoundingClientRect().top +
|
36
|
-
window.pageYOffset +
|
37
|
-
headerOffset;
|
38
|
-
window.scrollTo({ top: y, behavior: 'smooth' });
|
39
|
-
setTimeout(function () {
|
40
|
-
firstErrorElement === null || firstErrorElement === void 0 ? void 0 : firstErrorElement.focus();
|
41
|
-
}, 500);
|
42
|
-
};
|
package/es/Form/Form.d.ts
DELETED
@@ -1,33 +0,0 @@
|
|
1
|
-
import { CSSProperties, ElementType } from 'react';
|
2
|
-
import { FormikHelpers } from 'formik';
|
3
|
-
import { FieldProps } from '../Field/Field';
|
4
|
-
import { FieldArrayProps } from '../FieldArray/FieldArray';
|
5
|
-
import { ValidatedApiResult } from '../Validation/ValidatedApiResult';
|
6
|
-
export type FormBuilderProp<TForm extends object> = {
|
7
|
-
Field: <TProp extends keyof TForm, TRenderComponent extends ElementType>(props: FieldProps<TForm, TProp, TRenderComponent>) => JSX.Element;
|
8
|
-
FieldArray: <TProp extends keyof TForm>(props: FieldArrayProps<TForm, TProp>) => JSX.Element;
|
9
|
-
};
|
10
|
-
export interface FullFormProps<TForm extends object> {
|
11
|
-
/** The `<Field/>` and `<FieldArray/>` components. */
|
12
|
-
children: (formBuilder: FormBuilderProp<TForm>) => JSX.Element;
|
13
|
-
/** Submission handler */
|
14
|
-
onSubmit: (formValues: TForm, formikBag: FormikHelpers<TForm>) => Promise<ValidatedApiResult>;
|
15
|
-
/** Submission handler for forms that use [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData).*/
|
16
|
-
onFormDataSubmit: (formValues: FormData, formikBag: FormikHelpers<TForm>) => Promise<ValidatedApiResult>;
|
17
|
-
className?: string;
|
18
|
-
style?: CSSProperties;
|
19
|
-
/** Prevent the user from leaving the form if they have edited any field. This is presented as a JS `alert()`. */
|
20
|
-
ignoreLostChanges?: boolean;
|
21
|
-
/** The intitial values of the form. */
|
22
|
-
initialValues?: TForm;
|
23
|
-
}
|
24
|
-
type RequireAtLeastOne<T, Keys extends keyof T = keyof T> = Pick<T, Exclude<keyof T, Keys>> & {
|
25
|
-
[K in Keys]-?: Required<Pick<T, K>> & Partial<Pick<T, Exclude<Keys, K>>>;
|
26
|
-
}[Keys];
|
27
|
-
export type FormProps<TForm extends object> = RequireAtLeastOne<FullFormProps<TForm>, 'onSubmit' | 'onFormDataSubmit'>;
|
28
|
-
/** Define a form. Uses [formik](https://formik.org/docs/overview). Usually contains many `<Field/>` components. */
|
29
|
-
declare function Form<TForm extends object>({ children, className, style, ignoreLostChanges, onSubmit, onFormDataSubmit, initialValues, ...props }: FormProps<TForm>): import("react/jsx-runtime").JSX.Element;
|
30
|
-
declare namespace Form {
|
31
|
-
var DisplayFormState: () => import("react/jsx-runtime").JSX.Element;
|
32
|
-
}
|
33
|
-
export default Form;
|
package/es/Form/Form.js
DELETED
@@ -1,141 +0,0 @@
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
2
|
-
__assign = Object.assign || function(t) {
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
-
s = arguments[i];
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
-
t[p] = s[p];
|
7
|
-
}
|
8
|
-
return t;
|
9
|
-
};
|
10
|
-
return __assign.apply(this, arguments);
|
11
|
-
};
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
13
|
-
var t = {};
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
15
|
-
t[p] = s[p];
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
19
|
-
t[p[i]] = s[p[i]];
|
20
|
-
}
|
21
|
-
return t;
|
22
|
-
};
|
23
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
24
|
-
import { useContext, useMemo, useState, } from 'react';
|
25
|
-
import classNames from 'classnames';
|
26
|
-
import { Form as FormikFormWrapper, Formik, useFormikContext, } from 'formik';
|
27
|
-
import FocusError from './FocusError';
|
28
|
-
import FormBasedPreventNavigation from './FormBasedPreventNavigation';
|
29
|
-
import { ServerErrorContext, } from './ServerErrorContext';
|
30
|
-
import Field from '../Field/Field';
|
31
|
-
import FieldArray from '../FieldArray/FieldArray';
|
32
|
-
import { FormDefaults } from '../FormDefaults';
|
33
|
-
import objectContainsNonSerializableProperty from '../utils/objectContainsNonSerializableProperty';
|
34
|
-
import objectToFormData from '../utils/objectToFormData';
|
35
|
-
/** Define a form. Uses [formik](https://formik.org/docs/overview). Usually contains many `<Field/>` components. */
|
36
|
-
export default function Form(_a) {
|
37
|
-
var children = _a.children, className = _a.className, style = _a.style, ignoreLostChanges = _a.ignoreLostChanges, onSubmit = _a.onSubmit, onFormDataSubmit = _a.onFormDataSubmit, initialValues = _a.initialValues, props = __rest(_a, ["children", "className", "style", "ignoreLostChanges", "onSubmit", "onFormDataSubmit", "initialValues"]);
|
38
|
-
// formik resets all error on each blur (with our settings)
|
39
|
-
// this means that ALL errors from the server disappear when any one field is blurred
|
40
|
-
// So, we have to store server errors ourselves
|
41
|
-
// Since we only use useStandardFormInput, that means there is only one consumer
|
42
|
-
var _b = useState({}), serverErrors = _b[0], setServerErrors = _b[1];
|
43
|
-
var serverErrorContextValue = useMemo(function () { return ({
|
44
|
-
errors: serverErrors,
|
45
|
-
getError: function (path) {
|
46
|
-
var lowered = path.toLowerCase();
|
47
|
-
return serverErrors && serverErrors[lowered];
|
48
|
-
},
|
49
|
-
setError: function (path, errorMessage) {
|
50
|
-
var _a;
|
51
|
-
var lowered = path.toLowerCase();
|
52
|
-
setServerErrors(Object.assign({}, serverErrors, (_a = {},
|
53
|
-
_a[lowered] = !errorMessage ? undefined : errorMessage,
|
54
|
-
_a)));
|
55
|
-
},
|
56
|
-
}); }, [serverErrors]);
|
57
|
-
return (_jsx(Formik, __assign({ validateOnChange: false, validateOnBlur: true, validateOnMount: false, initialValues: initialValues || {}, onSubmit: handleSubmit }, props, { children: _jsx(ServerErrorContext.Provider, { value: serverErrorContextValue, children: _jsxs(FormikFormWrapper, { className: classNames(className, FormDefaults.cssClassPrefix + 'form'), style: style, children: [_jsx(FocusError, { serverErrors: serverErrorContextValue }), _jsx(FormBasedPreventNavigation, { ignoreLostChanges: ignoreLostChanges }), children({
|
58
|
-
// hack for ref forwarding
|
59
|
-
Field: Field,
|
60
|
-
FieldArray: FieldArray,
|
61
|
-
})] }) }) })));
|
62
|
-
function handleSubmit(values, formikBag) {
|
63
|
-
var formData = undefined;
|
64
|
-
var submitFunc;
|
65
|
-
if (objectContainsNonSerializableProperty(values)) {
|
66
|
-
formData = objectToFormData(values, {
|
67
|
-
indices: true,
|
68
|
-
dotNotation: true,
|
69
|
-
allowEmptyArrays: true,
|
70
|
-
noFileListBrackets: true,
|
71
|
-
});
|
72
|
-
if (onFormDataSubmit === undefined) {
|
73
|
-
throw new Error('No onFormDataSubmit supplied for non-serializable properties.');
|
74
|
-
}
|
75
|
-
submitFunc = function () {
|
76
|
-
return onFormDataSubmit(formData !== null && formData !== void 0 ? formData : new FormData(), formikBag);
|
77
|
-
};
|
78
|
-
}
|
79
|
-
else {
|
80
|
-
if (onSubmit === undefined) {
|
81
|
-
formData = objectToFormData(values, {
|
82
|
-
indices: true,
|
83
|
-
dotNotation: true,
|
84
|
-
allowEmptyArrays: true,
|
85
|
-
noFileListBrackets: true,
|
86
|
-
});
|
87
|
-
if (onFormDataSubmit === undefined) {
|
88
|
-
// This error should never occur, as this case is covered by RequireAtLeastOne type safety
|
89
|
-
throw new Error('No onFormDataSubmit supplied for non-serializable properties.');
|
90
|
-
}
|
91
|
-
submitFunc = function () {
|
92
|
-
return onFormDataSubmit(formData !== null && formData !== void 0 ? formData : new FormData(), formikBag);
|
93
|
-
};
|
94
|
-
}
|
95
|
-
else {
|
96
|
-
submitFunc = function () { return onSubmit(values, formikBag); };
|
97
|
-
}
|
98
|
-
}
|
99
|
-
return submitFunc()
|
100
|
-
.then(function (response) {
|
101
|
-
return response;
|
102
|
-
})
|
103
|
-
.catch(function (err) {
|
104
|
-
//this is an http error
|
105
|
-
if (err &&
|
106
|
-
err.response &&
|
107
|
-
err.response.data &&
|
108
|
-
err.response.data.validationFailures) {
|
109
|
-
try {
|
110
|
-
var serverErrors_1 = err.response.data.validationFailures.reduce(function (acc, value) {
|
111
|
-
var _a;
|
112
|
-
// for simplicity, just keep it to one server error at a time per path
|
113
|
-
// don't care of the property name case changes
|
114
|
-
var path = (_a = value.propertyName) === null || _a === void 0 ? void 0 : _a.toLowerCase();
|
115
|
-
if (!!path && !!value.errorMessage) {
|
116
|
-
acc[path] = value.errorMessage;
|
117
|
-
}
|
118
|
-
return acc;
|
119
|
-
}, {});
|
120
|
-
setServerErrors(serverErrors_1);
|
121
|
-
}
|
122
|
-
catch (err) {
|
123
|
-
console.error('Failure to getErrorObject');
|
124
|
-
console.error(err);
|
125
|
-
throw err;
|
126
|
-
}
|
127
|
-
}
|
128
|
-
throw err;
|
129
|
-
});
|
130
|
-
}
|
131
|
-
}
|
132
|
-
Form.DisplayFormState = DisplayFormState;
|
133
|
-
function DisplayFormState() {
|
134
|
-
var formState = useFormikContext();
|
135
|
-
var serverErrorContext = useContext(ServerErrorContext);
|
136
|
-
return (_jsx("div", { style: { margin: '1rem 0' }, children: _jsxs("pre", { style: {
|
137
|
-
background: '#f6f8fa',
|
138
|
-
fontSize: '.65rem',
|
139
|
-
padding: '.5rem',
|
140
|
-
}, children: [serverErrorContext && serverErrorContext.errors && (_jsxs("div", { children: [_jsx("strong", { children: "serverErrors = " }), JSON.stringify(serverErrorContext.errors, null, 2)] })), _jsx("strong", { children: "formState = " }), JSON.stringify(formState, null, 2)] }) }));
|
141
|
-
}
|
@@ -1,6 +0,0 @@
|
|
1
|
-
export interface FormBasedPreventNavigationProps {
|
2
|
-
ignoreLostChanges?: boolean;
|
3
|
-
promptMessage?: string;
|
4
|
-
}
|
5
|
-
/** Prevent the user from navigating away from a form if there are any changes. */
|
6
|
-
export default function FormBasedPreventNavigation({ ignoreLostChanges, promptMessage, }: FormBasedPreventNavigationProps): import("react/jsx-runtime").JSX.Element;
|
@@ -1,20 +0,0 @@
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
2
|
-
import { useContext } from 'react';
|
3
|
-
import { UNSAFE_NavigationContext as NavigationContext, } from 'react-router-dom';
|
4
|
-
import { useFormikContext } from 'formik';
|
5
|
-
import LegacyFormBasedPreventNavigation from './LegacyFormBasedPreventNavigation';
|
6
|
-
import NewFormBasedPreventNavigation from './NewFormBasedPreventNavigation';
|
7
|
-
/** Prevent the user from navigating away from a form if there are any changes. */
|
8
|
-
export default function FormBasedPreventNavigation(_a) {
|
9
|
-
var ignoreLostChanges = _a.ignoreLostChanges, _b = _a.promptMessage, promptMessage = _b === void 0 ? 'Changes you made may not be saved.' : _b;
|
10
|
-
var _c = useFormikContext(), dirty = _c.dirty, isSubmitting = _c.isSubmitting;
|
11
|
-
var preventNavigate = !ignoreLostChanges && dirty && !isSubmitting;
|
12
|
-
var navigator = useContext(NavigationContext).navigator;
|
13
|
-
var isUsingDataRouter = navigator.location === undefined;
|
14
|
-
if (isUsingDataRouter) {
|
15
|
-
return (_jsx(NewFormBasedPreventNavigation, { promptMessage: promptMessage, preventNavigate: preventNavigate, navigator: navigator }));
|
16
|
-
}
|
17
|
-
else {
|
18
|
-
return (_jsx(LegacyFormBasedPreventNavigation, { promptMessage: promptMessage, preventNavigate: preventNavigate, navigator: navigator }));
|
19
|
-
}
|
20
|
-
}
|
@@ -1,17 +0,0 @@
|
|
1
|
-
import type { History } from 'history';
|
2
|
-
import { Navigator as BaseNavigator } from 'react-router-dom';
|
3
|
-
interface Navigator extends BaseNavigator {
|
4
|
-
block?: History['block'];
|
5
|
-
}
|
6
|
-
export interface FormBasedPreventNavigationProps {
|
7
|
-
promptMessage?: string;
|
8
|
-
preventNavigate: boolean;
|
9
|
-
navigator: Navigator;
|
10
|
-
}
|
11
|
-
/** Only use this if the project uses `<BrowserRouter/>` or any router that does not support the new
|
12
|
-
* [react-router Data API](https://reactrouter.com/en/main/routers/picking-a-router#using-v64-data-apis)
|
13
|
-
*
|
14
|
-
* Legacy function to prevent the user from navigating away from a form if there are any changes.
|
15
|
-
*/
|
16
|
-
export default function LegacyFormBasedPreventNavigation({ promptMessage, preventNavigate, navigator, }: FormBasedPreventNavigationProps): null;
|
17
|
-
export {};
|
@@ -1,69 +0,0 @@
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
2
|
-
__assign = Object.assign || function(t) {
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
-
s = arguments[i];
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
-
t[p] = s[p];
|
7
|
-
}
|
8
|
-
return t;
|
9
|
-
};
|
10
|
-
return __assign.apply(this, arguments);
|
11
|
-
};
|
12
|
-
import { useEffect } from 'react';
|
13
|
-
/** Only use this if the project uses `<BrowserRouter/>` or any router that does not support the new
|
14
|
-
* [react-router Data API](https://reactrouter.com/en/main/routers/picking-a-router#using-v64-data-apis)
|
15
|
-
*
|
16
|
-
* Legacy function to prevent the user from navigating away from a form if there are any changes.
|
17
|
-
*/
|
18
|
-
export default function LegacyFormBasedPreventNavigation(_a) {
|
19
|
-
var _b = _a.promptMessage, promptMessage = _b === void 0 ? 'Changes you made may not be saved.' : _b, preventNavigate = _a.preventNavigate, navigator = _a.navigator;
|
20
|
-
useEffect(function () {
|
21
|
-
if (!preventNavigate) {
|
22
|
-
return;
|
23
|
-
}
|
24
|
-
var unblock = function () { };
|
25
|
-
var push = navigator.push;
|
26
|
-
// TODO: https://reactrouter.com/docs/en/v6/upgrading/v5#prompt-is-not-currently-supported
|
27
|
-
// this is a workaround until we get native support for prompt on navigate
|
28
|
-
if (navigator.block) {
|
29
|
-
var blocker_1 = function (tx) {
|
30
|
-
if (window.confirm(promptMessage)) {
|
31
|
-
tx.retry();
|
32
|
-
}
|
33
|
-
};
|
34
|
-
unblock = navigator.block(function (tx) {
|
35
|
-
var autoUnblockingTx = __assign(__assign({}, tx), { retry: function () {
|
36
|
-
// Automatically unblock the transition so it can play all the way
|
37
|
-
// through before retrying it. TODO: Figure out how to re-enable
|
38
|
-
// this block if the transition is cancelled for some reason.
|
39
|
-
unblock();
|
40
|
-
tx.retry();
|
41
|
-
} });
|
42
|
-
blocker_1(autoUnblockingTx);
|
43
|
-
});
|
44
|
-
}
|
45
|
-
else {
|
46
|
-
//https://gist.github.com/MarksCode/64e438c82b0b2a1161e01c88ca0d0355
|
47
|
-
navigator.push = function () {
|
48
|
-
var args = [];
|
49
|
-
for (var _i = 0; _i < arguments.length; _i++) {
|
50
|
-
args[_i] = arguments[_i];
|
51
|
-
}
|
52
|
-
if (window.confirm(promptMessage)) {
|
53
|
-
push.apply(void 0, args);
|
54
|
-
}
|
55
|
-
};
|
56
|
-
}
|
57
|
-
window.addEventListener('beforeunload', beforeUnload);
|
58
|
-
return function () {
|
59
|
-
unblock();
|
60
|
-
navigator.push = push;
|
61
|
-
window.removeEventListener('beforeunload', beforeUnload);
|
62
|
-
};
|
63
|
-
function beforeUnload(e) {
|
64
|
-
e.preventDefault();
|
65
|
-
e.returnValue = promptMessage;
|
66
|
-
}
|
67
|
-
}, [preventNavigate, promptMessage, navigator]);
|
68
|
-
return null;
|
69
|
-
}
|
@@ -1,14 +0,0 @@
|
|
1
|
-
import type { History } from 'history';
|
2
|
-
import { Navigator as BaseNavigator } from 'react-router-dom';
|
3
|
-
interface Navigator extends BaseNavigator {
|
4
|
-
block?: History['block'];
|
5
|
-
location: Location;
|
6
|
-
}
|
7
|
-
interface FormBasedPreventNavigationProps {
|
8
|
-
promptMessage?: string;
|
9
|
-
preventNavigate: boolean;
|
10
|
-
navigator: Navigator;
|
11
|
-
}
|
12
|
-
/** Temporary function to allow backwards compatibility with routers that do not use the new Data API */
|
13
|
-
export default function NewFormBasedPreventNavigation({ promptMessage, preventNavigate, navigator, }: FormBasedPreventNavigationProps): null;
|
14
|
-
export {};
|
@@ -1,39 +0,0 @@
|
|
1
|
-
import { useEffect } from 'react';
|
2
|
-
import { unstable_usePrompt as usePrompt, } from 'react-router-dom';
|
3
|
-
/** Temporary function to allow backwards compatibility with routers that do not use the new Data API */
|
4
|
-
export default function NewFormBasedPreventNavigation(_a) {
|
5
|
-
var _b = _a.promptMessage, promptMessage = _b === void 0 ? 'Changes you made may not be saved.' : _b, preventNavigate = _a.preventNavigate, navigator = _a.navigator;
|
6
|
-
usePrompt({
|
7
|
-
when: preventNavigate,
|
8
|
-
message: promptMessage,
|
9
|
-
});
|
10
|
-
// TODO: Once react-router fully supports usePrompt and when we do not want to support routers
|
11
|
-
// that do not support the react-router Data API we can remove this.
|
12
|
-
useEffect(function () {
|
13
|
-
if (!preventNavigate) {
|
14
|
-
return;
|
15
|
-
}
|
16
|
-
var unblock = function () { };
|
17
|
-
var push = navigator.push;
|
18
|
-
navigator.push = function () {
|
19
|
-
var args = [];
|
20
|
-
for (var _i = 0; _i < arguments.length; _i++) {
|
21
|
-
args[_i] = arguments[_i];
|
22
|
-
}
|
23
|
-
if (window.confirm(promptMessage)) {
|
24
|
-
push.apply(void 0, args);
|
25
|
-
}
|
26
|
-
};
|
27
|
-
window.addEventListener('beforeunload', beforeUnload);
|
28
|
-
return function () {
|
29
|
-
unblock();
|
30
|
-
navigator.push = push;
|
31
|
-
window.removeEventListener('beforeunload', beforeUnload);
|
32
|
-
};
|
33
|
-
function beforeUnload(e) {
|
34
|
-
e.preventDefault();
|
35
|
-
e.returnValue = promptMessage;
|
36
|
-
}
|
37
|
-
}, [preventNavigate, promptMessage, navigator]);
|
38
|
-
return null;
|
39
|
-
}
|
@@ -1,11 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
export interface ServerErrors {
|
3
|
-
[path: string]: string;
|
4
|
-
}
|
5
|
-
export interface ServerErrorContextProps {
|
6
|
-
errors: ServerErrors;
|
7
|
-
getError: (path: string) => string | undefined;
|
8
|
-
setError: (path: string, errorMessage: string | undefined) => void;
|
9
|
-
}
|
10
|
-
/** Context to store the API errors from the server for the form. */
|
11
|
-
export declare const ServerErrorContext: React.Context<ServerErrorContextProps>;
|
@@ -1,9 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
/** Context to store the API errors from the server for the form. */
|
3
|
-
export var ServerErrorContext = React.createContext({
|
4
|
-
errors: {},
|
5
|
-
getError: function (path) {
|
6
|
-
return undefined;
|
7
|
-
},
|
8
|
-
setError: function (path, errorMessage) { },
|
9
|
-
});
|
package/es/FormActions.d.ts
DELETED
@@ -1,12 +0,0 @@
|
|
1
|
-
export interface FormActionsProps {
|
2
|
-
/** Allow the form to be submitted without any changes. By default this is not allowed. */
|
3
|
-
allowPristineSubmit?: boolean;
|
4
|
-
/** The cancel button's `onClick`.
|
5
|
-
* @defaultValue `window.history.back()`
|
6
|
-
*/
|
7
|
-
handleCancel?: () => void;
|
8
|
-
/** Whether both buttons should be disabled. */
|
9
|
-
disabled?: boolean;
|
10
|
-
}
|
11
|
-
/** Standard cancel and submit buttons. */
|
12
|
-
export default function FormActions({ allowPristineSubmit, handleCancel, disabled, }: FormActionsProps): import("react/jsx-runtime").JSX.Element;
|
package/es/FormActions.js
DELETED
@@ -1,16 +0,0 @@
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
import { FormDefaults } from './FormDefaults';
|
3
|
-
import { useFormikContext } from 'formik';
|
4
|
-
import SubmitFormButton from './SubmitFormButton';
|
5
|
-
/** Standard cancel and submit buttons. */
|
6
|
-
export default function FormActions(_a) {
|
7
|
-
var allowPristineSubmit = _a.allowPristineSubmit, handleCancel = _a.handleCancel, disabled = _a.disabled;
|
8
|
-
var isSubmitting = useFormikContext().isSubmitting;
|
9
|
-
return (_jsxs(_Fragment, { children: [_jsx(SubmitFormButton, { className: FormDefaults.cssClassPrefix + 'form-actions', allowPristineSubmit: allowPristineSubmit, disabled: disabled }), _jsx("button", { type: "button", className: FormDefaults.cssClassPrefix +
|
10
|
-
'form-actions ' +
|
11
|
-
FormDefaults.cssClassPrefix +
|
12
|
-
'cancel-form-button', disabled: isSubmitting || disabled, onClick: handleCancel || goBack, children: "Cancel" })] }));
|
13
|
-
function goBack() {
|
14
|
-
window.history.back();
|
15
|
-
}
|
16
|
-
}
|
package/es/FormDefaults.d.ts
DELETED
package/es/FormDefaults.js
DELETED
package/es/Group.d.ts
DELETED
@@ -1,16 +0,0 @@
|
|
1
|
-
/// <reference types="react" />
|
2
|
-
import { InjectedFieldProps } from './Field/InjectedFieldProps';
|
3
|
-
export interface GroupProps extends InjectedFieldProps<any> {
|
4
|
-
/** Extra class names to apply. */
|
5
|
-
className?: string;
|
6
|
-
children: React.ReactNode;
|
7
|
-
/** Simple text label before the input. */
|
8
|
-
label?: string;
|
9
|
-
/** Simple helper text after the input. */
|
10
|
-
helpText?: string | React.ReactNode;
|
11
|
-
/** Whether the field should be disabled. */
|
12
|
-
disabled?: boolean;
|
13
|
-
required?: boolean;
|
14
|
-
}
|
15
|
-
/** Contains standard field bits like a label, helper text, error scroll target, validation message container, etc. */
|
16
|
-
export default function Group({ className, children, label, helpText, meta, input, disabled, required, }: GroupProps): import("react/jsx-runtime").JSX.Element;
|
package/es/Group.js
DELETED
@@ -1,14 +0,0 @@
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
2
|
-
import classNames from 'classnames';
|
3
|
-
import { FormDefaults } from './FormDefaults';
|
4
|
-
import FieldErrorScrollTarget from './Field/FieldErrorScrollTarget';
|
5
|
-
/** Contains standard field bits like a label, helper text, error scroll target, validation message container, etc. */
|
6
|
-
export default function Group(_a) {
|
7
|
-
var _b;
|
8
|
-
var className = _a.className, children = _a.children, label = _a.label, helpText = _a.helpText, meta = _a.meta, input = _a.input, disabled = _a.disabled, required = _a.required;
|
9
|
-
return (_jsxs("div", { className: classNames(className, FormDefaults.cssClassPrefix + 'group', (_b = {},
|
10
|
-
_b[FormDefaults.cssClassPrefix + 'invalid'] = meta.error,
|
11
|
-
_b[FormDefaults.cssClassPrefix + 'disabled'] = disabled,
|
12
|
-
_b[FormDefaults.cssClassPrefix + 'required'] = required,
|
13
|
-
_b)), children: [_jsx(FieldErrorScrollTarget, {}), meta.warning && (_jsx("div", { className: FormDefaults.cssClassPrefix + 'warning', children: meta.warning })), _jsx("label", { htmlFor: input.id, children: label }), children, meta.error && (_jsx("div", { id: "".concat(input.id, "-error"), className: FormDefaults.cssClassPrefix + 'error', children: meta.error })), helpText && (_jsx("div", { className: FormDefaults.cssClassPrefix + 'help', children: helpText }))] }));
|
14
|
-
}
|
@@ -1,12 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { InputGroupProps } from './InputGroup';
|
3
|
-
export interface IconInputGroupProps extends Omit<InputGroupProps<string | undefined | null>, 'onChange' | 'type' | 'value'> {
|
4
|
-
type?: 'color' | 'email' | 'search' | 'tel' | 'text' | 'url';
|
5
|
-
/** Icon to display on the input group. */
|
6
|
-
icon: React.ReactNode;
|
7
|
-
/** Text to display after the input group to give more information to the user. */
|
8
|
-
helpText?: string;
|
9
|
-
}
|
10
|
-
/** Input group with an icon. */
|
11
|
-
declare const IconInputGroupWithRef: React.ComponentType<IconInputGroupProps>;
|
12
|
-
export default IconInputGroupWithRef;
|
@@ -1,43 +0,0 @@
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
2
|
-
__assign = Object.assign || function(t) {
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
-
s = arguments[i];
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
-
t[p] = s[p];
|
7
|
-
}
|
8
|
-
return t;
|
9
|
-
};
|
10
|
-
return __assign.apply(this, arguments);
|
11
|
-
};
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
13
|
-
var t = {};
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
15
|
-
t[p] = s[p];
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
19
|
-
t[p[i]] = s[p[i]];
|
20
|
-
}
|
21
|
-
return t;
|
22
|
-
};
|
23
|
-
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
24
|
-
import React from 'react';
|
25
|
-
import classNames from 'classnames';
|
26
|
-
import InputGroupWithRef from './InputGroup';
|
27
|
-
import { FormDefaults } from '../FormDefaults';
|
28
|
-
function IconInputGroup(_a, ref) {
|
29
|
-
var _b;
|
30
|
-
var icon = _a.icon, className = _a.className, rest = __rest(_a, ["icon", "className"]);
|
31
|
-
var input = rest.input;
|
32
|
-
return (_jsx(_Fragment, { children: _jsx(InputGroupWithRef, __assign({ icon: icon, ref: ref, className: classNames(className, FormDefaults.cssClassPrefix + 'icon-input-group'), value: (_b = input.value) !== null && _b !== void 0 ? _b : '', onChange: function (e) {
|
33
|
-
if (!e.target.value) {
|
34
|
-
input.onChange(undefined);
|
35
|
-
}
|
36
|
-
else {
|
37
|
-
input.onChange(e.target.value);
|
38
|
-
}
|
39
|
-
} }, rest)) }));
|
40
|
-
}
|
41
|
-
/** Input group with an icon. */
|
42
|
-
var IconInputGroupWithRef = React.forwardRef(IconInputGroup);
|
43
|
-
export default IconInputGroupWithRef;
|
package/es/Input/InputGroup.d.ts
DELETED
@@ -1,12 +0,0 @@
|
|
1
|
-
import React, { ChangeEventHandler, LegacyRef } from 'react';
|
2
|
-
import { InjectedFieldProps } from '../Field/InjectedFieldProps';
|
3
|
-
import { GroupProps } from '../Group';
|
4
|
-
export interface InputGroupProps<TValue> extends InjectedFieldProps<TValue>, Omit<React.HTMLProps<HTMLInputElement>, keyof InjectedFieldProps<any> | 'children' | 'className' | 'label' | 'value'>, Omit<GroupProps, keyof InjectedFieldProps<any> | 'children'> {
|
5
|
-
onChange: ChangeEventHandler<HTMLInputElement>;
|
6
|
-
value: string | number | null | undefined;
|
7
|
-
icon?: React.ReactNode;
|
8
|
-
}
|
9
|
-
declare function InputGroup<TValue>({ input, meta, label, helpText, className, required, disabled, onChange, value, icon, ...rest }: InputGroupProps<TValue>, ref: LegacyRef<HTMLInputElement>): import("react/jsx-runtime").JSX.Element;
|
10
|
-
/** Generic controlled `<input/>` wrapped by a `<Group/>` */
|
11
|
-
declare const InputGroupWithRef: typeof InputGroup;
|
12
|
-
export default InputGroupWithRef;
|
package/es/Input/InputGroup.js
DELETED
@@ -1,34 +0,0 @@
|
|
1
|
-
var __assign = (this && this.__assign) || function () {
|
2
|
-
__assign = Object.assign || function(t) {
|
3
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
4
|
-
s = arguments[i];
|
5
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
6
|
-
t[p] = s[p];
|
7
|
-
}
|
8
|
-
return t;
|
9
|
-
};
|
10
|
-
return __assign.apply(this, arguments);
|
11
|
-
};
|
12
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
13
|
-
var t = {};
|
14
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
15
|
-
t[p] = s[p];
|
16
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
17
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
18
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
19
|
-
t[p[i]] = s[p[i]];
|
20
|
-
}
|
21
|
-
return t;
|
22
|
-
};
|
23
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
24
|
-
import React from 'react';
|
25
|
-
import classNames from 'classnames';
|
26
|
-
import { FormDefaults } from '../FormDefaults';
|
27
|
-
import Group from '../Group';
|
28
|
-
function InputGroup(_a, ref) {
|
29
|
-
var input = _a.input, meta = _a.meta, label = _a.label, helpText = _a.helpText, className = _a.className, required = _a.required, disabled = _a.disabled, onChange = _a.onChange, value = _a.value, icon = _a.icon, rest = __rest(_a, ["input", "meta", "label", "helpText", "className", "required", "disabled", "onChange", "value", "icon"]);
|
30
|
-
return (_jsxs(Group, { input: input, meta: meta, required: required, disabled: disabled, label: label, helpText: helpText, className: classNames(className, FormDefaults.cssClassPrefix + 'input-group'), children: [icon, _jsx("input", __assign({}, input, rest, { "aria-invalid": !!meta.error, "aria-errormessage": !!meta.error ? "".concat(input.name, "-error") : undefined, value: value !== null && value !== void 0 ? value : '', onChange: onChange, ref: ref, className: classNames(className, FormDefaults.cssClassPrefix + 'input-group') }))] }));
|
31
|
-
}
|
32
|
-
/** Generic controlled `<input/>` wrapped by a `<Group/>` */
|
33
|
-
var InputGroupWithRef = React.forwardRef(InputGroup);
|
34
|
-
export default InputGroupWithRef;
|
@@ -1,9 +0,0 @@
|
|
1
|
-
import React from 'react';
|
2
|
-
import { InputGroupProps } from './InputGroup';
|
3
|
-
export interface MoneyInputGroupProps extends Omit<InputGroupProps<number | undefined | null>, 'onChange' | 'type' | 'value'> {
|
4
|
-
/** Custom parsing function when the value changes. */
|
5
|
-
parseFunc?: typeof parseInt | typeof parseFloat;
|
6
|
-
}
|
7
|
-
/** Input group for inputting money. */
|
8
|
-
declare const MoneyInputGroupWithRef: React.FunctionComponent<MoneyInputGroupProps>;
|
9
|
-
export default MoneyInputGroupWithRef;
|