@dhis2/ui-forms 8.2.0 → 8.2.3
Sign up to get free protection for your applications and to get access to all the features.
- package/build/cjs/CheckboxFieldFF/CheckboxFieldFF.js +24 -21
- package/build/cjs/CheckboxFieldFF/CheckboxFieldFF.stories.js +3 -27
- package/build/cjs/FieldGroupFF/FieldGroupFF.js +7 -6
- package/build/cjs/FieldGroupFF/FieldGroupFF.stories.js +3 -13
- package/build/cjs/FileInputFieldFF/FileInputFieldFF.js +17 -18
- package/build/cjs/FileInputFieldFF/FileInputFieldFF.stories.e2e.js +12 -8
- package/build/cjs/FileInputFieldFF/FileInputFieldFF.stories.js +3 -27
- package/build/cjs/InputFieldFF/InputFieldFF.js +27 -24
- package/build/cjs/InputFieldFF/InputFieldFF.stories.js +3 -27
- package/build/cjs/MultiSelectFieldFF/MultiSelectFieldFF.js +15 -14
- package/build/cjs/MultiSelectFieldFF/MultiSelectFieldFF.stories.e2e.js +13 -10
- package/build/cjs/MultiSelectFieldFF/MultiSelectFieldFF.stories.js +3 -29
- package/build/cjs/RadioFieldFF/RadioFieldFF.js +24 -21
- package/build/cjs/RadioFieldFF/RadioFieldFF.stories.js +3 -27
- package/build/cjs/SingleSelectFieldFF/SingleSelectFieldFF.js +15 -14
- package/build/cjs/SingleSelectFieldFF/SingleSelectFieldFF.stories.e2e.js +13 -10
- package/build/cjs/SingleSelectFieldFF/SingleSelectFieldFF.stories.js +3 -29
- package/build/cjs/SwitchFieldFF/SwitchFieldFF.js +24 -21
- package/build/cjs/SwitchFieldFF/SwitchFieldFF.stories.js +3 -27
- package/build/cjs/TextAreaFieldFF/TextAreaFieldFF.js +26 -23
- package/build/cjs/TextAreaFieldFF/TextAreaFieldFF.stories.js +3 -27
- package/build/cjs/formDecorator.js +6 -5
- package/build/cjs/index.js +12 -11
- package/build/cjs/locales/ar/translations.json +0 -1
- package/build/cjs/locales/ar_IQ/translations.json +0 -1
- package/build/cjs/locales/ckb/translations.json +0 -1
- package/build/cjs/locales/cs/translations.json +0 -1
- package/build/cjs/locales/da/translations.json +0 -1
- package/build/cjs/locales/en/translations.json +0 -1
- package/build/cjs/locales/es/translations.json +0 -1
- package/build/cjs/locales/fr/translations.json +0 -1
- package/build/cjs/locales/id/translations.json +0 -1
- package/build/cjs/locales/km/translations.json +0 -1
- package/build/cjs/locales/lo/translations.json +0 -1
- package/build/cjs/locales/my/translations.json +0 -1
- package/build/cjs/locales/nb/translations.json +0 -1
- package/build/cjs/locales/prs/translations.json +0 -1
- package/build/cjs/locales/ps/translations.json +0 -1
- package/build/cjs/locales/pt/translations.json +0 -1
- package/build/cjs/locales/pt_BR/translations.json +0 -1
- package/build/cjs/locales/ru/translations.json +0 -1
- package/build/cjs/locales/sv/translations.json +0 -1
- package/build/cjs/locales/tet/translations.json +0 -1
- package/build/cjs/locales/tg/translations.json +0 -1
- package/build/cjs/locales/uk/translations.json +0 -1
- package/build/cjs/locales/ur/translations.json +0 -1
- package/build/cjs/locales/uz/translations.json +0 -1
- package/build/cjs/locales/uz_Latn/translations.json +0 -1
- package/build/cjs/locales/vi/translations.json +0 -1
- package/build/cjs/locales/zh/translations.json +0 -1
- package/build/cjs/locales/zh_CN/translations.json +0 -1
- package/build/cjs/shared/helpers/createChangeHandler.js +19 -16
- package/build/cjs/shared/helpers/createSelectChangeHandler.js +10 -6
- package/build/cjs/shared/propTypes.js +1 -1
- package/build/cjs/transformers/arrayWithIdObjects.js +6 -3
- package/build/cjs/validators/__tests__/createPattern.test.js +1 -1
- package/build/cjs/validators/composeValidators.js +10 -2
- package/build/cjs/validators/helpers/index.js +1 -1
- package/build/cjs/validators/number.js +1 -1
- package/build/cjs/validators/string.js +1 -1
- package/build/cjs/validators/test-helpers/index.js +2 -2
- package/build/cjs/validators/url.js +1 -1
- package/build/es/CheckboxFieldFF/CheckboxFieldFF.js +24 -21
- package/build/es/CheckboxFieldFF/CheckboxFieldFF.stories.js +2 -26
- package/build/es/FieldGroupFF/FieldGroupFF.js +7 -6
- package/build/es/FieldGroupFF/FieldGroupFF.stories.js +2 -12
- package/build/es/FileInputFieldFF/FileInputFieldFF.js +17 -18
- package/build/es/FileInputFieldFF/FileInputFieldFF.stories.e2e.js +12 -8
- package/build/es/FileInputFieldFF/FileInputFieldFF.stories.js +2 -26
- package/build/es/InputFieldFF/InputFieldFF.js +27 -24
- package/build/es/InputFieldFF/InputFieldFF.stories.js +2 -26
- package/build/es/MultiSelectFieldFF/MultiSelectFieldFF.js +15 -14
- package/build/es/MultiSelectFieldFF/MultiSelectFieldFF.stories.e2e.js +13 -10
- package/build/es/MultiSelectFieldFF/MultiSelectFieldFF.stories.js +2 -28
- package/build/es/RadioFieldFF/RadioFieldFF.js +24 -21
- package/build/es/RadioFieldFF/RadioFieldFF.stories.js +2 -26
- package/build/es/SingleSelectFieldFF/SingleSelectFieldFF.js +15 -14
- package/build/es/SingleSelectFieldFF/SingleSelectFieldFF.stories.e2e.js +13 -10
- package/build/es/SingleSelectFieldFF/SingleSelectFieldFF.stories.js +2 -28
- package/build/es/SwitchFieldFF/SwitchFieldFF.js +24 -21
- package/build/es/SwitchFieldFF/SwitchFieldFF.stories.js +2 -26
- package/build/es/TextAreaFieldFF/TextAreaFieldFF.js +26 -23
- package/build/es/TextAreaFieldFF/TextAreaFieldFF.stories.js +2 -26
- package/build/es/formDecorator.js +6 -5
- package/build/es/locales/ar/translations.json +0 -1
- package/build/es/locales/ar_IQ/translations.json +0 -1
- package/build/es/locales/ckb/translations.json +0 -1
- package/build/es/locales/cs/translations.json +0 -1
- package/build/es/locales/da/translations.json +0 -1
- package/build/es/locales/en/translations.json +0 -1
- package/build/es/locales/es/translations.json +0 -1
- package/build/es/locales/fr/translations.json +0 -1
- package/build/es/locales/id/translations.json +0 -1
- package/build/es/locales/km/translations.json +0 -1
- package/build/es/locales/lo/translations.json +0 -1
- package/build/es/locales/my/translations.json +0 -1
- package/build/es/locales/nb/translations.json +0 -1
- package/build/es/locales/prs/translations.json +0 -1
- package/build/es/locales/ps/translations.json +0 -1
- package/build/es/locales/pt/translations.json +0 -1
- package/build/es/locales/pt_BR/translations.json +0 -1
- package/build/es/locales/ru/translations.json +0 -1
- package/build/es/locales/sv/translations.json +0 -1
- package/build/es/locales/tet/translations.json +0 -1
- package/build/es/locales/tg/translations.json +0 -1
- package/build/es/locales/uk/translations.json +0 -1
- package/build/es/locales/ur/translations.json +0 -1
- package/build/es/locales/uz/translations.json +0 -1
- package/build/es/locales/uz_Latn/translations.json +0 -1
- package/build/es/locales/vi/translations.json +0 -1
- package/build/es/locales/zh/translations.json +0 -1
- package/build/es/locales/zh_CN/translations.json +0 -1
- package/build/es/shared/helpers/createChangeHandler.js +19 -16
- package/build/es/shared/helpers/createSelectChangeHandler.js +10 -6
- package/build/es/transformers/arrayWithIdObjects.js +6 -3
- package/build/es/validators/__tests__/createPattern.test.js +1 -1
- package/build/es/validators/composeValidators.js +10 -2
- package/build/es/validators/test-helpers/index.js +1 -1
- package/package.json +10 -10
@@ -15,13 +15,16 @@ storiesOf('Testing:MultiSelectFieldFF', module).addDecorator(formDecorator).addP
|
|
15
15
|
options: {
|
16
16
|
showPanel: false
|
17
17
|
}
|
18
|
-
}).add('Required', (_, {
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
18
|
+
}).add('Required', (_, _ref) => {
|
19
|
+
let {
|
20
|
+
cypressProps
|
21
|
+
} = _ref;
|
22
|
+
return /*#__PURE__*/React.createElement(Field, {
|
23
|
+
required: true,
|
24
|
+
name: "multiSelect",
|
25
|
+
label: "Multi select",
|
26
|
+
component: MultiSelectFieldFF,
|
27
|
+
validate: hasValue,
|
28
|
+
options: cypressProps.options || defaultOptions
|
29
|
+
});
|
30
|
+
});
|
@@ -3,33 +3,7 @@ import { Field } from 'react-final-form';
|
|
3
3
|
import { formDecorator } from '../formDecorator.js';
|
4
4
|
import { inputArgType, metaArgType } from '../shared/propTypes.js';
|
5
5
|
import { MultiSelectFieldFF } from './MultiSelectFieldFF.js';
|
6
|
-
const description = `
|
7
|
-
The \`MultiSelectFieldFF\` is a wrapper around a \`MultiSelectField\` that enables it to work with Final Form, the preferred library for form validation and utilities in DHIS 2 apps.
|
8
|
-
|
9
|
-
#### Final Form
|
10
|
-
|
11
|
-
See how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).
|
12
|
-
|
13
|
-
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={MultiSelectFieldFF} />\`. See the code samples below for examples.
|
14
|
-
|
15
|
-
#### Props
|
16
|
-
|
17
|
-
The props shown in the table below are generally provided to the \`MultiSelectFieldFF\` wrapper by the Final Form \`Field\`.
|
18
|
-
|
19
|
-
Note that any props beyond the API of the \`Field\` component will be spread to the \`MultiSelectFieldFF\`, which passes any extra props to the underlying \`MultiSelectField\` using \`{...rest}\`.
|
20
|
-
|
21
|
-
Therefore, to add any props to the \`MultiSelectFieldFF\` or \`MultiSelectField\`, add those props to the parent Final Form \`Field\` component.
|
22
|
-
|
23
|
-
Also see \`MultiSelect\` and \`MultiSelectField\` for notes about props and implementation.
|
24
|
-
|
25
|
-
\`\`\`js
|
26
|
-
import { MultiSelectFieldFF } from '@dhis2/ui'
|
27
|
-
\`\`\`
|
28
|
-
|
29
|
-
Press **Submit** to see the form values logged to the console.
|
30
|
-
|
31
|
-
_**Note:** Dropdowns may not appear correctly on this page. See the affected demos in the 'Canvas' tab for propper dropdown placement._
|
32
|
-
`;
|
6
|
+
const description = "\nThe `MultiSelectFieldFF` is a wrapper around a `MultiSelectField` that enables it to work with Final Form, the preferred library for form validation and utilities in DHIS 2 apps.\n\n#### Final Form\n\nSee how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).\n\nInside 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={MultiSelectFieldFF} />`. See the code samples below for examples.\n\n#### Props\n\nThe props shown in the table below are generally provided to the `MultiSelectFieldFF` wrapper by the Final Form `Field`.\n\nNote that any props beyond the API of the `Field` component will be spread to the `MultiSelectFieldFF`, which passes any extra props to the underlying `MultiSelectField` using `{...rest}`.\n\nTherefore, to add any props to the `MultiSelectFieldFF` or `MultiSelectField`, add those props to the parent Final Form `Field` component.\n\nAlso see `MultiSelect` and `MultiSelectField` for notes about props and implementation.\n\n```js\nimport { MultiSelectFieldFF } from '@dhis2/ui'\n```\n\nPress **Submit** to see the form values logged to the console.\n\n_**Note:** Dropdowns may not appear correctly on this page. See the affected demos in the 'Canvas' tab for propper dropdown placement._\n";
|
33
7
|
const options = [{
|
34
8
|
value: '1',
|
35
9
|
label: 'one'
|
@@ -63,7 +37,7 @@ const options = [{
|
|
63
37
|
}];
|
64
38
|
const initialValue = ['3', '4', '9', '10'];
|
65
39
|
export default {
|
66
|
-
title: '
|
40
|
+
title: 'Multi Select Field (Final Form)',
|
67
41
|
component: MultiSelectFieldFF,
|
68
42
|
decorators: [formDecorator],
|
69
43
|
parameters: {
|
@@ -5,27 +5,30 @@ import PropTypes from 'prop-types';
|
|
5
5
|
import React from 'react';
|
6
6
|
import { createToggleChangeHandler, createFocusHandler, createBlurHandler, hasError, isValid, getValidationText } from '../shared/helpers.js';
|
7
7
|
import { metaPropType, inputPropType } from '../shared/propTypes.js';
|
8
|
-
export const RadioFieldFF =
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
8
|
+
export const RadioFieldFF = _ref => {
|
9
|
+
let {
|
10
|
+
error,
|
11
|
+
input,
|
12
|
+
meta,
|
13
|
+
showValidStatus,
|
14
|
+
valid,
|
15
|
+
validationText,
|
16
|
+
onBlur,
|
17
|
+
onFocus,
|
18
|
+
...rest
|
19
|
+
} = _ref;
|
20
|
+
return /*#__PURE__*/React.createElement(Radio, _extends({}, rest, {
|
21
|
+
name: input.name,
|
22
|
+
checked: input.checked,
|
23
|
+
value: input.value,
|
24
|
+
error: hasError(meta, error),
|
25
|
+
valid: isValid(meta, valid, showValidStatus),
|
26
|
+
validationText: getValidationText(meta, validationText, error),
|
27
|
+
onFocus: createFocusHandler(input, onFocus),
|
28
|
+
onChange: createToggleChangeHandler(input),
|
29
|
+
onBlur: createBlurHandler(input, onBlur)
|
30
|
+
}));
|
31
|
+
};
|
29
32
|
RadioFieldFF.propTypes = {
|
30
33
|
/** `input` props received from Final Form `Field` */
|
31
34
|
input: inputPropType.isRequired,
|
@@ -4,33 +4,9 @@ import { Field } from 'react-final-form';
|
|
4
4
|
import { formDecorator } from '../formDecorator.js';
|
5
5
|
import { inputArgType, metaArgType } from '../shared/propTypes.js';
|
6
6
|
import { RadioFieldFF } from './RadioFieldFF.js';
|
7
|
-
const description = `
|
8
|
-
The \`RadioFieldFF\` is a wrapper around a \`Radio\` 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={RadioFieldFF} />\`. See the code samples below for examples.
|
15
|
-
|
16
|
-
#### Props
|
17
|
-
|
18
|
-
The props shown in the table below are generally provided to the \`RadioFieldFF\` wrapper by the Final Form \`Field\`.
|
19
|
-
|
20
|
-
Note that any props beyond the API of the \`Field\` component will be spread to the \`RadioFieldFF\`, which passes any extra props to the underlying \`Radio\` using \`{...rest}\`.
|
21
|
-
|
22
|
-
Therefore, to add any props to the \`RadioFieldFF\` or \`Radio\`, add those props to the parent Final Form \`Field\` component.
|
23
|
-
|
24
|
-
Also see \`Radio\` for notes about props and implementation.
|
25
|
-
|
26
|
-
\`\`\`js
|
27
|
-
import { RadioFieldFF } from '@dhis2/ui'
|
28
|
-
\`\`\`
|
29
|
-
|
30
|
-
Press **Submit** to see the form values logged to the console.
|
31
|
-
`;
|
7
|
+
const description = "\nThe `RadioFieldFF` is a wrapper around a `Radio` that enables it to work with Final Form, the preferred library for form validation and utilities in DHIS 2 apps.\n\n#### Final Form\n\nSee how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).\n\nInside 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={RadioFieldFF} />`. See the code samples below for examples.\n\n#### Props\n\nThe props shown in the table below are generally provided to the `RadioFieldFF` wrapper by the Final Form `Field`.\n\nNote that any props beyond the API of the `Field` component will be spread to the `RadioFieldFF`, which passes any extra props to the underlying `Radio` using `{...rest}`.\n\nTherefore, to add any props to the `RadioFieldFF` or `Radio`, add those props to the parent Final Form `Field` component.\n\nAlso see `Radio` for notes about props and implementation.\n\n```js\nimport { RadioFieldFF } from '@dhis2/ui'\n```\n\nPress **Submit** to see the form values logged to the console.\n";
|
32
8
|
export default {
|
33
|
-
title: '
|
9
|
+
title: 'Radio Field (Final Form)',
|
34
10
|
component: RadioFieldFF,
|
35
11
|
decorators: [formDecorator],
|
36
12
|
parameters: {
|
@@ -5,20 +5,21 @@ import PropTypes from 'prop-types';
|
|
5
5
|
import React from 'react';
|
6
6
|
import { createSelectChangeHandler, createFocusHandler, createBlurHandler, hasError, isLoading, isValid, getValidationText } from '../shared/helpers.js';
|
7
7
|
import { inputPropType, metaPropType } from '../shared/propTypes.js';
|
8
|
-
export const SingleSelectFieldFF =
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
8
|
+
export const SingleSelectFieldFF = _ref => {
|
9
|
+
let {
|
10
|
+
error,
|
11
|
+
input,
|
12
|
+
loading,
|
13
|
+
meta,
|
14
|
+
onBlur,
|
15
|
+
onFocus,
|
16
|
+
options,
|
17
|
+
showLoadingStatus,
|
18
|
+
showValidStatus,
|
19
|
+
valid,
|
20
|
+
validationText,
|
21
|
+
...rest
|
22
|
+
} = _ref;
|
22
23
|
return /*#__PURE__*/React.createElement(SingleSelectField, _extends({}, rest, {
|
23
24
|
name: input.name,
|
24
25
|
error: hasError(meta, error),
|
@@ -12,13 +12,16 @@ storiesOf('Testing:SingleSelectFieldFF', module).addDecorator(formDecorator).add
|
|
12
12
|
options: {
|
13
13
|
showPanel: false
|
14
14
|
}
|
15
|
-
}).add('Required', (_, {
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
15
|
+
}).add('Required', (_, _ref) => {
|
16
|
+
let {
|
17
|
+
cypressProps
|
18
|
+
} = _ref;
|
19
|
+
return /*#__PURE__*/React.createElement(Field, {
|
20
|
+
required: true,
|
21
|
+
name: "singleSelect",
|
22
|
+
label: "Single select",
|
23
|
+
component: SingleSelectFieldFF,
|
24
|
+
validate: hasValue,
|
25
|
+
options: cypressProps.options || defaultOptions
|
26
|
+
});
|
27
|
+
});
|
@@ -3,33 +3,7 @@ import { Field } from 'react-final-form';
|
|
3
3
|
import { formDecorator } from '../formDecorator.js';
|
4
4
|
import { inputArgType, metaArgType } from '../shared/propTypes.js';
|
5
5
|
import { SingleSelectFieldFF } from './SingleSelectFieldFF.js';
|
6
|
-
const description = `
|
7
|
-
The \`SingleSelectFieldFF\` is a wrapper around a \`SingleSelectField\` that enables it to work with Final Form, the preferred library for form validation and utilities in DHIS 2 apps.
|
8
|
-
|
9
|
-
#### Final Form
|
10
|
-
|
11
|
-
See how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).
|
12
|
-
|
13
|
-
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={SingleSelectFieldFF} />\`. See the code samples below for examples.
|
14
|
-
|
15
|
-
#### Props
|
16
|
-
|
17
|
-
The props shown in the table below are generally provided to the \`SingleSelectFieldFF\` wrapper by the Final Form \`Field\`.
|
18
|
-
|
19
|
-
Note that any props beyond the API of the \`Field\` component will be spread to the \`SingleSelectFieldFF\`, which passes any extra props to the underlying \`SingleSelectField\` using \`{...rest}\`.
|
20
|
-
|
21
|
-
Therefore, to add any props to the \`SingleSelectFieldFF\` or \`SingleSelectField\`, add those props to the parent Final Form \`Field\` component.
|
22
|
-
|
23
|
-
Also see \`SingleSelect\` and \`SingleSelectField\` for notes about props and implementation.
|
24
|
-
|
25
|
-
\`\`\`js
|
26
|
-
import { SingleSelectFieldFF } from '@dhis2/ui'
|
27
|
-
\`\`\`
|
28
|
-
|
29
|
-
Press **Submit** to see the form values logged to the console.
|
30
|
-
|
31
|
-
_**Note:** Dropdowns may not appear correctly on this page. See the affected demos in the 'Canvas' tab for propper dropdown placement._
|
32
|
-
`;
|
6
|
+
const description = "\nThe `SingleSelectFieldFF` is a wrapper around a `SingleSelectField` that enables it to work with Final Form, the preferred library for form validation and utilities in DHIS 2 apps.\n\n#### Final Form\n\nSee how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).\n\nInside 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={SingleSelectFieldFF} />`. See the code samples below for examples.\n\n#### Props\n\nThe props shown in the table below are generally provided to the `SingleSelectFieldFF` wrapper by the Final Form `Field`.\n\nNote that any props beyond the API of the `Field` component will be spread to the `SingleSelectFieldFF`, which passes any extra props to the underlying `SingleSelectField` using `{...rest}`.\n\nTherefore, to add any props to the `SingleSelectFieldFF` or `SingleSelectField`, add those props to the parent Final Form `Field` component.\n\nAlso see `SingleSelect` and `SingleSelectField` for notes about props and implementation.\n\n```js\nimport { SingleSelectFieldFF } from '@dhis2/ui'\n```\n\nPress **Submit** to see the form values logged to the console.\n\n_**Note:** Dropdowns may not appear correctly on this page. See the affected demos in the 'Canvas' tab for propper dropdown placement._\n";
|
33
7
|
const options = [{
|
34
8
|
value: '1',
|
35
9
|
label: 'one'
|
@@ -62,7 +36,7 @@ const options = [{
|
|
62
36
|
label: 'ten'
|
63
37
|
}];
|
64
38
|
export default {
|
65
|
-
title: '
|
39
|
+
title: 'Single Select Field (Final Form)',
|
66
40
|
component: SingleSelectFieldFF,
|
67
41
|
decorators: [formDecorator],
|
68
42
|
parameters: {
|
@@ -5,27 +5,30 @@ import PropTypes from 'prop-types';
|
|
5
5
|
import React from 'react';
|
6
6
|
import { createToggleChangeHandler, createFocusHandler, createBlurHandler, hasError, isValid, getValidationText } from '../shared/helpers.js';
|
7
7
|
import { metaPropType, inputPropType } from '../shared/propTypes.js';
|
8
|
-
export const SwitchFieldFF =
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
8
|
+
export const SwitchFieldFF = _ref => {
|
9
|
+
let {
|
10
|
+
error,
|
11
|
+
input,
|
12
|
+
meta,
|
13
|
+
showValidStatus,
|
14
|
+
valid,
|
15
|
+
validationText,
|
16
|
+
onBlur,
|
17
|
+
onFocus,
|
18
|
+
...rest
|
19
|
+
} = _ref;
|
20
|
+
return /*#__PURE__*/React.createElement(SwitchField, _extends({}, rest, {
|
21
|
+
checked: input.checked,
|
22
|
+
name: input.name,
|
23
|
+
value: input.value,
|
24
|
+
error: hasError(meta, error),
|
25
|
+
valid: isValid(meta, valid, showValidStatus),
|
26
|
+
validationText: getValidationText(meta, validationText, error),
|
27
|
+
onFocus: createFocusHandler(input, onFocus),
|
28
|
+
onChange: createToggleChangeHandler(input),
|
29
|
+
onBlur: createBlurHandler(input, onBlur)
|
30
|
+
}));
|
31
|
+
};
|
29
32
|
SwitchFieldFF.propTypes = {
|
30
33
|
/** `input` props received from Final Form `Field` */
|
31
34
|
input: inputPropType.isRequired,
|
@@ -4,33 +4,9 @@ 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 = `
|
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
|
-
`;
|
7
|
+
const description = "\nThe `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.\n\n#### Final Form\n\nSee how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).\n\nInside 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.\n\n#### Props\n\nThe props shown in the table below are generally provided to the `SwitchFieldFF` wrapper by the Final Form `Field`.\n\nNote 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}`.\n\nTherefore, to add any props to the `SwitchFieldFF` or `SwitchField`, add those props to the parent Final Form `Field` component.\n\nAlso see `Switch` and `SwitchField` for notes about props and implementation.\n\n```js\nimport { SwitchFieldFF } from '@dhis2/ui'\n```\n\nPress **Submit** to see the form values logged to the console.\n";
|
32
8
|
export default {
|
33
|
-
title: '
|
9
|
+
title: 'Switch Field (Final Form)',
|
34
10
|
component: SwitchFieldFF,
|
35
11
|
decorators: [formDecorator],
|
36
12
|
parameters: {
|
@@ -5,29 +5,32 @@ import PropTypes from 'prop-types';
|
|
5
5
|
import React from 'react';
|
6
6
|
import { createChangeHandler, createFocusHandler, createBlurHandler, hasError, isLoading, isValid, getValidationText } from '../shared/helpers.js';
|
7
7
|
import { metaPropType, inputPropType } from '../shared/propTypes.js';
|
8
|
-
export const TextAreaFieldFF =
|
9
|
-
|
10
|
-
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
8
|
+
export const TextAreaFieldFF = _ref => {
|
9
|
+
let {
|
10
|
+
input,
|
11
|
+
meta,
|
12
|
+
error,
|
13
|
+
showValidStatus,
|
14
|
+
valid,
|
15
|
+
validationText,
|
16
|
+
onBlur,
|
17
|
+
onFocus,
|
18
|
+
loading,
|
19
|
+
showLoadingStatus,
|
20
|
+
...rest
|
21
|
+
} = _ref;
|
22
|
+
return /*#__PURE__*/React.createElement(TextAreaField, _extends({}, rest, {
|
23
|
+
name: input.name,
|
24
|
+
error: hasError(meta, error),
|
25
|
+
valid: isValid(meta, valid, showValidStatus),
|
26
|
+
loading: isLoading(meta, loading, showLoadingStatus),
|
27
|
+
validationText: getValidationText(meta, validationText, error),
|
28
|
+
onFocus: createFocusHandler(input, onFocus),
|
29
|
+
onChange: createChangeHandler(input),
|
30
|
+
onBlur: createBlurHandler(input, onBlur),
|
31
|
+
value: input.value
|
32
|
+
}));
|
33
|
+
};
|
31
34
|
TextAreaFieldFF.propTypes = {
|
32
35
|
/** `input` props received from Final Form `Field` */
|
33
36
|
input: inputPropType.isRequired,
|
@@ -4,33 +4,9 @@ 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 = `
|
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
|
-
`;
|
7
|
+
const description = "\nThe `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.\n\n#### Final Form\n\nSee how to use Final Form at [Final Form - Getting Started](https://final-form.org/docs/react-final-form/getting-started).\n\nInside 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.\n\n#### Props\n\nThe props shown in the table below are generally provided to the `TextAreaFieldFF` wrapper by the Final Form `Field`.\n\nNote 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}`.\n\nTherefore, to add any props to the `TextAreaFieldFF` or `TextAreaField`, add those props to the parent Final Form `Field` component.\n\nAlso see `TextArea` and `TextAreaField` for notes about props and implementation.\n\n```js\nimport { TextAreaFieldFF } from '@dhis2/ui'\n```\n\nPress **Submit** to see the form values logged to the console.\n";
|
32
8
|
export default {
|
33
|
-
title: '
|
9
|
+
title: 'Text Area Field (Final Form)',
|
34
10
|
component: TextAreaFieldFF,
|
35
11
|
decorators: [formDecorator],
|
36
12
|
parameters: {
|
@@ -12,8 +12,8 @@ const formProps = {
|
|
12
12
|
};
|
13
13
|
|
14
14
|
class FormWithSpyAndSubmit extends React.Component {
|
15
|
-
constructor(
|
16
|
-
super(...
|
15
|
+
constructor() {
|
16
|
+
super(...arguments);
|
17
17
|
|
18
18
|
_defineProperty(this, "state", {
|
19
19
|
cypressProps: {}
|
@@ -55,9 +55,10 @@ class FormWithSpyAndSubmit extends React.Component {
|
|
55
55
|
}), /*#__PURE__*/React.createElement(Button, {
|
56
56
|
primary: true,
|
57
57
|
type: "submit"
|
58
|
-
}, "Submit"), /*#__PURE__*/React.createElement(FormSpy, null,
|
59
|
-
|
60
|
-
|
58
|
+
}, "Submit"), /*#__PURE__*/React.createElement(FormSpy, null, _ref => {
|
59
|
+
let {
|
60
|
+
values
|
61
|
+
} = _ref;
|
61
62
|
window.formValues = values;
|
62
63
|
return /*#__PURE__*/React.createElement("span", {
|
63
64
|
className: "form-spy-internal"
|
@@ -2,7 +2,6 @@
|
|
2
2
|
"Upload file": "تحميل الملف",
|
3
3
|
"Upload files": "تحميل الملفات",
|
4
4
|
"Remove": "إزلة",
|
5
|
-
"No file(s) selected yet": "لم يتم تحديد ملف (ملفات) حتى الآن",
|
6
5
|
"Please provide an alpha-numeric value": "",
|
7
6
|
"Please provide a boolean value": "",
|
8
7
|
"Please enter between {{lowerBound}} and {{upperBound}} characters": "",
|
@@ -2,7 +2,6 @@
|
|
2
2
|
"Upload file": "Nahrát soubor",
|
3
3
|
"Upload files": "Nahrát soubory",
|
4
4
|
"Remove": "Odebrat",
|
5
|
-
"No file(s) selected yet": "Zatím není (nejsou) vybrány žádné soubory",
|
6
5
|
"Please provide an alpha-numeric value": "Uveďte alfanumerickou hodnotu",
|
7
6
|
"Please provide a boolean value": "Zadejte prosím booleovskou hodnotu",
|
8
7
|
"Please enter between {{lowerBound}} and {{upperBound}} characters": "Zadejte prosím mezi {{lowerBound}} a {{upperBound}} znaky",
|
@@ -2,7 +2,6 @@
|
|
2
2
|
"Upload file": "Upload file",
|
3
3
|
"Upload files": "Upload files",
|
4
4
|
"Remove": "Remove",
|
5
|
-
"No file(s) selected yet": "No file(s) selected yet",
|
6
5
|
"Please provide an alpha-numeric value": "Please provide an alpha-numeric value",
|
7
6
|
"Please provide a boolean value": "Please provide a boolean value",
|
8
7
|
"Please enter between {{lowerBound}} and {{upperBound}} characters": "Please enter between {{lowerBound}} and {{upperBound}} characters",
|
@@ -2,7 +2,6 @@
|
|
2
2
|
"Upload file": "Subir archivo",
|
3
3
|
"Upload files": "Subir archivos",
|
4
4
|
"Remove": "Eliminar",
|
5
|
-
"No file(s) selected yet": "Ningún archivo (s) seleccionado (s) todavía",
|
6
5
|
"Please provide an alpha-numeric value": "Proporcione un valor alfanumérico.",
|
7
6
|
"Please provide a boolean value": "Proporcione un valor booleano",
|
8
7
|
"Please enter between {{lowerBound}} and {{upperBound}} characters": "Ingresa entre {{lowerBound}} y {{upperBound}} caracteres",
|
@@ -2,7 +2,6 @@
|
|
2
2
|
"Upload file": "Charger fichier",
|
3
3
|
"Upload files": "",
|
4
4
|
"Remove": "Supprimer",
|
5
|
-
"No file(s) selected yet": "",
|
6
5
|
"Please provide an alpha-numeric value": "",
|
7
6
|
"Please provide a boolean value": "",
|
8
7
|
"Please enter between {{lowerBound}} and {{upperBound}} characters": "",
|
@@ -2,7 +2,6 @@
|
|
2
2
|
"Upload file": "ໂຫຼດເອກະສານ",
|
3
3
|
"Upload files": "",
|
4
4
|
"Remove": "ລົບອອກ",
|
5
|
-
"No file(s) selected yet": "",
|
6
5
|
"Please provide an alpha-numeric value": "",
|
7
6
|
"Please provide a boolean value": "",
|
8
7
|
"Please enter between {{lowerBound}} and {{upperBound}} characters": "",
|
@@ -2,7 +2,6 @@
|
|
2
2
|
"Upload file": "Last opp fil",
|
3
3
|
"Upload files": "",
|
4
4
|
"Remove": "Fjern",
|
5
|
-
"No file(s) selected yet": "",
|
6
5
|
"Please provide an alpha-numeric value": "",
|
7
6
|
"Please provide a boolean value": "",
|
8
7
|
"Please enter between {{lowerBound}} and {{upperBound}} characters": "",
|
@@ -2,7 +2,6 @@
|
|
2
2
|
"Upload file": "فایل پورته کړئ",
|
3
3
|
"Upload files": "",
|
4
4
|
"Remove": "لرې کول",
|
5
|
-
"No file(s) selected yet": "",
|
6
5
|
"Please provide an alpha-numeric value": "",
|
7
6
|
"Please provide a boolean value": "",
|
8
7
|
"Please enter between {{lowerBound}} and {{upperBound}} characters": "",
|