@dhis2/ui-forms 9.10.3 → 9.11.1-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/CheckboxFieldFF/{CheckboxFieldFF.stories.e2e.js → CheckboxFieldFF.e2e.stories.js} +22 -15
- package/build/cjs/CheckboxFieldFF/CheckboxFieldFF.js +2 -12
- package/build/cjs/CheckboxFieldFF/{CheckboxFieldFF.stories.js → CheckboxFieldFF.prod.stories.js} +29 -24
- package/build/cjs/CheckboxFieldFF/features/can_toggle_a_boolean/index.js +0 -1
- package/build/cjs/CheckboxFieldFF/features/can_toggle_a_value/index.js +0 -1
- package/build/cjs/CheckboxFieldFF/features/common/index.js +0 -1
- package/build/cjs/CheckboxFieldFF/features/displays_error/index.js +0 -2
- package/build/cjs/FieldGroupFF/FieldGroupFF.js +1 -10
- package/build/cjs/FieldGroupFF/{FieldGroupFF.stories.js → FieldGroupFF.prod.stories.js} +11 -12
- package/build/cjs/FileInputFieldFF/{FileInputFieldFF.stories.e2e.js → FileInputFieldFF.e2e.stories.js} +45 -56
- package/build/cjs/FileInputFieldFF/FileInputFieldFF.js +2 -19
- package/build/cjs/FileInputFieldFF/{FileInputFieldFF.stories.js → FileInputFieldFF.prod.stories.js} +29 -22
- package/build/cjs/FileInputFieldFF/features/accepts_file/index.js +0 -1
- package/build/cjs/FileInputFieldFF/features/common/index.js +0 -1
- package/build/cjs/FileInputFieldFF/features/displays_error/index.js +0 -1
- package/build/cjs/InputFieldFF/InputFieldFF.e2e.stories.js +30 -0
- package/build/cjs/InputFieldFF/InputFieldFF.js +2 -12
- package/build/cjs/InputFieldFF/{InputFieldFF.stories.js → InputFieldFF.prod.stories.js} +29 -22
- package/build/cjs/InputFieldFF/features/can_set_a_value/index.js +0 -1
- package/build/cjs/InputFieldFF/features/displays_error/index.js +0 -2
- package/build/cjs/MultiSelectFieldFF/{MultiSelectFieldFF.stories.e2e.js → MultiSelectFieldFF.e2e.stories.js} +15 -17
- package/build/cjs/MultiSelectFieldFF/MultiSelectFieldFF.js +3 -15
- package/build/cjs/MultiSelectFieldFF/MultiSelectFieldFF.prod.stories.js +107 -0
- package/build/cjs/MultiSelectFieldFF/features/can_set_a_value/index.js +0 -1
- package/build/cjs/MultiSelectFieldFF/features/common/index.js +1 -2
- package/build/cjs/MultiSelectFieldFF/features/displays_error/index.js +0 -2
- package/build/cjs/RadioFieldFF/RadioFieldFF.e2e.stories.js +45 -0
- package/build/cjs/RadioFieldFF/RadioFieldFF.js +2 -12
- package/build/cjs/RadioFieldFF/{RadioFieldFF.stories.js → RadioFieldFF.prod.stories.js} +29 -16
- package/build/cjs/RadioFieldFF/features/can_set_a_value/index.js +0 -1
- package/build/cjs/RadioFieldFF/features/common/index.js +0 -1
- package/build/cjs/RadioFieldFF/features/displays_error/index.js +0 -2
- package/build/cjs/SingleSelectFieldFF/SingleSelectFieldFF.e2e.stories.js +39 -0
- package/build/cjs/SingleSelectFieldFF/SingleSelectFieldFF.js +2 -12
- package/build/cjs/SingleSelectFieldFF/SingleSelectFieldFF.prod.stories.js +106 -0
- package/build/cjs/SingleSelectFieldFF/features/can_set_a_value/index.js +0 -1
- package/build/cjs/SingleSelectFieldFF/features/common/index.js +0 -1
- package/build/cjs/SingleSelectFieldFF/features/displays_error/index.js +0 -2
- package/build/cjs/SwitchFieldFF/SwitchFieldFF.e2e.stories.js +56 -0
- package/build/cjs/SwitchFieldFF/SwitchFieldFF.js +2 -12
- package/build/cjs/SwitchFieldFF/{SwitchFieldFF.stories.js → SwitchFieldFF.prod.stories.js} +29 -24
- package/build/cjs/SwitchFieldFF/features/can_toggle_a_boolean/index.js +0 -1
- package/build/cjs/SwitchFieldFF/features/can_toggle_a_value/index.js +0 -1
- package/build/cjs/SwitchFieldFF/features/common/index.js +0 -1
- package/build/cjs/SwitchFieldFF/features/displays_error/index.js +0 -2
- package/build/cjs/TextAreaFieldFF/TextAreaFieldFF.e2e.stories.js +30 -0
- package/build/cjs/TextAreaFieldFF/TextAreaFieldFF.js +2 -12
- package/build/cjs/TextAreaFieldFF/{TextAreaFieldFF.stories.js → TextAreaFieldFF.prod.stories.js} +29 -24
- package/build/cjs/TextAreaFieldFF/features/can_set_a_value/index.js +0 -1
- package/build/cjs/TextAreaFieldFF/features/displays_error/index.js +0 -2
- package/build/cjs/__tests__/__snapshots__/index.test.js.snap +3 -0
- package/build/cjs/__tests__/index.test.js +1 -1
- package/build/cjs/formDecorator.js +6 -21
- package/build/cjs/index.js +2 -21
- package/build/cjs/locales/index.js +3 -75
- package/build/cjs/shared/helpers/createBlurHandler.js +0 -3
- package/build/cjs/shared/helpers/createChangeHandler.js +0 -2
- package/build/cjs/shared/helpers/createFocusHandler.js +0 -3
- package/build/cjs/shared/helpers/createSelectChangeHandler.js +0 -2
- package/build/cjs/shared/helpers/createToggleChangeHandler.js +0 -3
- package/build/cjs/shared/helpers/getValidationText.js +0 -6
- package/build/cjs/shared/helpers/hasError.js +0 -2
- package/build/cjs/shared/helpers/isLoading.js +0 -2
- package/build/cjs/shared/helpers/isValid.js +0 -2
- package/build/cjs/shared/helpers.js +0 -9
- package/build/cjs/shared/propTypes.js +7 -20
- package/build/cjs/transformers/arrayWithIdObjects.js +2 -6
- package/build/cjs/transformers/index.js +0 -1
- package/build/cjs/validators/__tests__/alphaNumeric.test.js +0 -2
- package/build/cjs/validators/__tests__/boolean.test.js +0 -2
- package/build/cjs/validators/__tests__/composeValidators.test.js +0 -3
- package/build/cjs/validators/__tests__/createCharacterLengthRange.test.js +6 -6
- package/build/cjs/validators/__tests__/createEqualTo.test.js +0 -3
- package/build/cjs/validators/__tests__/createMaxCharacterLength.test.js +1 -2
- package/build/cjs/validators/__tests__/createMaxNumber.test.js +1 -2
- package/build/cjs/validators/__tests__/createMinCharacterLength.test.js +1 -2
- package/build/cjs/validators/__tests__/createMinNumber.test.js +1 -2
- package/build/cjs/validators/__tests__/createNumberRange.test.js +0 -3
- package/build/cjs/validators/__tests__/createPattern.test.js +1 -3
- package/build/cjs/validators/__tests__/dhis2Password.test.js +0 -2
- package/build/cjs/validators/__tests__/dhis2Username.test.js +0 -2
- package/build/cjs/validators/__tests__/email.test.js +7 -6
- package/build/cjs/validators/__tests__/hasValue.test.js +0 -2
- package/build/cjs/validators/__tests__/integer.test.js +0 -2
- package/build/cjs/validators/__tests__/internationalPhoneNumber.test.js +6 -5
- package/build/cjs/validators/__tests__/number.test.js +0 -2
- package/build/cjs/validators/__tests__/string.test.js +0 -2
- package/build/cjs/validators/__tests__/url.test.js +1 -2
- package/build/cjs/validators/alphaNumeric.js +2 -11
- package/build/cjs/validators/boolean.js +2 -10
- package/build/cjs/validators/composeValidators.js +0 -4
- package/build/cjs/validators/createCharacterLengthRange.js +1 -8
- package/build/cjs/validators/createEqualTo.js +1 -8
- package/build/cjs/validators/createMaxCharacterLength.js +1 -6
- package/build/cjs/validators/createMaxNumber.js +1 -6
- package/build/cjs/validators/createMinCharacterLength.js +1 -6
- package/build/cjs/validators/createMinNumber.js +1 -6
- package/build/cjs/validators/createNumberRange.js +1 -8
- package/build/cjs/validators/createPattern.js +2 -10
- package/build/cjs/validators/dhis2Password.js +6 -28
- package/build/cjs/validators/dhis2Username.js +2 -11
- package/build/cjs/validators/email.js +3 -11
- package/build/cjs/validators/hasValue.js +2 -10
- package/build/cjs/validators/helpers/index.js +1 -16
- package/build/cjs/validators/index.js +0 -20
- package/build/cjs/validators/integer.js +3 -10
- package/build/cjs/validators/internationalPhoneNumber.js +8 -14
- package/build/cjs/validators/number.js +2 -10
- package/build/cjs/validators/string.js +2 -10
- package/build/cjs/validators/test-helpers/index.js +1 -6
- package/build/cjs/validators/url.js +2 -11
- package/build/es/CheckboxFieldFF/{CheckboxFieldFF.stories.e2e.js → CheckboxFieldFF.e2e.stories.js} +14 -7
- package/build/es/CheckboxFieldFF/CheckboxFieldFF.js +1 -3
- package/build/es/CheckboxFieldFF/{CheckboxFieldFF.stories.js → CheckboxFieldFF.prod.stories.js} +29 -3
- package/build/es/FieldGroupFF/FieldGroupFF.js +0 -2
- package/build/es/FieldGroupFF/{FieldGroupFF.stories.js → FieldGroupFF.prod.stories.js} +11 -1
- package/build/es/FileInputFieldFF/{FileInputFieldFF.stories.e2e.js → FileInputFieldFF.e2e.stories.js} +14 -16
- package/build/es/FileInputFieldFF/FileInputFieldFF.js +1 -8
- package/build/es/FileInputFieldFF/{FileInputFieldFF.stories.js → FileInputFieldFF.prod.stories.js} +29 -3
- package/build/es/InputFieldFF/{InputFieldFF.stories.e2e.js → InputFieldFF.e2e.stories.js} +8 -4
- package/build/es/InputFieldFF/InputFieldFF.js +1 -3
- package/build/es/InputFieldFF/{InputFieldFF.stories.js → InputFieldFF.prod.stories.js} +29 -3
- package/build/es/MultiSelectFieldFF/{MultiSelectFieldFF.stories.e2e.js → MultiSelectFieldFF.e2e.stories.js} +7 -7
- package/build/es/MultiSelectFieldFF/MultiSelectFieldFF.js +2 -6
- package/build/es/MultiSelectFieldFF/MultiSelectFieldFF.prod.stories.js +98 -0
- package/build/es/MultiSelectFieldFF/features/common/index.js +1 -1
- package/build/es/RadioFieldFF/{RadioFieldFF.stories.e2e.js → RadioFieldFF.e2e.stories.js} +6 -3
- package/build/es/RadioFieldFF/RadioFieldFF.js +1 -3
- package/build/es/RadioFieldFF/{RadioFieldFF.stories.js → RadioFieldFF.prod.stories.js} +29 -3
- package/build/es/SingleSelectFieldFF/{SingleSelectFieldFF.stories.e2e.js → SingleSelectFieldFF.e2e.stories.js} +10 -6
- package/build/es/SingleSelectFieldFF/SingleSelectFieldFF.js +1 -3
- package/build/es/SingleSelectFieldFF/SingleSelectFieldFF.prod.stories.js +97 -0
- package/build/es/SwitchFieldFF/{SwitchFieldFF.stories.e2e.js → SwitchFieldFF.e2e.stories.js} +14 -7
- package/build/es/SwitchFieldFF/SwitchFieldFF.js +1 -3
- package/build/es/SwitchFieldFF/{SwitchFieldFF.stories.js → SwitchFieldFF.prod.stories.js} +29 -3
- package/build/es/TextAreaFieldFF/{TextAreaFieldFF.stories.e2e.js → TextAreaFieldFF.e2e.stories.js} +8 -4
- package/build/es/TextAreaFieldFF/TextAreaFieldFF.js +1 -3
- package/build/es/TextAreaFieldFF/{TextAreaFieldFF.stories.js → TextAreaFieldFF.prod.stories.js} +29 -3
- package/build/es/__tests__/__snapshots__/index.test.js.snap +3 -0
- package/build/es/__tests__/index.test.js +1 -0
- package/build/es/formDecorator.js +5 -12
- package/build/es/index.js +2 -2
- package/build/es/shared/helpers/createBlurHandler.js +0 -2
- package/build/es/shared/helpers/createChangeHandler.js +0 -2
- package/build/es/shared/helpers/createFocusHandler.js +0 -2
- package/build/es/shared/helpers/createSelectChangeHandler.js +0 -1
- package/build/es/shared/helpers/createToggleChangeHandler.js +0 -2
- package/build/es/shared/helpers/getValidationText.js +0 -5
- package/build/es/shared/helpers/hasError.js +0 -1
- package/build/es/shared/helpers/isLoading.js +0 -1
- package/build/es/shared/helpers/isValid.js +0 -1
- package/build/es/transformers/arrayWithIdObjects.js +0 -2
- package/build/es/validators/__tests__/createCharacterLengthRange.test.js +6 -3
- package/build/es/validators/__tests__/createMaxCharacterLength.test.js +1 -0
- package/build/es/validators/__tests__/createMaxNumber.test.js +1 -0
- package/build/es/validators/__tests__/createMinCharacterLength.test.js +1 -0
- package/build/es/validators/__tests__/createMinNumber.test.js +1 -0
- package/build/es/validators/__tests__/createPattern.test.js +1 -1
- package/build/es/validators/__tests__/email.test.js +7 -4
- package/build/es/validators/__tests__/internationalPhoneNumber.test.js +6 -3
- package/build/es/validators/__tests__/url.test.js +1 -0
- package/build/es/validators/alphaNumeric.js +0 -2
- package/build/es/validators/boolean.js +0 -2
- package/build/es/validators/composeValidators.js +0 -2
- package/build/es/validators/createCharacterLengthRange.js +0 -2
- package/build/es/validators/createEqualTo.js +0 -2
- package/build/es/validators/createMaxCharacterLength.js +0 -2
- package/build/es/validators/createMaxNumber.js +0 -2
- package/build/es/validators/createMinCharacterLength.js +0 -2
- package/build/es/validators/createMinNumber.js +0 -2
- package/build/es/validators/createNumberRange.js +0 -2
- package/build/es/validators/createPattern.js +0 -3
- package/build/es/validators/dhis2Password.js +3 -12
- package/build/es/validators/dhis2Username.js +0 -2
- package/build/es/validators/email.js +1 -2
- package/build/es/validators/hasValue.js +0 -2
- package/build/es/validators/integer.js +3 -4
- package/build/es/validators/internationalPhoneNumber.js +7 -7
- package/build/es/validators/number.js +0 -2
- package/build/es/validators/string.js +0 -2
- package/build/es/validators/test-helpers/index.js +1 -4
- package/build/es/validators/url.js +2 -3
- package/package.json +13 -13
- package/build/cjs/InputFieldFF/InputFieldFF.stories.e2e.js +0 -27
- package/build/cjs/MultiSelectFieldFF/MultiSelectFieldFF.stories.js +0 -91
- package/build/cjs/RadioFieldFF/RadioFieldFF.stories.e2e.js +0 -45
- package/build/cjs/SingleSelectFieldFF/SingleSelectFieldFF.stories.e2e.js +0 -37
- package/build/cjs/SingleSelectFieldFF/SingleSelectFieldFF.stories.js +0 -90
- package/build/cjs/SwitchFieldFF/SwitchFieldFF.stories.e2e.js +0 -49
- package/build/cjs/TextAreaFieldFF/TextAreaFieldFF.stories.e2e.js +0 -27
- package/build/es/MultiSelectFieldFF/MultiSelectFieldFF.stories.js +0 -70
- package/build/es/SingleSelectFieldFF/SingleSelectFieldFF.stories.js +0 -69
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import i18n from '../locales/index.js';
|
|
2
2
|
import { createCharacterLengthRange } from './createCharacterLengthRange.js';
|
|
3
|
-
|
|
4
3
|
const createMinCharacterLength = lowerBound => createCharacterLengthRange(lowerBound, Infinity, i18n.t('Please enter at least {{lowerBound}} characters', {
|
|
5
4
|
lowerBound
|
|
6
5
|
}));
|
|
7
|
-
|
|
8
6
|
export { createMinCharacterLength };
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import i18n from '../locales/index.js';
|
|
2
2
|
import { createNumberRange } from './createNumberRange.js';
|
|
3
|
-
|
|
4
3
|
const createMinNumber = lowerBound => createNumberRange(lowerBound, Infinity, i18n.t('Please enter a number of at least {{lowerBound}}', {
|
|
5
4
|
lowerBound
|
|
6
5
|
}));
|
|
7
|
-
|
|
8
6
|
export { createMinNumber };
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import i18n from '../locales/index.js';
|
|
2
2
|
import { isEmpty, isNumeric, toNumber, isInRange, requireArgument } from './helpers/index.js';
|
|
3
|
-
|
|
4
3
|
const createNumberRange = (lowerBound, upperBound, customMessage) => {
|
|
5
4
|
requireArgument(lowerBound, 'number');
|
|
6
5
|
requireArgument(upperBound, 'number');
|
|
@@ -10,5 +9,4 @@ const createNumberRange = (lowerBound, upperBound, customMessage) => {
|
|
|
10
9
|
});
|
|
11
10
|
return value => isEmpty(value) || isNumeric(value) && isInRange(lowerBound, upperBound, toNumber(value)) ? undefined : errorMessage;
|
|
12
11
|
};
|
|
13
|
-
|
|
14
12
|
export { createNumberRange };
|
|
@@ -1,15 +1,12 @@
|
|
|
1
1
|
import i18n from '../locales/index.js';
|
|
2
2
|
import { isEmpty, isString } from './helpers/index.js';
|
|
3
3
|
const invalidPatternMessage = 'The first argument passed to createPattern was not a valid regex';
|
|
4
|
-
|
|
5
4
|
const createPattern = (pattern, message) => {
|
|
6
5
|
if (!(pattern instanceof RegExp)) {
|
|
7
6
|
throw new Error(invalidPatternMessage);
|
|
8
7
|
}
|
|
9
|
-
|
|
10
8
|
return value => isEmpty(value) || isString(value) && pattern.test(value) ? undefined : message || i18n.t('Please make sure the value of this input matches the pattern {{patternString}}.', {
|
|
11
9
|
patternString: pattern.toString()
|
|
12
10
|
});
|
|
13
11
|
};
|
|
14
|
-
|
|
15
12
|
export { createPattern, invalidPatternMessage };
|
|
@@ -2,9 +2,9 @@ import i18n from '../locales/index.js';
|
|
|
2
2
|
import { isEmpty, isString } from './helpers/index.js';
|
|
3
3
|
const LOWER_CASE_PATTERN = /^(?=.*[a-z]).+$/;
|
|
4
4
|
const UPPER_CASE_PATTERN = /^(?=.*[A-Z]).+$/;
|
|
5
|
-
const DIGIT_PATTERN = /^(?=.*[0-9]).+$/;
|
|
5
|
+
const DIGIT_PATTERN = /^(?=.*[0-9]).+$/;
|
|
6
|
+
// Using this regex to match all non-alphanumeric characters to match server-side implementation
|
|
6
7
|
// https://github.com/dhis2/dhis2-core/blob/master/dhis-2/dhis-services/dhis-service-core/src/main/java/org/hisp/dhis/user/SpecialCharacterValidationRule.java#L39
|
|
7
|
-
|
|
8
8
|
const SPECIAL_CHARACTER_PATTERN = /[^a-zA-Z0-9]/;
|
|
9
9
|
const notString = i18n.t('Password should be a string');
|
|
10
10
|
const tooShort = i18n.t('Password should be at least 8 characters long');
|
|
@@ -13,6 +13,7 @@ const noLowerCase = i18n.t('Password should contain at least one lowercase lette
|
|
|
13
13
|
const noUpperCase = i18n.t('Password should contain at least one UPPERCASE letter');
|
|
14
14
|
const noNumber = i18n.t('Password should contain at least one number');
|
|
15
15
|
const noSpecialCharacter = i18n.t('Password should have at least one special character');
|
|
16
|
+
|
|
16
17
|
/**
|
|
17
18
|
* Tests if a given password is compliant with the password restrictions.
|
|
18
19
|
* This function checks all restrictions below, but returns when the first violation was found:
|
|
@@ -23,43 +24,33 @@ const noSpecialCharacter = i18n.t('Password should have at least one special cha
|
|
|
23
24
|
* - Contains at least 1 number
|
|
24
25
|
* - Contains at least 1 special character
|
|
25
26
|
*/
|
|
26
|
-
|
|
27
27
|
const dhis2Password = value => {
|
|
28
28
|
if (isEmpty(value)) {
|
|
29
29
|
return undefined;
|
|
30
30
|
}
|
|
31
|
-
|
|
32
31
|
if (!isString(value)) {
|
|
33
32
|
return notString;
|
|
34
33
|
}
|
|
35
|
-
|
|
36
34
|
if (value.length < 8) {
|
|
37
35
|
return tooShort;
|
|
38
36
|
}
|
|
39
|
-
|
|
40
37
|
if (value.length > 35) {
|
|
41
38
|
return tooLong;
|
|
42
39
|
}
|
|
43
|
-
|
|
44
40
|
if (!LOWER_CASE_PATTERN.test(value)) {
|
|
45
41
|
return noLowerCase;
|
|
46
42
|
}
|
|
47
|
-
|
|
48
43
|
if (!UPPER_CASE_PATTERN.test(value)) {
|
|
49
44
|
return noUpperCase;
|
|
50
45
|
}
|
|
51
|
-
|
|
52
46
|
if (!DIGIT_PATTERN.test(value)) {
|
|
53
47
|
return noNumber;
|
|
54
48
|
}
|
|
55
|
-
|
|
56
49
|
if (!SPECIAL_CHARACTER_PATTERN.test(value)) {
|
|
57
50
|
return noSpecialCharacter;
|
|
58
51
|
}
|
|
59
|
-
|
|
60
52
|
return undefined;
|
|
61
53
|
};
|
|
62
|
-
|
|
63
54
|
const errorMessages = {
|
|
64
55
|
notString,
|
|
65
56
|
tooShort,
|
|
@@ -2,7 +2,5 @@ import i18n from '../locales/index.js';
|
|
|
2
2
|
import { isEmpty, isString } from './helpers/index.js';
|
|
3
3
|
const USERNAME_PATTERN = /^(?=.{4,255}$)(?![_\-.@])(?!.*[_\-.@]{2})[a-zA-Z0-9._\-@]+(?<![_\-.@])$/;
|
|
4
4
|
const invalidUsernameMessage = i18n.t('Please provide a username between 4 and 255 characters long and possibly separated by . _ - or @');
|
|
5
|
-
|
|
6
5
|
const dhis2Username = value => isEmpty(value) || isString(value) && USERNAME_PATTERN.test(value) ? undefined : invalidUsernameMessage;
|
|
7
|
-
|
|
8
6
|
export { dhis2Username, invalidUsernameMessage };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import i18n from '../locales/index.js';
|
|
2
2
|
import { isEmpty, isString } from './helpers/index.js';
|
|
3
|
+
|
|
3
4
|
/*
|
|
4
5
|
* Email validation is complicated business. There is no perfect regex,
|
|
5
6
|
* instead we have to make a trade-off between complexity, correctness,
|
|
@@ -26,7 +27,5 @@ import { isEmpty, isString } from './helpers/index.js';
|
|
|
26
27
|
|
|
27
28
|
const EMAIL_ADDRESS_PATTERN = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i;
|
|
28
29
|
const invalidEmailMessage = i18n.t('Please provide a valid email address');
|
|
29
|
-
|
|
30
30
|
const email = value => isEmpty(value) || isString(value) && EMAIL_ADDRESS_PATTERN.test(value) ? undefined : invalidEmailMessage;
|
|
31
|
-
|
|
32
31
|
export { email, invalidEmailMessage };
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import i18n from '../locales/index.js';
|
|
2
2
|
import { isEmpty, isNumeric, toNumber } from './helpers/index.js';
|
|
3
|
-
const invalidIntegerMessage = i18n.t('Please provide a round number without decimals');
|
|
4
|
-
// it also rejects a leading 0 (i.e 04) as this is rejected by backend
|
|
3
|
+
const invalidIntegerMessage = i18n.t('Please provide a round number without decimals');
|
|
5
4
|
|
|
5
|
+
// Regex accepts only digits (no decimals even if it is trailing like 4.0)
|
|
6
|
+
// it also rejects a leading 0 (i.e 04) as this is rejected by backend
|
|
6
7
|
const INTEGER_PATTERN = /^(-?[1-9]\d*|0)$/;
|
|
7
|
-
|
|
8
8
|
const integer = value => isEmpty(value) || INTEGER_PATTERN.test(value) && isNumeric(value) && Number.isSafeInteger(toNumber(value)) ? undefined : invalidIntegerMessage;
|
|
9
|
-
|
|
10
9
|
export { integer, invalidIntegerMessage };
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import i18n from '../locales/index.js';
|
|
2
2
|
import { isEmpty, isString, isNumeric } from './helpers/index.js';
|
|
3
|
+
|
|
3
4
|
/*
|
|
4
5
|
* There were some problems with the server side implementation
|
|
5
6
|
* of how international phone numbers are validated, and the
|
|
@@ -27,22 +28,21 @@ import { isEmpty, isString, isNumeric } from './helpers/index.js';
|
|
|
27
28
|
*/
|
|
28
29
|
|
|
29
30
|
const invalidInternationalPhoneNumberMessage = i18n.t('Please provide a valid international phone number.');
|
|
30
|
-
|
|
31
31
|
const internationalPhoneNumber = value => {
|
|
32
32
|
// allow empty values
|
|
33
33
|
if (isEmpty(value)) {
|
|
34
34
|
return undefined;
|
|
35
|
-
}
|
|
36
|
-
|
|
35
|
+
}
|
|
37
36
|
|
|
37
|
+
// value must be a string
|
|
38
38
|
if (!isString(value)) {
|
|
39
39
|
return invalidInternationalPhoneNumberMessage;
|
|
40
40
|
}
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
.replace(/[-. )(]/g, '')
|
|
41
|
+
const cleanedValue = value
|
|
42
|
+
// strip all hyphens, dots, spaces
|
|
43
|
+
.replace(/[-. )(]/g, '')
|
|
44
|
+
// trim leading zeroes and plus signs
|
|
44
45
|
.replace(/^[0+]+/, '');
|
|
45
46
|
return isNumeric(cleanedValue) && cleanedValue.length <= 15 ? undefined : invalidInternationalPhoneNumberMessage;
|
|
46
47
|
};
|
|
47
|
-
|
|
48
48
|
export { internationalPhoneNumber, invalidInternationalPhoneNumberMessage };
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import i18n from '../locales/index.js';
|
|
2
2
|
import { isEmpty, isNumeric } from './helpers/index.js';
|
|
3
3
|
const invalidNumberMessage = i18n.t('Please provide a number');
|
|
4
|
-
|
|
5
4
|
const number = value => isEmpty(value) || isNumeric(value) ? undefined : invalidNumberMessage;
|
|
6
|
-
|
|
7
5
|
export { number, invalidNumberMessage };
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import i18n from '../locales/index.js';
|
|
2
2
|
import { isEmpty, isString } from './helpers/index.js';
|
|
3
3
|
const invalidStringMessage = i18n.t('Please provide a string');
|
|
4
|
-
|
|
5
4
|
const string = value => isEmpty(value) || isString(value) ? undefined : invalidStringMessage;
|
|
6
|
-
|
|
7
5
|
export { string, invalidStringMessage };
|
|
@@ -1,19 +1,16 @@
|
|
|
1
1
|
const testValidatorValues = (validator, returnValue, values) => {
|
|
2
2
|
const returnValueStr = returnValue === undefined ? 'undefined' : 'an error string';
|
|
3
|
-
|
|
4
3
|
for (const value of values) {
|
|
5
4
|
const type = typeof value;
|
|
6
5
|
const valueStr = type === 'object' ? JSON.stringify(value) : value;
|
|
7
|
-
it(
|
|
6
|
+
it(`should return ${returnValueStr} for value \`${valueStr}\` of type ${type}`, () => {
|
|
8
7
|
expect(validator(value)).toBe(returnValue);
|
|
9
8
|
});
|
|
10
9
|
}
|
|
11
10
|
};
|
|
12
|
-
|
|
13
11
|
const allowsEmptyValues = validator => {
|
|
14
12
|
describe('allows empty values', () => {
|
|
15
13
|
testValidatorValues(validator, undefined, ['', null, undefined]);
|
|
16
14
|
});
|
|
17
15
|
};
|
|
18
|
-
|
|
19
16
|
export { testValidatorValues, allowsEmptyValues };
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
import i18n from '../locales/index.js';
|
|
2
|
-
import { isEmpty, isString } from './helpers/index.js';
|
|
2
|
+
import { isEmpty, isString } from './helpers/index.js';
|
|
3
3
|
|
|
4
|
+
// Source: https://gist.github.com/dperini/729294
|
|
4
5
|
const URL_PATTERN = /^(?:(?:(?:https?|ftp):)?\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:[/?#]\S*)?$/i;
|
|
5
6
|
const invalidUrlMessage = i18n.t('Please provide a valid url');
|
|
6
|
-
|
|
7
7
|
const url = value => isEmpty(value) || isString(value) && URL_PATTERN.test(value) ? undefined : invalidUrlMessage;
|
|
8
|
-
|
|
9
8
|
export { url, invalidUrlMessage };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2/ui-forms",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.11.1-beta.1",
|
|
4
4
|
"main": "./build/cjs/index.js",
|
|
5
5
|
"module": "./build/es/index.js",
|
|
6
6
|
"sideEffects": [
|
|
@@ -26,24 +26,24 @@
|
|
|
26
26
|
"access": "public"
|
|
27
27
|
},
|
|
28
28
|
"scripts": {
|
|
29
|
-
"start": "
|
|
29
|
+
"start": "storybook dev -c ../../storybook/config --port 5000",
|
|
30
30
|
"build": "d2-app-scripts build"
|
|
31
31
|
},
|
|
32
32
|
"peerDependencies": {
|
|
33
|
-
"react": "^16.
|
|
34
|
-
"react-dom": "^16.
|
|
33
|
+
"react": "^16.13",
|
|
34
|
+
"react-dom": "^16.13"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@dhis2/prop-types": "^3.1.2",
|
|
38
|
-
"@dhis2-ui/button": "9.
|
|
39
|
-
"@dhis2-ui/checkbox": "9.
|
|
40
|
-
"@dhis2-ui/field": "9.
|
|
41
|
-
"@dhis2-ui/file-input": "9.
|
|
42
|
-
"@dhis2-ui/input": "9.
|
|
43
|
-
"@dhis2-ui/radio": "9.
|
|
44
|
-
"@dhis2-ui/select": "9.
|
|
45
|
-
"@dhis2-ui/switch": "9.
|
|
46
|
-
"@dhis2-ui/text-area": "9.
|
|
38
|
+
"@dhis2-ui/button": "9.11.1-beta.1",
|
|
39
|
+
"@dhis2-ui/checkbox": "9.11.1-beta.1",
|
|
40
|
+
"@dhis2-ui/field": "9.11.1-beta.1",
|
|
41
|
+
"@dhis2-ui/file-input": "9.11.1-beta.1",
|
|
42
|
+
"@dhis2-ui/input": "9.11.1-beta.1",
|
|
43
|
+
"@dhis2-ui/radio": "9.11.1-beta.1",
|
|
44
|
+
"@dhis2-ui/select": "9.11.1-beta.1",
|
|
45
|
+
"@dhis2-ui/switch": "9.11.1-beta.1",
|
|
46
|
+
"@dhis2-ui/text-area": "9.11.1-beta.1",
|
|
47
47
|
"classnames": "^2.3.1",
|
|
48
48
|
"final-form": "^4.20.2",
|
|
49
49
|
"prop-types": "^15.7.2",
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _react = require("@storybook/react");
|
|
4
|
-
|
|
5
|
-
var _react2 = _interopRequireDefault(require("react"));
|
|
6
|
-
|
|
7
|
-
var _reactFinalForm = require("react-final-form");
|
|
8
|
-
|
|
9
|
-
var _formDecorator = require("../formDecorator.js");
|
|
10
|
-
|
|
11
|
-
var _index = require("../validators/index.js");
|
|
12
|
-
|
|
13
|
-
var _InputFieldFF = require("./InputFieldFF.js");
|
|
14
|
-
|
|
15
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
|
-
|
|
17
|
-
(0, _react.storiesOf)('Testing:InputFieldFF', module).addDecorator(_formDecorator.formDecorator).add('Default', () => /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
|
|
18
|
-
component: _InputFieldFF.InputFieldFF,
|
|
19
|
-
name: "agree",
|
|
20
|
-
label: "Do you agree?"
|
|
21
|
-
})).add('Required', () => /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
|
|
22
|
-
name: "agree",
|
|
23
|
-
component: _InputFieldFF.InputFieldFF,
|
|
24
|
-
required: true,
|
|
25
|
-
validate: _index.hasValue,
|
|
26
|
-
label: "Do you agree?"
|
|
27
|
-
}));
|
|
@@ -1,91 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = exports.InitialValue = exports.Default = void 0;
|
|
7
|
-
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
|
-
var _reactFinalForm = require("react-final-form");
|
|
11
|
-
|
|
12
|
-
var _formDecorator = require("../formDecorator.js");
|
|
13
|
-
|
|
14
|
-
var _propTypes = require("../shared/propTypes.js");
|
|
15
|
-
|
|
16
|
-
var _MultiSelectFieldFF = require("./MultiSelectFieldFF.js");
|
|
17
|
-
|
|
18
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
-
|
|
20
|
-
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";
|
|
21
|
-
const options = [{
|
|
22
|
-
value: '1',
|
|
23
|
-
label: 'one'
|
|
24
|
-
}, {
|
|
25
|
-
value: '2',
|
|
26
|
-
label: 'two'
|
|
27
|
-
}, {
|
|
28
|
-
value: '3',
|
|
29
|
-
label: 'three'
|
|
30
|
-
}, {
|
|
31
|
-
value: '4',
|
|
32
|
-
label: 'four'
|
|
33
|
-
}, {
|
|
34
|
-
value: '5',
|
|
35
|
-
label: 'five'
|
|
36
|
-
}, {
|
|
37
|
-
value: '6',
|
|
38
|
-
label: 'six'
|
|
39
|
-
}, {
|
|
40
|
-
value: '7',
|
|
41
|
-
label: 'seven'
|
|
42
|
-
}, {
|
|
43
|
-
value: '8',
|
|
44
|
-
label: 'eight'
|
|
45
|
-
}, {
|
|
46
|
-
value: '9',
|
|
47
|
-
label: 'nine'
|
|
48
|
-
}, {
|
|
49
|
-
value: '10',
|
|
50
|
-
label: 'ten'
|
|
51
|
-
}];
|
|
52
|
-
const initialValue = ['3', '4', '9', '10'];
|
|
53
|
-
var _default = {
|
|
54
|
-
title: 'Multi Select Field (Final Form)',
|
|
55
|
-
component: _MultiSelectFieldFF.MultiSelectFieldFF,
|
|
56
|
-
decorators: [_formDecorator.formDecorator],
|
|
57
|
-
parameters: {
|
|
58
|
-
docs: {
|
|
59
|
-
description: {
|
|
60
|
-
component: description
|
|
61
|
-
}
|
|
62
|
-
}
|
|
63
|
-
},
|
|
64
|
-
argTypes: {
|
|
65
|
-
input: { ..._propTypes.inputArgType
|
|
66
|
-
},
|
|
67
|
-
meta: { ..._propTypes.metaArgType
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
};
|
|
71
|
-
exports.default = _default;
|
|
72
|
-
|
|
73
|
-
const Default = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
|
|
74
|
-
component: _MultiSelectFieldFF.MultiSelectFieldFF,
|
|
75
|
-
name: "agree",
|
|
76
|
-
label: "Do you agree?",
|
|
77
|
-
options: options
|
|
78
|
-
});
|
|
79
|
-
|
|
80
|
-
exports.Default = Default;
|
|
81
|
-
|
|
82
|
-
const InitialValue = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
|
|
83
|
-
component: _MultiSelectFieldFF.MultiSelectFieldFF,
|
|
84
|
-
name: "agree",
|
|
85
|
-
label: "Do you agree?",
|
|
86
|
-
options: options,
|
|
87
|
-
initialValue: initialValue
|
|
88
|
-
});
|
|
89
|
-
|
|
90
|
-
exports.InitialValue = InitialValue;
|
|
91
|
-
InitialValue.storyName = 'InitialValue';
|
|
@@ -1,45 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _react = require("@storybook/react");
|
|
4
|
-
|
|
5
|
-
var _react2 = _interopRequireDefault(require("react"));
|
|
6
|
-
|
|
7
|
-
var _reactFinalForm = require("react-final-form");
|
|
8
|
-
|
|
9
|
-
var _FieldGroupFF = require("../FieldGroupFF/FieldGroupFF.js");
|
|
10
|
-
|
|
11
|
-
var _formDecorator = require("../formDecorator.js");
|
|
12
|
-
|
|
13
|
-
var _index = require("../validators/index.js");
|
|
14
|
-
|
|
15
|
-
var _RadioFieldFF = require("./RadioFieldFF.js");
|
|
16
|
-
|
|
17
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
18
|
-
|
|
19
|
-
(0, _react.storiesOf)('Testing:RadioFieldFF', module).addDecorator(_formDecorator.formDecorator).add('Required and no selected value', () => /*#__PURE__*/_react2.default.createElement(_FieldGroupFF.FieldGroupFF, {
|
|
20
|
-
name: "choice"
|
|
21
|
-
}, /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
|
|
22
|
-
type: "radio",
|
|
23
|
-
component: _RadioFieldFF.RadioFieldFF,
|
|
24
|
-
name: "choice",
|
|
25
|
-
label: "One",
|
|
26
|
-
value: "one",
|
|
27
|
-
validate: _index.hasValue,
|
|
28
|
-
required: true
|
|
29
|
-
}), /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
|
|
30
|
-
type: "radio",
|
|
31
|
-
component: _RadioFieldFF.RadioFieldFF,
|
|
32
|
-
name: "choice",
|
|
33
|
-
label: "Two",
|
|
34
|
-
value: "two",
|
|
35
|
-
validate: _index.hasValue,
|
|
36
|
-
required: true
|
|
37
|
-
}), /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
|
|
38
|
-
type: "radio",
|
|
39
|
-
component: _RadioFieldFF.RadioFieldFF,
|
|
40
|
-
name: "choice",
|
|
41
|
-
label: "Three",
|
|
42
|
-
value: "three",
|
|
43
|
-
validate: _index.hasValue,
|
|
44
|
-
required: true
|
|
45
|
-
})));
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _react = require("@storybook/react");
|
|
4
|
-
|
|
5
|
-
var _react2 = _interopRequireDefault(require("react"));
|
|
6
|
-
|
|
7
|
-
var _reactFinalForm = require("react-final-form");
|
|
8
|
-
|
|
9
|
-
var _formDecorator = require("../formDecorator.js");
|
|
10
|
-
|
|
11
|
-
var _index = require("../validators/index.js");
|
|
12
|
-
|
|
13
|
-
var _SingleSelectFieldFF = require("./SingleSelectFieldFF.js");
|
|
14
|
-
|
|
15
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
|
-
|
|
17
|
-
const defaultOptions = [{
|
|
18
|
-
value: 'initial',
|
|
19
|
-
label: 'Initial'
|
|
20
|
-
}];
|
|
21
|
-
(0, _react.storiesOf)('Testing:SingleSelectFieldFF', module).addDecorator(_formDecorator.formDecorator).addParameters({
|
|
22
|
-
options: {
|
|
23
|
-
showPanel: false
|
|
24
|
-
}
|
|
25
|
-
}).add('Required', (_, _ref) => {
|
|
26
|
-
let {
|
|
27
|
-
cypressProps
|
|
28
|
-
} = _ref;
|
|
29
|
-
return /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
|
|
30
|
-
required: true,
|
|
31
|
-
name: "singleSelect",
|
|
32
|
-
label: "Single select",
|
|
33
|
-
component: _SingleSelectFieldFF.SingleSelectFieldFF,
|
|
34
|
-
validate: _index.hasValue,
|
|
35
|
-
options: cypressProps.options || defaultOptions
|
|
36
|
-
});
|
|
37
|
-
});
|
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, "__esModule", {
|
|
4
|
-
value: true
|
|
5
|
-
});
|
|
6
|
-
exports.default = exports.InitialValue = exports.Default = void 0;
|
|
7
|
-
|
|
8
|
-
var _react = _interopRequireDefault(require("react"));
|
|
9
|
-
|
|
10
|
-
var _reactFinalForm = require("react-final-form");
|
|
11
|
-
|
|
12
|
-
var _formDecorator = require("../formDecorator.js");
|
|
13
|
-
|
|
14
|
-
var _propTypes = require("../shared/propTypes.js");
|
|
15
|
-
|
|
16
|
-
var _SingleSelectFieldFF = require("./SingleSelectFieldFF.js");
|
|
17
|
-
|
|
18
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
|
-
|
|
20
|
-
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";
|
|
21
|
-
const options = [{
|
|
22
|
-
value: '1',
|
|
23
|
-
label: 'one'
|
|
24
|
-
}, {
|
|
25
|
-
value: '2',
|
|
26
|
-
label: 'two'
|
|
27
|
-
}, {
|
|
28
|
-
value: '3',
|
|
29
|
-
label: 'three'
|
|
30
|
-
}, {
|
|
31
|
-
value: '4',
|
|
32
|
-
label: 'four'
|
|
33
|
-
}, {
|
|
34
|
-
value: '5',
|
|
35
|
-
label: 'five'
|
|
36
|
-
}, {
|
|
37
|
-
value: '6',
|
|
38
|
-
label: 'six'
|
|
39
|
-
}, {
|
|
40
|
-
value: '7',
|
|
41
|
-
label: 'seven'
|
|
42
|
-
}, {
|
|
43
|
-
value: '8',
|
|
44
|
-
label: 'eight'
|
|
45
|
-
}, {
|
|
46
|
-
value: '9',
|
|
47
|
-
label: 'nine'
|
|
48
|
-
}, {
|
|
49
|
-
value: '10',
|
|
50
|
-
label: 'ten'
|
|
51
|
-
}];
|
|
52
|
-
var _default = {
|
|
53
|
-
title: 'Single Select Field (Final Form)',
|
|
54
|
-
component: _SingleSelectFieldFF.SingleSelectFieldFF,
|
|
55
|
-
decorators: [_formDecorator.formDecorator],
|
|
56
|
-
parameters: {
|
|
57
|
-
docs: {
|
|
58
|
-
description: {
|
|
59
|
-
component: description
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
},
|
|
63
|
-
argTypes: {
|
|
64
|
-
input: { ..._propTypes.inputArgType
|
|
65
|
-
},
|
|
66
|
-
meta: { ..._propTypes.metaArgType
|
|
67
|
-
}
|
|
68
|
-
}
|
|
69
|
-
};
|
|
70
|
-
exports.default = _default;
|
|
71
|
-
|
|
72
|
-
const Default = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
|
|
73
|
-
component: _SingleSelectFieldFF.SingleSelectFieldFF,
|
|
74
|
-
name: "agree",
|
|
75
|
-
label: "Do you agree?",
|
|
76
|
-
options: options
|
|
77
|
-
});
|
|
78
|
-
|
|
79
|
-
exports.Default = Default;
|
|
80
|
-
|
|
81
|
-
const InitialValue = () => /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
|
|
82
|
-
component: _SingleSelectFieldFF.SingleSelectFieldFF,
|
|
83
|
-
name: "agree",
|
|
84
|
-
label: "Do you agree?",
|
|
85
|
-
options: options,
|
|
86
|
-
initialValue: "4"
|
|
87
|
-
});
|
|
88
|
-
|
|
89
|
-
exports.InitialValue = InitialValue;
|
|
90
|
-
InitialValue.storyName = 'InitialValue';
|
|
@@ -1,49 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
|
|
3
|
-
var _react = require("@storybook/react");
|
|
4
|
-
|
|
5
|
-
var _react2 = _interopRequireDefault(require("react"));
|
|
6
|
-
|
|
7
|
-
var _reactFinalForm = require("react-final-form");
|
|
8
|
-
|
|
9
|
-
var _formDecorator = require("../formDecorator.js");
|
|
10
|
-
|
|
11
|
-
var _index = require("../validators/index.js");
|
|
12
|
-
|
|
13
|
-
var _SwitchFieldFF = require("./SwitchFieldFF.js");
|
|
14
|
-
|
|
15
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
16
|
-
|
|
17
|
-
// https://github.com/final-form/react-final-form-arrays/issues/111
|
|
18
|
-
const initialValue = ['yes'];
|
|
19
|
-
(0, _react.storiesOf)('Testing:SwitchFieldFF', module).addDecorator(_formDecorator.formDecorator).add('Unchecked', () => /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
|
|
20
|
-
component: _SwitchFieldFF.SwitchFieldFF,
|
|
21
|
-
className: "switch",
|
|
22
|
-
name: "switch",
|
|
23
|
-
label: "Label text",
|
|
24
|
-
validate: _index.hasValue,
|
|
25
|
-
required: true,
|
|
26
|
-
type: "checkbox"
|
|
27
|
-
})).add('Checked ', () => /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
|
|
28
|
-
component: _SwitchFieldFF.SwitchFieldFF,
|
|
29
|
-
className: "switch",
|
|
30
|
-
name: "switch",
|
|
31
|
-
label: "Label text",
|
|
32
|
-
initialValue: true,
|
|
33
|
-
type: "checkbox"
|
|
34
|
-
})).add('Unchecked with value', () => /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
|
|
35
|
-
component: _SwitchFieldFF.SwitchFieldFF,
|
|
36
|
-
className: "switch",
|
|
37
|
-
name: "switch",
|
|
38
|
-
label: "Label text",
|
|
39
|
-
value: "yes",
|
|
40
|
-
type: "checkbox"
|
|
41
|
-
})).add('Checked with value', () => /*#__PURE__*/_react2.default.createElement(_reactFinalForm.Field, {
|
|
42
|
-
component: _SwitchFieldFF.SwitchFieldFF,
|
|
43
|
-
className: "switch",
|
|
44
|
-
name: "switch",
|
|
45
|
-
label: "Label text",
|
|
46
|
-
value: "yes",
|
|
47
|
-
initialValue: initialValue,
|
|
48
|
-
type: "checkbox"
|
|
49
|
-
}));
|