@dhis2/ui-forms 8.2.0 → 8.2.3

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.
Files changed (119) hide show
  1. package/build/cjs/CheckboxFieldFF/CheckboxFieldFF.js +24 -21
  2. package/build/cjs/CheckboxFieldFF/CheckboxFieldFF.stories.js +3 -27
  3. package/build/cjs/FieldGroupFF/FieldGroupFF.js +7 -6
  4. package/build/cjs/FieldGroupFF/FieldGroupFF.stories.js +3 -13
  5. package/build/cjs/FileInputFieldFF/FileInputFieldFF.js +17 -18
  6. package/build/cjs/FileInputFieldFF/FileInputFieldFF.stories.e2e.js +12 -8
  7. package/build/cjs/FileInputFieldFF/FileInputFieldFF.stories.js +3 -27
  8. package/build/cjs/InputFieldFF/InputFieldFF.js +27 -24
  9. package/build/cjs/InputFieldFF/InputFieldFF.stories.js +3 -27
  10. package/build/cjs/MultiSelectFieldFF/MultiSelectFieldFF.js +15 -14
  11. package/build/cjs/MultiSelectFieldFF/MultiSelectFieldFF.stories.e2e.js +13 -10
  12. package/build/cjs/MultiSelectFieldFF/MultiSelectFieldFF.stories.js +3 -29
  13. package/build/cjs/RadioFieldFF/RadioFieldFF.js +24 -21
  14. package/build/cjs/RadioFieldFF/RadioFieldFF.stories.js +3 -27
  15. package/build/cjs/SingleSelectFieldFF/SingleSelectFieldFF.js +15 -14
  16. package/build/cjs/SingleSelectFieldFF/SingleSelectFieldFF.stories.e2e.js +13 -10
  17. package/build/cjs/SingleSelectFieldFF/SingleSelectFieldFF.stories.js +3 -29
  18. package/build/cjs/SwitchFieldFF/SwitchFieldFF.js +24 -21
  19. package/build/cjs/SwitchFieldFF/SwitchFieldFF.stories.js +3 -27
  20. package/build/cjs/TextAreaFieldFF/TextAreaFieldFF.js +26 -23
  21. package/build/cjs/TextAreaFieldFF/TextAreaFieldFF.stories.js +3 -27
  22. package/build/cjs/formDecorator.js +6 -5
  23. package/build/cjs/index.js +12 -11
  24. package/build/cjs/locales/ar/translations.json +0 -1
  25. package/build/cjs/locales/ar_IQ/translations.json +0 -1
  26. package/build/cjs/locales/ckb/translations.json +0 -1
  27. package/build/cjs/locales/cs/translations.json +0 -1
  28. package/build/cjs/locales/da/translations.json +0 -1
  29. package/build/cjs/locales/en/translations.json +0 -1
  30. package/build/cjs/locales/es/translations.json +0 -1
  31. package/build/cjs/locales/fr/translations.json +0 -1
  32. package/build/cjs/locales/id/translations.json +0 -1
  33. package/build/cjs/locales/km/translations.json +0 -1
  34. package/build/cjs/locales/lo/translations.json +0 -1
  35. package/build/cjs/locales/my/translations.json +0 -1
  36. package/build/cjs/locales/nb/translations.json +0 -1
  37. package/build/cjs/locales/prs/translations.json +0 -1
  38. package/build/cjs/locales/ps/translations.json +0 -1
  39. package/build/cjs/locales/pt/translations.json +0 -1
  40. package/build/cjs/locales/pt_BR/translations.json +0 -1
  41. package/build/cjs/locales/ru/translations.json +0 -1
  42. package/build/cjs/locales/sv/translations.json +0 -1
  43. package/build/cjs/locales/tet/translations.json +0 -1
  44. package/build/cjs/locales/tg/translations.json +0 -1
  45. package/build/cjs/locales/uk/translations.json +0 -1
  46. package/build/cjs/locales/ur/translations.json +0 -1
  47. package/build/cjs/locales/uz/translations.json +0 -1
  48. package/build/cjs/locales/uz_Latn/translations.json +0 -1
  49. package/build/cjs/locales/vi/translations.json +0 -1
  50. package/build/cjs/locales/zh/translations.json +0 -1
  51. package/build/cjs/locales/zh_CN/translations.json +0 -1
  52. package/build/cjs/shared/helpers/createChangeHandler.js +19 -16
  53. package/build/cjs/shared/helpers/createSelectChangeHandler.js +10 -6
  54. package/build/cjs/shared/propTypes.js +1 -1
  55. package/build/cjs/transformers/arrayWithIdObjects.js +6 -3
  56. package/build/cjs/validators/__tests__/createPattern.test.js +1 -1
  57. package/build/cjs/validators/composeValidators.js +10 -2
  58. package/build/cjs/validators/helpers/index.js +1 -1
  59. package/build/cjs/validators/number.js +1 -1
  60. package/build/cjs/validators/string.js +1 -1
  61. package/build/cjs/validators/test-helpers/index.js +2 -2
  62. package/build/cjs/validators/url.js +1 -1
  63. package/build/es/CheckboxFieldFF/CheckboxFieldFF.js +24 -21
  64. package/build/es/CheckboxFieldFF/CheckboxFieldFF.stories.js +2 -26
  65. package/build/es/FieldGroupFF/FieldGroupFF.js +7 -6
  66. package/build/es/FieldGroupFF/FieldGroupFF.stories.js +2 -12
  67. package/build/es/FileInputFieldFF/FileInputFieldFF.js +17 -18
  68. package/build/es/FileInputFieldFF/FileInputFieldFF.stories.e2e.js +12 -8
  69. package/build/es/FileInputFieldFF/FileInputFieldFF.stories.js +2 -26
  70. package/build/es/InputFieldFF/InputFieldFF.js +27 -24
  71. package/build/es/InputFieldFF/InputFieldFF.stories.js +2 -26
  72. package/build/es/MultiSelectFieldFF/MultiSelectFieldFF.js +15 -14
  73. package/build/es/MultiSelectFieldFF/MultiSelectFieldFF.stories.e2e.js +13 -10
  74. package/build/es/MultiSelectFieldFF/MultiSelectFieldFF.stories.js +2 -28
  75. package/build/es/RadioFieldFF/RadioFieldFF.js +24 -21
  76. package/build/es/RadioFieldFF/RadioFieldFF.stories.js +2 -26
  77. package/build/es/SingleSelectFieldFF/SingleSelectFieldFF.js +15 -14
  78. package/build/es/SingleSelectFieldFF/SingleSelectFieldFF.stories.e2e.js +13 -10
  79. package/build/es/SingleSelectFieldFF/SingleSelectFieldFF.stories.js +2 -28
  80. package/build/es/SwitchFieldFF/SwitchFieldFF.js +24 -21
  81. package/build/es/SwitchFieldFF/SwitchFieldFF.stories.js +2 -26
  82. package/build/es/TextAreaFieldFF/TextAreaFieldFF.js +26 -23
  83. package/build/es/TextAreaFieldFF/TextAreaFieldFF.stories.js +2 -26
  84. package/build/es/formDecorator.js +6 -5
  85. package/build/es/locales/ar/translations.json +0 -1
  86. package/build/es/locales/ar_IQ/translations.json +0 -1
  87. package/build/es/locales/ckb/translations.json +0 -1
  88. package/build/es/locales/cs/translations.json +0 -1
  89. package/build/es/locales/da/translations.json +0 -1
  90. package/build/es/locales/en/translations.json +0 -1
  91. package/build/es/locales/es/translations.json +0 -1
  92. package/build/es/locales/fr/translations.json +0 -1
  93. package/build/es/locales/id/translations.json +0 -1
  94. package/build/es/locales/km/translations.json +0 -1
  95. package/build/es/locales/lo/translations.json +0 -1
  96. package/build/es/locales/my/translations.json +0 -1
  97. package/build/es/locales/nb/translations.json +0 -1
  98. package/build/es/locales/prs/translations.json +0 -1
  99. package/build/es/locales/ps/translations.json +0 -1
  100. package/build/es/locales/pt/translations.json +0 -1
  101. package/build/es/locales/pt_BR/translations.json +0 -1
  102. package/build/es/locales/ru/translations.json +0 -1
  103. package/build/es/locales/sv/translations.json +0 -1
  104. package/build/es/locales/tet/translations.json +0 -1
  105. package/build/es/locales/tg/translations.json +0 -1
  106. package/build/es/locales/uk/translations.json +0 -1
  107. package/build/es/locales/ur/translations.json +0 -1
  108. package/build/es/locales/uz/translations.json +0 -1
  109. package/build/es/locales/uz_Latn/translations.json +0 -1
  110. package/build/es/locales/vi/translations.json +0 -1
  111. package/build/es/locales/zh/translations.json +0 -1
  112. package/build/es/locales/zh_CN/translations.json +0 -1
  113. package/build/es/shared/helpers/createChangeHandler.js +19 -16
  114. package/build/es/shared/helpers/createSelectChangeHandler.js +10 -6
  115. package/build/es/transformers/arrayWithIdObjects.js +6 -3
  116. package/build/es/validators/__tests__/createPattern.test.js +1 -1
  117. package/build/es/validators/composeValidators.js +10 -2
  118. package/build/es/validators/test-helpers/index.js +1 -1
  119. 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
- cypressProps
20
- }) => /*#__PURE__*/React.createElement(Field, {
21
- required: true,
22
- name: "multiSelect",
23
- label: "Multi select",
24
- component: MultiSelectFieldFF,
25
- validate: hasValue,
26
- options: cypressProps.options || defaultOptions
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: 'Forms/Multi Select/Multi Select Field (Final Form)',
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
- error,
10
- input,
11
- meta,
12
- showValidStatus,
13
- valid,
14
- validationText,
15
- onBlur,
16
- onFocus,
17
- ...rest
18
- }) => /*#__PURE__*/React.createElement(Radio, _extends({}, rest, {
19
- name: input.name,
20
- checked: input.checked,
21
- value: input.value,
22
- error: hasError(meta, error),
23
- valid: isValid(meta, valid, showValidStatus),
24
- validationText: getValidationText(meta, validationText, error),
25
- onFocus: createFocusHandler(input, onFocus),
26
- onChange: createToggleChangeHandler(input),
27
- onBlur: createBlurHandler(input, onBlur)
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: 'Forms/Radio/Radio Field (Final Form)',
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
- error,
10
- input,
11
- loading,
12
- meta,
13
- onBlur,
14
- onFocus,
15
- options,
16
- showLoadingStatus,
17
- showValidStatus,
18
- valid,
19
- validationText,
20
- ...rest
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
- cypressProps
17
- }) => /*#__PURE__*/React.createElement(Field, {
18
- required: true,
19
- name: "singleSelect",
20
- label: "Single select",
21
- component: SingleSelectFieldFF,
22
- validate: hasValue,
23
- options: cypressProps.options || defaultOptions
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: 'Forms/Single Select/Single Select Field (Final Form)',
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
- error,
10
- input,
11
- meta,
12
- showValidStatus,
13
- valid,
14
- validationText,
15
- onBlur,
16
- onFocus,
17
- ...rest
18
- }) => /*#__PURE__*/React.createElement(SwitchField, _extends({}, rest, {
19
- checked: input.checked,
20
- name: input.name,
21
- value: input.value,
22
- error: hasError(meta, error),
23
- valid: isValid(meta, valid, showValidStatus),
24
- validationText: getValidationText(meta, validationText, error),
25
- onFocus: createFocusHandler(input, onFocus),
26
- onChange: createToggleChangeHandler(input),
27
- onBlur: createBlurHandler(input, onBlur)
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: 'Forms/Switch/Switch Field (Final Form)',
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
- input,
10
- meta,
11
- error,
12
- showValidStatus,
13
- valid,
14
- validationText,
15
- onBlur,
16
- onFocus,
17
- loading,
18
- showLoadingStatus,
19
- ...rest
20
- }) => /*#__PURE__*/React.createElement(TextAreaField, _extends({}, rest, {
21
- name: input.name,
22
- error: hasError(meta, error),
23
- valid: isValid(meta, valid, showValidStatus),
24
- loading: isLoading(meta, loading, showLoadingStatus),
25
- validationText: getValidationText(meta, validationText, error),
26
- onFocus: createFocusHandler(input, onFocus),
27
- onChange: createChangeHandler(input),
28
- onBlur: createBlurHandler(input, onBlur),
29
- value: input.value
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: 'Forms/Text Area/Text Area Field (Final Form)',
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(...args) {
16
- super(...args);
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
- values
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": "",
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": "",
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": "",
3
3
  "Upload files": "",
4
4
  "Remove": "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": "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": "Hapus",
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": "ໂຫຼດເອກະສານ",
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": "",
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": "",
@@ -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": "",