@shipengine/formik-giger 0.3.0 → 0.4.0
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/esm/Checkbox.d.ts +13 -0
- package/dist/esm/Checkbox.js +57 -0
- package/dist/esm/Checkbox.js.map +1 -0
- package/dist/esm/DatePicker.d.ts +11 -0
- package/dist/esm/DatePicker.js +51 -0
- package/dist/esm/DatePicker.js.map +1 -0
- package/dist/esm/FocusOnError.d.ts +21 -0
- package/dist/esm/FocusOnError.js +70 -0
- package/dist/esm/FocusOnError.js.map +1 -0
- package/dist/esm/FormField.d.ts +17 -0
- package/dist/esm/FormField.js +43 -0
- package/dist/esm/FormField.js.map +1 -0
- package/dist/esm/Input.d.ts +11 -0
- package/dist/esm/Input.js +48 -0
- package/dist/esm/Input.js.map +1 -0
- package/dist/esm/Radio.d.ts +11 -0
- package/dist/esm/Radio.js +49 -0
- package/dist/esm/Radio.js.map +1 -0
- package/dist/esm/RadioGroup.d.ts +11 -0
- package/dist/esm/RadioGroup.js +47 -0
- package/dist/esm/RadioGroup.js.map +1 -0
- package/dist/esm/Select.d.ts +13 -0
- package/dist/esm/Select.js +68 -0
- package/dist/esm/Select.js.map +1 -0
- package/dist/esm/SelectAutocomplete.d.ts +11 -0
- package/dist/esm/SelectAutocomplete.js +57 -0
- package/dist/esm/SelectAutocomplete.js.map +1 -0
- package/dist/esm/Textarea.d.ts +11 -0
- package/dist/esm/Textarea.js +48 -0
- package/dist/esm/Textarea.js.map +1 -0
- package/dist/esm/index.d.ts +10 -0
- package/dist/esm/index.js +11 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/lib/Checkbox.d.ts +13 -0
- package/dist/lib/Checkbox.js +62 -0
- package/dist/lib/Checkbox.js.map +1 -0
- package/dist/lib/DatePicker.d.ts +11 -0
- package/dist/lib/DatePicker.js +56 -0
- package/dist/lib/DatePicker.js.map +1 -0
- package/dist/lib/FocusOnError.d.ts +21 -0
- package/dist/lib/FocusOnError.js +79 -0
- package/dist/lib/FocusOnError.js.map +1 -0
- package/dist/lib/FormField.d.ts +17 -0
- package/dist/lib/FormField.js +47 -0
- package/dist/lib/FormField.js.map +1 -0
- package/dist/lib/Input.d.ts +11 -0
- package/dist/lib/Input.js +53 -0
- package/dist/lib/Input.js.map +1 -0
- package/dist/lib/Radio.d.ts +11 -0
- package/dist/lib/Radio.js +54 -0
- package/dist/lib/Radio.js.map +1 -0
- package/dist/lib/RadioGroup.d.ts +11 -0
- package/dist/lib/RadioGroup.js +52 -0
- package/dist/lib/RadioGroup.js.map +1 -0
- package/dist/lib/Select.d.ts +13 -0
- package/dist/lib/Select.js +73 -0
- package/dist/lib/Select.js.map +1 -0
- package/dist/lib/SelectAutocomplete.d.ts +11 -0
- package/dist/lib/SelectAutocomplete.js +62 -0
- package/dist/lib/SelectAutocomplete.js.map +1 -0
- package/dist/lib/Textarea.d.ts +11 -0
- package/dist/lib/Textarea.js +53 -0
- package/dist/lib/Textarea.js.map +1 -0
- package/dist/lib/index.d.ts +10 -0
- package/dist/lib/index.js +37 -0
- package/dist/lib/index.js.map +1 -0
- package/package.json +4 -4
@@ -0,0 +1,11 @@
|
|
1
|
+
import { ISelectAutocompleteOption, ISelectAutocomplete } from '@shipengine/giger';
|
2
|
+
import { FieldProps } from 'formik';
|
3
|
+
|
4
|
+
type SelectAutocompleteProps<FormValues = unknown> = FieldProps<ISelectAutocompleteOption | null, FormValues> & Omit<ISelectAutocomplete, 'name' | 'value'>;
|
5
|
+
declare function fieldToSelectAutocomplete<FormValues = unknown>({ disabled, field: { onBlur: fieldOnBlur, onChange: onFormikChange, ...field }, form: { isSubmitting, touched, errors }, onBlur, onChange, ...props }: SelectAutocompleteProps<FormValues>): ISelectAutocomplete;
|
6
|
+
declare function SelectAutocomplete<FormValues = unknown>({ ...props }: SelectAutocompleteProps<FormValues>): JSX.Element;
|
7
|
+
declare namespace SelectAutocomplete {
|
8
|
+
var displayName: string;
|
9
|
+
}
|
10
|
+
|
11
|
+
export { SelectAutocomplete, SelectAutocompleteProps, fieldToSelectAutocomplete };
|
@@ -0,0 +1,57 @@
|
|
1
|
+
import { SelectAutocomplete as SelectAutocomplete$1 } from '@shipengine/giger';
|
2
|
+
import { getIn } from 'formik';
|
3
|
+
import { jsx } from '@emotion/react/jsx-runtime';
|
4
|
+
|
5
|
+
function fieldToSelectAutocomplete(_ref) {
|
6
|
+
let {
|
7
|
+
disabled,
|
8
|
+
field: {
|
9
|
+
onBlur: fieldOnBlur,
|
10
|
+
onChange: onFormikChange,
|
11
|
+
...field
|
12
|
+
},
|
13
|
+
form: {
|
14
|
+
isSubmitting,
|
15
|
+
touched,
|
16
|
+
errors
|
17
|
+
},
|
18
|
+
onBlur,
|
19
|
+
onChange,
|
20
|
+
...props
|
21
|
+
} = _ref;
|
22
|
+
const handleChange = (fieldName, value) => {
|
23
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(fieldName, value);
|
24
|
+
onFormikChange({
|
25
|
+
target: {
|
26
|
+
name: field.name,
|
27
|
+
value
|
28
|
+
}
|
29
|
+
});
|
30
|
+
};
|
31
|
+
return {
|
32
|
+
isInvalid: getIn(touched, field.name) && !!getIn(errors, field.name),
|
33
|
+
disabled: disabled || isSubmitting,
|
34
|
+
onBlur: onBlur !== null && onBlur !== void 0 ? onBlur : function () {
|
35
|
+
fieldOnBlur({
|
36
|
+
target: {
|
37
|
+
name: field.name
|
38
|
+
}
|
39
|
+
});
|
40
|
+
},
|
41
|
+
onChange: handleChange,
|
42
|
+
...field,
|
43
|
+
...props
|
44
|
+
};
|
45
|
+
}
|
46
|
+
function SelectAutocomplete(_ref2) {
|
47
|
+
let {
|
48
|
+
...props
|
49
|
+
} = _ref2;
|
50
|
+
return jsx(SelectAutocomplete$1, {
|
51
|
+
...fieldToSelectAutocomplete(props)
|
52
|
+
});
|
53
|
+
}
|
54
|
+
SelectAutocomplete.displayName = 'FormikSelectAutocomplete';
|
55
|
+
|
56
|
+
export { SelectAutocomplete, fieldToSelectAutocomplete };
|
57
|
+
//# sourceMappingURL=SelectAutocomplete.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"SelectAutocomplete.js","sources":["../../src/SelectAutocomplete.tsx"],"sourcesContent":["import {\n ISelectAutocompleteOption,\n SelectAutocomplete as GigerSelectAutocomplete,\n ISelectAutocomplete as IGigerSelectAutocomplete,\n} from '@shipengine/giger';\n\nimport { FieldProps, getIn } from 'formik';\n\nexport type SelectAutocompleteProps<FormValues = unknown> = FieldProps<ISelectAutocompleteOption | null, FormValues> &\n Omit<IGigerSelectAutocomplete, 'name' | 'value'>;\n\nexport function fieldToSelectAutocomplete<FormValues = unknown>({\n disabled,\n field: { onBlur: fieldOnBlur, onChange: onFormikChange, ...field },\n form: { isSubmitting, touched, errors },\n onBlur,\n onChange,\n ...props\n}: SelectAutocompleteProps<FormValues>): IGigerSelectAutocomplete {\n const handleChange = (fieldName: string, value: ISelectAutocompleteOption | null) => {\n onChange?.(fieldName, value);\n onFormikChange({ target: { name: field.name, value } });\n };\n\n return {\n isInvalid: getIn(touched, field.name) && !!getIn(errors, field.name),\n disabled: disabled || isSubmitting,\n onBlur:\n onBlur ??\n function () {\n fieldOnBlur({ target: { name: field.name } });\n },\n onChange: handleChange,\n ...field,\n ...props,\n };\n}\n\nexport function SelectAutocomplete<FormValues = unknown>({\n ...props\n}: SelectAutocompleteProps<FormValues>): JSX.Element {\n return <GigerSelectAutocomplete {...fieldToSelectAutocomplete(props)} />;\n}\n\nSelectAutocomplete.displayName = 'FormikSelectAutocomplete';\n"],"names":["fieldToSelectAutocomplete","_ref","disabled","field","onBlur","fieldOnBlur","onChange","onFormikChange","form","isSubmitting","touched","errors","props","handleChange","fieldName","value","target","name","isInvalid","getIn","SelectAutocomplete","_ref2","_jsx","GigerSelectAutocomplete","displayName"],"mappings":";;;;AAWO,SAASA,yBAAyBA,CAAAC,IAAA,EAOyB;EAAA,IAPF;IAC5DC,QAAQ;AACRC,IAAAA,KAAK,EAAE;AAAEC,MAAAA,MAAM,EAAEC,WAAW;AAAEC,MAAAA,QAAQ,EAAEC,cAAc;MAAE,GAAGJ,KAAAA;KAAO;AAClEK,IAAAA,IAAI,EAAE;MAAEC,YAAY;MAAEC,OAAO;AAAEC,MAAAA,MAAAA;KAAQ;IACvCP,MAAM;IACNE,QAAQ;IACR,GAAGM,KAAAA;AAC8B,GAAC,GAAAX,IAAA,CAAA;AAClC,EAAA,MAAMY,YAAY,GAAGA,CAACC,SAAiB,EAAEC,KAAuC,KAAK;IACjFT,QAAQ,KAAA,IAAA,IAARA,QAAQ,KAARA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,QAAQ,CAAGQ,SAAS,EAAEC,KAAK,CAAC,CAAA;AAC5BR,IAAAA,cAAc,CAAC;AAAES,MAAAA,MAAM,EAAE;QAAEC,IAAI,EAAEd,KAAK,CAACc,IAAI;AAAEF,QAAAA,KAAAA;AAAM,OAAA;AAAE,KAAC,CAAC,CAAA;GAC1D,CAAA;EAED,OAAO;AACHG,IAAAA,SAAS,EAAEC,KAAK,CAACT,OAAO,EAAEP,KAAK,CAACc,IAAI,CAAC,IAAI,CAAC,CAACE,KAAK,CAACR,MAAM,EAAER,KAAK,CAACc,IAAI,CAAC;IACpEf,QAAQ,EAAEA,QAAQ,IAAIO,YAAY;AAClCL,IAAAA,MAAM,EACFA,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,MAAM,GACN,YAAY;AACRC,MAAAA,WAAW,CAAC;AAAEW,QAAAA,MAAM,EAAE;UAAEC,IAAI,EAAEd,KAAK,CAACc,IAAAA;AAAK,SAAA;AAAE,OAAC,CAAC,CAAA;KAChD;AACLX,IAAAA,QAAQ,EAAEO,YAAY;AACtB,IAAA,GAAGV,KAAK;IACR,GAAGS,KAAAA;GACN,CAAA;AACL,CAAA;AAEO,SAASQ,kBAAkBA,CAAAC,KAAA,EAEmB;EAAA,IAFI;IACrD,GAAGT,KAAAA;AAC8B,GAAC,GAAAS,KAAA,CAAA;EAClC,OAAOC,GAAA,CAACC,oBAAuB,EAAA;IAAA,GAAKvB,yBAAyB,CAACY,KAAK,CAAA;AAAC,GAAG,CAAC,CAAA;AAC5E,CAAA;AAEAQ,kBAAkB,CAACI,WAAW,GAAG,0BAA0B;;;;"}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import { FieldProps } from 'formik';
|
2
|
+
import { ITextareaProps } from '@shipengine/giger';
|
3
|
+
|
4
|
+
type TextareaProps<FormValues = unknown> = FieldProps<string | number | undefined, FormValues> & Omit<ITextareaProps, 'name' | 'value'>;
|
5
|
+
declare function fieldToTextarea<FormValues = unknown>({ disabled, field: { onBlur: fieldOnBlur, onChange: onFormikChange, ...field }, form: { isSubmitting, touched, errors }, onBlur, onChange, ...props }: TextareaProps<FormValues>): ITextareaProps;
|
6
|
+
declare function Textarea<FormValues = unknown>({ ...props }: TextareaProps<FormValues>): JSX.Element;
|
7
|
+
declare namespace Textarea {
|
8
|
+
var displayName: string;
|
9
|
+
}
|
10
|
+
|
11
|
+
export { Textarea, TextareaProps, fieldToTextarea };
|
@@ -0,0 +1,48 @@
|
|
1
|
+
import { getIn } from 'formik';
|
2
|
+
import { Textarea as Textarea$1 } from '@shipengine/giger';
|
3
|
+
import { jsx } from '@emotion/react/jsx-runtime';
|
4
|
+
|
5
|
+
function fieldToTextarea(_ref) {
|
6
|
+
let {
|
7
|
+
disabled,
|
8
|
+
field: {
|
9
|
+
onBlur: fieldOnBlur,
|
10
|
+
onChange: onFormikChange,
|
11
|
+
...field
|
12
|
+
},
|
13
|
+
form: {
|
14
|
+
isSubmitting,
|
15
|
+
touched,
|
16
|
+
errors
|
17
|
+
},
|
18
|
+
onBlur,
|
19
|
+
onChange,
|
20
|
+
...props
|
21
|
+
} = _ref;
|
22
|
+
const handleChange = e => {
|
23
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
24
|
+
onFormikChange(e);
|
25
|
+
};
|
26
|
+
return {
|
27
|
+
isInvalid: getIn(touched, field.name) && !!getIn(errors, field.name),
|
28
|
+
disabled: disabled || isSubmitting,
|
29
|
+
onBlur: onBlur !== null && onBlur !== void 0 ? onBlur : function (e) {
|
30
|
+
fieldOnBlur(e !== null && e !== void 0 ? e : field.name);
|
31
|
+
},
|
32
|
+
onChange: handleChange,
|
33
|
+
...field,
|
34
|
+
...props
|
35
|
+
};
|
36
|
+
}
|
37
|
+
function Textarea(_ref2) {
|
38
|
+
let {
|
39
|
+
...props
|
40
|
+
} = _ref2;
|
41
|
+
return jsx(Textarea$1, {
|
42
|
+
...fieldToTextarea(props)
|
43
|
+
});
|
44
|
+
}
|
45
|
+
Textarea.displayName = 'FormikTextarea';
|
46
|
+
|
47
|
+
export { Textarea, fieldToTextarea };
|
48
|
+
//# sourceMappingURL=Textarea.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Textarea.js","sources":["../../src/Textarea.tsx"],"sourcesContent":["import { FieldProps, getIn } from 'formik';\nimport { ChangeEvent, FocusEvent } from 'react';\n\nimport { Textarea as GigerTextarea, ITextareaProps as IGigerTextareaProps } from '@shipengine/giger';\n\nexport type TextareaProps<FormValues = unknown> = FieldProps<string | number | undefined, FormValues> &\n Omit<IGigerTextareaProps, 'name' | 'value'>;\n\nexport function fieldToTextarea<FormValues = unknown>({\n disabled,\n field: { onBlur: fieldOnBlur, onChange: onFormikChange, ...field },\n form: { isSubmitting, touched, errors },\n onBlur,\n onChange,\n ...props\n}: TextareaProps<FormValues>): IGigerTextareaProps {\n const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {\n onChange?.(e);\n onFormikChange(e);\n };\n\n return {\n isInvalid: getIn(touched, field.name) && !!getIn(errors, field.name),\n disabled: disabled || isSubmitting,\n onBlur:\n onBlur ??\n function (e: FocusEvent) {\n fieldOnBlur(e ?? field.name);\n },\n onChange: handleChange,\n ...field,\n ...props,\n };\n}\n\nexport function Textarea<FormValues = unknown>({ ...props }: TextareaProps<FormValues>): JSX.Element {\n return <GigerTextarea {...fieldToTextarea(props)} />;\n}\n\nTextarea.displayName = 'FormikTextarea';\n"],"names":["fieldToTextarea","_ref","disabled","field","onBlur","fieldOnBlur","onChange","onFormikChange","form","isSubmitting","touched","errors","props","handleChange","e","isInvalid","getIn","name","Textarea","_ref2","_jsx","GigerTextarea","displayName"],"mappings":";;;;AAQO,SAASA,eAAeA,CAAAC,IAAA,EAOoB;EAAA,IAPG;IAClDC,QAAQ;AACRC,IAAAA,KAAK,EAAE;AAAEC,MAAAA,MAAM,EAAEC,WAAW;AAAEC,MAAAA,QAAQ,EAAEC,cAAc;MAAE,GAAGJ,KAAAA;KAAO;AAClEK,IAAAA,IAAI,EAAE;MAAEC,YAAY;MAAEC,OAAO;AAAEC,MAAAA,MAAAA;KAAQ;IACvCP,MAAM;IACNE,QAAQ;IACR,GAAGM,KAAAA;AACoB,GAAC,GAAAX,IAAA,CAAA;EACxB,MAAMY,YAAY,GAAIC,CAAmC,IAAK;AAC1DR,IAAAA,QAAQ,aAARA,QAAQ,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAARA,QAAQ,CAAGQ,CAAC,CAAC,CAAA;IACbP,cAAc,CAACO,CAAC,CAAC,CAAA;GACpB,CAAA;EAED,OAAO;AACHC,IAAAA,SAAS,EAAEC,KAAK,CAACN,OAAO,EAAEP,KAAK,CAACc,IAAI,CAAC,IAAI,CAAC,CAACD,KAAK,CAACL,MAAM,EAAER,KAAK,CAACc,IAAI,CAAC;IACpEf,QAAQ,EAAEA,QAAQ,IAAIO,YAAY;IAClCL,MAAM,EACFA,MAAM,KAANA,IAAAA,IAAAA,MAAM,cAANA,MAAM,GACN,UAAUU,CAAa,EAAE;MACrBT,WAAW,CAACS,CAAC,KAAA,IAAA,IAADA,CAAC,KAAA,KAAA,CAAA,GAADA,CAAC,GAAIX,KAAK,CAACc,IAAI,CAAC,CAAA;KAC/B;AACLX,IAAAA,QAAQ,EAAEO,YAAY;AACtB,IAAA,GAAGV,KAAK;IACR,GAAGS,KAAAA;GACN,CAAA;AACL,CAAA;AAEO,SAASM,QAAQA,CAAAC,KAAA,EAA6E;EAAA,IAAtD;IAAE,GAAGP,KAAAA;AAAiC,GAAC,GAAAO,KAAA,CAAA;EAClF,OAAOC,GAAA,CAACC,UAAa,EAAA;IAAA,GAAKrB,eAAe,CAACY,KAAK,CAAA;AAAC,GAAG,CAAC,CAAA;AACxD,CAAA;AAEAM,QAAQ,CAACI,WAAW,GAAG,gBAAgB;;;;"}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
export { Input, InputProps, fieldToInput } from './Input.js';
|
2
|
+
export { Checkbox, CheckboxProps, fieldToCheckbox } from './Checkbox.js';
|
3
|
+
export { DatePicker, IDatePickerProps, fieldToDateField } from './DatePicker.js';
|
4
|
+
export { FocusOnError, IFocusOnErrorProps, useFocusOnError } from './FocusOnError.js';
|
5
|
+
export { FormField } from './FormField.js';
|
6
|
+
export { Textarea, TextareaProps, fieldToTextarea } from './Textarea.js';
|
7
|
+
export { SelectAutocomplete, SelectAutocompleteProps, fieldToSelectAutocomplete } from './SelectAutocomplete.js';
|
8
|
+
export { Select, SelectProps, fieldToSelect } from './Select.js';
|
9
|
+
export { RadioGroup, RadioGroupProps, fieldToRadioGroup } from './RadioGroup.js';
|
10
|
+
export { Radio, RadioProps, fieldToRadio } from './Radio.js';
|
@@ -0,0 +1,11 @@
|
|
1
|
+
export { Input, fieldToInput } from './Input.js';
|
2
|
+
export { Checkbox, fieldToCheckbox } from './Checkbox.js';
|
3
|
+
export { DatePicker, fieldToDateField } from './DatePicker.js';
|
4
|
+
export { FocusOnError, useFocusOnError } from './FocusOnError.js';
|
5
|
+
export { FormField } from './FormField.js';
|
6
|
+
export { Textarea, fieldToTextarea } from './Textarea.js';
|
7
|
+
export { SelectAutocomplete, fieldToSelectAutocomplete } from './SelectAutocomplete.js';
|
8
|
+
export { Select, fieldToSelect } from './Select.js';
|
9
|
+
export { RadioGroup, fieldToRadioGroup } from './RadioGroup.js';
|
10
|
+
export { Radio, fieldToRadio } from './Radio.js';
|
11
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
|
@@ -0,0 +1,13 @@
|
|
1
|
+
import { FieldProps } from 'formik';
|
2
|
+
import { ICheckboxProps } from '@shipengine/giger';
|
3
|
+
|
4
|
+
interface CheckboxProps extends FieldProps, Omit<ICheckboxProps, 'name' | 'form' | 'touched' | 'checked' | 'defaultChecked' | 'type'> {
|
5
|
+
type?: string;
|
6
|
+
}
|
7
|
+
declare function fieldToCheckbox({ disabled, field: { onBlur: fieldOnBlur, value, onChange: onFormikChange, ...field }, form: { isSubmitting, errors, touched }, onBlur, onChange, ...props }: CheckboxProps): ICheckboxProps;
|
8
|
+
declare function Checkbox(props: CheckboxProps): JSX.Element;
|
9
|
+
declare namespace Checkbox {
|
10
|
+
var displayName: string;
|
11
|
+
}
|
12
|
+
|
13
|
+
export { Checkbox, CheckboxProps, fieldToCheckbox };
|
@@ -0,0 +1,62 @@
|
|
1
|
+
'use strict';
|
2
|
+
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
4
|
+
|
5
|
+
var formik = require('formik');
|
6
|
+
var giger = require('@shipengine/giger');
|
7
|
+
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
8
|
+
|
9
|
+
function fieldToCheckbox(_ref) {
|
10
|
+
let {
|
11
|
+
disabled,
|
12
|
+
field: {
|
13
|
+
onBlur: fieldOnBlur,
|
14
|
+
value,
|
15
|
+
onChange: onFormikChange,
|
16
|
+
...field
|
17
|
+
},
|
18
|
+
form: {
|
19
|
+
isSubmitting,
|
20
|
+
errors,
|
21
|
+
touched
|
22
|
+
},
|
23
|
+
onBlur,
|
24
|
+
onChange,
|
25
|
+
...props
|
26
|
+
} = _ref;
|
27
|
+
/**
|
28
|
+
* Checkbox can be used as a single item and as a part of multiple choices
|
29
|
+
* (sharing the "name" attribute) In that case the field value will be an array
|
30
|
+
* as multiple inputs have the same name.
|
31
|
+
* For all other scenarios "value" will be the input value (string, boolean, number ...)
|
32
|
+
*/
|
33
|
+
const checkboxIsPartOfMultiple = Array.isArray(value);
|
34
|
+
const indeterminate = !checkboxIsPartOfMultiple && value == null;
|
35
|
+
const handleChange = e => {
|
36
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
37
|
+
onFormikChange(e);
|
38
|
+
};
|
39
|
+
return {
|
40
|
+
isInvalid: formik.getIn(touched, field.name) && !!formik.getIn(errors, field.name),
|
41
|
+
disabled: disabled || isSubmitting,
|
42
|
+
checked: checkboxIsPartOfMultiple ? value.includes(props.value) : Boolean(value),
|
43
|
+
value,
|
44
|
+
indeterminate,
|
45
|
+
onBlur: onBlur !== null && onBlur !== void 0 ? onBlur : function (e) {
|
46
|
+
fieldOnBlur(e !== null && e !== void 0 ? e : field.name);
|
47
|
+
},
|
48
|
+
onChange: handleChange,
|
49
|
+
...field,
|
50
|
+
...props
|
51
|
+
};
|
52
|
+
}
|
53
|
+
function Checkbox(props) {
|
54
|
+
return jsxRuntime.jsx(giger.Checkbox, {
|
55
|
+
...fieldToCheckbox(props)
|
56
|
+
});
|
57
|
+
}
|
58
|
+
Checkbox.displayName = 'FormikCheckbox';
|
59
|
+
|
60
|
+
exports.Checkbox = Checkbox;
|
61
|
+
exports.fieldToCheckbox = fieldToCheckbox;
|
62
|
+
//# sourceMappingURL=Checkbox.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Checkbox.js","sources":["../../src/Checkbox.tsx"],"sourcesContent":["import { FieldProps, getIn } from 'formik';\nimport { ChangeEvent, FocusEvent } from 'react';\n\nimport { Checkbox as GigerCheckbox, ICheckboxProps as GigerCheckboxProps } from '@shipengine/giger';\n\nexport interface CheckboxProps\n extends FieldProps,\n Omit<\n GigerCheckboxProps,\n | 'name'\n | 'form'\n | 'touched'\n | 'checked'\n | 'defaultChecked'\n // Excluded for conflict with Field type\n | 'type'\n > {\n type?: string;\n}\n\nexport function fieldToCheckbox({\n disabled,\n field: { onBlur: fieldOnBlur, value, onChange: onFormikChange, ...field },\n form: { isSubmitting, errors, touched },\n onBlur,\n onChange,\n ...props\n}: CheckboxProps): GigerCheckboxProps {\n /**\n * Checkbox can be used as a single item and as a part of multiple choices\n * (sharing the \"name\" attribute) In that case the field value will be an array\n * as multiple inputs have the same name.\n * For all other scenarios \"value\" will be the input value (string, boolean, number ...)\n */\n const checkboxIsPartOfMultiple = Array.isArray(value);\n\n const indeterminate = !checkboxIsPartOfMultiple && value == null;\n\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n onChange?.(e);\n onFormikChange(e);\n };\n\n return {\n isInvalid: getIn(touched, field.name) && !!getIn(errors, field.name),\n disabled: disabled || isSubmitting,\n checked: checkboxIsPartOfMultiple ? value.includes(props.value) : Boolean(value),\n value,\n indeterminate,\n onBlur:\n onBlur ??\n function (e: FocusEvent) {\n fieldOnBlur(e ?? field.name);\n },\n onChange: handleChange,\n ...field,\n ...props,\n };\n}\n\nexport function Checkbox(props: CheckboxProps): JSX.Element {\n return <GigerCheckbox {...fieldToCheckbox(props)} />;\n}\n\nCheckbox.displayName = 'FormikCheckbox';\n"],"names":["fieldToCheckbox","_ref","disabled","field","onBlur","fieldOnBlur","value","onChange","onFormikChange","form","isSubmitting","errors","touched","props","checkboxIsPartOfMultiple","Array","isArray","indeterminate","handleChange","e","isInvalid","getIn","name","checked","includes","Boolean","Checkbox","_jsx","GigerCheckbox","displayName"],"mappings":";;;;;;;;AAoBO,SAASA,eAAeA,CAAAC,IAAA,EAOO;EAAA,IAPN;IAC5BC,QAAQ;AACRC,IAAAA,KAAK,EAAE;AAAEC,MAAAA,MAAM,EAAEC,WAAW;MAAEC,KAAK;AAAEC,MAAAA,QAAQ,EAAEC,cAAc;MAAE,GAAGL,KAAAA;KAAO;AACzEM,IAAAA,IAAI,EAAE;MAAEC,YAAY;MAAEC,MAAM;AAAEC,MAAAA,OAAAA;KAAS;IACvCR,MAAM;IACNG,QAAQ;IACR,GAAGM,KAAAA;AACQ,GAAC,GAAAZ,IAAA,CAAA;AACZ;AACJ;AACA;AACA;AACA;AACA;AACI,EAAA,MAAMa,wBAAwB,GAAGC,KAAK,CAACC,OAAO,CAACV,KAAK,CAAC,CAAA;AAErD,EAAA,MAAMW,aAAa,GAAG,CAACH,wBAAwB,IAAIR,KAAK,IAAI,IAAI,CAAA;EAEhE,MAAMY,YAAY,GAAIC,CAAgC,IAAK;AACvDZ,IAAAA,QAAQ,aAARA,QAAQ,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAARA,QAAQ,CAAGY,CAAC,CAAC,CAAA;IACbX,cAAc,CAACW,CAAC,CAAC,CAAA;GACpB,CAAA;EAED,OAAO;AACHC,IAAAA,SAAS,EAAEC,YAAK,CAACT,OAAO,EAAET,KAAK,CAACmB,IAAI,CAAC,IAAI,CAAC,CAACD,YAAK,CAACV,MAAM,EAAER,KAAK,CAACmB,IAAI,CAAC;IACpEpB,QAAQ,EAAEA,QAAQ,IAAIQ,YAAY;AAClCa,IAAAA,OAAO,EAAET,wBAAwB,GAAGR,KAAK,CAACkB,QAAQ,CAACX,KAAK,CAACP,KAAK,CAAC,GAAGmB,OAAO,CAACnB,KAAK,CAAC;IAChFA,KAAK;IACLW,aAAa;IACbb,MAAM,EACFA,MAAM,KAANA,IAAAA,IAAAA,MAAM,cAANA,MAAM,GACN,UAAUe,CAAa,EAAE;MACrBd,WAAW,CAACc,CAAC,KAAA,IAAA,IAADA,CAAC,KAAA,KAAA,CAAA,GAADA,CAAC,GAAIhB,KAAK,CAACmB,IAAI,CAAC,CAAA;KAC/B;AACLf,IAAAA,QAAQ,EAAEW,YAAY;AACtB,IAAA,GAAGf,KAAK;IACR,GAAGU,KAAAA;GACN,CAAA;AACL,CAAA;AAEO,SAASa,QAAQA,CAACb,KAAoB,EAAe;EACxD,OAAOc,cAAA,CAACC,cAAa,EAAA;IAAA,GAAK5B,eAAe,CAACa,KAAK,CAAA;AAAC,GAAG,CAAC,CAAA;AACxD,CAAA;AAEAa,QAAQ,CAACG,WAAW,GAAG,gBAAgB;;;;;"}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import { FieldProps } from 'formik';
|
2
|
+
import { IDatePickerProps as IDatePickerProps$1, WithCommonProps } from '@shipengine/giger';
|
3
|
+
|
4
|
+
type IDatePickerProps<FormValues = unknown> = FieldProps<Date | null, FormValues> & Omit<IDatePickerProps$1, 'name'> & WithCommonProps<unknown>;
|
5
|
+
declare function fieldToDateField<FormValues = unknown>({ disabled, field: { name, onChange: onFormikChange, ...field }, form: { isSubmitting, errors, touched, setFieldTouched }, onClickConfirm, ...props }: IDatePickerProps<FormValues>): IDatePickerProps$1;
|
6
|
+
declare function DatePicker<FormValues = unknown>({ ...props }: IDatePickerProps<FormValues>): JSX.Element;
|
7
|
+
declare namespace DatePicker {
|
8
|
+
var displayName: string;
|
9
|
+
}
|
10
|
+
|
11
|
+
export { DatePicker, IDatePickerProps, fieldToDateField };
|
@@ -0,0 +1,56 @@
|
|
1
|
+
'use strict';
|
2
|
+
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
4
|
+
|
5
|
+
var formik = require('formik');
|
6
|
+
var giger = require('@shipengine/giger');
|
7
|
+
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
8
|
+
|
9
|
+
function fieldToDateField(_ref) {
|
10
|
+
let {
|
11
|
+
disabled,
|
12
|
+
field: {
|
13
|
+
name,
|
14
|
+
onChange: onFormikChange,
|
15
|
+
...field
|
16
|
+
},
|
17
|
+
form: {
|
18
|
+
isSubmitting,
|
19
|
+
errors,
|
20
|
+
touched,
|
21
|
+
setFieldTouched
|
22
|
+
},
|
23
|
+
onClickConfirm,
|
24
|
+
...props
|
25
|
+
} = _ref;
|
26
|
+
const handleClickConfirm = date => {
|
27
|
+
setFieldTouched(name);
|
28
|
+
onFormikChange({
|
29
|
+
target: {
|
30
|
+
name,
|
31
|
+
value: date
|
32
|
+
}
|
33
|
+
});
|
34
|
+
onClickConfirm === null || onClickConfirm === void 0 ? void 0 : onClickConfirm(date);
|
35
|
+
};
|
36
|
+
return {
|
37
|
+
disabled: disabled || isSubmitting,
|
38
|
+
isInvalid: formik.getIn(touched, name) && formik.getIn(errors, name),
|
39
|
+
onClickConfirm: handleClickConfirm,
|
40
|
+
...field,
|
41
|
+
...props
|
42
|
+
};
|
43
|
+
}
|
44
|
+
function DatePicker(_ref2) {
|
45
|
+
let {
|
46
|
+
...props
|
47
|
+
} = _ref2;
|
48
|
+
return jsxRuntime.jsx(giger.DatePicker, {
|
49
|
+
...fieldToDateField(props)
|
50
|
+
});
|
51
|
+
}
|
52
|
+
DatePicker.displayName = 'FormikDatePicker';
|
53
|
+
|
54
|
+
exports.DatePicker = DatePicker;
|
55
|
+
exports.fieldToDateField = fieldToDateField;
|
56
|
+
//# sourceMappingURL=DatePicker.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"DatePicker.js","sources":["../../src/DatePicker.tsx"],"sourcesContent":["import { FieldProps, getIn } from 'formik';\n\nimport {\n WithCommonProps,\n DatePicker as GigerDatePicker,\n IDatePickerProps as GigerDatePickerProps,\n} from '@shipengine/giger';\n\nexport type IDatePickerProps<FormValues = unknown> = FieldProps<Date | null, FormValues> &\n Omit<GigerDatePickerProps, 'name'> &\n WithCommonProps<unknown>;\n\nexport function fieldToDateField<FormValues = unknown>({\n disabled,\n field: { name, onChange: onFormikChange, ...field },\n form: { isSubmitting, errors, touched, setFieldTouched },\n onClickConfirm,\n ...props\n}: IDatePickerProps<FormValues>): GigerDatePickerProps {\n const handleClickConfirm = (date: Date | [Date, Date]) => {\n setFieldTouched(name);\n onFormikChange({ target: { name, value: date } });\n onClickConfirm?.(date);\n };\n\n return {\n disabled: disabled || isSubmitting,\n isInvalid: getIn(touched, name) && getIn(errors, name),\n onClickConfirm: handleClickConfirm,\n ...field,\n ...props,\n };\n}\n\nexport function DatePicker<FormValues = unknown>({ ...props }: IDatePickerProps<FormValues>): JSX.Element {\n return <GigerDatePicker {...fieldToDateField(props)} />;\n}\n\nDatePicker.displayName = 'FormikDatePicker';\n"],"names":["fieldToDateField","_ref","disabled","field","name","onChange","onFormikChange","form","isSubmitting","errors","touched","setFieldTouched","onClickConfirm","props","handleClickConfirm","date","target","value","isInvalid","getIn","DatePicker","_ref2","_jsx","GigerDatePicker","displayName"],"mappings":";;;;;;;;AAYO,SAASA,gBAAgBA,CAAAC,IAAA,EAMuB;EAAA,IANA;IACnDC,QAAQ;AACRC,IAAAA,KAAK,EAAE;MAAEC,IAAI;AAAEC,MAAAA,QAAQ,EAAEC,cAAc;MAAE,GAAGH,KAAAA;KAAO;AACnDI,IAAAA,IAAI,EAAE;MAAEC,YAAY;MAAEC,MAAM;MAAEC,OAAO;AAAEC,MAAAA,eAAAA;KAAiB;IACxDC,cAAc;IACd,GAAGC,KAAAA;AACuB,GAAC,GAAAZ,IAAA,CAAA;EAC3B,MAAMa,kBAAkB,GAAIC,IAAyB,IAAK;IACtDJ,eAAe,CAACP,IAAI,CAAC,CAAA;AACrBE,IAAAA,cAAc,CAAC;AAAEU,MAAAA,MAAM,EAAE;QAAEZ,IAAI;AAAEa,QAAAA,KAAK,EAAEF,IAAAA;AAAK,OAAA;AAAE,KAAC,CAAC,CAAA;AACjDH,IAAAA,cAAc,aAAdA,cAAc,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAdA,cAAc,CAAGG,IAAI,CAAC,CAAA;GACzB,CAAA;EAED,OAAO;IACHb,QAAQ,EAAEA,QAAQ,IAAIM,YAAY;AAClCU,IAAAA,SAAS,EAAEC,YAAK,CAACT,OAAO,EAAEN,IAAI,CAAC,IAAIe,YAAK,CAACV,MAAM,EAAEL,IAAI,CAAC;AACtDQ,IAAAA,cAAc,EAAEE,kBAAkB;AAClC,IAAA,GAAGX,KAAK;IACR,GAAGU,KAAAA;GACN,CAAA;AACL,CAAA;AAEO,SAASO,UAAUA,CAAAC,KAAA,EAAgF;EAAA,IAAzD;IAAE,GAAGR,KAAAA;AAAoC,GAAC,GAAAQ,KAAA,CAAA;EACvF,OAAOC,cAAA,CAACC,gBAAe,EAAA;IAAA,GAAKvB,gBAAgB,CAACa,KAAK,CAAA;AAAC,GAAG,CAAC,CAAA;AAC3D,CAAA;AAEAO,UAAU,CAACI,WAAW,GAAG,kBAAkB;;;;;"}
|
@@ -0,0 +1,21 @@
|
|
1
|
+
interface IFocusOnErrorProps {
|
2
|
+
initialValidation?: boolean;
|
3
|
+
focusDelay?: number;
|
4
|
+
}
|
5
|
+
/**
|
6
|
+
* Use FocusOnError when Formik is in the same component and you don't have
|
7
|
+
* access to useFormikContext, otherwise useFocusOnError can be used.
|
8
|
+
*/
|
9
|
+
declare function FocusOnError({ initialValidation, focusDelay }: IFocusOnErrorProps): JSX.Element;
|
10
|
+
/**
|
11
|
+
* Focus the first element with error in the form after triggering Formik onSubmit.
|
12
|
+
* If used with initialValidation `true`, it will focus after form initialization.
|
13
|
+
* * Important * The order is based on the errors object, and the errors key order is based on
|
14
|
+
* the order used in the validation schema.
|
15
|
+
*
|
16
|
+
* @param initialValidation boolean true if the focus is desired on form initialization
|
17
|
+
* @param focusDelay number milliseconds to delay the focus on the input
|
18
|
+
*/
|
19
|
+
declare function useFocusOnError(initialValidation?: boolean, focusDelay?: number): void;
|
20
|
+
|
21
|
+
export { FocusOnError, IFocusOnErrorProps, useFocusOnError };
|
@@ -0,0 +1,79 @@
|
|
1
|
+
'use strict';
|
2
|
+
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
4
|
+
|
5
|
+
var flatten = require('flat');
|
6
|
+
var react = require('react');
|
7
|
+
var formik = require('formik');
|
8
|
+
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
9
|
+
|
10
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
11
|
+
|
12
|
+
var flatten__default = /*#__PURE__*/_interopDefault(flatten);
|
13
|
+
|
14
|
+
/**
|
15
|
+
* Use FocusOnError when Formik is in the same component and you don't have
|
16
|
+
* access to useFormikContext, otherwise useFocusOnError can be used.
|
17
|
+
*/
|
18
|
+
function FocusOnError(_ref) {
|
19
|
+
let {
|
20
|
+
initialValidation = false,
|
21
|
+
focusDelay = 0
|
22
|
+
} = _ref;
|
23
|
+
useFocusOnError(initialValidation, focusDelay);
|
24
|
+
return jsxRuntime.jsx(react.Fragment, {});
|
25
|
+
}
|
26
|
+
|
27
|
+
/**
|
28
|
+
* Focus the first element with error in the form after triggering Formik onSubmit.
|
29
|
+
* If used with initialValidation `true`, it will focus after form initialization.
|
30
|
+
* * Important * The order is based on the errors object, and the errors key order is based on
|
31
|
+
* the order used in the validation schema.
|
32
|
+
*
|
33
|
+
* @param initialValidation boolean true if the focus is desired on form initialization
|
34
|
+
* @param focusDelay number milliseconds to delay the focus on the input
|
35
|
+
*/
|
36
|
+
function useFocusOnError() {
|
37
|
+
let initialValidation = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
38
|
+
let focusDelay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
39
|
+
const {
|
40
|
+
errors,
|
41
|
+
isSubmitting,
|
42
|
+
isValidating,
|
43
|
+
validateForm
|
44
|
+
} = formik.useFormikContext();
|
45
|
+
const validateOnInit = react.useRef(initialValidation);
|
46
|
+
react.useEffect(() => {
|
47
|
+
if (validateOnInit.current) {
|
48
|
+
runImperativeValidation();
|
49
|
+
validateOnInit.current = false;
|
50
|
+
return;
|
51
|
+
}
|
52
|
+
if (isSubmitting && !isValidating) {
|
53
|
+
focusFirstElementWithError(errors);
|
54
|
+
}
|
55
|
+
function focusFirstElementWithError(errorsObject) {
|
56
|
+
if (!Object.keys(errorsObject).length) return;
|
57
|
+
const flattenedErrorsObj = flatten__default.default(errorsObject);
|
58
|
+
const names = Object.keys(flattenedErrorsObj);
|
59
|
+
const firstErrorElementName = names === null || names === void 0 ? void 0 : names[0];
|
60
|
+
if (firstErrorElementName) {
|
61
|
+
const element = window.document.querySelector(`form [name="${firstErrorElementName}"]`);
|
62
|
+
element === null || element === void 0 ? void 0 : element.scrollIntoView({
|
63
|
+
behavior: 'smooth'
|
64
|
+
});
|
65
|
+
setTimeout(() => {
|
66
|
+
element === null || element === void 0 ? void 0 : element.focus();
|
67
|
+
}, focusDelay);
|
68
|
+
}
|
69
|
+
}
|
70
|
+
async function runImperativeValidation() {
|
71
|
+
const validationErrors = await validateForm();
|
72
|
+
focusFirstElementWithError(validationErrors);
|
73
|
+
}
|
74
|
+
}, [errors, focusDelay, isSubmitting, isValidating, validateForm]);
|
75
|
+
}
|
76
|
+
|
77
|
+
exports.FocusOnError = FocusOnError;
|
78
|
+
exports.useFocusOnError = useFocusOnError;
|
79
|
+
//# sourceMappingURL=FocusOnError.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"FocusOnError.js","sources":["../../src/FocusOnError.tsx"],"sourcesContent":["import flatten from 'flat';\nimport { Fragment, useEffect, useRef } from 'react';\nimport { FormikErrors, useFormikContext } from 'formik';\n\nexport interface IFocusOnErrorProps {\n initialValidation?: boolean;\n focusDelay?: number;\n}\n\n/**\n * Use FocusOnError when Formik is in the same component and you don't have\n * access to useFormikContext, otherwise useFocusOnError can be used.\n */\nexport function FocusOnError({ initialValidation = false, focusDelay = 0 }: IFocusOnErrorProps): JSX.Element {\n useFocusOnError(initialValidation, focusDelay);\n\n return <Fragment />;\n}\n\n/**\n * Focus the first element with error in the form after triggering Formik onSubmit.\n * If used with initialValidation `true`, it will focus after form initialization.\n * * Important * The order is based on the errors object, and the errors key order is based on\n * the order used in the validation schema.\n *\n * @param initialValidation boolean true if the focus is desired on form initialization\n * @param focusDelay number milliseconds to delay the focus on the input\n */\nexport function useFocusOnError(initialValidation = false, focusDelay = 0): void {\n const { errors, isSubmitting, isValidating, validateForm } = useFormikContext();\n const validateOnInit = useRef(initialValidation);\n\n useEffect(() => {\n if (validateOnInit.current) {\n runImperativeValidation();\n validateOnInit.current = false;\n return;\n }\n\n if (isSubmitting && !isValidating) {\n focusFirstElementWithError(errors);\n }\n\n function focusFirstElementWithError(errorsObject: FormikErrors<unknown>) {\n if (!Object.keys(errorsObject).length) return;\n\n const flattenedErrorsObj: Record<string, unknown> = flatten(errorsObject);\n const names = Object.keys(flattenedErrorsObj);\n const firstErrorElementName = names?.[0];\n\n if (firstErrorElementName) {\n const element = window.document.querySelector<HTMLElement>(`form [name=\"${firstErrorElementName}\"]`);\n element?.scrollIntoView({ behavior: 'smooth' });\n\n setTimeout(() => {\n element?.focus();\n }, focusDelay);\n }\n }\n\n async function runImperativeValidation() {\n const validationErrors = await validateForm();\n focusFirstElementWithError(validationErrors);\n }\n }, [errors, focusDelay, isSubmitting, isValidating, validateForm]);\n}\n"],"names":["FocusOnError","_ref","initialValidation","focusDelay","useFocusOnError","_jsx","Fragment","arguments","length","undefined","errors","isSubmitting","isValidating","validateForm","useFormikContext","validateOnInit","useRef","useEffect","current","runImperativeValidation","focusFirstElementWithError","errorsObject","Object","keys","flattenedErrorsObj","flatten","names","firstErrorElementName","element","window","document","querySelector","scrollIntoView","behavior","setTimeout","focus","validationErrors"],"mappings":"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"}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
import { ReactNode } from 'react';
|
2
|
+
import { WithChildrenCommonProps, FieldMessageType } from '@shipengine/giger';
|
3
|
+
|
4
|
+
interface IFormFieldMessage {
|
5
|
+
type: FieldMessageType;
|
6
|
+
content: ReactNode;
|
7
|
+
}
|
8
|
+
type FormFieldProps = WithChildrenCommonProps<{
|
9
|
+
name: string;
|
10
|
+
message?: IFormFieldMessage;
|
11
|
+
}>;
|
12
|
+
declare function FormField({ name, children, message, ...rest }: FormFieldProps): JSX.Element;
|
13
|
+
declare namespace FormField {
|
14
|
+
var displayName: string;
|
15
|
+
}
|
16
|
+
|
17
|
+
export { FormField };
|
@@ -0,0 +1,47 @@
|
|
1
|
+
'use strict';
|
2
|
+
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
4
|
+
|
5
|
+
var formik = require('formik');
|
6
|
+
var react = require('react');
|
7
|
+
var giger = require('@shipengine/giger');
|
8
|
+
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
9
|
+
|
10
|
+
const useFieldMessage = (fieldName, defaultMessage) => {
|
11
|
+
const [, meta] = formik.useField(fieldName);
|
12
|
+
const formFieldMessage = react.useMemo(() => {
|
13
|
+
if (meta.error && meta.touched) {
|
14
|
+
return {
|
15
|
+
type: giger.FieldMessageType.ERROR,
|
16
|
+
content: meta.error
|
17
|
+
};
|
18
|
+
} else if ((defaultMessage === null || defaultMessage === void 0 ? void 0 : defaultMessage.type) === giger.FieldMessageType.HINT || (defaultMessage === null || defaultMessage === void 0 ? void 0 : defaultMessage.type) === giger.FieldMessageType.INFO || (defaultMessage === null || defaultMessage === void 0 ? void 0 : defaultMessage.type) === giger.FieldMessageType.SUCCESS) {
|
19
|
+
return {
|
20
|
+
type: defaultMessage.type,
|
21
|
+
content: defaultMessage.content
|
22
|
+
};
|
23
|
+
}
|
24
|
+
return undefined;
|
25
|
+
}, [defaultMessage === null || defaultMessage === void 0 ? void 0 : defaultMessage.content, defaultMessage === null || defaultMessage === void 0 ? void 0 : defaultMessage.type, meta.error, meta.touched]);
|
26
|
+
return formFieldMessage;
|
27
|
+
};
|
28
|
+
function FormField(_ref) {
|
29
|
+
let {
|
30
|
+
name,
|
31
|
+
children,
|
32
|
+
message,
|
33
|
+
...rest
|
34
|
+
} = _ref;
|
35
|
+
const formFieldMessage = useFieldMessage(name, message);
|
36
|
+
return jsxRuntime.jsx(giger.FormField, {
|
37
|
+
message: formFieldMessage,
|
38
|
+
...rest,
|
39
|
+
children: /*#__PURE__*/react.cloneElement(children, {
|
40
|
+
name
|
41
|
+
})
|
42
|
+
});
|
43
|
+
}
|
44
|
+
FormField.displayName = 'FormikFormField';
|
45
|
+
|
46
|
+
exports.FormField = FormField;
|
47
|
+
//# sourceMappingURL=FormField.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"FormField.js","sources":["../../src/FormField.tsx"],"sourcesContent":["import { useField } from 'formik';\nimport { useMemo, cloneElement, ReactNode, ReactElement } from 'react';\n\nimport { FieldMessageType, FormField as GigerFormField, WithChildrenCommonProps } from '@shipengine/giger';\n\ninterface IFormFieldMessage {\n type: FieldMessageType;\n content: ReactNode;\n}\n\ntype UseFieldMessageReturn =\n | {\n type: FieldMessageType;\n content: string;\n }\n | undefined;\n\nconst useFieldMessage = (fieldName: string, defaultMessage?: IFormFieldMessage): UseFieldMessageReturn => {\n const [, meta] = useField(fieldName);\n\n const formFieldMessage = useMemo(() => {\n if (meta.error && meta.touched) {\n return {\n type: FieldMessageType.ERROR,\n content: meta.error,\n };\n } else if (\n defaultMessage?.type === FieldMessageType.HINT ||\n defaultMessage?.type === FieldMessageType.INFO ||\n defaultMessage?.type === FieldMessageType.SUCCESS\n ) {\n return {\n type: defaultMessage.type,\n content: defaultMessage.content,\n };\n }\n\n return undefined;\n }, [defaultMessage?.content, defaultMessage?.type, meta.error, meta.touched]) as UseFieldMessageReturn;\n\n return formFieldMessage;\n};\n\ntype FormFieldProps = WithChildrenCommonProps<{\n name: string;\n message?: IFormFieldMessage;\n}>;\n\nexport function FormField({ name, children, message, ...rest }: FormFieldProps): JSX.Element {\n const formFieldMessage = useFieldMessage(name, message);\n\n return (\n <GigerFormField message={formFieldMessage} {...rest}>\n {cloneElement(children as ReactElement, { name })}\n </GigerFormField>\n );\n}\n\nFormField.displayName = 'FormikFormField';\n"],"names":["useFieldMessage","fieldName","defaultMessage","meta","useField","formFieldMessage","useMemo","error","touched","type","FieldMessageType","ERROR","content","HINT","INFO","SUCCESS","undefined","FormField","_ref","name","children","message","rest","_jsx","GigerFormField","cloneElement","displayName"],"mappings":";;;;;;;;;AAiBA,MAAMA,eAAe,GAAGA,CAACC,SAAiB,EAAEC,cAAkC,KAA4B;AACtG,EAAA,MAAM,GAAGC,IAAI,CAAC,GAAGC,eAAQ,CAACH,SAAS,CAAC,CAAA;AAEpC,EAAA,MAAMI,gBAAgB,GAAGC,aAAO,CAAC,MAAM;AACnC,IAAA,IAAIH,IAAI,CAACI,KAAK,IAAIJ,IAAI,CAACK,OAAO,EAAE;MAC5B,OAAO;QACHC,IAAI,EAAEC,sBAAgB,CAACC,KAAK;QAC5BC,OAAO,EAAET,IAAI,CAACI,KAAAA;OACjB,CAAA;AACL,KAAC,MAAM,IACH,CAAAL,cAAc,KAAdA,IAAAA,IAAAA,cAAc,uBAAdA,cAAc,CAAEO,IAAI,MAAKC,sBAAgB,CAACG,IAAI,IAC9C,CAAAX,cAAc,aAAdA,cAAc,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAdA,cAAc,CAAEO,IAAI,MAAKC,sBAAgB,CAACI,IAAI,IAC9C,CAAAZ,cAAc,KAAA,IAAA,IAAdA,cAAc,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAdA,cAAc,CAAEO,IAAI,MAAKC,sBAAgB,CAACK,OAAO,EACnD;MACE,OAAO;QACHN,IAAI,EAAEP,cAAc,CAACO,IAAI;QACzBG,OAAO,EAAEV,cAAc,CAACU,OAAAA;OAC3B,CAAA;AACL,KAAA;AAEA,IAAA,OAAOI,SAAS,CAAA;GACnB,EAAE,CAACd,cAAc,KAAdA,IAAAA,IAAAA,cAAc,KAAdA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,cAAc,CAAEU,OAAO,EAAEV,cAAc,KAAdA,IAAAA,IAAAA,cAAc,uBAAdA,cAAc,CAAEO,IAAI,EAAEN,IAAI,CAACI,KAAK,EAAEJ,IAAI,CAACK,OAAO,CAAC,CAA0B,CAAA;AAEtG,EAAA,OAAOH,gBAAgB,CAAA;AAC3B,CAAC,CAAA;AAOM,SAASY,SAASA,CAAAC,IAAA,EAAoE;EAAA,IAAnE;IAAEC,IAAI;IAAEC,QAAQ;IAAEC,OAAO;IAAE,GAAGC,IAAAA;AAAqB,GAAC,GAAAJ,IAAA,CAAA;AAC1E,EAAA,MAAMb,gBAAgB,GAAGL,eAAe,CAACmB,IAAI,EAAEE,OAAO,CAAC,CAAA;EAEvD,OACIE,cAAA,CAACC,eAAc,EAAA;AAACH,IAAAA,OAAO,EAAEhB,gBAAiB;AAAA,IAAA,GAAKiB,IAAI;AAAAF,IAAAA,QAAA,eAC9CK,kBAAY,CAACL,QAAQ,EAAkB;AAAED,MAAAA,IAAAA;KAAM,CAAA;AAAC,GACrC,CAAC,CAAA;AAEzB,CAAA;AAEAF,SAAS,CAACS,WAAW,GAAG,iBAAiB;;;;"}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import { FieldProps } from 'formik';
|
2
|
+
import { IInputProps } from '@shipengine/giger';
|
3
|
+
|
4
|
+
type InputProps<FormValues = unknown> = FieldProps<string | number | undefined, FormValues> & Omit<IInputProps, 'name' | 'value'>;
|
5
|
+
declare function fieldToInput<FormValues = unknown>({ disabled, field: { onBlur: fieldOnBlur, onChange: onFormikChange, ...field }, form: { isSubmitting, touched, errors }, onBlur, onChange, ...props }: InputProps<FormValues>): IInputProps;
|
6
|
+
declare function Input<FormValues = unknown>({ ...props }: InputProps<FormValues>): JSX.Element;
|
7
|
+
declare namespace Input {
|
8
|
+
var displayName: string;
|
9
|
+
}
|
10
|
+
|
11
|
+
export { Input, InputProps, fieldToInput };
|
@@ -0,0 +1,53 @@
|
|
1
|
+
'use strict';
|
2
|
+
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
4
|
+
|
5
|
+
var formik = require('formik');
|
6
|
+
var giger = require('@shipengine/giger');
|
7
|
+
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
8
|
+
|
9
|
+
function fieldToInput(_ref) {
|
10
|
+
let {
|
11
|
+
disabled,
|
12
|
+
field: {
|
13
|
+
onBlur: fieldOnBlur,
|
14
|
+
onChange: onFormikChange,
|
15
|
+
...field
|
16
|
+
},
|
17
|
+
form: {
|
18
|
+
isSubmitting,
|
19
|
+
touched,
|
20
|
+
errors
|
21
|
+
},
|
22
|
+
onBlur,
|
23
|
+
onChange,
|
24
|
+
...props
|
25
|
+
} = _ref;
|
26
|
+
const handleChange = e => {
|
27
|
+
onChange === null || onChange === void 0 ? void 0 : onChange(e);
|
28
|
+
onFormikChange(e);
|
29
|
+
};
|
30
|
+
return {
|
31
|
+
isInvalid: formik.getIn(touched, field.name) && !!formik.getIn(errors, field.name),
|
32
|
+
disabled: disabled || isSubmitting,
|
33
|
+
onBlur: onBlur !== null && onBlur !== void 0 ? onBlur : function (e) {
|
34
|
+
fieldOnBlur(e !== null && e !== void 0 ? e : field.name);
|
35
|
+
},
|
36
|
+
onChange: handleChange,
|
37
|
+
...field,
|
38
|
+
...props
|
39
|
+
};
|
40
|
+
}
|
41
|
+
function Input(_ref2) {
|
42
|
+
let {
|
43
|
+
...props
|
44
|
+
} = _ref2;
|
45
|
+
return jsxRuntime.jsx(giger.Input, {
|
46
|
+
...fieldToInput(props)
|
47
|
+
});
|
48
|
+
}
|
49
|
+
Input.displayName = 'FormikInput';
|
50
|
+
|
51
|
+
exports.Input = Input;
|
52
|
+
exports.fieldToInput = fieldToInput;
|
53
|
+
//# sourceMappingURL=Input.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Input.js","sources":["../../src/Input.tsx"],"sourcesContent":["import { FieldProps, getIn } from 'formik';\nimport { ChangeEvent, FocusEvent } from 'react';\n\nimport { Input as GigerInput, IInputProps as IGigerInputProps } from '@shipengine/giger';\n\nexport type InputProps<FormValues = unknown> = FieldProps<string | number | undefined, FormValues> &\n Omit<IGigerInputProps, 'name' | 'value'>;\n\nexport function fieldToInput<FormValues = unknown>({\n disabled,\n field: { onBlur: fieldOnBlur, onChange: onFormikChange, ...field },\n form: { isSubmitting, touched, errors },\n onBlur,\n onChange,\n ...props\n}: InputProps<FormValues>): IGigerInputProps {\n const handleChange = (e: ChangeEvent<HTMLInputElement>) => {\n onChange?.(e);\n onFormikChange(e);\n };\n\n return {\n isInvalid: getIn(touched, field.name) && !!getIn(errors, field.name),\n disabled: disabled || isSubmitting,\n onBlur:\n onBlur ??\n function (e: FocusEvent) {\n fieldOnBlur(e ?? field.name);\n },\n onChange: handleChange,\n ...field,\n ...props,\n };\n}\n\nexport function Input<FormValues = unknown>({ ...props }: InputProps<FormValues>): JSX.Element {\n return <GigerInput {...fieldToInput(props)} />;\n}\n\nInput.displayName = 'FormikInput';\n"],"names":["fieldToInput","_ref","disabled","field","onBlur","fieldOnBlur","onChange","onFormikChange","form","isSubmitting","touched","errors","props","handleChange","e","isInvalid","getIn","name","Input","_ref2","_jsx","GigerInput","displayName"],"mappings":";;;;;;;;AAQO,SAASA,YAAYA,CAAAC,IAAA,EAOiB;EAAA,IAPM;IAC/CC,QAAQ;AACRC,IAAAA,KAAK,EAAE;AAAEC,MAAAA,MAAM,EAAEC,WAAW;AAAEC,MAAAA,QAAQ,EAAEC,cAAc;MAAE,GAAGJ,KAAAA;KAAO;AAClEK,IAAAA,IAAI,EAAE;MAAEC,YAAY;MAAEC,OAAO;AAAEC,MAAAA,MAAAA;KAAQ;IACvCP,MAAM;IACNE,QAAQ;IACR,GAAGM,KAAAA;AACiB,GAAC,GAAAX,IAAA,CAAA;EACrB,MAAMY,YAAY,GAAIC,CAAgC,IAAK;AACvDR,IAAAA,QAAQ,aAARA,QAAQ,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAARA,QAAQ,CAAGQ,CAAC,CAAC,CAAA;IACbP,cAAc,CAACO,CAAC,CAAC,CAAA;GACpB,CAAA;EAED,OAAO;AACHC,IAAAA,SAAS,EAAEC,YAAK,CAACN,OAAO,EAAEP,KAAK,CAACc,IAAI,CAAC,IAAI,CAAC,CAACD,YAAK,CAACL,MAAM,EAAER,KAAK,CAACc,IAAI,CAAC;IACpEf,QAAQ,EAAEA,QAAQ,IAAIO,YAAY;IAClCL,MAAM,EACFA,MAAM,KAANA,IAAAA,IAAAA,MAAM,cAANA,MAAM,GACN,UAAUU,CAAa,EAAE;MACrBT,WAAW,CAACS,CAAC,KAAA,IAAA,IAADA,CAAC,KAAA,KAAA,CAAA,GAADA,CAAC,GAAIX,KAAK,CAACc,IAAI,CAAC,CAAA;KAC/B;AACLX,IAAAA,QAAQ,EAAEO,YAAY;AACtB,IAAA,GAAGV,KAAK;IACR,GAAGS,KAAAA;GACN,CAAA;AACL,CAAA;AAEO,SAASM,KAAKA,CAAAC,KAAA,EAA0E;EAAA,IAAnD;IAAE,GAAGP,KAAAA;AAA8B,GAAC,GAAAO,KAAA,CAAA;EAC5E,OAAOC,cAAA,CAACC,WAAU,EAAA;IAAA,GAAKrB,YAAY,CAACY,KAAK,CAAA;AAAC,GAAG,CAAC,CAAA;AAClD,CAAA;AAEAM,KAAK,CAACI,WAAW,GAAG,aAAa;;;;;"}
|
@@ -0,0 +1,11 @@
|
|
1
|
+
import { FieldProps } from 'formik';
|
2
|
+
import { RadioProps as RadioProps$1 } from '@shipengine/giger';
|
3
|
+
|
4
|
+
type RadioProps = FieldProps & Omit<RadioProps$1, 'name' | 'checked'>;
|
5
|
+
declare function fieldToRadio({ disabled, field: { onBlur: fieldOnBlur, value: selectedValue, onChange: onFormikChange, ...field }, form: { isSubmitting, errors, touched }, onBlur, onChange, value, ...props }: RadioProps): RadioProps$1;
|
6
|
+
declare function Radio(props: RadioProps): JSX.Element;
|
7
|
+
declare namespace Radio {
|
8
|
+
var displayName: string;
|
9
|
+
}
|
10
|
+
|
11
|
+
export { Radio, RadioProps, fieldToRadio };
|