@dhis2/ui-forms 9.11.0 → 9.11.1-beta.2
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/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 };
|