@shipengine/formik-giger 0.2.0 → 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/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 };
|