@ultraviolet/form 1.11.0 → 1.12.1
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/components/CheckboxField/index.js +18 -19
- package/dist/components/CheckboxGroupField/index.js +12 -13
- package/dist/components/DateField/index.js +21 -22
- package/dist/components/Form/index.js +33 -36
- package/dist/components/NumberInputField/index.js +19 -20
- package/dist/components/RadioField/index.js +15 -16
- package/dist/components/RadioGroupField/index.js +13 -14
- package/dist/components/SelectInputField/index.js +45 -49
- package/dist/components/SelectableCardField/index.js +18 -19
- package/dist/components/Submit/index.js +13 -14
- package/dist/components/SubmitErrorAlert/index.js +14 -20
- package/dist/components/TagInputField/index.js +13 -14
- package/dist/components/TextInputField/index.js +53 -54
- package/dist/components/TimeField/index.js +26 -27
- package/dist/components/ToggleField/index.js +27 -28
- package/dist/helpers/pickValidators.js +1 -4
- package/dist/hooks/useFormField.js +26 -27
- package/dist/hooks/useOnFieldChange.js +1 -4
- package/dist/hooks/useValidation.js +14 -20
- package/dist/index.d.ts +1 -1
- package/dist/providers/ErrorContext/index.js +17 -20
- package/package.json +6 -6
|
@@ -4,25 +4,24 @@ import { jsx } from '@emotion/react/jsx-runtime';
|
|
|
4
4
|
import { useErrors } from '../../providers/ErrorContext/index.js';
|
|
5
5
|
import { useFormField } from '../../hooks/useFormField.js';
|
|
6
6
|
|
|
7
|
-
const CheckboxField = /*#__PURE__*/forwardRef((
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
} = _ref;
|
|
7
|
+
const CheckboxField = /*#__PURE__*/forwardRef(({
|
|
8
|
+
validate,
|
|
9
|
+
name,
|
|
10
|
+
label = '',
|
|
11
|
+
size,
|
|
12
|
+
progress,
|
|
13
|
+
disabled,
|
|
14
|
+
required,
|
|
15
|
+
className,
|
|
16
|
+
children,
|
|
17
|
+
onChange,
|
|
18
|
+
onBlur,
|
|
19
|
+
onFocus,
|
|
20
|
+
value,
|
|
21
|
+
helper,
|
|
22
|
+
tooltip,
|
|
23
|
+
'data-testid': dataTestId
|
|
24
|
+
}, ref) => {
|
|
26
25
|
const {
|
|
27
26
|
getError
|
|
28
27
|
} = useErrors();
|
|
@@ -3,19 +3,18 @@ import { useFieldArray } from 'react-final-form-arrays';
|
|
|
3
3
|
import { jsx } from '@emotion/react/jsx-runtime';
|
|
4
4
|
import { useErrors } from '../../providers/ErrorContext/index.js';
|
|
5
5
|
|
|
6
|
-
const CheckboxGroupField =
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
} = _ref;
|
|
6
|
+
const CheckboxGroupField = ({
|
|
7
|
+
legend,
|
|
8
|
+
value,
|
|
9
|
+
className,
|
|
10
|
+
helper,
|
|
11
|
+
direction,
|
|
12
|
+
children,
|
|
13
|
+
onChange,
|
|
14
|
+
error: customError,
|
|
15
|
+
name,
|
|
16
|
+
required = false
|
|
17
|
+
}) => {
|
|
19
18
|
const {
|
|
20
19
|
getError
|
|
21
20
|
} = useErrors();
|
|
@@ -5,28 +5,27 @@ import { useFormField } from '../../hooks/useFormField.js';
|
|
|
5
5
|
|
|
6
6
|
const parseDate = value => typeof value === 'string' ? new Date(value) : value;
|
|
7
7
|
const isEmpty = value => typeof value === 'string' ? value === '' : value === undefined;
|
|
8
|
-
const DateField =
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
} = _ref;
|
|
8
|
+
const DateField = ({
|
|
9
|
+
required,
|
|
10
|
+
name,
|
|
11
|
+
label = '',
|
|
12
|
+
validate,
|
|
13
|
+
format,
|
|
14
|
+
locale,
|
|
15
|
+
maxDate,
|
|
16
|
+
minDate,
|
|
17
|
+
initialValue,
|
|
18
|
+
disabled,
|
|
19
|
+
value: inputVal,
|
|
20
|
+
onChange,
|
|
21
|
+
onBlur,
|
|
22
|
+
onFocus,
|
|
23
|
+
formatOnBlur,
|
|
24
|
+
autoFocus = false,
|
|
25
|
+
excludeDates,
|
|
26
|
+
selectsRange,
|
|
27
|
+
'data-testid': dataTestId
|
|
28
|
+
}) => {
|
|
30
29
|
const {
|
|
31
30
|
getError
|
|
32
31
|
} = useErrors();
|
|
@@ -3,41 +3,38 @@ import { Form as Form$1 } from 'react-final-form';
|
|
|
3
3
|
import { jsx } from '@emotion/react/jsx-runtime';
|
|
4
4
|
import { ErrorProvider } from '../../providers/ErrorContext/index.js';
|
|
5
5
|
|
|
6
|
-
const Form =
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
mutators
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
keepDirtyOnReinitialize: keepDirtyOnReinitialize
|
|
40
|
-
});
|
|
41
|
-
};
|
|
6
|
+
const Form = ({
|
|
7
|
+
children,
|
|
8
|
+
onRawSubmit,
|
|
9
|
+
errors,
|
|
10
|
+
initialValues,
|
|
11
|
+
validateOnBlur,
|
|
12
|
+
validate,
|
|
13
|
+
name,
|
|
14
|
+
render,
|
|
15
|
+
mutators,
|
|
16
|
+
keepDirtyOnReinitialize,
|
|
17
|
+
className
|
|
18
|
+
}) => jsx(Form$1, {
|
|
19
|
+
initialValues: initialValues,
|
|
20
|
+
validateOnBlur: validateOnBlur,
|
|
21
|
+
validate: validate,
|
|
22
|
+
mutators: {
|
|
23
|
+
...arrayMutators,
|
|
24
|
+
...mutators
|
|
25
|
+
},
|
|
26
|
+
onSubmit: onRawSubmit,
|
|
27
|
+
render: render ?? (renderProps => jsx(ErrorProvider, {
|
|
28
|
+
errors: errors,
|
|
29
|
+
children: jsx("form", {
|
|
30
|
+
noValidate: true,
|
|
31
|
+
name: name,
|
|
32
|
+
onSubmit: renderProps.handleSubmit,
|
|
33
|
+
className: className,
|
|
34
|
+
children: typeof children === 'function' ? children(renderProps) : children
|
|
35
|
+
})
|
|
36
|
+
})),
|
|
37
|
+
keepDirtyOnReinitialize: keepDirtyOnReinitialize
|
|
38
|
+
});
|
|
42
39
|
|
|
43
40
|
export { Form };
|
|
@@ -2,26 +2,25 @@ import { NumberInput } from '@ultraviolet/ui';
|
|
|
2
2
|
import { jsx } from '@emotion/react/jsx-runtime';
|
|
3
3
|
import { useFormField } from '../../hooks/useFormField.js';
|
|
4
4
|
|
|
5
|
-
const NumberInputField =
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
} = _ref;
|
|
5
|
+
const NumberInputField = ({
|
|
6
|
+
disabled,
|
|
7
|
+
maxValue,
|
|
8
|
+
minValue,
|
|
9
|
+
name,
|
|
10
|
+
onChange,
|
|
11
|
+
onBlur,
|
|
12
|
+
onFocus,
|
|
13
|
+
onMaxCrossed,
|
|
14
|
+
onMinCrossed,
|
|
15
|
+
required,
|
|
16
|
+
size,
|
|
17
|
+
step,
|
|
18
|
+
text,
|
|
19
|
+
validate,
|
|
20
|
+
value,
|
|
21
|
+
className,
|
|
22
|
+
'data-testid': dataTestId
|
|
23
|
+
}) => {
|
|
25
24
|
const {
|
|
26
25
|
input
|
|
27
26
|
} = useFormField(name, {
|
|
@@ -3,22 +3,21 @@ import { jsx } from '@emotion/react/jsx-runtime';
|
|
|
3
3
|
import { useErrors } from '../../providers/ErrorContext/index.js';
|
|
4
4
|
import { useFormField } from '../../hooks/useFormField.js';
|
|
5
5
|
|
|
6
|
-
const RadioField =
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
} = _ref;
|
|
6
|
+
const RadioField = ({
|
|
7
|
+
className,
|
|
8
|
+
'data-testid': dataTestId,
|
|
9
|
+
disabled,
|
|
10
|
+
id,
|
|
11
|
+
label = '',
|
|
12
|
+
name,
|
|
13
|
+
onBlur,
|
|
14
|
+
onChange,
|
|
15
|
+
onFocus,
|
|
16
|
+
required,
|
|
17
|
+
validate,
|
|
18
|
+
value,
|
|
19
|
+
tooltip
|
|
20
|
+
}) => {
|
|
22
21
|
const {
|
|
23
22
|
getError
|
|
24
23
|
} = useErrors();
|
|
@@ -3,20 +3,19 @@ import { jsx } from '@emotion/react/jsx-runtime';
|
|
|
3
3
|
import { useErrors } from '../../providers/ErrorContext/index.js';
|
|
4
4
|
import { useFormField } from '../../hooks/useFormField.js';
|
|
5
5
|
|
|
6
|
-
const RadioGroupField =
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
} = _ref;
|
|
6
|
+
const RadioGroupField = ({
|
|
7
|
+
className,
|
|
8
|
+
legend = '',
|
|
9
|
+
name,
|
|
10
|
+
onChange,
|
|
11
|
+
required,
|
|
12
|
+
validate,
|
|
13
|
+
value,
|
|
14
|
+
children,
|
|
15
|
+
error: customError,
|
|
16
|
+
helper,
|
|
17
|
+
direction
|
|
18
|
+
}) => {
|
|
20
19
|
const {
|
|
21
20
|
getError
|
|
22
21
|
} = useErrors();
|
|
@@ -5,58 +5,54 @@ import { useErrors } from '../../providers/ErrorContext/index.js';
|
|
|
5
5
|
import { useFormField } from '../../hooks/useFormField.js';
|
|
6
6
|
|
|
7
7
|
const identity = x => x;
|
|
8
|
-
const SelectInputField =
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
} = _ref;
|
|
8
|
+
const SelectInputField = ({
|
|
9
|
+
animation,
|
|
10
|
+
animationDuration,
|
|
11
|
+
animationOnChange,
|
|
12
|
+
children,
|
|
13
|
+
className,
|
|
14
|
+
disabled,
|
|
15
|
+
error: errorProp,
|
|
16
|
+
format: formatProp = identity,
|
|
17
|
+
formatOnBlur,
|
|
18
|
+
id,
|
|
19
|
+
inputId,
|
|
20
|
+
isClearable,
|
|
21
|
+
isLoading,
|
|
22
|
+
isSearchable,
|
|
23
|
+
label = '',
|
|
24
|
+
maxLength,
|
|
25
|
+
menuPortalTarget,
|
|
26
|
+
minLength,
|
|
27
|
+
multiple,
|
|
28
|
+
name,
|
|
29
|
+
onBlur,
|
|
30
|
+
onChange,
|
|
31
|
+
onFocus,
|
|
32
|
+
options: optionsProp,
|
|
33
|
+
parse: parseProp = identity,
|
|
34
|
+
placeholder,
|
|
35
|
+
readOnly,
|
|
36
|
+
required,
|
|
37
|
+
value,
|
|
38
|
+
noTopLabel,
|
|
39
|
+
noOptionsMessage,
|
|
40
|
+
customStyle,
|
|
41
|
+
validate,
|
|
42
|
+
'data-testid': dataTestId
|
|
43
|
+
}) => {
|
|
45
44
|
const {
|
|
46
45
|
getError
|
|
47
46
|
} = useErrors();
|
|
48
|
-
const options = useMemo(() => optionsProp || Children.toArray(children).flat().filter(Boolean).map(
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
label: labelChild
|
|
58
|
-
};
|
|
59
|
-
}), [optionsProp, children]);
|
|
47
|
+
const options = useMemo(() => optionsProp || Children.toArray(children).flat().filter(Boolean).map(({
|
|
48
|
+
props: {
|
|
49
|
+
children: labelChild,
|
|
50
|
+
...option
|
|
51
|
+
}
|
|
52
|
+
}) => ({
|
|
53
|
+
...option,
|
|
54
|
+
label: labelChild
|
|
55
|
+
})), [optionsProp, children]);
|
|
60
56
|
const parse = useMemo(() => multiple ? parseProp : option => parseProp(option?.value ?? null, name), [multiple, parseProp, name]);
|
|
61
57
|
const format = useCallback(val => {
|
|
62
58
|
if (multiple) return formatProp(val, name);
|
|
@@ -3,25 +3,24 @@ import { jsx } from '@emotion/react/jsx-runtime';
|
|
|
3
3
|
import { useErrors } from '../../providers/ErrorContext/index.js';
|
|
4
4
|
import { useFormField } from '../../hooks/useFormField.js';
|
|
5
5
|
|
|
6
|
-
const SelectableCardField =
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
} = _ref;
|
|
6
|
+
const SelectableCardField = ({
|
|
7
|
+
name,
|
|
8
|
+
value,
|
|
9
|
+
onChange,
|
|
10
|
+
showTick,
|
|
11
|
+
type,
|
|
12
|
+
disabled,
|
|
13
|
+
children,
|
|
14
|
+
className,
|
|
15
|
+
onFocus,
|
|
16
|
+
onBlur,
|
|
17
|
+
required,
|
|
18
|
+
validate,
|
|
19
|
+
tooltip,
|
|
20
|
+
id,
|
|
21
|
+
label,
|
|
22
|
+
'data-testid': dataTestId
|
|
23
|
+
}) => {
|
|
25
24
|
const {
|
|
26
25
|
getError
|
|
27
26
|
} = useErrors();
|
|
@@ -3,20 +3,19 @@ import { useState, useEffect } from 'react';
|
|
|
3
3
|
import { useFormState } from 'react-final-form';
|
|
4
4
|
import { jsx } from '@emotion/react/jsx-runtime';
|
|
5
5
|
|
|
6
|
-
const Submit =
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
} = _ref;
|
|
6
|
+
const Submit = ({
|
|
7
|
+
children,
|
|
8
|
+
className,
|
|
9
|
+
disabled = false,
|
|
10
|
+
icon,
|
|
11
|
+
iconPosition,
|
|
12
|
+
size,
|
|
13
|
+
variant = 'filled',
|
|
14
|
+
sentiment = 'primary',
|
|
15
|
+
tooltip,
|
|
16
|
+
fullWidth,
|
|
17
|
+
onClick
|
|
18
|
+
}) => {
|
|
20
19
|
const {
|
|
21
20
|
invalid,
|
|
22
21
|
submitting,
|
|
@@ -2,25 +2,19 @@ import { Alert } from '@ultraviolet/ui';
|
|
|
2
2
|
import { FormSpy } from 'react-final-form';
|
|
3
3
|
import { jsx } from '@emotion/react/jsx-runtime';
|
|
4
4
|
|
|
5
|
-
const SubmitErrorAlert =
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
sentiment: "danger",
|
|
20
|
-
children: submitError
|
|
21
|
-
}) : null;
|
|
22
|
-
}
|
|
23
|
-
});
|
|
24
|
-
};
|
|
5
|
+
const SubmitErrorAlert = ({
|
|
6
|
+
className
|
|
7
|
+
}) => jsx(FormSpy, {
|
|
8
|
+
subscription: {
|
|
9
|
+
submitError: true
|
|
10
|
+
},
|
|
11
|
+
children: ({
|
|
12
|
+
submitError
|
|
13
|
+
}) => submitError ? jsx(Alert, {
|
|
14
|
+
className: className,
|
|
15
|
+
sentiment: "danger",
|
|
16
|
+
children: submitError
|
|
17
|
+
}) : null
|
|
18
|
+
});
|
|
25
19
|
|
|
26
20
|
export { SubmitErrorAlert };
|
|
@@ -2,20 +2,19 @@ import { TagInput } from '@ultraviolet/ui';
|
|
|
2
2
|
import { jsx } from '@emotion/react/jsx-runtime';
|
|
3
3
|
import { useFormField } from '../../hooks/useFormField.js';
|
|
4
4
|
|
|
5
|
-
const TagInputField =
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
} = _ref;
|
|
5
|
+
const TagInputField = ({
|
|
6
|
+
className,
|
|
7
|
+
'data-testid': dataTestId,
|
|
8
|
+
disabled,
|
|
9
|
+
id,
|
|
10
|
+
name,
|
|
11
|
+
onChange,
|
|
12
|
+
placeholder,
|
|
13
|
+
required,
|
|
14
|
+
tags,
|
|
15
|
+
validate,
|
|
16
|
+
variant
|
|
17
|
+
}) => {
|
|
19
18
|
const {
|
|
20
19
|
input
|
|
21
20
|
} = useFormField(name, {
|
|
@@ -4,60 +4,59 @@ import { jsx } from '@emotion/react/jsx-runtime';
|
|
|
4
4
|
import { useErrors } from '../../providers/ErrorContext/index.js';
|
|
5
5
|
import { useFormField } from '../../hooks/useFormField.js';
|
|
6
6
|
|
|
7
|
-
const TextInputField = /*#__PURE__*/forwardRef((
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
} = _ref;
|
|
7
|
+
const TextInputField = /*#__PURE__*/forwardRef(({
|
|
8
|
+
afterSubmit,
|
|
9
|
+
allowNull,
|
|
10
|
+
autoCapitalize,
|
|
11
|
+
autoComplete,
|
|
12
|
+
autoCorrect,
|
|
13
|
+
autoFocus,
|
|
14
|
+
autoSave,
|
|
15
|
+
beforeSubmit,
|
|
16
|
+
className,
|
|
17
|
+
cols,
|
|
18
|
+
'data-testid': dataTestId,
|
|
19
|
+
defaultValue,
|
|
20
|
+
disabled,
|
|
21
|
+
fillAvailable,
|
|
22
|
+
format,
|
|
23
|
+
formatOnBlur,
|
|
24
|
+
generated,
|
|
25
|
+
id,
|
|
26
|
+
initialValue,
|
|
27
|
+
isEqual,
|
|
28
|
+
label = '',
|
|
29
|
+
max,
|
|
30
|
+
maxLength,
|
|
31
|
+
min,
|
|
32
|
+
minLength,
|
|
33
|
+
multiline,
|
|
34
|
+
multiple,
|
|
35
|
+
name,
|
|
36
|
+
noTopLabel,
|
|
37
|
+
notice,
|
|
38
|
+
onBlur,
|
|
39
|
+
onChange,
|
|
40
|
+
onFocus,
|
|
41
|
+
onKeyDown,
|
|
42
|
+
onKeyUp,
|
|
43
|
+
parse,
|
|
44
|
+
placeholder,
|
|
45
|
+
random,
|
|
46
|
+
readOnly,
|
|
47
|
+
regex,
|
|
48
|
+
required,
|
|
49
|
+
resizable,
|
|
50
|
+
rows,
|
|
51
|
+
subscription,
|
|
52
|
+
type,
|
|
53
|
+
unit,
|
|
54
|
+
size,
|
|
55
|
+
validate,
|
|
56
|
+
validateFields,
|
|
57
|
+
valid,
|
|
58
|
+
value
|
|
59
|
+
}, ref) => {
|
|
61
60
|
const {
|
|
62
61
|
getError
|
|
63
62
|
} = useErrors();
|
|
@@ -10,33 +10,32 @@ const parseTime = date => {
|
|
|
10
10
|
value: timeStr
|
|
11
11
|
};
|
|
12
12
|
};
|
|
13
|
-
const TimeField =
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
} = _ref;
|
|
13
|
+
const TimeField = ({
|
|
14
|
+
required,
|
|
15
|
+
name,
|
|
16
|
+
schedule,
|
|
17
|
+
placeholder,
|
|
18
|
+
disabled,
|
|
19
|
+
initialValue,
|
|
20
|
+
validate,
|
|
21
|
+
readOnly,
|
|
22
|
+
value,
|
|
23
|
+
onChange,
|
|
24
|
+
onBlur,
|
|
25
|
+
onFocus,
|
|
26
|
+
isLoading,
|
|
27
|
+
isClearable,
|
|
28
|
+
inputId,
|
|
29
|
+
id,
|
|
30
|
+
formatOnBlur,
|
|
31
|
+
animation,
|
|
32
|
+
animationDuration,
|
|
33
|
+
animationOnChange,
|
|
34
|
+
className,
|
|
35
|
+
isSearchable,
|
|
36
|
+
options,
|
|
37
|
+
'data-testid': dataTestId
|
|
38
|
+
}) => {
|
|
40
39
|
const {
|
|
41
40
|
input,
|
|
42
41
|
meta
|
|
@@ -2,34 +2,33 @@ import { Toggle } from '@ultraviolet/ui';
|
|
|
2
2
|
import { jsx } from '@emotion/react/jsx-runtime';
|
|
3
3
|
import { useFormField } from '../../hooks/useFormField.js';
|
|
4
4
|
|
|
5
|
-
const ToggleField =
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
} = _ref;
|
|
5
|
+
const ToggleField = ({
|
|
6
|
+
afterSubmit,
|
|
7
|
+
allowNull,
|
|
8
|
+
beforeSubmit,
|
|
9
|
+
className,
|
|
10
|
+
data,
|
|
11
|
+
defaultValue,
|
|
12
|
+
disabled,
|
|
13
|
+
format,
|
|
14
|
+
formatOnBlur,
|
|
15
|
+
initialValue,
|
|
16
|
+
isEqual,
|
|
17
|
+
label,
|
|
18
|
+
multiple,
|
|
19
|
+
name,
|
|
20
|
+
onChange,
|
|
21
|
+
parse,
|
|
22
|
+
required,
|
|
23
|
+
size,
|
|
24
|
+
subscription,
|
|
25
|
+
tooltip,
|
|
26
|
+
validate,
|
|
27
|
+
validateFields,
|
|
28
|
+
value,
|
|
29
|
+
labelPosition,
|
|
30
|
+
'data-testid': dataTestId
|
|
31
|
+
}) => {
|
|
33
32
|
const {
|
|
34
33
|
input
|
|
35
34
|
} = useFormField(name, {
|
|
@@ -1,8 +1,5 @@
|
|
|
1
1
|
import validators from '../validators/index.js';
|
|
2
2
|
|
|
3
|
-
const pickValidators = args => Object.entries(args).map(
|
|
4
|
-
let [key, value] = _ref;
|
|
5
|
-
return value !== undefined ? validators[key]?.(value) : undefined;
|
|
6
|
-
}).filter(validator => !!validator);
|
|
3
|
+
const pickValidators = args => Object.entries(args).map(([key, value]) => value !== undefined ? validators[key]?.(value) : undefined).filter(validator => !!validator);
|
|
7
4
|
|
|
8
5
|
export { pickValidators };
|
|
@@ -3,33 +3,32 @@ import { useField } from 'react-final-form';
|
|
|
3
3
|
import { useValidation } from './useValidation.js';
|
|
4
4
|
import { pickValidators } from '../helpers/pickValidators.js';
|
|
5
5
|
|
|
6
|
-
const useFormField = (name,
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
} = _ref;
|
|
6
|
+
const useFormField = (name, {
|
|
7
|
+
afterSubmit,
|
|
8
|
+
disabled,
|
|
9
|
+
allowNull,
|
|
10
|
+
beforeSubmit,
|
|
11
|
+
defaultValue,
|
|
12
|
+
format,
|
|
13
|
+
formatOnBlur,
|
|
14
|
+
initialValue,
|
|
15
|
+
isEqual,
|
|
16
|
+
multiple,
|
|
17
|
+
parse,
|
|
18
|
+
subscription,
|
|
19
|
+
type,
|
|
20
|
+
validate,
|
|
21
|
+
validateFields,
|
|
22
|
+
value,
|
|
23
|
+
max,
|
|
24
|
+
maxLength,
|
|
25
|
+
min,
|
|
26
|
+
minLength,
|
|
27
|
+
regex,
|
|
28
|
+
required,
|
|
29
|
+
maxDate,
|
|
30
|
+
minDate
|
|
31
|
+
}) => {
|
|
33
32
|
const serializedRegex = useMemo(() => regex?.toString(), [regex]);
|
|
34
33
|
const validators = useMemo(() => pickValidators({
|
|
35
34
|
max,
|
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
import { useRef, useEffect } from 'react';
|
|
2
2
|
import { useFormState, useField } from 'react-final-form';
|
|
3
3
|
|
|
4
|
-
const useOnFieldChange =
|
|
5
|
-
if (enabled === void 0) {
|
|
6
|
-
enabled = true;
|
|
7
|
-
}
|
|
4
|
+
const useOnFieldChange = (name, callback, enabled = true) => {
|
|
8
5
|
const {
|
|
9
6
|
values
|
|
10
7
|
} = useFormState();
|
|
@@ -1,25 +1,19 @@
|
|
|
1
1
|
import { useCallback } from 'react';
|
|
2
2
|
|
|
3
|
-
const useValidation =
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
if (
|
|
10
|
-
|
|
11
|
-
if (validateErr !== undefined && validateErr !== true) {
|
|
12
|
-
return validateErr;
|
|
13
|
-
}
|
|
3
|
+
const useValidation = ({
|
|
4
|
+
validators,
|
|
5
|
+
validate
|
|
6
|
+
}) => useCallback((value, allValues, meta) => {
|
|
7
|
+
if (validate) {
|
|
8
|
+
const validateErr = validate(value, allValues, meta);
|
|
9
|
+
if (validateErr !== undefined && validateErr !== true) {
|
|
10
|
+
return validateErr;
|
|
14
11
|
}
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
return errors.length > 0 ? errors : undefined;
|
|
22
|
-
}, [validate, validators]);
|
|
23
|
-
};
|
|
12
|
+
}
|
|
13
|
+
const errors = validators.filter(validator => !validator.validate(value, allValues, meta)).map(({
|
|
14
|
+
error
|
|
15
|
+
}) => error);
|
|
16
|
+
return errors.length > 0 ? errors : undefined;
|
|
17
|
+
}, [validate, validators]);
|
|
24
18
|
|
|
25
19
|
export { useValidation };
|
package/dist/index.d.ts
CHANGED
|
@@ -641,7 +641,7 @@ declare const TextInputField: react.ForwardRefExoticComponent<BaseFieldProps<Tex
|
|
|
641
641
|
} | undefined;
|
|
642
642
|
max?: string | number | undefined;
|
|
643
643
|
min?: string | number | undefined;
|
|
644
|
-
} & (Omit<react.InputHTMLAttributes<HTMLInputElement>, "onChange"> | Omit<react.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange">)) & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>, "valid" | "value" | "required" | "minLength" | "maxLength" | "disabled" | "type" | "label" | "onFocus" | "onBlur" | "autoFocus" | "id" | "onChange" | "size" | "data-testid" | "autoComplete" | "autoCapitalize" | "autoCorrect" | "autoSave" | "onKeyDown" | "onKeyUp" | "placeholder" | "noTopLabel" | "readOnly" | "
|
|
644
|
+
} & (Omit<react.InputHTMLAttributes<HTMLInputElement>, "onChange"> | Omit<react.TextareaHTMLAttributes<HTMLTextAreaElement>, "onChange">)) & react.RefAttributes<HTMLInputElement | HTMLTextAreaElement | null>, "valid" | "value" | "required" | "minLength" | "maxLength" | "disabled" | "type" | "label" | "onFocus" | "onBlur" | "autoFocus" | "id" | "onChange" | "size" | "data-testid" | "autoComplete" | "autoCapitalize" | "autoCorrect" | "autoSave" | "onKeyDown" | "onKeyUp" | "placeholder" | "noTopLabel" | "readOnly" | "rows" | "cols" | "fillAvailable" | "generated" | "multiline" | "notice" | "random" | "resizable" | "unit">> & {
|
|
645
645
|
name: string;
|
|
646
646
|
className?: string | undefined;
|
|
647
647
|
max?: number | undefined;
|
|
@@ -3,22 +3,20 @@ import { useFormState } from 'react-final-form';
|
|
|
3
3
|
import { jsx } from '@emotion/react/jsx-runtime';
|
|
4
4
|
|
|
5
5
|
const ErrorContext = /*#__PURE__*/createContext(undefined);
|
|
6
|
-
const ErrorProvider =
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
} = _ref;
|
|
6
|
+
const ErrorProvider = ({
|
|
7
|
+
children,
|
|
8
|
+
errors
|
|
9
|
+
}) => {
|
|
11
10
|
const {
|
|
12
11
|
values
|
|
13
12
|
} = useFormState();
|
|
14
|
-
const getFirstError = useCallback(
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
} = _ref2;
|
|
13
|
+
const getFirstError = useCallback(({
|
|
14
|
+
label,
|
|
15
|
+
name,
|
|
16
|
+
value,
|
|
17
|
+
meta,
|
|
18
|
+
...additionalParams
|
|
19
|
+
}) => {
|
|
22
20
|
if (meta?.error && Array.isArray(meta.error)) {
|
|
23
21
|
return meta.error.map(untypedKey => {
|
|
24
22
|
const key = untypedKey;
|
|
@@ -39,13 +37,12 @@ const ErrorProvider = _ref => {
|
|
|
39
37
|
if (meta?.error && typeof meta?.error === 'string') return meta?.error;
|
|
40
38
|
return '';
|
|
41
39
|
}, [errors, values]);
|
|
42
|
-
const getError = useCallback(
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
} = _ref3;
|
|
40
|
+
const getError = useCallback(({
|
|
41
|
+
meta,
|
|
42
|
+
errorProp,
|
|
43
|
+
value,
|
|
44
|
+
...props
|
|
45
|
+
}) => {
|
|
49
46
|
if (errorProp) return errorProp;
|
|
50
47
|
const hasInitialValueAndNotTouched = value !== undefined && value !== null && value !== '' && value !== false && meta?.dirty === false;
|
|
51
48
|
return meta?.error && (hasInitialValueAndNotTouched || meta.touched) ? getFirstError({
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ultraviolet/form",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.12.1",
|
|
4
4
|
"description": "Ultraviolet Form",
|
|
5
5
|
"homepage": "https://github.com/scaleway/ultraviolet#readme",
|
|
6
6
|
"repository": {
|
|
@@ -38,15 +38,15 @@
|
|
|
38
38
|
"react-dom": "18.x"
|
|
39
39
|
},
|
|
40
40
|
"devDependencies": {
|
|
41
|
-
"@babel/core": "7.23.
|
|
41
|
+
"@babel/core": "7.23.6",
|
|
42
42
|
"@types/final-form-focus": "1.1.7",
|
|
43
|
-
"@types/react": "18.2.
|
|
44
|
-
"@types/react-dom": "18.2.
|
|
43
|
+
"@types/react": "18.2.45",
|
|
44
|
+
"@types/react-dom": "18.2.18",
|
|
45
45
|
"react": "18.2.0",
|
|
46
46
|
"react-dom": "18.2.0"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@babel/runtime": "7.23.
|
|
49
|
+
"@babel/runtime": "7.23.6",
|
|
50
50
|
"@emotion/babel-plugin": "11.11.0",
|
|
51
51
|
"@emotion/react": "11.11.1",
|
|
52
52
|
"@emotion/styled": "11.11.0",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"react-final-form": "6.5.9",
|
|
56
56
|
"react-final-form-arrays": "3.1.4",
|
|
57
57
|
"react-select": "5.8.0",
|
|
58
|
-
"@ultraviolet/ui": "1.
|
|
58
|
+
"@ultraviolet/ui": "1.29.1"
|
|
59
59
|
},
|
|
60
60
|
"scripts": {
|
|
61
61
|
"build": "rollup -c ../../rollup.config.mjs"
|