@dhis2/ui-forms 9.11.0 → 9.11.1-beta.2
Sign up to get free protection for your applications and to get access to all the features.
- package/build/cjs/CheckboxFieldFF/{CheckboxFieldFF.stories.e2e.js → CheckboxFieldFF.e2e.stories.js} +22 -15
- package/build/cjs/CheckboxFieldFF/CheckboxFieldFF.js +2 -12
- package/build/cjs/CheckboxFieldFF/{CheckboxFieldFF.stories.js → CheckboxFieldFF.prod.stories.js} +29 -24
- package/build/cjs/CheckboxFieldFF/features/can_toggle_a_boolean/index.js +0 -1
- package/build/cjs/CheckboxFieldFF/features/can_toggle_a_value/index.js +0 -1
- package/build/cjs/CheckboxFieldFF/features/common/index.js +0 -1
- package/build/cjs/CheckboxFieldFF/features/displays_error/index.js +0 -2
- package/build/cjs/FieldGroupFF/FieldGroupFF.js +1 -10
- package/build/cjs/FieldGroupFF/{FieldGroupFF.stories.js → FieldGroupFF.prod.stories.js} +11 -12
- package/build/cjs/FileInputFieldFF/{FileInputFieldFF.stories.e2e.js → FileInputFieldFF.e2e.stories.js} +45 -56
- package/build/cjs/FileInputFieldFF/FileInputFieldFF.js +2 -19
- package/build/cjs/FileInputFieldFF/{FileInputFieldFF.stories.js → FileInputFieldFF.prod.stories.js} +29 -22
- package/build/cjs/FileInputFieldFF/features/accepts_file/index.js +0 -1
- package/build/cjs/FileInputFieldFF/features/common/index.js +0 -1
- package/build/cjs/FileInputFieldFF/features/displays_error/index.js +0 -1
- package/build/cjs/InputFieldFF/InputFieldFF.e2e.stories.js +30 -0
- package/build/cjs/InputFieldFF/InputFieldFF.js +2 -12
- package/build/cjs/InputFieldFF/{InputFieldFF.stories.js → InputFieldFF.prod.stories.js} +29 -22
- package/build/cjs/InputFieldFF/features/can_set_a_value/index.js +0 -1
- package/build/cjs/InputFieldFF/features/displays_error/index.js +0 -2
- package/build/cjs/MultiSelectFieldFF/{MultiSelectFieldFF.stories.e2e.js → MultiSelectFieldFF.e2e.stories.js} +15 -17
- package/build/cjs/MultiSelectFieldFF/MultiSelectFieldFF.js +3 -15
- package/build/cjs/MultiSelectFieldFF/MultiSelectFieldFF.prod.stories.js +107 -0
- package/build/cjs/MultiSelectFieldFF/features/can_set_a_value/index.js +0 -1
- package/build/cjs/MultiSelectFieldFF/features/common/index.js +1 -2
- package/build/cjs/MultiSelectFieldFF/features/displays_error/index.js +0 -2
- package/build/cjs/RadioFieldFF/RadioFieldFF.e2e.stories.js +45 -0
- package/build/cjs/RadioFieldFF/RadioFieldFF.js +2 -12
- package/build/cjs/RadioFieldFF/{RadioFieldFF.stories.js → RadioFieldFF.prod.stories.js} +29 -16
- package/build/cjs/RadioFieldFF/features/can_set_a_value/index.js +0 -1
- package/build/cjs/RadioFieldFF/features/common/index.js +0 -1
- package/build/cjs/RadioFieldFF/features/displays_error/index.js +0 -2
- package/build/cjs/SingleSelectFieldFF/SingleSelectFieldFF.e2e.stories.js +39 -0
- package/build/cjs/SingleSelectFieldFF/SingleSelectFieldFF.js +2 -12
- package/build/cjs/SingleSelectFieldFF/SingleSelectFieldFF.prod.stories.js +106 -0
- package/build/cjs/SingleSelectFieldFF/features/can_set_a_value/index.js +0 -1
- package/build/cjs/SingleSelectFieldFF/features/common/index.js +0 -1
- package/build/cjs/SingleSelectFieldFF/features/displays_error/index.js +0 -2
- package/build/cjs/SwitchFieldFF/SwitchFieldFF.e2e.stories.js +56 -0
- package/build/cjs/SwitchFieldFF/SwitchFieldFF.js +2 -12
- package/build/cjs/SwitchFieldFF/{SwitchFieldFF.stories.js → SwitchFieldFF.prod.stories.js} +29 -24
- package/build/cjs/SwitchFieldFF/features/can_toggle_a_boolean/index.js +0 -1
- package/build/cjs/SwitchFieldFF/features/can_toggle_a_value/index.js +0 -1
- package/build/cjs/SwitchFieldFF/features/common/index.js +0 -1
- package/build/cjs/SwitchFieldFF/features/displays_error/index.js +0 -2
- package/build/cjs/TextAreaFieldFF/TextAreaFieldFF.e2e.stories.js +30 -0
- package/build/cjs/TextAreaFieldFF/TextAreaFieldFF.js +2 -12
- package/build/cjs/TextAreaFieldFF/{TextAreaFieldFF.stories.js → TextAreaFieldFF.prod.stories.js} +29 -24
- package/build/cjs/TextAreaFieldFF/features/can_set_a_value/index.js +0 -1
- package/build/cjs/TextAreaFieldFF/features/displays_error/index.js +0 -2
- package/build/cjs/__tests__/__snapshots__/index.test.js.snap +3 -0
- package/build/cjs/__tests__/index.test.js +1 -1
- package/build/cjs/formDecorator.js +6 -21
- package/build/cjs/index.js +2 -21
- package/build/cjs/locales/index.js +3 -75
- package/build/cjs/shared/helpers/createBlurHandler.js +0 -3
- package/build/cjs/shared/helpers/createChangeHandler.js +0 -2
- package/build/cjs/shared/helpers/createFocusHandler.js +0 -3
- package/build/cjs/shared/helpers/createSelectChangeHandler.js +0 -2
- package/build/cjs/shared/helpers/createToggleChangeHandler.js +0 -3
- package/build/cjs/shared/helpers/getValidationText.js +0 -6
- package/build/cjs/shared/helpers/hasError.js +0 -2
- package/build/cjs/shared/helpers/isLoading.js +0 -2
- package/build/cjs/shared/helpers/isValid.js +0 -2
- package/build/cjs/shared/helpers.js +0 -9
- package/build/cjs/shared/propTypes.js +7 -20
- package/build/cjs/transformers/arrayWithIdObjects.js +2 -6
- package/build/cjs/transformers/index.js +0 -1
- package/build/cjs/validators/__tests__/alphaNumeric.test.js +0 -2
- package/build/cjs/validators/__tests__/boolean.test.js +0 -2
- package/build/cjs/validators/__tests__/composeValidators.test.js +0 -3
- package/build/cjs/validators/__tests__/createCharacterLengthRange.test.js +6 -6
- package/build/cjs/validators/__tests__/createEqualTo.test.js +0 -3
- package/build/cjs/validators/__tests__/createMaxCharacterLength.test.js +1 -2
- package/build/cjs/validators/__tests__/createMaxNumber.test.js +1 -2
- package/build/cjs/validators/__tests__/createMinCharacterLength.test.js +1 -2
- package/build/cjs/validators/__tests__/createMinNumber.test.js +1 -2
- package/build/cjs/validators/__tests__/createNumberRange.test.js +0 -3
- package/build/cjs/validators/__tests__/createPattern.test.js +1 -3
- package/build/cjs/validators/__tests__/dhis2Password.test.js +0 -2
- package/build/cjs/validators/__tests__/dhis2Username.test.js +0 -2
- package/build/cjs/validators/__tests__/email.test.js +7 -6
- package/build/cjs/validators/__tests__/hasValue.test.js +0 -2
- package/build/cjs/validators/__tests__/integer.test.js +0 -2
- package/build/cjs/validators/__tests__/internationalPhoneNumber.test.js +6 -5
- package/build/cjs/validators/__tests__/number.test.js +0 -2
- package/build/cjs/validators/__tests__/string.test.js +0 -2
- package/build/cjs/validators/__tests__/url.test.js +1 -2
- package/build/cjs/validators/alphaNumeric.js +2 -11
- package/build/cjs/validators/boolean.js +2 -10
- package/build/cjs/validators/composeValidators.js +0 -4
- package/build/cjs/validators/createCharacterLengthRange.js +1 -8
- package/build/cjs/validators/createEqualTo.js +1 -8
- package/build/cjs/validators/createMaxCharacterLength.js +1 -6
- package/build/cjs/validators/createMaxNumber.js +1 -6
- package/build/cjs/validators/createMinCharacterLength.js +1 -6
- package/build/cjs/validators/createMinNumber.js +1 -6
- package/build/cjs/validators/createNumberRange.js +1 -8
- package/build/cjs/validators/createPattern.js +2 -10
- package/build/cjs/validators/dhis2Password.js +6 -28
- package/build/cjs/validators/dhis2Username.js +2 -11
- package/build/cjs/validators/email.js +3 -11
- package/build/cjs/validators/hasValue.js +2 -10
- package/build/cjs/validators/helpers/index.js +1 -16
- package/build/cjs/validators/index.js +0 -20
- package/build/cjs/validators/integer.js +3 -10
- package/build/cjs/validators/internationalPhoneNumber.js +8 -14
- package/build/cjs/validators/number.js +2 -10
- package/build/cjs/validators/string.js +2 -10
- package/build/cjs/validators/test-helpers/index.js +1 -6
- package/build/cjs/validators/url.js +2 -11
- package/build/es/CheckboxFieldFF/{CheckboxFieldFF.stories.e2e.js → CheckboxFieldFF.e2e.stories.js} +14 -7
- package/build/es/CheckboxFieldFF/CheckboxFieldFF.js +1 -3
- package/build/es/CheckboxFieldFF/{CheckboxFieldFF.stories.js → CheckboxFieldFF.prod.stories.js} +29 -3
- package/build/es/FieldGroupFF/FieldGroupFF.js +0 -2
- package/build/es/FieldGroupFF/{FieldGroupFF.stories.js → FieldGroupFF.prod.stories.js} +11 -1
- package/build/es/FileInputFieldFF/{FileInputFieldFF.stories.e2e.js → FileInputFieldFF.e2e.stories.js} +14 -16
- package/build/es/FileInputFieldFF/FileInputFieldFF.js +1 -8
- package/build/es/FileInputFieldFF/{FileInputFieldFF.stories.js → FileInputFieldFF.prod.stories.js} +29 -3
- package/build/es/InputFieldFF/{InputFieldFF.stories.e2e.js → InputFieldFF.e2e.stories.js} +8 -4
- package/build/es/InputFieldFF/InputFieldFF.js +1 -3
- package/build/es/InputFieldFF/{InputFieldFF.stories.js → InputFieldFF.prod.stories.js} +29 -3
- package/build/es/MultiSelectFieldFF/{MultiSelectFieldFF.stories.e2e.js → MultiSelectFieldFF.e2e.stories.js} +7 -7
- package/build/es/MultiSelectFieldFF/MultiSelectFieldFF.js +2 -6
- package/build/es/MultiSelectFieldFF/MultiSelectFieldFF.prod.stories.js +98 -0
- package/build/es/MultiSelectFieldFF/features/common/index.js +1 -1
- package/build/es/RadioFieldFF/{RadioFieldFF.stories.e2e.js → RadioFieldFF.e2e.stories.js} +6 -3
- package/build/es/RadioFieldFF/RadioFieldFF.js +1 -3
- package/build/es/RadioFieldFF/{RadioFieldFF.stories.js → RadioFieldFF.prod.stories.js} +29 -3
- package/build/es/SingleSelectFieldFF/{SingleSelectFieldFF.stories.e2e.js → SingleSelectFieldFF.e2e.stories.js} +10 -6
- package/build/es/SingleSelectFieldFF/SingleSelectFieldFF.js +1 -3
- package/build/es/SingleSelectFieldFF/SingleSelectFieldFF.prod.stories.js +97 -0
- package/build/es/SwitchFieldFF/{SwitchFieldFF.stories.e2e.js → SwitchFieldFF.e2e.stories.js} +14 -7
- package/build/es/SwitchFieldFF/SwitchFieldFF.js +1 -3
- package/build/es/SwitchFieldFF/{SwitchFieldFF.stories.js → SwitchFieldFF.prod.stories.js} +29 -3
- package/build/es/TextAreaFieldFF/{TextAreaFieldFF.stories.e2e.js → TextAreaFieldFF.e2e.stories.js} +8 -4
- package/build/es/TextAreaFieldFF/TextAreaFieldFF.js +1 -3
- package/build/es/TextAreaFieldFF/{TextAreaFieldFF.stories.js → TextAreaFieldFF.prod.stories.js} +29 -3
- package/build/es/__tests__/__snapshots__/index.test.js.snap +3 -0
- package/build/es/__tests__/index.test.js +1 -0
- package/build/es/formDecorator.js +5 -12
- package/build/es/index.js +2 -2
- package/build/es/shared/helpers/createBlurHandler.js +0 -2
- package/build/es/shared/helpers/createChangeHandler.js +0 -2
- package/build/es/shared/helpers/createFocusHandler.js +0 -2
- package/build/es/shared/helpers/createSelectChangeHandler.js +0 -1
- package/build/es/shared/helpers/createToggleChangeHandler.js +0 -2
- package/build/es/shared/helpers/getValidationText.js +0 -5
- package/build/es/shared/helpers/hasError.js +0 -1
- package/build/es/shared/helpers/isLoading.js +0 -1
- package/build/es/shared/helpers/isValid.js +0 -1
- package/build/es/transformers/arrayWithIdObjects.js +0 -2
- package/build/es/validators/__tests__/createCharacterLengthRange.test.js +6 -3
- package/build/es/validators/__tests__/createMaxCharacterLength.test.js +1 -0
- package/build/es/validators/__tests__/createMaxNumber.test.js +1 -0
- package/build/es/validators/__tests__/createMinCharacterLength.test.js +1 -0
- package/build/es/validators/__tests__/createMinNumber.test.js +1 -0
- package/build/es/validators/__tests__/createPattern.test.js +1 -1
- package/build/es/validators/__tests__/email.test.js +7 -4
- package/build/es/validators/__tests__/internationalPhoneNumber.test.js +6 -3
- package/build/es/validators/__tests__/url.test.js +1 -0
- package/build/es/validators/alphaNumeric.js +0 -2
- package/build/es/validators/boolean.js +0 -2
- package/build/es/validators/composeValidators.js +0 -2
- package/build/es/validators/createCharacterLengthRange.js +0 -2
- package/build/es/validators/createEqualTo.js +0 -2
- package/build/es/validators/createMaxCharacterLength.js +0 -2
- package/build/es/validators/createMaxNumber.js +0 -2
- package/build/es/validators/createMinCharacterLength.js +0 -2
- package/build/es/validators/createMinNumber.js +0 -2
- package/build/es/validators/createNumberRange.js +0 -2
- package/build/es/validators/createPattern.js +0 -3
- package/build/es/validators/dhis2Password.js +3 -12
- package/build/es/validators/dhis2Username.js +0 -2
- package/build/es/validators/email.js +1 -2
- package/build/es/validators/hasValue.js +0 -2
- package/build/es/validators/integer.js +3 -4
- package/build/es/validators/internationalPhoneNumber.js +7 -7
- package/build/es/validators/number.js +0 -2
- package/build/es/validators/string.js +0 -2
- package/build/es/validators/test-helpers/index.js +1 -4
- package/build/es/validators/url.js +2 -3
- package/package.json +13 -13
- package/build/cjs/InputFieldFF/InputFieldFF.stories.e2e.js +0 -27
- package/build/cjs/MultiSelectFieldFF/MultiSelectFieldFF.stories.js +0 -91
- package/build/cjs/RadioFieldFF/RadioFieldFF.stories.e2e.js +0 -45
- package/build/cjs/SingleSelectFieldFF/SingleSelectFieldFF.stories.e2e.js +0 -37
- package/build/cjs/SingleSelectFieldFF/SingleSelectFieldFF.stories.js +0 -90
- package/build/cjs/SwitchFieldFF/SwitchFieldFF.stories.e2e.js +0 -49
- package/build/cjs/TextAreaFieldFF/TextAreaFieldFF.stories.e2e.js +0 -27
- package/build/es/MultiSelectFieldFF/MultiSelectFieldFF.stories.js +0 -70
- package/build/es/SingleSelectFieldFF/SingleSelectFieldFF.stories.js +0 -69
package/build/es/SwitchFieldFF/{SwitchFieldFF.stories.e2e.js → SwitchFieldFF.e2e.stories.js}
RENAMED
@@ -1,12 +1,16 @@
|
|
1
|
-
import { storiesOf } from '@storybook/react';
|
2
1
|
import React from 'react';
|
3
2
|
import { Field } from 'react-final-form';
|
4
3
|
import { formDecorator } from '../formDecorator.js';
|
5
4
|
import { hasValue } from '../validators/index.js';
|
6
|
-
import { SwitchFieldFF } from './SwitchFieldFF.js';
|
5
|
+
import { SwitchFieldFF } from './SwitchFieldFF.js';
|
7
6
|
|
7
|
+
// https://github.com/final-form/react-final-form-arrays/issues/111
|
8
8
|
const initialValue = ['yes'];
|
9
|
-
|
9
|
+
export default {
|
10
|
+
title: 'Testing:SwitchFieldFF',
|
11
|
+
decorators: [formDecorator]
|
12
|
+
};
|
13
|
+
export const Unchecked = () => /*#__PURE__*/React.createElement(Field, {
|
10
14
|
component: SwitchFieldFF,
|
11
15
|
className: "switch",
|
12
16
|
name: "switch",
|
@@ -14,21 +18,24 @@ storiesOf('Testing:SwitchFieldFF', module).addDecorator(formDecorator).add('Unch
|
|
14
18
|
validate: hasValue,
|
15
19
|
required: true,
|
16
20
|
type: "checkbox"
|
17
|
-
})
|
21
|
+
});
|
22
|
+
export const Checked = () => /*#__PURE__*/React.createElement(Field, {
|
18
23
|
component: SwitchFieldFF,
|
19
24
|
className: "switch",
|
20
25
|
name: "switch",
|
21
26
|
label: "Label text",
|
22
27
|
initialValue: true,
|
23
28
|
type: "checkbox"
|
24
|
-
})
|
29
|
+
});
|
30
|
+
export const UncheckedWithValue = () => /*#__PURE__*/React.createElement(Field, {
|
25
31
|
component: SwitchFieldFF,
|
26
32
|
className: "switch",
|
27
33
|
name: "switch",
|
28
34
|
label: "Label text",
|
29
35
|
value: "yes",
|
30
36
|
type: "checkbox"
|
31
|
-
})
|
37
|
+
});
|
38
|
+
export const CheckedWithValue = () => /*#__PURE__*/React.createElement(Field, {
|
32
39
|
component: SwitchFieldFF,
|
33
40
|
className: "switch",
|
34
41
|
name: "switch",
|
@@ -36,4 +43,4 @@ storiesOf('Testing:SwitchFieldFF', module).addDecorator(formDecorator).add('Unch
|
|
36
43
|
value: "yes",
|
37
44
|
initialValue: initialValue,
|
38
45
|
type: "checkbox"
|
39
|
-
})
|
46
|
+
});
|
@@ -1,5 +1,4 @@
|
|
1
|
-
function _extends() { _extends = Object.assign
|
2
|
-
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
3
2
|
import { SwitchField } from '@dhis2-ui/switch';
|
4
3
|
import PropTypes from 'prop-types';
|
5
4
|
import React from 'react';
|
@@ -32,7 +31,6 @@ export const SwitchFieldFF = _ref => {
|
|
32
31
|
SwitchFieldFF.propTypes = {
|
33
32
|
/** `input` props received from Final Form `Field` */
|
34
33
|
input: inputPropType.isRequired,
|
35
|
-
|
36
34
|
/** `meta` props received from Final Form `Field` */
|
37
35
|
meta: metaPropType.isRequired,
|
38
36
|
error: PropTypes.bool,
|
@@ -4,7 +4,31 @@ import { formDecorator } from '../formDecorator.js';
|
|
4
4
|
import { inputArgType, metaArgType } from '../shared/propTypes.js';
|
5
5
|
import { hasValue } from '../validators/index.js';
|
6
6
|
import { SwitchFieldFF } from './SwitchFieldFF.js';
|
7
|
-
const description =
|
7
|
+
const description = `
|
8
|
+
The \`SwitchFieldFF\` is a wrapper around a \`SwitchField\` that enables it to work with Final Form, the preferred library for form validation and utilities in DHIS 2 apps.
|
9
|
+
|
10
|
+
#### Final Form
|
11
|
+
|
12
|
+
See how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).
|
13
|
+
|
14
|
+
Inside a Final Form \`<Form>\` component, these 'FF' UI components are intended to be used in the \`component\` prop of the [Final Form \`<Field>\` components](https://final-form.org/docs/react-final-form/api/Field) where they will receive some props from the Field, e.g. \`<Field component={SwitchFieldFF} />\`. See the code samples below for examples.
|
15
|
+
|
16
|
+
#### Props
|
17
|
+
|
18
|
+
The props shown in the table below are generally provided to the \`SwitchFieldFF\` wrapper by the Final Form \`Field\`.
|
19
|
+
|
20
|
+
Note that any props beyond the API of the \`Field\` component will be spread to the \`SwitchFieldFF\`, which passes any extra props to the underlying \`SwitchField\` using \`{...rest}\`.
|
21
|
+
|
22
|
+
Therefore, to add any props to the \`SwitchFieldFF\` or \`SwitchField\`, add those props to the parent Final Form \`Field\` component.
|
23
|
+
|
24
|
+
Also see \`Switch\` and \`SwitchField\` for notes about props and implementation.
|
25
|
+
|
26
|
+
\`\`\`js
|
27
|
+
import { SwitchFieldFF } from '@dhis2/ui'
|
28
|
+
\`\`\`
|
29
|
+
|
30
|
+
Press **Submit** to see the form values logged to the console.
|
31
|
+
`;
|
8
32
|
export default {
|
9
33
|
title: 'Switch Field (Final Form)',
|
10
34
|
component: SwitchFieldFF,
|
@@ -17,9 +41,11 @@ export default {
|
|
17
41
|
}
|
18
42
|
},
|
19
43
|
argTypes: {
|
20
|
-
input: {
|
44
|
+
input: {
|
45
|
+
...inputArgType
|
21
46
|
},
|
22
|
-
meta: {
|
47
|
+
meta: {
|
48
|
+
...metaArgType
|
23
49
|
}
|
24
50
|
}
|
25
51
|
};
|
package/build/es/TextAreaFieldFF/{TextAreaFieldFF.stories.e2e.js → TextAreaFieldFF.e2e.stories.js}
RENAMED
@@ -1,17 +1,21 @@
|
|
1
|
-
import { storiesOf } from '@storybook/react';
|
2
1
|
import React from 'react';
|
3
2
|
import { Field } from 'react-final-form';
|
4
3
|
import { formDecorator } from '../formDecorator.js';
|
5
4
|
import { hasValue } from '../validators/index.js';
|
6
5
|
import { TextAreaFieldFF } from './TextAreaFieldFF.js';
|
7
|
-
|
6
|
+
export default {
|
7
|
+
title: 'TextArea',
|
8
|
+
decorators: [formDecorator]
|
9
|
+
};
|
10
|
+
export const Default = () => /*#__PURE__*/React.createElement(Field, {
|
8
11
|
component: TextAreaFieldFF,
|
9
12
|
name: "comment",
|
10
13
|
label: "Do you have any comments?"
|
11
|
-
})
|
14
|
+
});
|
15
|
+
export const Required = () => /*#__PURE__*/React.createElement(Field, {
|
12
16
|
required: true,
|
13
17
|
name: "comment",
|
14
18
|
component: TextAreaFieldFF,
|
15
19
|
validate: hasValue,
|
16
20
|
label: "Do you have any comments?"
|
17
|
-
})
|
21
|
+
});
|
@@ -1,5 +1,4 @@
|
|
1
|
-
function _extends() { _extends = Object.assign
|
2
|
-
|
1
|
+
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
3
2
|
import { TextAreaField } from '@dhis2-ui/text-area';
|
4
3
|
import PropTypes from 'prop-types';
|
5
4
|
import React from 'react';
|
@@ -34,7 +33,6 @@ export const TextAreaFieldFF = _ref => {
|
|
34
33
|
TextAreaFieldFF.propTypes = {
|
35
34
|
/** `input` props received from Final Form `Field` */
|
36
35
|
input: inputPropType.isRequired,
|
37
|
-
|
38
36
|
/** `meta` props received from Final Form `Field` */
|
39
37
|
meta: metaPropType.isRequired,
|
40
38
|
error: PropTypes.bool,
|
package/build/es/TextAreaFieldFF/{TextAreaFieldFF.stories.js → TextAreaFieldFF.prod.stories.js}
RENAMED
@@ -4,7 +4,31 @@ import { formDecorator } from '../formDecorator.js';
|
|
4
4
|
import { inputArgType, metaArgType } from '../shared/propTypes.js';
|
5
5
|
import { hasValue } from '../validators/index.js';
|
6
6
|
import { TextAreaFieldFF } from './TextAreaFieldFF.js';
|
7
|
-
const description =
|
7
|
+
const description = `
|
8
|
+
The \`TextAreaFieldFF\` is a wrapper around a \`TextAreaField\` that enables it to work with Final Form, the preferred library for form validation and utilities in DHIS 2 apps.
|
9
|
+
|
10
|
+
#### Final Form
|
11
|
+
|
12
|
+
See how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).
|
13
|
+
|
14
|
+
Inside a Final Form \`<Form>\` component, these 'FF' UI components are intended to be used in the \`component\` prop of the [Final Form \`<Field>\` components](https://final-form.org/docs/react-final-form/api/Field) where they will receive some props from the Field, e.g. \`<Field component={TextAreaFieldFF} />\`. See the code samples below for examples.
|
15
|
+
|
16
|
+
#### Props
|
17
|
+
|
18
|
+
The props shown in the table below are generally provided to the \`TextAreaFieldFF\` wrapper by the Final Form \`Field\`.
|
19
|
+
|
20
|
+
Note that any props beyond the API of the \`Field\` component will be spread to the \`TextAreaFieldFF\`, which passes any extra props to the underlying \`TextAreaField\` using \`{...rest}\`.
|
21
|
+
|
22
|
+
Therefore, to add any props to the \`TextAreaFieldFF\` or \`TextAreaField\`, add those props to the parent Final Form \`Field\` component.
|
23
|
+
|
24
|
+
Also see \`TextArea\` and \`TextAreaField\` for notes about props and implementation.
|
25
|
+
|
26
|
+
\`\`\`js
|
27
|
+
import { TextAreaFieldFF } from '@dhis2/ui'
|
28
|
+
\`\`\`
|
29
|
+
|
30
|
+
Press **Submit** to see the form values logged to the console.
|
31
|
+
`;
|
8
32
|
export default {
|
9
33
|
title: 'Text Area Field (Final Form)',
|
10
34
|
component: TextAreaFieldFF,
|
@@ -17,9 +41,11 @@ export default {
|
|
17
41
|
}
|
18
42
|
},
|
19
43
|
argTypes: {
|
20
|
-
input: {
|
44
|
+
input: {
|
45
|
+
...inputArgType
|
21
46
|
},
|
22
|
-
meta: {
|
47
|
+
meta: {
|
48
|
+
...metaArgType
|
23
49
|
}
|
24
50
|
}
|
25
51
|
};
|
@@ -11,6 +11,7 @@ Array [
|
|
11
11
|
"getIn",
|
12
12
|
"setIn",
|
13
13
|
"version",
|
14
|
+
"default",
|
14
15
|
]
|
15
16
|
`;
|
16
17
|
|
@@ -22,6 +23,8 @@ exports[`final-form named export should re-export the expected type for configOp
|
|
22
23
|
|
23
24
|
exports[`final-form named export should re-export the expected type for createForm 1`] = `"function"`;
|
24
25
|
|
26
|
+
exports[`final-form named export should re-export the expected type for default 1`] = `"object"`;
|
27
|
+
|
25
28
|
exports[`final-form named export should re-export the expected type for fieldSubscriptionItems 1`] = `"object"`;
|
26
29
|
|
27
30
|
exports[`final-form named export should re-export the expected type for formSubscriptionItems 1`] = `"object"`;
|
@@ -1,5 +1,6 @@
|
|
1
|
-
function _defineProperty(
|
2
|
-
|
1
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
2
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
3
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
3
4
|
import { Button } from '@dhis2-ui/button';
|
4
5
|
import PropTypes from 'prop-types';
|
5
6
|
import React from 'react';
|
@@ -10,42 +11,36 @@ const formProps = {
|
|
10
11
|
},
|
11
12
|
mutators: {}
|
12
13
|
};
|
13
|
-
|
14
14
|
class FormWithSpyAndSubmit extends React.Component {
|
15
15
|
constructor() {
|
16
16
|
super(...arguments);
|
17
|
-
|
18
17
|
_defineProperty(this, "state", {
|
19
18
|
cypressProps: {}
|
20
19
|
});
|
21
|
-
|
22
20
|
_defineProperty(this, "updateCypressProps", updateObj => {
|
23
|
-
const cypressProps = {
|
21
|
+
const cypressProps = {
|
22
|
+
...this.state.cypressProps,
|
24
23
|
...updateObj
|
25
24
|
};
|
26
25
|
this.setState({
|
27
26
|
cypressProps
|
28
27
|
});
|
29
28
|
});
|
30
|
-
|
31
29
|
_defineProperty(this, "clearCypressProps", () => {
|
32
30
|
this.setState({
|
33
31
|
cypressProps: {}
|
34
32
|
});
|
35
33
|
});
|
36
34
|
}
|
37
|
-
|
38
35
|
componentDidMount() {
|
39
36
|
window.updateCypressProps = this.updateCypressProps;
|
40
37
|
window.clearCypressProps = this.clearCypressProps;
|
41
38
|
this.forceUpdate();
|
42
39
|
}
|
43
|
-
|
44
40
|
componentWillUnmount() {
|
45
41
|
delete window.updateCypressProps;
|
46
42
|
delete window.clearCypressProps;
|
47
43
|
}
|
48
|
-
|
49
44
|
render() {
|
50
45
|
return /*#__PURE__*/React.createElement(Form, formProps, formRenderProps => /*#__PURE__*/React.createElement("form", {
|
51
46
|
onSubmit: formRenderProps.handleSubmit
|
@@ -65,9 +60,7 @@ class FormWithSpyAndSubmit extends React.Component {
|
|
65
60
|
});
|
66
61
|
})));
|
67
62
|
}
|
68
|
-
|
69
63
|
}
|
70
|
-
|
71
64
|
FormWithSpyAndSubmit.propTypes = {
|
72
65
|
renderChildren: PropTypes.func.isRequired
|
73
66
|
};
|
package/build/es/index.js
CHANGED
@@ -11,16 +11,16 @@ export { TextAreaFieldFF } from './TextAreaFieldFF/TextAreaFieldFF.js';
|
|
11
11
|
export { FieldGroupFF } from './FieldGroupFF/FieldGroupFF.js';
|
12
12
|
export * from './transformers/index.js';
|
13
13
|
export * from './validators/index.js';
|
14
|
+
|
14
15
|
/**
|
15
16
|
* Allows direct access to the FinalForm library. Please note that this is considered advanced
|
16
17
|
* usage and that you need to stay up to date with breaking changes in the FinalForm library.
|
17
18
|
*/
|
18
|
-
|
19
19
|
export { FinalForm };
|
20
|
+
|
20
21
|
/**
|
21
22
|
* Allows direct access to the ReactFinalForm library. Please note that this is considered
|
22
23
|
* advanced usage and that you need to stay up to date with breaking changes in the FinalForm
|
23
24
|
* library.
|
24
25
|
*/
|
25
|
-
|
26
26
|
export { ReactFinalForm };
|
@@ -1,21 +1,16 @@
|
|
1
1
|
import { hasError } from './hasError.js';
|
2
|
-
|
3
2
|
const getValidationText = (meta, validationText, error) => {
|
4
3
|
if (validationText) {
|
5
4
|
return validationText;
|
6
5
|
}
|
7
|
-
|
8
6
|
if (hasError(meta, error)) {
|
9
7
|
if (meta.error) {
|
10
8
|
return meta.error;
|
11
9
|
}
|
12
|
-
|
13
10
|
if (meta.submitError) {
|
14
11
|
return meta.submitError;
|
15
12
|
}
|
16
13
|
}
|
17
|
-
|
18
14
|
return '';
|
19
15
|
};
|
20
|
-
|
21
16
|
export { getValidationText };
|
@@ -4,11 +4,9 @@ const format = value => !value ? [] : value.map(_ref => {
|
|
4
4
|
} = _ref;
|
5
5
|
return id;
|
6
6
|
});
|
7
|
-
|
8
7
|
const parse = value => !value || Array.isArray(value) && value.length === 0 ? undefined : value.map(id => ({
|
9
8
|
id
|
10
9
|
}));
|
11
|
-
|
12
10
|
export const arrayWithIdObjects = {
|
13
11
|
format,
|
14
12
|
parse
|
@@ -23,7 +23,8 @@ describe('validator: createCharacterLengthRange', () => {
|
|
23
23
|
});
|
24
24
|
allowsEmptyValues(betweenSixAndTenChars);
|
25
25
|
describe('allows within-range strings', () => {
|
26
|
-
testValidatorValues(betweenSixAndTenChars, undefined, ['abcdef',
|
26
|
+
testValidatorValues(betweenSixAndTenChars, undefined, ['abcdef',
|
27
|
+
// 6
|
27
28
|
'abcdefgh', 'abcdefghij' // 10
|
28
29
|
]);
|
29
30
|
});
|
@@ -31,8 +32,10 @@ describe('validator: createCharacterLengthRange', () => {
|
|
31
32
|
testValidatorValues(betweenSixAndTenChars, inValidMsg, [true, 3, {}, [], () => {}]);
|
32
33
|
});
|
33
34
|
describe('rejects out-of-range strings', () => {
|
34
|
-
testValidatorValues(betweenSixAndTenChars, inValidMsg, ['a', 'abcde',
|
35
|
-
|
35
|
+
testValidatorValues(betweenSixAndTenChars, inValidMsg, ['a', 'abcde',
|
36
|
+
// 5
|
37
|
+
'abcdefghijk',
|
38
|
+
// 11
|
36
39
|
'abcdefghijklmnopqrstuvw']);
|
37
40
|
});
|
38
41
|
});
|
@@ -3,6 +3,7 @@ import { testValidatorValues } from '../test-helpers/index.js';
|
|
3
3
|
describe('validator: createMaxCharacterLength', () => {
|
4
4
|
const maxSixChars = createMaxCharacterLength(6);
|
5
5
|
const errorMessage = 'Please enter a maximum of 6 characters';
|
6
|
+
|
6
7
|
/*
|
7
8
|
* Since createMaxCharacterLength calls createNumberRange internally
|
8
9
|
* a lot of things have been tested there and here we focus
|
@@ -3,6 +3,7 @@ import { testValidatorValues } from '../test-helpers/index.js';
|
|
3
3
|
describe('validator: createMaxNumber', () => {
|
4
4
|
const maxSix = createMaxNumber(6);
|
5
5
|
const errorMessage = 'Please enter a number with a maximum of 6';
|
6
|
+
|
6
7
|
/*
|
7
8
|
* Since createMaxNumber calls createNumberRange internally
|
8
9
|
* a lot of things have been tested there and here we focus
|
@@ -3,6 +3,7 @@ import { testValidatorValues } from '../test-helpers/index.js';
|
|
3
3
|
describe('validator: createMinCharacterLength', () => {
|
4
4
|
const atLeastSixChars = createMinCharacterLength(6);
|
5
5
|
const errorMessage = 'Please enter at least 6 characters';
|
6
|
+
|
6
7
|
/*
|
7
8
|
* Since createMinCharacterLength calls createCharacterLengthRange internally
|
8
9
|
* a lot of things have been tested there and here we focus
|
@@ -3,6 +3,7 @@ import { testValidatorValues } from '../test-helpers/index.js';
|
|
3
3
|
describe('validator: createMinNumber', () => {
|
4
4
|
const atLeastSix = createMinNumber(6);
|
5
5
|
const errorMessage = 'Please enter a number of at least 6';
|
6
|
+
|
6
7
|
/*
|
7
8
|
* Since createMinNumber calls createNumberRange internally
|
8
9
|
* a lot of things have been tested there and here we focus
|
@@ -20,7 +20,7 @@ describe('validator: createPattern', () => {
|
|
20
20
|
});
|
21
21
|
it('should return an error string when input does not match the pattern', () => {
|
22
22
|
const escapedRegexString = '/^test$/';
|
23
|
-
const invalidMsg =
|
23
|
+
const invalidMsg = `Please make sure the value of this input matches the pattern ${escapedRegexString}.`;
|
24
24
|
expect(equalToTestPattern('bad input')).toEqual(invalidMsg);
|
25
25
|
});
|
26
26
|
it('should return an custon error string when one was provided and input does not match the pattern', () => {
|
@@ -1,5 +1,6 @@
|
|
1
1
|
import { email, invalidEmailMessage } from '../email.js';
|
2
2
|
import { testValidatorValues, allowsEmptyValues } from '../test-helpers/index.js';
|
3
|
+
|
3
4
|
/*
|
4
5
|
* A comprehensive list technically valid and invalid email addresses was
|
5
6
|
* taken from:
|
@@ -19,8 +20,10 @@ describe('validator: email', () => {
|
|
19
20
|
/*
|
20
21
|
* Items that have been commented out below are FALSELY REJECTED by the chosen regex
|
21
22
|
*/
|
22
|
-
testValidatorValues(email, undefined, ['email@example.com', 'firstname.lastname@example.com', 'email@subdomain.example.com', 'firstname+lastname@example.com',
|
23
|
+
testValidatorValues(email, undefined, ['email@example.com', 'firstname.lastname@example.com', 'email@subdomain.example.com', 'firstname+lastname@example.com',
|
24
|
+
// 'email@123.123.123.123',
|
23
25
|
'email@[123.123.123.123]', '"email"@example.com', '1234567890@example.com', 'email@example-one.com', '_______@example.com', 'email@example.name', 'email@example.museum', 'email@example.co.jp', 'firstname-lastname@example.com'
|
26
|
+
|
24
27
|
/* very strange but technically valid addresses */
|
25
28
|
// 'much."more unusual"@example.com',
|
26
29
|
// 'very.unusual."@".unusual.com@example.com',
|
@@ -37,10 +40,10 @@ describe('validator: email', () => {
|
|
37
40
|
* see https://en.wikipedia.org/wiki/International_email)
|
38
41
|
*/
|
39
42
|
// 'あいうえお@example.com'
|
40
|
-
'email@example.com (Joe Smith)', 'email@example',
|
43
|
+
'email@example.com (Joe Smith)', 'email@example',
|
44
|
+
// 'email@-example.com',
|
41
45
|
// 'email@example.web',
|
42
|
-
'email@111.222.333.44444', 'email@example..com', 'Abc..123@example.com',
|
43
|
-
/* very strange invalid addresses */
|
46
|
+
'email@111.222.333.44444', 'email@example..com', 'Abc..123@example.com', /* very strange invalid addresses */
|
44
47
|
'"(),:;<>[]@example.com', 'just"not"right@example.com', 'this is"really"not\\\\allowed@example.com']);
|
45
48
|
});
|
46
49
|
});
|
@@ -9,9 +9,12 @@ describe('validator: internationalPhoneNumber', () => {
|
|
9
9
|
testValidatorValues(internationalPhoneNumber, invalidInternationalPhoneNumberMessage, [true, 3, {}, [], () => {}]);
|
10
10
|
});
|
11
11
|
describe('rejects invalid phone numbers', () => {
|
12
|
-
testValidatorValues(internationalPhoneNumber, invalidInternationalPhoneNumberMessage, ['sometext123',
|
13
|
-
|
14
|
-
'+
|
12
|
+
testValidatorValues(internationalPhoneNumber, invalidInternationalPhoneNumberMessage, ['sometext123',
|
13
|
+
// text
|
14
|
+
'+3172%^$#%*182838485868',
|
15
|
+
// special characters
|
16
|
+
'+31725111889101112131415',
|
17
|
+
// too long
|
15
18
|
'0031_72_5111889' // bad separators
|
16
19
|
]);
|
17
20
|
});
|
@@ -2,7 +2,5 @@ import i18n from '../locales/index.js';
|
|
2
2
|
import { isEmpty, isString } from './helpers/index.js';
|
3
3
|
const ALPHA_NUMERIC_PATTERN = /^[a-z0-9 ]*$/i;
|
4
4
|
const invalidAlphaNumericMessage = i18n.t('Please provide an alpha-numeric value');
|
5
|
-
|
6
5
|
const alphaNumeric = value => isEmpty(value) || isString(value) && ALPHA_NUMERIC_PATTERN.test(value) ? undefined : invalidAlphaNumericMessage;
|
7
|
-
|
8
6
|
export { alphaNumeric, invalidAlphaNumericMessage };
|
@@ -1,7 +1,5 @@
|
|
1
1
|
import i18n from '../locales/index.js';
|
2
2
|
import { isEmpty } from './helpers/index.js';
|
3
3
|
const invalidBooleanMessage = i18n.t('Please provide a boolean value');
|
4
|
-
|
5
4
|
const boolean = value => isEmpty(value) || typeof value === 'boolean' ? undefined : invalidBooleanMessage;
|
6
|
-
|
7
5
|
export { boolean, invalidBooleanMessage };
|
@@ -2,12 +2,10 @@ export const composeValidators = function () {
|
|
2
2
|
for (var _len = arguments.length, validators = new Array(_len), _key = 0; _key < _len; _key++) {
|
3
3
|
validators[_key] = arguments[_key];
|
4
4
|
}
|
5
|
-
|
6
5
|
return function () {
|
7
6
|
for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
8
7
|
args[_key2] = arguments[_key2];
|
9
8
|
}
|
10
|
-
|
11
9
|
return validators.reduce((error, validator) => error || validator(...args), undefined);
|
12
10
|
};
|
13
11
|
};
|
@@ -1,6 +1,5 @@
|
|
1
1
|
import i18n from '../locales/index.js';
|
2
2
|
import { isEmpty, isString, isInRange, requireArgument } from './helpers/index.js';
|
3
|
-
|
4
3
|
const createCharacterLengthRange = (lowerBound, upperBound, customMessage) => {
|
5
4
|
requireArgument(lowerBound, 'number');
|
6
5
|
requireArgument(upperBound, 'number');
|
@@ -10,5 +9,4 @@ const createCharacterLengthRange = (lowerBound, upperBound, customMessage) => {
|
|
10
9
|
});
|
11
10
|
return value => isEmpty(value) || isString(value) && isInRange(lowerBound, upperBound, value.length) ? undefined : errorMessage;
|
12
11
|
};
|
13
|
-
|
14
12
|
export { createCharacterLengthRange };
|
@@ -1,6 +1,5 @@
|
|
1
1
|
import i18n from '../locales/index.js';
|
2
2
|
import { isEmpty, requireArgument } from './helpers/index.js';
|
3
|
-
|
4
3
|
const createEqualTo = (key, description) => {
|
5
4
|
requireArgument(key, 'string');
|
6
5
|
const errorMessage = i18n.t('Please make sure the value of this input matches the value in "{{otherField}}".', {
|
@@ -8,5 +7,4 @@ const createEqualTo = (key, description) => {
|
|
8
7
|
});
|
9
8
|
return (value, allValues) => isEmpty(value) || value === allValues[key] ? undefined : errorMessage;
|
10
9
|
};
|
11
|
-
|
12
10
|
export { createEqualTo };
|
@@ -1,8 +1,6 @@
|
|
1
1
|
import i18n from '../locales/index.js';
|
2
2
|
import { createCharacterLengthRange } from './createCharacterLengthRange.js';
|
3
|
-
|
4
3
|
const createMaxCharacterLength = upperBound => createCharacterLengthRange(0, upperBound, i18n.t('Please enter a maximum of {{upperBound}} characters', {
|
5
4
|
upperBound
|
6
5
|
}));
|
7
|
-
|
8
6
|
export { createMaxCharacterLength };
|
@@ -1,8 +1,6 @@
|
|
1
1
|
import i18n from '../locales/index.js';
|
2
2
|
import { createNumberRange } from './createNumberRange.js';
|
3
|
-
|
4
3
|
const createMaxNumber = upperBound => createNumberRange(-Infinity, upperBound, i18n.t('Please enter a number with a maximum of {{upperBound}}', {
|
5
4
|
upperBound
|
6
5
|
}));
|
7
|
-
|
8
6
|
export { createMaxNumber };
|