@digigov/form 0.6.10 → 0.7.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/CHANGELOG.md +12 -1
- package/Field/FieldBase.js +110 -0
- package/Field/FieldConditional.js +72 -0
- package/Field/FieldContainer.js +62 -0
- package/Field/index.js +15 -328
- package/Field/utils.js +146 -0
- package/FormBuilder.js +12 -12
- package/Questions/__snapshots__/index.spec.tsx.snap +461 -2499
- package/es/Field/FieldBase.js +93 -0
- package/es/Field/FieldConditional.js +54 -0
- package/es/Field/FieldContainer.js +40 -0
- package/es/Field/index.js +11 -308
- package/es/Field/utils.js +122 -0
- package/es/FormBuilder.js +11 -11
- package/es/Questions/__snapshots__/index.spec.tsx.snap +461 -2499
- package/es/internal.js +2 -0
- package/es/utils.js +5 -3
- package/es/validators/index.js +155 -0
- package/es/validators/types.js +1 -0
- package/es/validators/utils/afm.js +35 -0
- package/es/validators/utils/file.js +52 -0
- package/es/validators/utils/iban.js +123 -0
- package/es/validators/utils/index.js +105 -0
- package/es/validators/utils/phone.js +122 -0
- package/es/validators/utils/postal_code.js +29 -0
- package/es/validators/utils/uuid4.js +20 -0
- package/es/{validators.spec.js → validators/validators.spec.js} +1 -1
- package/esm/Field/FieldBase.js +93 -0
- package/esm/Field/FieldConditional.js +54 -0
- package/esm/Field/FieldContainer.js +40 -0
- package/esm/Field/index.js +11 -308
- package/esm/Field/utils.js +122 -0
- package/esm/FormBuilder.js +11 -11
- package/esm/Questions/__snapshots__/index.spec.tsx.snap +461 -2499
- package/esm/index.js +1 -1
- package/esm/internal.js +2 -0
- package/esm/utils.js +5 -3
- package/esm/validators/index.js +155 -0
- package/esm/validators/types.js +1 -0
- package/esm/validators/utils/afm.js +35 -0
- package/esm/validators/utils/file.js +52 -0
- package/esm/validators/utils/iban.js +123 -0
- package/esm/validators/utils/index.js +105 -0
- package/esm/validators/utils/phone.js +122 -0
- package/esm/validators/utils/postal_code.js +29 -0
- package/esm/validators/utils/uuid4.js +20 -0
- package/esm/{validators.spec.js → validators/validators.spec.js} +1 -1
- package/internal.js +21 -0
- package/libs/form/src/Field/FieldBase.d.ts +3 -0
- package/libs/form/src/Field/FieldConditional.d.ts +4 -0
- package/libs/form/src/Field/FieldContainer.d.ts +4 -0
- package/libs/form/src/Field/index.d.ts +1 -3
- package/libs/form/src/Field/types.d.ts +2 -2
- package/libs/form/src/Field/utils.d.ts +5 -0
- package/libs/form/src/FormContext.d.ts +2 -2
- package/libs/form/src/internal.d.ts +2 -0
- package/libs/form/src/types.d.ts +3 -2
- package/libs/form/src/validators/index.d.ts +8 -0
- package/libs/form/src/validators/types.d.ts +2 -0
- package/libs/form/src/validators/utils/afm.d.ts +6 -0
- package/libs/form/src/validators/utils/file.d.ts +1 -0
- package/libs/form/src/validators/utils/iban.d.ts +2 -0
- package/libs/form/src/validators/utils/index.d.ts +12 -0
- package/libs/form/src/validators/utils/phone.d.ts +9 -0
- package/libs/form/src/validators/utils/postal_code.d.ts +2 -0
- package/libs/form/src/validators/utils/uuid4.d.ts +6 -0
- package/libs/form/src/{validators.spec.d.ts → validators/validators.spec.d.ts} +0 -0
- package/libs/ui/src/core/Button/BackButton.d.ts +1 -1
- package/libs/ui/src/core/Button/ButtonLink.d.ts +1 -1
- package/libs/ui/src/core/Button/index.d.ts +1 -1
- package/libs/ui/src/core/NavList/NavListItem.d.ts +1 -0
- package/libs/ui/src/core/NavList/NavListItemBase.d.ts +1 -0
- package/libs/ui/src/core/NavList/types.d.ts +1 -0
- package/libs-ui/react-core/src/AccordionSectionSummary/index.d.ts +2 -1
- package/libs-ui/react-core/src/BackLink/index.d.ts +1 -1
- package/libs-ui/react-core/src/Button/index.d.ts +1 -1
- package/libs-ui/react-core/src/ButtonLink/index.d.ts +1 -1
- package/libs-ui/react-core/src/CallToAction/index.d.ts +1 -1
- package/libs-ui/react-core/src/CheckboxItem/index.d.ts +1 -1
- package/libs-ui/react-core/src/DateInputItem/index.d.ts +1 -1
- package/libs-ui/react-core/src/Field/index.d.ts +3 -3
- package/libs-ui/react-core/src/FileUpload/index.d.ts +1 -1
- package/libs-ui/react-core/src/Form/index.d.ts +11 -0
- package/libs-ui/react-core/src/Link/index.d.ts +1 -1
- package/libs-ui/react-core/src/NotificationBannerLink/index.d.ts +1 -1
- package/libs-ui/react-core/src/RadioItem/index.d.ts +1 -1
- package/libs-ui/react-core/src/Select/index.d.ts +1 -1
- package/libs-ui/react-core/src/SvgIcon/index.d.ts +1 -1
- package/libs-ui/react-core/src/TabsListItem/index.d.ts +1 -1
- package/libs-ui/react-core/src/TextArea/index.d.ts +1 -1
- package/libs-ui/react-core/src/TextInput/index.d.ts +1 -1
- package/package.json +3 -2
- package/utils.js +6 -4
- package/validators/index.js +181 -0
- package/validators/types.js +5 -0
- package/validators/utils/afm.js +45 -0
- package/validators/utils/file.js +62 -0
- package/validators/utils/iban.js +134 -0
- package/validators/utils/index.js +210 -0
- package/validators/utils/phone.js +144 -0
- package/validators/utils/postal_code.js +40 -0
- package/validators/utils/uuid4.js +30 -0
- package/validators/validators.spec.js +88 -0
- package/es/validators.js +0 -626
- package/esm/validators.js +0 -626
- package/libs/form/src/validators.d.ts +0 -14
- package/validators.js +0 -662
- package/validators.spec.js +0 -88
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
var UUID4_PATTERN = /^[0-9A-F]{8}-[0-9A-F]{4}-[4][0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i;
|
|
2
|
+
export function validateUUID4(uuid4) {
|
|
3
|
+
if (uuid4.length !== 36) {
|
|
4
|
+
// This uuid4 should be 36 characters long
|
|
5
|
+
return false;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
return UUID4_PATTERN.test(uuid4);
|
|
9
|
+
}
|
|
10
|
+
export var UUID4_VALIDATOR = {
|
|
11
|
+
name: 'uuid4-validator',
|
|
12
|
+
message: 'form.error.uuid4',
|
|
13
|
+
test: function test(value) {
|
|
14
|
+
if (value) {
|
|
15
|
+
return validateUUID4(value);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
return true;
|
|
19
|
+
}
|
|
20
|
+
};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { validateUUID4, validateIban, validatePostalCode, validatePhoneNumber } from '@digigov/form/validators';
|
|
1
|
+
import { validateUUID4, validateIban, validatePostalCode, validatePhoneNumber } from '@digigov/form/validators/utils';
|
|
2
2
|
it('validates wrong uuid4 for empty value', function () {
|
|
3
3
|
expect(validateUUID4('')).toBe(false);
|
|
4
4
|
});
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["required", "name", "component", "wrapper", "control", "type", "controlled", "enabled", "editable", "defaultValue", "label", "extra", "layout", "error", "register"];
|
|
4
|
+
import React from 'react';
|
|
5
|
+
import FieldContainer from '@digigov/form/Field/FieldContainer';
|
|
6
|
+
import { Controller } from 'react-hook-form';
|
|
7
|
+
export var FieldBase = function FieldBase(props) {
|
|
8
|
+
var required = props.required,
|
|
9
|
+
name = props.name,
|
|
10
|
+
Component = props.component,
|
|
11
|
+
wrapper = props.wrapper,
|
|
12
|
+
control = props.control,
|
|
13
|
+
type = props.type,
|
|
14
|
+
_props$controlled = props.controlled,
|
|
15
|
+
controlled = _props$controlled === void 0 ? false : _props$controlled,
|
|
16
|
+
_props$enabled = props.enabled,
|
|
17
|
+
enabled = _props$enabled === void 0 ? true : _props$enabled,
|
|
18
|
+
editable = props.editable,
|
|
19
|
+
defaultValue = props.defaultValue,
|
|
20
|
+
label = props.label,
|
|
21
|
+
_props$extra = props.extra,
|
|
22
|
+
extra = _props$extra === void 0 ? {} : _props$extra,
|
|
23
|
+
layout = props.layout,
|
|
24
|
+
error = props.error,
|
|
25
|
+
register = props.register,
|
|
26
|
+
componentProps = _objectWithoutProperties(props, _excluded);
|
|
27
|
+
|
|
28
|
+
if (!enabled) {
|
|
29
|
+
return null;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
if (controlled) {
|
|
33
|
+
return /*#__PURE__*/React.createElement(FieldContainer, {
|
|
34
|
+
label: label,
|
|
35
|
+
layout: layout,
|
|
36
|
+
error: error,
|
|
37
|
+
wrapper: wrapper,
|
|
38
|
+
name: name
|
|
39
|
+
}, /*#__PURE__*/React.createElement(Controller, {
|
|
40
|
+
control: control,
|
|
41
|
+
name: name,
|
|
42
|
+
render: function render(_ref) {
|
|
43
|
+
var onChange = _ref.onChange,
|
|
44
|
+
onBlur = _ref.onBlur,
|
|
45
|
+
value = _ref.value;
|
|
46
|
+
return /*#__PURE__*/React.createElement(Component, _extends({
|
|
47
|
+
name: name,
|
|
48
|
+
onChange: onChange,
|
|
49
|
+
onBlur: onBlur,
|
|
50
|
+
value: value,
|
|
51
|
+
defaultValue: defaultValue,
|
|
52
|
+
extra: extra,
|
|
53
|
+
error: !!error,
|
|
54
|
+
type: type,
|
|
55
|
+
"aria-required": !!required,
|
|
56
|
+
"aria-describedby": error && "".concat(name, "-error"),
|
|
57
|
+
required: required,
|
|
58
|
+
disabled: editable === false
|
|
59
|
+
}, componentProps));
|
|
60
|
+
}
|
|
61
|
+
}));
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
return /*#__PURE__*/React.createElement(FieldContainer, {
|
|
65
|
+
label: label,
|
|
66
|
+
layout: layout,
|
|
67
|
+
error: error,
|
|
68
|
+
wrapper: wrapper,
|
|
69
|
+
name: name
|
|
70
|
+
}, Component !== null && Component !== void 0 && Component.render ? /*#__PURE__*/React.createElement(Component, _extends({
|
|
71
|
+
name: name,
|
|
72
|
+
ref: register,
|
|
73
|
+
control: control,
|
|
74
|
+
error: !!error,
|
|
75
|
+
extra: extra,
|
|
76
|
+
type: type,
|
|
77
|
+
"aria-required": !!required,
|
|
78
|
+
"aria-describedby": error && "".concat(name, "-error"),
|
|
79
|
+
required: required,
|
|
80
|
+
disabled: editable === false
|
|
81
|
+
}, componentProps)) : /*#__PURE__*/React.createElement(Component, _extends({
|
|
82
|
+
name: name,
|
|
83
|
+
register: register,
|
|
84
|
+
control: control,
|
|
85
|
+
error: !!error,
|
|
86
|
+
extra: extra,
|
|
87
|
+
type: type,
|
|
88
|
+
"aria-required": !!required,
|
|
89
|
+
"aria-describedby": error && "".concat(name, "-error"),
|
|
90
|
+
required: required,
|
|
91
|
+
disabled: editable === false
|
|
92
|
+
}, componentProps)));
|
|
93
|
+
};
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { useWatch } from 'react-hook-form';
|
|
4
|
+
import { evaluateFieldWithConditions } from '@digigov/form/Field/utils';
|
|
5
|
+
import { FieldBase } from '@digigov/form/Field/FieldBase';
|
|
6
|
+
var ChildFieldMemo = /*#__PURE__*/React.memo(function ChildField(_ref) {
|
|
7
|
+
var dependencies = _ref.dependencies,
|
|
8
|
+
field = _ref.field,
|
|
9
|
+
control = _ref.control,
|
|
10
|
+
register = _ref.register,
|
|
11
|
+
error = _ref.error;
|
|
12
|
+
var newField = evaluateFieldWithConditions(field, dependencies);
|
|
13
|
+
return /*#__PURE__*/React.createElement(FieldBase, _extends({}, newField, {
|
|
14
|
+
name: newField.key,
|
|
15
|
+
control: control,
|
|
16
|
+
register: register,
|
|
17
|
+
error: error
|
|
18
|
+
}));
|
|
19
|
+
}, function (prev, next) {
|
|
20
|
+
if (!prev || !prev.dependencies) {
|
|
21
|
+
return false;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
if (prev.error !== next.error) {
|
|
25
|
+
return false;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
for (var dep in next.dependencies) {
|
|
29
|
+
if (next.dependencies[dep] !== prev.dependencies[dep]) {
|
|
30
|
+
return false;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
return true;
|
|
35
|
+
});
|
|
36
|
+
export var FieldConditional = function FieldConditional(_ref2) {
|
|
37
|
+
var control = _ref2.control,
|
|
38
|
+
field = _ref2.field,
|
|
39
|
+
register = _ref2.register,
|
|
40
|
+
error = _ref2.error;
|
|
41
|
+
var dependencyKeys = Object.keys(field.condition);
|
|
42
|
+
var variables = useWatch({
|
|
43
|
+
name: dependencyKeys,
|
|
44
|
+
control: control
|
|
45
|
+
});
|
|
46
|
+
return /*#__PURE__*/React.createElement(ChildFieldMemo, {
|
|
47
|
+
dependencies: variables,
|
|
48
|
+
field: field,
|
|
49
|
+
control: control,
|
|
50
|
+
register: register,
|
|
51
|
+
error: error
|
|
52
|
+
});
|
|
53
|
+
};
|
|
54
|
+
export default FieldConditional;
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import CoreField from '@digigov/react-core/Field';
|
|
4
|
+
import CoreLabel from '@digigov/react-core/Label';
|
|
5
|
+
import CoreFieldset from '@digigov/react-core/Fieldset';
|
|
6
|
+
import Hint from '@digigov/react-core/Hint';
|
|
7
|
+
import FieldsetLegend from '@digigov/react-core/FieldsetLegend';
|
|
8
|
+
import ErrorMessage from '@digigov/react-core/ErrorMessage';
|
|
9
|
+
import { useTranslation } from '@digigov/ui/app/i18n';
|
|
10
|
+
import Label from '@digigov/form/inputs/Label';
|
|
11
|
+
export var FieldContainer = function FieldContainer(_ref) {
|
|
12
|
+
var name = _ref.name,
|
|
13
|
+
wrapper = _ref.wrapper,
|
|
14
|
+
label = _ref.label,
|
|
15
|
+
children = _ref.children,
|
|
16
|
+
error = _ref.error,
|
|
17
|
+
layout = _ref.layout;
|
|
18
|
+
|
|
19
|
+
var _useTranslation = useTranslation(),
|
|
20
|
+
t = _useTranslation.t;
|
|
21
|
+
|
|
22
|
+
if (wrapper === 'fieldset') {
|
|
23
|
+
return /*#__PURE__*/React.createElement(CoreField, _extends({
|
|
24
|
+
error: !!error
|
|
25
|
+
}, layout), /*#__PURE__*/React.createElement(CoreFieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
|
|
26
|
+
size: "s"
|
|
27
|
+
}, label && label.primary, label && label.secondary && /*#__PURE__*/React.createElement(Hint, null, t(label.secondary)), error && /*#__PURE__*/React.createElement(ErrorMessage, {
|
|
28
|
+
id: "".concat(name, "-error")
|
|
29
|
+
}, t((error === null || error === void 0 ? void 0 : error.message) || ''))), children));
|
|
30
|
+
} else {
|
|
31
|
+
return /*#__PURE__*/React.createElement(CoreField, _extends({
|
|
32
|
+
error: !!error
|
|
33
|
+
}, layout), /*#__PURE__*/React.createElement(CoreLabel, null, label && /*#__PURE__*/React.createElement(Label, {
|
|
34
|
+
label: label
|
|
35
|
+
}), error && /*#__PURE__*/React.createElement(ErrorMessage, {
|
|
36
|
+
id: "".concat(name, "-error")
|
|
37
|
+
}, t((error === null || error === void 0 ? void 0 : error.message) || '')), children));
|
|
38
|
+
}
|
|
39
|
+
};
|
|
40
|
+
export default FieldContainer;
|
package/esm/Field/index.js
CHANGED
|
@@ -1,311 +1,14 @@
|
|
|
1
|
-
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
2
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
import React, {
|
|
6
|
-
import {
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
import ErrorMessage from '@digigov/react-core/ErrorMessage';
|
|
14
|
-
import Input from '@digigov/form/inputs/Input';
|
|
15
|
-
import Checkboxes from '@digigov/form/inputs/Checkboxes';
|
|
16
|
-
import Radio from '@digigov/form/inputs/Radio';
|
|
17
|
-
import Select from '@digigov/form/inputs/Select';
|
|
18
|
-
import FileInput from '@digigov/form/inputs/FileInput';
|
|
19
|
-
import DateInput from '@digigov/form/inputs/DateInput';
|
|
20
|
-
import Label from '@digigov/form/inputs/Label';
|
|
21
|
-
import { useTranslation } from '@digigov/ui/app/i18n';
|
|
22
|
-
|
|
23
|
-
function evaluateFieldWithConditions(field, variables) {
|
|
24
|
-
var newField = _extends({}, field);
|
|
25
|
-
|
|
26
|
-
if (variables) {
|
|
27
|
-
for (var key in variables) {
|
|
28
|
-
if (field.condition[key] && field.condition[key].is === variables[key]) {
|
|
29
|
-
var then = field.condition[key].then || {};
|
|
30
|
-
|
|
31
|
-
for (var attr in then) {
|
|
32
|
-
newField[attr] = then[attr];
|
|
33
|
-
}
|
|
34
|
-
} else if (field.condition[key]) {
|
|
35
|
-
var otherwise = field.condition[key]["else"] || {};
|
|
36
|
-
|
|
37
|
-
for (var _attr in otherwise) {
|
|
38
|
-
newField[_attr] = otherwise[_attr];
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
return newField;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
var ChildFieldMemo = /*#__PURE__*/React.memo(function ChildField(_ref) {
|
|
48
|
-
var dependencies = _ref.dependencies,
|
|
49
|
-
field = _ref.field,
|
|
50
|
-
control = _ref.control,
|
|
51
|
-
register = _ref.register,
|
|
52
|
-
error = _ref.error;
|
|
53
|
-
var newField = evaluateFieldWithConditions(field, dependencies);
|
|
54
|
-
return /*#__PURE__*/React.createElement(FieldBase, _extends({}, newField, {
|
|
55
|
-
name: newField.key,
|
|
56
|
-
control: control,
|
|
57
|
-
register: register,
|
|
58
|
-
error: error
|
|
59
|
-
}));
|
|
60
|
-
}, function (prev, next) {
|
|
61
|
-
if (!prev || !prev.dependencies) {
|
|
62
|
-
return false;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
if (prev.error !== next.error) {
|
|
66
|
-
return false;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
for (var dep in next.dependencies) {
|
|
70
|
-
if (next.dependencies[dep] !== prev.dependencies[dep]) {
|
|
71
|
-
return false;
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
return true;
|
|
76
|
-
});
|
|
77
|
-
export var ConditionalField = function ConditionalField(_ref2) {
|
|
78
|
-
var control = _ref2.control,
|
|
79
|
-
field = _ref2.field,
|
|
80
|
-
register = _ref2.register,
|
|
81
|
-
error = _ref2.error;
|
|
82
|
-
var dependencyKeys = Object.keys(field.condition);
|
|
83
|
-
var variables = useWatch({
|
|
84
|
-
name: dependencyKeys,
|
|
85
|
-
control: control
|
|
86
|
-
});
|
|
87
|
-
return /*#__PURE__*/React.createElement(ChildFieldMemo, {
|
|
88
|
-
dependencies: variables,
|
|
89
|
-
field: field,
|
|
90
|
-
control: control,
|
|
91
|
-
register: register,
|
|
92
|
-
error: error
|
|
93
|
-
});
|
|
94
|
-
};
|
|
95
|
-
var FIELD_COMPONENTS = {
|
|
96
|
-
text: {
|
|
97
|
-
component: Input
|
|
98
|
-
},
|
|
99
|
-
string: {
|
|
100
|
-
component: Input
|
|
101
|
-
},
|
|
102
|
-
file: {
|
|
103
|
-
wrapper: 'fieldset',
|
|
104
|
-
component: FileInput
|
|
105
|
-
},
|
|
106
|
-
date: {
|
|
107
|
-
wrapper: 'fieldset',
|
|
108
|
-
controlled: true,
|
|
109
|
-
component: DateInput
|
|
110
|
-
},
|
|
111
|
-
'choice:multiple': {
|
|
112
|
-
wrapper: 'fieldset',
|
|
113
|
-
controlled: true,
|
|
114
|
-
component: Checkboxes
|
|
115
|
-
},
|
|
116
|
-
'choice:single': {
|
|
117
|
-
wrapper: 'fieldset',
|
|
118
|
-
controlled: false,
|
|
119
|
-
component: Radio
|
|
120
|
-
}
|
|
121
|
-
};
|
|
122
|
-
var ALTERNATIVE_COMPONENTS = {
|
|
123
|
-
Select: {
|
|
124
|
-
component: Select,
|
|
125
|
-
controlled: false
|
|
126
|
-
}
|
|
127
|
-
};
|
|
128
|
-
|
|
129
|
-
var FieldContainer = function FieldContainer(_ref3) {
|
|
130
|
-
var name = _ref3.name,
|
|
131
|
-
wrapper = _ref3.wrapper,
|
|
132
|
-
label = _ref3.label,
|
|
133
|
-
children = _ref3.children,
|
|
134
|
-
error = _ref3.error;
|
|
135
|
-
|
|
136
|
-
var _useTranslation = useTranslation(),
|
|
137
|
-
t = _useTranslation.t;
|
|
138
|
-
|
|
139
|
-
if (wrapper === 'fieldset') {
|
|
140
|
-
return /*#__PURE__*/React.createElement(CoreField, {
|
|
141
|
-
error: !!error
|
|
142
|
-
}, /*#__PURE__*/React.createElement(CoreFieldset, null, /*#__PURE__*/React.createElement(FieldsetLegend, {
|
|
143
|
-
size: "s"
|
|
144
|
-
}, label && label.primary, label && label.secondary && /*#__PURE__*/React.createElement(Hint, null, t(label.secondary)), error && /*#__PURE__*/React.createElement(ErrorMessage, {
|
|
145
|
-
id: "".concat(name, "-error")
|
|
146
|
-
}, t((error === null || error === void 0 ? void 0 : error.message) || ''))), children));
|
|
147
|
-
} else {
|
|
148
|
-
return /*#__PURE__*/React.createElement(CoreField, {
|
|
149
|
-
error: !!error
|
|
150
|
-
}, /*#__PURE__*/React.createElement(CoreLabel, null, label && /*#__PURE__*/React.createElement(Label, {
|
|
151
|
-
label: label
|
|
152
|
-
}), error && /*#__PURE__*/React.createElement(ErrorMessage, {
|
|
153
|
-
id: "".concat(name, "-error")
|
|
154
|
-
}, t((error === null || error === void 0 ? void 0 : error.message) || '')), children));
|
|
155
|
-
}
|
|
156
|
-
};
|
|
157
|
-
|
|
158
|
-
export var FieldBase = function FieldBase(props) {
|
|
159
|
-
var required = props.required,
|
|
160
|
-
name = props.name,
|
|
161
|
-
Component = props.component,
|
|
162
|
-
wrapper = props.wrapper,
|
|
163
|
-
control = props.control,
|
|
164
|
-
type = props.type,
|
|
165
|
-
_props$controlled = props.controlled,
|
|
166
|
-
controlled = _props$controlled === void 0 ? false : _props$controlled,
|
|
167
|
-
_props$enabled = props.enabled,
|
|
168
|
-
enabled = _props$enabled === void 0 ? true : _props$enabled,
|
|
169
|
-
editable = props.editable,
|
|
170
|
-
defaultValue = props.defaultValue,
|
|
171
|
-
label = props.label,
|
|
172
|
-
_props$extra = props.extra,
|
|
173
|
-
extra = _props$extra === void 0 ? {} : _props$extra,
|
|
174
|
-
layout = props.layout,
|
|
175
|
-
error = props.error,
|
|
176
|
-
register = props.register,
|
|
177
|
-
componentProps = _objectWithoutProperties(props, _excluded);
|
|
178
|
-
|
|
179
|
-
if (!enabled) {
|
|
180
|
-
return null;
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
if (controlled) {
|
|
184
|
-
return /*#__PURE__*/React.createElement(FieldContainer, {
|
|
185
|
-
label: label,
|
|
186
|
-
layout: layout,
|
|
187
|
-
error: error,
|
|
188
|
-
wrapper: wrapper,
|
|
189
|
-
name: name
|
|
190
|
-
}, /*#__PURE__*/React.createElement(Controller, {
|
|
191
|
-
control: control,
|
|
192
|
-
name: name,
|
|
193
|
-
render: function render(_ref4) {
|
|
194
|
-
var onChange = _ref4.onChange,
|
|
195
|
-
onBlur = _ref4.onBlur,
|
|
196
|
-
value = _ref4.value;
|
|
197
|
-
return /*#__PURE__*/React.createElement(Component, _extends({
|
|
198
|
-
name: name,
|
|
199
|
-
onChange: onChange,
|
|
200
|
-
onBlur: onBlur,
|
|
201
|
-
value: value,
|
|
202
|
-
defaultValue: defaultValue,
|
|
203
|
-
extra: extra,
|
|
204
|
-
error: !!error,
|
|
205
|
-
type: type,
|
|
206
|
-
"aria-required": !!required,
|
|
207
|
-
"aria-describedby": error && "".concat(name, "-error"),
|
|
208
|
-
required: required,
|
|
209
|
-
disabled: editable === false
|
|
210
|
-
}, componentProps));
|
|
211
|
-
}
|
|
212
|
-
}));
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
return /*#__PURE__*/React.createElement(FieldContainer, {
|
|
216
|
-
label: label,
|
|
217
|
-
layout: layout,
|
|
218
|
-
error: error,
|
|
219
|
-
wrapper: wrapper,
|
|
220
|
-
name: name
|
|
221
|
-
}, Component !== null && Component !== void 0 && Component.render ? /*#__PURE__*/React.createElement(Component, _extends({
|
|
222
|
-
name: name,
|
|
223
|
-
ref: register,
|
|
224
|
-
control: control,
|
|
225
|
-
error: !!error,
|
|
226
|
-
extra: extra,
|
|
227
|
-
type: type,
|
|
228
|
-
"aria-required": !!required,
|
|
229
|
-
"aria-describedby": error && "".concat(name, "-error"),
|
|
230
|
-
required: required,
|
|
231
|
-
disabled: editable === false
|
|
232
|
-
}, componentProps)) : /*#__PURE__*/React.createElement(Component, _extends({
|
|
233
|
-
name: name,
|
|
234
|
-
register: register,
|
|
235
|
-
control: control,
|
|
236
|
-
error: !!error,
|
|
237
|
-
extra: extra,
|
|
238
|
-
type: type,
|
|
239
|
-
"aria-required": !!required,
|
|
240
|
-
"aria-describedby": error && "".concat(name, "-error"),
|
|
241
|
-
required: required,
|
|
242
|
-
disabled: editable === false
|
|
243
|
-
}, componentProps)));
|
|
244
|
-
};
|
|
245
|
-
|
|
246
|
-
var useField = function useField(name, customField) {
|
|
247
|
-
var _useContext = useContext(FormContext),
|
|
248
|
-
fieldsMap = _useContext.fieldsMap,
|
|
249
|
-
control = _useContext.control,
|
|
250
|
-
register = _useContext.register,
|
|
251
|
-
errors = _useContext.errors,
|
|
252
|
-
registerField = _useContext.registerField,
|
|
253
|
-
componentRegistry = _useContext.componentRegistry;
|
|
254
|
-
|
|
255
|
-
useMemo(function () {
|
|
256
|
-
return (customField === null || customField === void 0 ? void 0 : customField.type) && registerField(_extends({}, customField, {
|
|
257
|
-
key: name
|
|
258
|
-
}));
|
|
259
|
-
}, [customField, name, registerField]);
|
|
260
|
-
return {
|
|
261
|
-
field: customField || fieldsMap[name],
|
|
262
|
-
control: control,
|
|
263
|
-
register: register,
|
|
264
|
-
componentRegistry: componentRegistry,
|
|
265
|
-
error: errors[name]
|
|
266
|
-
};
|
|
267
|
-
};
|
|
268
|
-
|
|
269
|
-
function calculateField(children, field, componentRegistry) {
|
|
270
|
-
var _field$extra;
|
|
271
|
-
|
|
272
|
-
var calculatedField = _extends({}, field);
|
|
273
|
-
|
|
274
|
-
var fieldComponentRegistry = _extends({}, FIELD_COMPONENTS, componentRegistry);
|
|
275
|
-
|
|
276
|
-
if (children) {
|
|
277
|
-
calculatedField.component = children;
|
|
278
|
-
} else if (typeof field.component === 'function') {// leave as is
|
|
279
|
-
} else if (!field.component && !field.type) {
|
|
280
|
-
var _fieldComponentRegist;
|
|
281
|
-
|
|
282
|
-
calculatedField.component = fieldComponentRegistry.string.component;
|
|
283
|
-
calculatedField.controlled = ((_fieldComponentRegist = fieldComponentRegistry.string) === null || _fieldComponentRegist === void 0 ? void 0 : _fieldComponentRegist.controlled) || false;
|
|
284
|
-
} else if (typeof (field === null || field === void 0 ? void 0 : (_field$extra = field.extra) === null || _field$extra === void 0 ? void 0 : _field$extra.component) === 'string' && ALTERNATIVE_COMPONENTS[field.extra.component]) {
|
|
285
|
-
var _ALTERNATIVE_COMPONEN;
|
|
286
|
-
|
|
287
|
-
calculatedField.controlled = ((_ALTERNATIVE_COMPONEN = ALTERNATIVE_COMPONENTS[field.extra.component]) === null || _ALTERNATIVE_COMPONEN === void 0 ? void 0 : _ALTERNATIVE_COMPONEN.controlled) || false;
|
|
288
|
-
calculatedField.component = ALTERNATIVE_COMPONENTS[field.extra.component].component;
|
|
289
|
-
} else if (!field.component && field.type && fieldComponentRegistry[field.type]) {
|
|
290
|
-
var _fieldComponentRegist2;
|
|
291
|
-
|
|
292
|
-
calculatedField.component = fieldComponentRegistry[field.type].component;
|
|
293
|
-
calculatedField.wrapper = fieldComponentRegistry[field.type].wrapper;
|
|
294
|
-
calculatedField.controlled = ((_fieldComponentRegist2 = fieldComponentRegistry[field.type]) === null || _fieldComponentRegist2 === void 0 ? void 0 : _fieldComponentRegist2.controlled) || false;
|
|
295
|
-
} else {
|
|
296
|
-
var _fieldComponentRegist3;
|
|
297
|
-
|
|
298
|
-
calculatedField.component = fieldComponentRegistry.string.component;
|
|
299
|
-
calculatedField.controlled = ((_fieldComponentRegist3 = fieldComponentRegistry.string) === null || _fieldComponentRegist3 === void 0 ? void 0 : _fieldComponentRegist3.controlled) || false;
|
|
300
|
-
}
|
|
301
|
-
|
|
302
|
-
return calculatedField;
|
|
303
|
-
}
|
|
304
|
-
|
|
305
|
-
export var Field = function Field(_ref5) {
|
|
306
|
-
var name = _ref5.name,
|
|
307
|
-
children = _ref5.children,
|
|
308
|
-
customField = _objectWithoutProperties(_ref5, _excluded2);
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["name", "children"];
|
|
4
|
+
import React, { useMemo } from 'react';
|
|
5
|
+
import { FieldBase } from '@digigov/form/Field/FieldBase';
|
|
6
|
+
import FieldConditional from '@digigov/form/Field/FieldConditional';
|
|
7
|
+
import { useField, calculateField } from '@digigov/form/Field/utils';
|
|
8
|
+
export var Field = function Field(_ref) {
|
|
9
|
+
var name = _ref.name,
|
|
10
|
+
children = _ref.children,
|
|
11
|
+
customField = _objectWithoutProperties(_ref, _excluded);
|
|
309
12
|
|
|
310
13
|
var _useField = useField(name, customField !== null && customField !== void 0 && customField.type ? customField : null),
|
|
311
14
|
field = _useField.field,
|
|
@@ -319,7 +22,7 @@ export var Field = function Field(_ref5) {
|
|
|
319
22
|
}, [field]);
|
|
320
23
|
|
|
321
24
|
if (calculatedField.condition) {
|
|
322
|
-
return /*#__PURE__*/React.createElement(
|
|
25
|
+
return /*#__PURE__*/React.createElement(FieldConditional, {
|
|
323
26
|
control: control,
|
|
324
27
|
register: register,
|
|
325
28
|
field: calculatedField,
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import { useContext, useMemo } from 'react';
|
|
3
|
+
import Input from '@digigov/form/inputs/Input';
|
|
4
|
+
import Checkboxes from '@digigov/form/inputs/Checkboxes';
|
|
5
|
+
import Radio from '@digigov/form/inputs/Radio';
|
|
6
|
+
import Select from '@digigov/form/inputs/Select';
|
|
7
|
+
import FileInput from '@digigov/form/inputs/FileInput';
|
|
8
|
+
import DateInput from '@digigov/form/inputs/DateInput';
|
|
9
|
+
import { FormContext } from '@digigov/form/FormContext';
|
|
10
|
+
var FIELD_COMPONENTS = {
|
|
11
|
+
text: {
|
|
12
|
+
component: Input
|
|
13
|
+
},
|
|
14
|
+
string: {
|
|
15
|
+
component: Input
|
|
16
|
+
},
|
|
17
|
+
file: {
|
|
18
|
+
wrapper: 'fieldset',
|
|
19
|
+
component: FileInput
|
|
20
|
+
},
|
|
21
|
+
date: {
|
|
22
|
+
wrapper: 'fieldset',
|
|
23
|
+
controlled: true,
|
|
24
|
+
component: DateInput
|
|
25
|
+
},
|
|
26
|
+
'choice:multiple': {
|
|
27
|
+
wrapper: 'fieldset',
|
|
28
|
+
controlled: true,
|
|
29
|
+
component: Checkboxes
|
|
30
|
+
},
|
|
31
|
+
'choice:single': {
|
|
32
|
+
wrapper: 'fieldset',
|
|
33
|
+
controlled: false,
|
|
34
|
+
component: Radio
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
var ALTERNATIVE_COMPONENTS = {
|
|
38
|
+
Select: {
|
|
39
|
+
component: Select,
|
|
40
|
+
controlled: false
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
export function calculateField(children, field, componentRegistry) {
|
|
44
|
+
var _field$extra;
|
|
45
|
+
|
|
46
|
+
var calculatedField = _extends({}, field);
|
|
47
|
+
|
|
48
|
+
var fieldComponentRegistry = _extends({}, FIELD_COMPONENTS, componentRegistry);
|
|
49
|
+
|
|
50
|
+
if (children) {
|
|
51
|
+
calculatedField.component = children;
|
|
52
|
+
} else if (typeof field.component === 'function') {// leave as is
|
|
53
|
+
} else if (!field.component && !field.type) {
|
|
54
|
+
var _fieldComponentRegist;
|
|
55
|
+
|
|
56
|
+
calculatedField.component = fieldComponentRegistry.string.component;
|
|
57
|
+
calculatedField.controlled = ((_fieldComponentRegist = fieldComponentRegistry.string) === null || _fieldComponentRegist === void 0 ? void 0 : _fieldComponentRegist.controlled) || false;
|
|
58
|
+
} else if (typeof (field === null || field === void 0 ? void 0 : (_field$extra = field.extra) === null || _field$extra === void 0 ? void 0 : _field$extra.component) === 'string' && ALTERNATIVE_COMPONENTS[field.extra.component]) {
|
|
59
|
+
var _ALTERNATIVE_COMPONEN;
|
|
60
|
+
|
|
61
|
+
calculatedField.controlled = ((_ALTERNATIVE_COMPONEN = ALTERNATIVE_COMPONENTS[field.extra.component]) === null || _ALTERNATIVE_COMPONEN === void 0 ? void 0 : _ALTERNATIVE_COMPONEN.controlled) || false;
|
|
62
|
+
calculatedField.component = ALTERNATIVE_COMPONENTS[field.extra.component].component;
|
|
63
|
+
} else if (!field.component && field.type && fieldComponentRegistry[field.type]) {
|
|
64
|
+
var _fieldComponentRegist2;
|
|
65
|
+
|
|
66
|
+
calculatedField.component = fieldComponentRegistry[field.type].component;
|
|
67
|
+
calculatedField.wrapper = fieldComponentRegistry[field.type].wrapper;
|
|
68
|
+
calculatedField.controlled = ((_fieldComponentRegist2 = fieldComponentRegistry[field.type]) === null || _fieldComponentRegist2 === void 0 ? void 0 : _fieldComponentRegist2.controlled) || false;
|
|
69
|
+
} else {
|
|
70
|
+
var _fieldComponentRegist3;
|
|
71
|
+
|
|
72
|
+
calculatedField.component = fieldComponentRegistry.string.component;
|
|
73
|
+
calculatedField.controlled = ((_fieldComponentRegist3 = fieldComponentRegistry.string) === null || _fieldComponentRegist3 === void 0 ? void 0 : _fieldComponentRegist3.controlled) || false;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
return calculatedField;
|
|
77
|
+
}
|
|
78
|
+
export var useField = function useField(name, customField) {
|
|
79
|
+
var _useContext = useContext(FormContext),
|
|
80
|
+
fieldsMap = _useContext.fieldsMap,
|
|
81
|
+
control = _useContext.control,
|
|
82
|
+
register = _useContext.register,
|
|
83
|
+
errors = _useContext.errors,
|
|
84
|
+
registerField = _useContext.registerField,
|
|
85
|
+
componentRegistry = _useContext.componentRegistry;
|
|
86
|
+
|
|
87
|
+
useMemo(function () {
|
|
88
|
+
return (customField === null || customField === void 0 ? void 0 : customField.type) && registerField(_extends({}, customField, {
|
|
89
|
+
key: name
|
|
90
|
+
}));
|
|
91
|
+
}, [customField, name, registerField]);
|
|
92
|
+
return {
|
|
93
|
+
field: customField || fieldsMap[name],
|
|
94
|
+
control: control,
|
|
95
|
+
register: register,
|
|
96
|
+
componentRegistry: componentRegistry,
|
|
97
|
+
error: errors[name]
|
|
98
|
+
};
|
|
99
|
+
};
|
|
100
|
+
export function evaluateFieldWithConditions(field, variables) {
|
|
101
|
+
var newField = _extends({}, field);
|
|
102
|
+
|
|
103
|
+
if (variables) {
|
|
104
|
+
for (var key in variables) {
|
|
105
|
+
if (field.condition[key] && field.condition[key].is === variables[key]) {
|
|
106
|
+
var then = field.condition[key].then || {};
|
|
107
|
+
|
|
108
|
+
for (var attr in then) {
|
|
109
|
+
newField[attr] = then[attr];
|
|
110
|
+
}
|
|
111
|
+
} else if (field.condition[key]) {
|
|
112
|
+
var otherwise = field.condition[key]["else"] || {};
|
|
113
|
+
|
|
114
|
+
for (var _attr in otherwise) {
|
|
115
|
+
newField[_attr] = otherwise[_attr];
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
return newField;
|
|
122
|
+
}
|