@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.
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": "",