@digigov/form 1.2.0-dcbd7ded → 2.0.0-4be8f7cc
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/Field/FieldBase/index.js +1 -0
- package/Field/utils/index.js +5 -5
- package/cjs/Field/FieldBase/index.js +1 -0
- package/cjs/Field/utils/index.js +5 -10
- package/cjs/inputs/AutoCompleteInput/AutoComplete.stories/index.js +12 -0
- package/cjs/inputs/AutoCompleteInput/__stories__/Default/index.js +11 -16
- package/cjs/inputs/AutoCompleteInput/__stories__/Multiple/index.js +52 -0
- package/cjs/inputs/AutoCompleteInput/index.js +5 -2
- package/cjs/inputs/AutoCompleteInput/index.mdx +29 -0
- package/cjs/inputs/Checkboxes/__stories__/Conditional/index.js +3 -2
- package/cjs/inputs/Checkboxes/index.mdx +33 -0
- package/cjs/inputs/DateInput/index.mdx +23 -0
- package/cjs/inputs/FileInput/index.mdx +19 -0
- package/cjs/inputs/ImageInput/index.mdx +19 -0
- package/cjs/inputs/Input/index.mdx +90 -3
- package/cjs/inputs/OtpInput/index.js +1 -0
- package/cjs/inputs/OtpInput/index.mdx +23 -0
- package/cjs/inputs/Radio/__stories__/Conditional/index.js +3 -2
- package/cjs/inputs/Radio/index.mdx +33 -0
- package/cjs/inputs/Select/index.mdx +17 -0
- package/cjs/validators/utils/file/index.js +11 -19
- package/index.js +1 -1
- package/inputs/AutoCompleteInput/AutoComplete.stories/index.js +2 -1
- package/inputs/AutoCompleteInput/AutoComplete.stories.d.ts +1 -0
- package/inputs/AutoCompleteInput/__stories__/Default/index.js +9 -11
- package/inputs/AutoCompleteInput/__stories__/Default.d.ts +1 -0
- package/inputs/AutoCompleteInput/__stories__/Multiple/index.js +45 -0
- package/inputs/AutoCompleteInput/__stories__/Multiple/package.json +6 -0
- package/inputs/AutoCompleteInput/__stories__/Multiple.d.ts +3 -0
- package/inputs/AutoCompleteInput/index.js +5 -2
- package/inputs/AutoCompleteInput/index.mdx +29 -0
- package/inputs/Checkboxes/__stories__/Conditional/index.js +2 -1
- package/inputs/Checkboxes/__stories__/Conditional.d.ts +1 -0
- package/inputs/Checkboxes/index.mdx +33 -0
- package/inputs/DateInput/index.mdx +23 -0
- package/inputs/FileInput/index.mdx +19 -0
- package/inputs/ImageInput/index.mdx +19 -0
- package/inputs/Input/index.mdx +90 -3
- package/inputs/OtpInput/index.d.ts +8 -1
- package/inputs/OtpInput/index.js +1 -1
- package/inputs/OtpInput/index.mdx +23 -0
- package/inputs/Radio/__stories__/Conditional/index.js +2 -1
- package/inputs/Radio/__stories__/Conditional.d.ts +1 -0
- package/inputs/Radio/index.mdx +33 -0
- package/inputs/Select/index.mdx +17 -0
- package/lazy.d.ts +1 -1
- package/package.json +4 -4
- package/src/Field/FieldBase.tsx +1 -0
- package/src/Field/utils.ts +4 -4
- package/src/inputs/AutoCompleteInput/AutoComplete.stories.js +1 -0
- package/src/inputs/AutoCompleteInput/__stories__/Default.tsx +27 -18
- package/src/inputs/AutoCompleteInput/__stories__/Multiple.tsx +54 -0
- package/src/inputs/AutoCompleteInput/index.mdx +29 -0
- package/src/inputs/AutoCompleteInput/index.tsx +3 -2
- package/src/inputs/Checkboxes/__stories__/Conditional.tsx +2 -3
- package/src/inputs/Checkboxes/index.mdx +33 -0
- package/src/inputs/Checkboxes/index.tsx +2 -2
- package/src/inputs/DateInput/index.mdx +23 -0
- package/src/inputs/DateInput/index.tsx +1 -1
- package/src/inputs/FileInput/index.mdx +19 -0
- package/src/inputs/ImageInput/index.mdx +19 -0
- package/src/inputs/Input/index.mdx +90 -3
- package/src/inputs/OtpInput/index.mdx +23 -0
- package/src/inputs/OtpInput/index.tsx +2 -2
- package/src/inputs/Radio/__stories__/Conditional.tsx +2 -0
- package/src/inputs/Radio/index.mdx +33 -0
- package/src/inputs/Select/index.mdx +17 -0
- package/src/validators/utils/file.ts +9 -9
- package/validators/utils/file/index.js +11 -19
package/Field/FieldBase/index.js
CHANGED
|
@@ -40,6 +40,7 @@ export var FieldBase = function FieldBase(props) {
|
|
|
40
40
|
render: function render(_ref) {
|
|
41
41
|
var field = _ref.field;
|
|
42
42
|
return /*#__PURE__*/React.createElement(Component, _extends({}, field, {
|
|
43
|
+
ref: undefined,
|
|
43
44
|
defaultValue: defaultValue,
|
|
44
45
|
extra: extra,
|
|
45
46
|
error: !!error,
|
package/Field/utils/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import {
|
|
2
|
+
import { useContext, useMemo } from 'react';
|
|
3
3
|
import { FormContext } from '@digigov/form/FormContext';
|
|
4
4
|
import Checkboxes from '@digigov/form/inputs/Checkboxes';
|
|
5
5
|
import DateInput from '@digigov/form/inputs/DateInput';
|
|
@@ -9,9 +9,7 @@ import Input from '@digigov/form/inputs/Input';
|
|
|
9
9
|
import OtpInput from '@digigov/form/inputs/OtpInput';
|
|
10
10
|
import Radio from '@digigov/form/inputs/Radio';
|
|
11
11
|
import Select from '@digigov/form/inputs/Select';
|
|
12
|
-
|
|
13
|
-
return import('@digigov/form/inputs/AutoCompleteInput');
|
|
14
|
-
});
|
|
12
|
+
import AutoCompleteInput from '@digigov/form/inputs/AutoCompleteInput';
|
|
15
13
|
var FIELD_COMPONENTS = {
|
|
16
14
|
text: {
|
|
17
15
|
component: Input
|
|
@@ -55,7 +53,8 @@ var ALTERNATIVE_COMPONENTS = {
|
|
|
55
53
|
},
|
|
56
54
|
AutoComplete: {
|
|
57
55
|
component: AutoCompleteInput,
|
|
58
|
-
controlled: true
|
|
56
|
+
controlled: true,
|
|
57
|
+
wrapper: 'fieldset'
|
|
59
58
|
}
|
|
60
59
|
};
|
|
61
60
|
export function calculateField(children, field, componentRegistry) {
|
|
@@ -75,6 +74,7 @@ export function calculateField(children, field, componentRegistry) {
|
|
|
75
74
|
var _ALTERNATIVE_COMPONEN;
|
|
76
75
|
calculatedField.controlled = ((_ALTERNATIVE_COMPONEN = ALTERNATIVE_COMPONENTS[field.extra.component]) === null || _ALTERNATIVE_COMPONEN === void 0 ? void 0 : _ALTERNATIVE_COMPONEN.controlled) || false;
|
|
77
76
|
calculatedField.component = ALTERNATIVE_COMPONENTS[field.extra.component].component;
|
|
77
|
+
calculatedField.wrapper = ALTERNATIVE_COMPONENTS[field.extra.component].wrapper;
|
|
78
78
|
} else if (!field.component && field.type && fieldComponentRegistry[field.type]) {
|
|
79
79
|
var _fieldComponentRegist2;
|
|
80
80
|
calculatedField.component = fieldComponentRegistry[field.type].component;
|
|
@@ -47,6 +47,7 @@ var FieldBase = exports.FieldBase = function FieldBase(props) {
|
|
|
47
47
|
render: function render(_ref) {
|
|
48
48
|
var field = _ref.field;
|
|
49
49
|
return /*#__PURE__*/_react["default"].createElement(Component, (0, _extends2["default"])({}, field, {
|
|
50
|
+
ref: undefined,
|
|
50
51
|
defaultValue: defaultValue,
|
|
51
52
|
extra: extra,
|
|
52
53
|
error: !!error,
|
package/cjs/Field/utils/index.js
CHANGED
|
@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports.calculateField = calculateField;
|
|
8
8
|
exports.evaluateFieldWithConditions = evaluateFieldWithConditions;
|
|
9
9
|
exports.useField = void 0;
|
|
10
|
-
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
11
10
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
12
11
|
var _react = require("react");
|
|
13
12
|
var _FormContext = require("@digigov/form/FormContext");
|
|
@@ -19,13 +18,7 @@ var _Input = _interopRequireDefault(require("@digigov/form/inputs/Input"));
|
|
|
19
18
|
var _OtpInput = _interopRequireDefault(require("@digigov/form/inputs/OtpInput"));
|
|
20
19
|
var _Radio = _interopRequireDefault(require("@digigov/form/inputs/Radio"));
|
|
21
20
|
var _Select = _interopRequireDefault(require("@digigov/form/inputs/Select"));
|
|
22
|
-
|
|
23
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != (0, _typeof2["default"])(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
24
|
-
var AutoCompleteInput = /*#__PURE__*/(0, _react.lazy)(function () {
|
|
25
|
-
return Promise.resolve().then(function () {
|
|
26
|
-
return _interopRequireWildcard(require('@digigov/form/inputs/AutoCompleteInput'));
|
|
27
|
-
});
|
|
28
|
-
});
|
|
21
|
+
var _AutoCompleteInput = _interopRequireDefault(require("@digigov/form/inputs/AutoCompleteInput"));
|
|
29
22
|
var FIELD_COMPONENTS = {
|
|
30
23
|
text: {
|
|
31
24
|
component: _Input["default"]
|
|
@@ -68,8 +61,9 @@ var ALTERNATIVE_COMPONENTS = {
|
|
|
68
61
|
controlled: false
|
|
69
62
|
},
|
|
70
63
|
AutoComplete: {
|
|
71
|
-
component:
|
|
72
|
-
controlled: true
|
|
64
|
+
component: _AutoCompleteInput["default"],
|
|
65
|
+
controlled: true,
|
|
66
|
+
wrapper: 'fieldset'
|
|
73
67
|
}
|
|
74
68
|
};
|
|
75
69
|
function calculateField(children, field, componentRegistry) {
|
|
@@ -89,6 +83,7 @@ function calculateField(children, field, componentRegistry) {
|
|
|
89
83
|
var _ALTERNATIVE_COMPONEN;
|
|
90
84
|
calculatedField.controlled = ((_ALTERNATIVE_COMPONEN = ALTERNATIVE_COMPONENTS[field.extra.component]) === null || _ALTERNATIVE_COMPONEN === void 0 ? void 0 : _ALTERNATIVE_COMPONEN.controlled) || false;
|
|
91
85
|
calculatedField.component = ALTERNATIVE_COMPONENTS[field.extra.component].component;
|
|
86
|
+
calculatedField.wrapper = ALTERNATIVE_COMPONENTS[field.extra.component].wrapper;
|
|
92
87
|
} else if (!field.component && field.type && fieldComponentRegistry[field.type]) {
|
|
93
88
|
var _fieldComponentRegist2;
|
|
94
89
|
calculatedField.component = fieldComponentRegistry[field.type].component;
|
|
@@ -19,6 +19,18 @@ Object.keys(_Default).forEach(function (key) {
|
|
|
19
19
|
}
|
|
20
20
|
});
|
|
21
21
|
});
|
|
22
|
+
var _Multiple = require("@digigov/form/inputs/AutoCompleteInput/__stories__/Multiple");
|
|
23
|
+
Object.keys(_Multiple).forEach(function (key) {
|
|
24
|
+
if (key === "default" || key === "__esModule") return;
|
|
25
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
26
|
+
if (key in exports && exports[key] === _Multiple[key]) return;
|
|
27
|
+
Object.defineProperty(exports, key, {
|
|
28
|
+
enumerable: true,
|
|
29
|
+
get: function get() {
|
|
30
|
+
return _Multiple[key];
|
|
31
|
+
}
|
|
32
|
+
});
|
|
33
|
+
});
|
|
22
34
|
var _default = exports["default"] = {
|
|
23
35
|
title: 'Digigov Form/inputs/AutoCompleteInput',
|
|
24
36
|
component: _AutoCompleteInput["default"],
|
|
@@ -1,32 +1,29 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
var _typeof = require("@babel/runtime/helpers/typeof");
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
|
-
exports.Default = void 0;
|
|
9
|
-
var _react =
|
|
7
|
+
exports["default"] = exports.Default = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
10
9
|
var _Field = require("@digigov/form/Field");
|
|
11
10
|
var _FormBuilder = _interopRequireDefault(require("@digigov/form/FormBuilder"));
|
|
12
|
-
var _utils = require("@digigov/ui/cjs/form/AutoComplete/utils");
|
|
13
11
|
var _Button = _interopRequireDefault(require("@digigov/ui/cjs/form/Button"));
|
|
14
|
-
|
|
15
|
-
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
12
|
+
var results = ['Αμερική', 'Ασία', 'Αυστραλία', 'Αφρική', 'Ευρώπη'];
|
|
16
13
|
var fields = [{
|
|
17
14
|
key: 'autocomplete',
|
|
18
15
|
label: {
|
|
19
|
-
primary: '
|
|
16
|
+
primary: 'Επιλέξτε ήπειρο'
|
|
20
17
|
},
|
|
21
18
|
required: true,
|
|
22
19
|
type: 'choice:single',
|
|
23
20
|
extra: {
|
|
24
21
|
component: 'AutoComplete',
|
|
25
|
-
options:
|
|
22
|
+
options: results.map(function (r) {
|
|
26
23
|
return {
|
|
27
24
|
label: {
|
|
28
25
|
primary: r,
|
|
29
|
-
secondary: "
|
|
26
|
+
secondary: "'\u0397\u03C0\u03B5\u03B9\u03C1\u03BF\u03C2: ".concat(r)
|
|
30
27
|
},
|
|
31
28
|
value: r.toLowerCase()
|
|
32
29
|
};
|
|
@@ -34,14 +31,11 @@ var fields = [{
|
|
|
34
31
|
}
|
|
35
32
|
}];
|
|
36
33
|
var initialValues = {};
|
|
37
|
-
var _ref = /*#__PURE__*/_react["default"].createElement("
|
|
38
|
-
var _ref2 = /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
34
|
+
var _ref = /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
39
35
|
type: "submit"
|
|
40
36
|
}, "Submit");
|
|
41
37
|
var Default = exports.Default = function Default() {
|
|
42
|
-
return /*#__PURE__*/_react["default"].createElement(
|
|
43
|
-
fallback: _ref
|
|
44
|
-
}, /*#__PURE__*/_react["default"].createElement(_FormBuilder["default"], {
|
|
38
|
+
return /*#__PURE__*/_react["default"].createElement(_FormBuilder["default"], {
|
|
45
39
|
fields: fields,
|
|
46
40
|
onSubmit: function onSubmit(data) {
|
|
47
41
|
console.log(data);
|
|
@@ -52,5 +46,6 @@ var Default = exports.Default = function Default() {
|
|
|
52
46
|
key: field.key,
|
|
53
47
|
name: field.key
|
|
54
48
|
});
|
|
55
|
-
}),
|
|
56
|
-
};
|
|
49
|
+
}), _ref);
|
|
50
|
+
};
|
|
51
|
+
var _default = exports["default"] = Default;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports["default"] = exports.Multiple = void 0;
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
var _Field = require("@digigov/form/Field");
|
|
10
|
+
var _FormBuilder = _interopRequireDefault(require("@digigov/form/FormBuilder"));
|
|
11
|
+
var _Button = _interopRequireDefault(require("@digigov/ui/cjs/form/Button"));
|
|
12
|
+
var results = ['Αμερική', 'Ασία', 'Αυστραλία', 'Αφρική', 'Ευρώπη'];
|
|
13
|
+
var fields = [{
|
|
14
|
+
key: 'autocomplete',
|
|
15
|
+
label: {
|
|
16
|
+
primary: 'Επιλέξτε ήπειρο'
|
|
17
|
+
},
|
|
18
|
+
required: true,
|
|
19
|
+
type: 'choice:single',
|
|
20
|
+
extra: {
|
|
21
|
+
component: 'AutoComplete',
|
|
22
|
+
multiple: true,
|
|
23
|
+
options: results.map(function (r) {
|
|
24
|
+
return {
|
|
25
|
+
label: {
|
|
26
|
+
primary: r,
|
|
27
|
+
secondary: "\u0389\u03C0\u03B5\u03B9\u03C1\u03BF\u03C2: ".concat(r)
|
|
28
|
+
},
|
|
29
|
+
value: r.toLowerCase()
|
|
30
|
+
};
|
|
31
|
+
})
|
|
32
|
+
}
|
|
33
|
+
}];
|
|
34
|
+
var initialValues = {};
|
|
35
|
+
var _ref = /*#__PURE__*/_react["default"].createElement(_Button["default"], {
|
|
36
|
+
type: "submit"
|
|
37
|
+
}, "Submit");
|
|
38
|
+
var Multiple = exports.Multiple = function Multiple() {
|
|
39
|
+
return /*#__PURE__*/_react["default"].createElement(_FormBuilder["default"], {
|
|
40
|
+
fields: fields,
|
|
41
|
+
onSubmit: function onSubmit(data) {
|
|
42
|
+
console.log(data);
|
|
43
|
+
},
|
|
44
|
+
initial: initialValues
|
|
45
|
+
}, fields.map(function (field) {
|
|
46
|
+
return /*#__PURE__*/_react["default"].createElement(_Field.Field, {
|
|
47
|
+
key: field.key,
|
|
48
|
+
name: field.key
|
|
49
|
+
});
|
|
50
|
+
}), _ref);
|
|
51
|
+
};
|
|
52
|
+
var _default = exports["default"] = Multiple;
|
|
@@ -16,7 +16,9 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
|
|
|
16
16
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
|
17
17
|
var AutoCompleteInput = exports.AutoCompleteInput = function AutoCompleteInput(_ref) {
|
|
18
18
|
var name = _ref.name,
|
|
19
|
-
|
|
19
|
+
_ref$extra = _ref.extra,
|
|
20
|
+
options = _ref$extra.options,
|
|
21
|
+
multiple = _ref$extra.multiple,
|
|
20
22
|
onChange = _ref.onChange,
|
|
21
23
|
value = _ref.value,
|
|
22
24
|
props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
|
|
@@ -24,9 +26,10 @@ var AutoCompleteInput = exports.AutoCompleteInput = function AutoCompleteInput(_
|
|
|
24
26
|
syncResults(query ? options.filter(function (option) {
|
|
25
27
|
var _option$label, _option$label2;
|
|
26
28
|
return "".concat(option.value, " ").concat(((_option$label = option.label) === null || _option$label === void 0 ? void 0 : _option$label.primary) || '', " ").concat(((_option$label2 = option.label) === null || _option$label2 === void 0 ? void 0 : _option$label2.secondary) || '').toLowerCase().indexOf(query.toLowerCase()) !== -1;
|
|
27
|
-
}) :
|
|
29
|
+
}) : options);
|
|
28
30
|
}, []);
|
|
29
31
|
return /*#__PURE__*/_react["default"].createElement(_AutoComplete["default"], (0, _extends2["default"])({
|
|
32
|
+
multiple: multiple,
|
|
30
33
|
source: suggest,
|
|
31
34
|
onConfirm: function onConfirm(value) {
|
|
32
35
|
onChange(value.value);
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: AutoComplete Input
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# AutoComplete input
|
|
6
|
+
|
|
7
|
+
AutoCompleteInput element is an enhanced version of text input that shows suggested
|
|
8
|
+
options as the users type and also let them select an option from the list.
|
|
9
|
+
|
|
10
|
+
## How to use
|
|
11
|
+
|
|
12
|
+
### Default
|
|
13
|
+
|
|
14
|
+
<Story
|
|
15
|
+
packageName="@digigov/form"
|
|
16
|
+
component="inputs/AutoCompleteInput"
|
|
17
|
+
story="Default.tsx"
|
|
18
|
+
/>
|
|
19
|
+
|
|
20
|
+
### Display multiple values
|
|
21
|
+
|
|
22
|
+
<Story
|
|
23
|
+
packageName="@digigov/form"
|
|
24
|
+
component="inputs/AutoCompleteInput"
|
|
25
|
+
story="Multiple.tsx"
|
|
26
|
+
/>
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.Conditional = void 0;
|
|
8
|
+
exports["default"] = exports.Conditional = void 0;
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _form = _interopRequireWildcard(require("@digigov/form"));
|
|
11
11
|
var _Button = require("@digigov/ui/cjs/form/Button");
|
|
@@ -99,4 +99,5 @@ var Conditional = exports.Conditional = function Conditional() {
|
|
|
99
99
|
},
|
|
100
100
|
fields: fields
|
|
101
101
|
}, _ref, _ref2);
|
|
102
|
-
};
|
|
102
|
+
};
|
|
103
|
+
var _default = exports["default"] = Conditional;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Checkbox
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Checkboxes
|
|
6
|
+
Input element of type `checkbox` are rendered by default as boxes that are checked when activated.
|
|
7
|
+
Checkboxes are used to let a user select one or more options of a limited number of choices.
|
|
8
|
+
|
|
9
|
+
## How to use
|
|
10
|
+
|
|
11
|
+
### Default
|
|
12
|
+
|
|
13
|
+
<Story
|
|
14
|
+
packageName="@digigov/form"
|
|
15
|
+
component="inputs/Checkboxes"
|
|
16
|
+
story="Default.tsx"
|
|
17
|
+
/>
|
|
18
|
+
|
|
19
|
+
### Conditional
|
|
20
|
+
|
|
21
|
+
<Story
|
|
22
|
+
packageName="@digigov/form"
|
|
23
|
+
component="inputs/Checkboxes"
|
|
24
|
+
story="Conditional.tsx"
|
|
25
|
+
/>
|
|
26
|
+
|
|
27
|
+
### With divider
|
|
28
|
+
|
|
29
|
+
<Story
|
|
30
|
+
packageName="@digigov/form"
|
|
31
|
+
component="inputs/Checkboxes"
|
|
32
|
+
story="WithDivider.tsx"
|
|
33
|
+
/>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Date Input
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Date input
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
Input element of type `date` create input fields that let the user enter a date,
|
|
10
|
+
either with a textbox that validates the input or a special date picker interface.
|
|
11
|
+
|
|
12
|
+
## How to use
|
|
13
|
+
|
|
14
|
+
### Default
|
|
15
|
+
|
|
16
|
+
<Story
|
|
17
|
+
packageName="@digigov/form"
|
|
18
|
+
component="inputs/DateInput"
|
|
19
|
+
story="Default.tsx"
|
|
20
|
+
/>
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: File Input
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# File input
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
Input element of type `file` let the user choose one or more files from their device storage.
|
|
10
|
+
|
|
11
|
+
## How to use
|
|
12
|
+
|
|
13
|
+
### Default
|
|
14
|
+
|
|
15
|
+
<Story
|
|
16
|
+
packageName="@digigov/form"
|
|
17
|
+
component="inputs/FileInput"
|
|
18
|
+
story="Default.tsx"
|
|
19
|
+
/>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Image Input
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Image input
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
Input element of type `image` defines an image as a submit button, i.e. submit buttons that take the form of an image rather than text.
|
|
10
|
+
|
|
11
|
+
## How to use
|
|
12
|
+
|
|
13
|
+
### Default
|
|
14
|
+
|
|
15
|
+
<Story
|
|
16
|
+
packageName="@digigov/form"
|
|
17
|
+
component="inputs/ImageInput"
|
|
18
|
+
story="Default.tsx"
|
|
19
|
+
/>
|
|
@@ -1,8 +1,95 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: Input
|
|
3
|
-
parent: docs/ui/components
|
|
4
3
|
---
|
|
4
|
+
|
|
5
|
+
# Input
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
The input element of type `string` is used to create interactive controls for web-based forms in order to accept data from the user;
|
|
10
|
+
a wide variety of types of input data and control widgets are available, depending on the device and user agent. The input element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes.
|
|
11
|
+
|
|
12
|
+
## How to use
|
|
13
|
+
|
|
14
|
+
### Default
|
|
15
|
+
|
|
16
|
+
<Story
|
|
17
|
+
packageName="@digigov/form"
|
|
18
|
+
component="inputs/Input"
|
|
19
|
+
story="Default.tsx"
|
|
20
|
+
/>
|
|
21
|
+
|
|
22
|
+
### Boolean
|
|
23
|
+
|
|
24
|
+
<Story
|
|
25
|
+
packageName="@digigov/form"
|
|
26
|
+
component="inputs/Input"
|
|
27
|
+
story="Boolean.tsx"
|
|
28
|
+
/>
|
|
29
|
+
### AFM
|
|
30
|
+
|
|
31
|
+
<Story
|
|
32
|
+
packageName="@digigov/form"
|
|
33
|
+
component="inputs/Input"
|
|
34
|
+
story="AFM.tsx"
|
|
35
|
+
/>
|
|
36
|
+
|
|
37
|
+
### IBAN
|
|
38
|
+
|
|
39
|
+
<Story
|
|
40
|
+
packageName="@digigov/form"
|
|
41
|
+
component="inputs/Input"
|
|
42
|
+
story="IBAN.tsx"
|
|
43
|
+
/>
|
|
44
|
+
|
|
45
|
+
### Integer
|
|
46
|
+
|
|
47
|
+
<Story
|
|
48
|
+
packageName="@digigov/form"
|
|
49
|
+
component="inputs/Input"
|
|
50
|
+
story="Default.tsx"
|
|
51
|
+
/>
|
|
52
|
+
|
|
53
|
+
### Landline number
|
|
54
|
+
|
|
55
|
+
<Story
|
|
56
|
+
packageName="@digigov/form"
|
|
57
|
+
component="inputs/Input"
|
|
58
|
+
story="LandlineNumber.tsx"
|
|
59
|
+
/>
|
|
60
|
+
|
|
61
|
+
### Mobile phone
|
|
62
|
+
|
|
63
|
+
<Story
|
|
64
|
+
packageName="@digigov/form"
|
|
65
|
+
component="inputs/Input"
|
|
66
|
+
story="MobilePhone.tsx"
|
|
67
|
+
/>
|
|
68
|
+
|
|
69
|
+
### Phone number
|
|
70
|
+
|
|
71
|
+
<Story
|
|
72
|
+
packageName="@digigov/form"
|
|
73
|
+
component="inputs/Input"
|
|
74
|
+
story="PhoneNumber.tsx"
|
|
75
|
+
/>
|
|
76
|
+
|
|
77
|
+
### Postal code
|
|
78
|
+
|
|
79
|
+
<Story
|
|
80
|
+
packageName="@digigov/form"
|
|
81
|
+
component="inputs/Input"
|
|
82
|
+
story="PostalCode.tsx"
|
|
83
|
+
/>
|
|
84
|
+
|
|
85
|
+
### Text with character limit
|
|
86
|
+
|
|
87
|
+
<Story
|
|
88
|
+
packageName="@digigov/form"
|
|
89
|
+
component="inputs/Input"
|
|
90
|
+
story="TextWithCharacterLimit.tsx"
|
|
91
|
+
/>
|
|
92
|
+
|
|
93
|
+
|
|
5
94
|
|
|
6
|
-
## Example
|
|
7
95
|
|
|
8
|
-
<Input type="text" />
|
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
8
|
exports["default"] = exports.RE_DIGIT = exports.REMOVE_SPACES = exports.OtpInput = void 0;
|
|
9
|
+
exports.useOtp = useOtp;
|
|
9
10
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
11
|
var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
|
|
11
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: OTP Input
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# OTP input
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
A one-time password (OTP) input element of type `otp`, also known as a one-time PIN, one-time authorization code (OTAC) or dynamic password, is a password that is valid for only one login session or transaction,
|
|
10
|
+
on a computer system or other digital device.
|
|
11
|
+
|
|
12
|
+
## How to use
|
|
13
|
+
|
|
14
|
+
### Default
|
|
15
|
+
|
|
16
|
+
<Story
|
|
17
|
+
packageName="@digigov/form"
|
|
18
|
+
component="inputs/OtpInput"
|
|
19
|
+
story="Default.tsx"
|
|
20
|
+
/>
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.Conditional = void 0;
|
|
8
|
+
exports["default"] = exports.Conditional = void 0;
|
|
9
9
|
var _react = _interopRequireDefault(require("react"));
|
|
10
10
|
var _form = _interopRequireWildcard(require("@digigov/form"));
|
|
11
11
|
var _Button = require("@digigov/ui/cjs/form/Button");
|
|
@@ -99,4 +99,5 @@ var Conditional = exports.Conditional = function Conditional() {
|
|
|
99
99
|
},
|
|
100
100
|
fields: fields
|
|
101
101
|
}, _ref, _ref2);
|
|
102
|
-
};
|
|
102
|
+
};
|
|
103
|
+
var _default = exports["default"] = Conditional;
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Radio
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Radio
|
|
6
|
+
Input element of type `radio` are generally used in radio groups—collections of radio buttons describing a set of related options.
|
|
7
|
+
Radios are used to let a user select one option of a limited number of choices.
|
|
8
|
+
|
|
9
|
+
## How to use
|
|
10
|
+
|
|
11
|
+
### Default
|
|
12
|
+
|
|
13
|
+
<Story
|
|
14
|
+
packageName="@digigov/form"
|
|
15
|
+
component="inputs/Radio"
|
|
16
|
+
story="Default.tsx"
|
|
17
|
+
/>
|
|
18
|
+
|
|
19
|
+
### Conditional
|
|
20
|
+
|
|
21
|
+
<Story
|
|
22
|
+
packageName="@digigov/form"
|
|
23
|
+
component="inputs/Radio"
|
|
24
|
+
story="Conditional.tsx"
|
|
25
|
+
/>
|
|
26
|
+
|
|
27
|
+
### With divider
|
|
28
|
+
|
|
29
|
+
<Story
|
|
30
|
+
packageName="@digigov/form"
|
|
31
|
+
component="inputs/Radio"
|
|
32
|
+
story="WithDivider.tsx"
|
|
33
|
+
/>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Select
|
|
3
|
+
---
|
|
4
|
+
|
|
5
|
+
# Select
|
|
6
|
+
|
|
7
|
+
The select element represents a control that provides a menu of options.
|
|
8
|
+
|
|
9
|
+
## How to use
|
|
10
|
+
|
|
11
|
+
### Default
|
|
12
|
+
|
|
13
|
+
<Story
|
|
14
|
+
packageName="@digigov/form"
|
|
15
|
+
component="inputs/Select"
|
|
16
|
+
story="Default.tsx"
|
|
17
|
+
/>
|
|
@@ -9,18 +9,25 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
9
9
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
10
10
|
var DEFAULT_FILE_MAX_SIZE = 10000000;
|
|
11
11
|
var FILE_MAX_SIZE_VALIDATOR = exports.FILE_MAX_SIZE_VALIDATOR = function FILE_MAX_SIZE_VALIDATOR(field) {
|
|
12
|
+
var _field$extra;
|
|
12
13
|
return {
|
|
13
14
|
name: 'file-max-size-validator',
|
|
14
|
-
message:
|
|
15
|
+
message: {
|
|
16
|
+
key: 'form.error.file_size',
|
|
17
|
+
context: {
|
|
18
|
+
maxSizeToMb: ((field === null || field === void 0 ? void 0 : (_field$extra = field.extra) === null || _field$extra === void 0 ? void 0 : _field$extra.limit.maxSize) || DEFAULT_FILE_MAX_SIZE) / 1000000
|
|
19
|
+
}
|
|
20
|
+
},
|
|
15
21
|
test: function test(value) {
|
|
16
|
-
|
|
17
|
-
if (field !== null && field !== void 0 && (_field$extra = field.extra) !== null && _field$extra !== void 0 && _field$extra.limit && field !== null && field !== void 0 && (_field$extra2 = field.extra) !== null && _field$extra2 !== void 0 && _field$extra2.limit.maxSize && value) {
|
|
22
|
+
if (value) {
|
|
18
23
|
var _iterator = _createForOfIteratorHelper(value),
|
|
19
24
|
_step;
|
|
20
25
|
try {
|
|
21
26
|
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
27
|
+
var _field$extra2, _field$extra2$limit;
|
|
22
28
|
var file = _step.value;
|
|
23
|
-
|
|
29
|
+
var maxSize = (field === null || field === void 0 ? void 0 : (_field$extra2 = field.extra) === null || _field$extra2 === void 0 ? void 0 : (_field$extra2$limit = _field$extra2.limit) === null || _field$extra2$limit === void 0 ? void 0 : _field$extra2$limit.maxSize) || DEFAULT_FILE_MAX_SIZE;
|
|
30
|
+
if (file.size > maxSize) {
|
|
24
31
|
return false;
|
|
25
32
|
}
|
|
26
33
|
}
|
|
@@ -29,21 +36,6 @@ var FILE_MAX_SIZE_VALIDATOR = exports.FILE_MAX_SIZE_VALIDATOR = function FILE_MA
|
|
|
29
36
|
} finally {
|
|
30
37
|
_iterator.f();
|
|
31
38
|
}
|
|
32
|
-
} else if (value) {
|
|
33
|
-
var _iterator2 = _createForOfIteratorHelper(value),
|
|
34
|
-
_step2;
|
|
35
|
-
try {
|
|
36
|
-
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
|
|
37
|
-
var _file = _step2.value;
|
|
38
|
-
if (_file.size >= DEFAULT_FILE_MAX_SIZE) {
|
|
39
|
-
return false;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
} catch (err) {
|
|
43
|
-
_iterator2.e(err);
|
|
44
|
-
} finally {
|
|
45
|
-
_iterator2.f();
|
|
46
|
-
}
|
|
47
39
|
}
|
|
48
40
|
return true;
|
|
49
41
|
}
|
package/index.js
CHANGED