@dhis2/ui-forms 10.16.2 → 10.16.3

package/src/locales/zh_CN/translations.json

@@ -0,0 +1,30 @@
+{
+    "Upload file": "",
+    "Upload files": "",
+    "Remove": "移除",
+    "Please provide an alpha-numeric value": "",
+    "Please provide a boolean value": "",
+    "Please enter between {{lowerBound}} and {{upperBound}} characters": "",
+    "Please make sure the value of this input matches the value in \"{{otherField}}\".": "请确保此输入的值与“ {{otherField}}”中的值匹配。",
+    "Please enter a maximum of {{upperBound}} characters": "",
+    "Please enter a number with a maximum of {{upperBound}}": "",
+    "Please enter at least {{lowerBound}} characters": "",
+    "Please enter a number of at least {{lowerBound}}": "",
+    "Number cannot be less than {{lowerBound}} or more than {{upperBound}}": "",
+    "Please make sure the value of this input matches the pattern {{patternString}}.": "",
+    "Password should be a string": "",
+    "Password should be at least 8 characters long": "口令至少8个字符",
+    "Password should be no longer than 34 characters": "口令不能超过34字符",
+    "Password should contain at least one lowercase letter": "口令至少包括应该小写字母",
+    "Password should contain at least one UPPERCASE letter": "口令至少包括一个大写字母",
+    "Password should contain at least one number": "口令至少包括应该数字",
+    "Password should have at least one special character": "口令至少包括一个特殊字符",
+    "Please provide a username between 4 and 255 characters": "",
+    "Please provide a valid email address": "有效的邮箱",
+    "Please provide a value": "",
+    "Please provide a round number without decimals": "",
+    "Please provide a valid international phone number.": "",
+    "Please provide a number": "",
+    "Please provide a string": "",
+    "Please provide a valid url": "有效的URL"
+}

package/src/shared/helpers/createBlurHandler.js

@@ -0,0 +1,9 @@
+const createBlurHandler = (input, onBlur) => (payload, event) => {
+    input.onBlur(event)
+
+    if (onBlur && typeof onBlur === 'function') {
+        onBlur(payload, event)
+    }
+}
+
+export { createBlurHandler }

package/src/shared/helpers/createChangeHandler.js

@@ -0,0 +1,21 @@
+const PRIMITIVE_TYPES = new Set(['string', 'number', 'boolean'])
+
+const createChangeHandler =
+    ({ onChange }) =>
+    (payload) => {
+        if (payload && 'value' in payload) {
+            // ui event signature
+            onChange(payload.value)
+        } else if (payload && payload.target && 'value' in payload.target) {
+            // synthetic event
+            onChange(payload.target.value)
+        } else if (PRIMITIVE_TYPES.has(typeof payload)) {
+            // directly usable value
+            onChange(payload)
+        } else {
+            // ¯\_(ツ)_/¯
+            throw new Error('Could not process event payload')
+        }
+    }
+
+export { createChangeHandler }

package/src/shared/helpers/createFocusHandler.js

@@ -0,0 +1,9 @@
+const createFocusHandler = (input, onFocus) => (payload, event) => {
+    input.onFocus(event)
+
+    if (onFocus && typeof onFocus === 'function') {
+        onFocus(payload, event)
+    }
+}
+
+export { createFocusHandler }

package/src/shared/helpers/createSelectChangeHandler.js

@@ -0,0 +1,6 @@
+const createSelectChangeHandler =
+    ({ onChange }) =>
+    ({ selected }) => {
+        onChange(selected)
+    }
+export { createSelectChangeHandler }

package/src/shared/helpers/createToggleChangeHandler.js

@@ -0,0 +1,9 @@
+const createToggleChangeHandler = (input, onChange) => (payload, event) => {
+    input.onChange(event)
+
+    if (onChange && typeof onChange === 'function') {
+        onChange(payload, event)
+    }
+}
+
+export { createToggleChangeHandler }

package/src/shared/helpers/getValidationText.js

@@ -0,0 +1,21 @@
+import { hasError } from './hasError.js'
+
+const getValidationText = (meta, validationText, error) => {
+    if (validationText) {
+        return validationText
+    }
+
+    if (hasError(meta, error)) {
+        if (meta.error) {
+            return meta.error
+        }
+
+        if (meta.submitError) {
+            return meta.submitError
+        }
+    }
+
+    return ''
+}
+
+export { getValidationText }

package/src/shared/helpers/hasError.js

@@ -0,0 +1,3 @@
+const hasError = (meta, error) => error || (meta.touched && meta.invalid)
+
+export { hasError }

package/src/shared/helpers/isLoading.js

@@ -0,0 +1,4 @@
+const isLoading = (meta, loading, showLoadingStatus) =>
+    loading || (showLoadingStatus && meta.validating)
+
+export { isLoading }

package/src/shared/helpers/isValid.js

@@ -0,0 +1,4 @@
+const isValid = (meta, valid, showValidStatus) =>
+    valid || (showValidStatus && meta.touched && meta.valid)
+
+export { isValid }

package/src/shared/helpers.js

@@ -0,0 +1,9 @@
+export { createBlurHandler } from './helpers/createBlurHandler.js'
+export { createChangeHandler } from './helpers/createChangeHandler.js'
+export { createFocusHandler } from './helpers/createFocusHandler.js'
+export { createSelectChangeHandler } from './helpers/createSelectChangeHandler.js'
+export { createToggleChangeHandler } from './helpers/createToggleChangeHandler.js'
+export { getValidationText } from './helpers/getValidationText.js'
+export { hasError } from './helpers/hasError.js'
+export { isLoading } from './helpers/isLoading.js'
+export { isValid } from './helpers/isValid.js'

package/src/shared/propTypes.js

@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types'
+
+const toggleGroupOptionsProp = PropTypes.arrayOf(
+    PropTypes.shape({
+        label: PropTypes.string.isRequired,
+        value: PropTypes.string.isRequired,
+    })
+)
+
+const inputPropType = PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    value: PropTypes.any,
+    onBlur: PropTypes.func,
+    onFocus: PropTypes.func,
+})
+const inputArgType = {
+    table: {
+        type: {
+            summary:
+                '{ name: string (required), onChange: func (required), value: any, onBlur: func, onFocus: func }',
+        },
+    },
+}
+
+const metaPropType = PropTypes.shape({
+    error: PropTypes.string,
+    invalid: PropTypes.bool,
+    touched: PropTypes.bool,
+    valid: PropTypes.bool,
+    validating: PropTypes.bool,
+})
+const metaArgType = {
+    table: {
+        type: {
+            summary:
+                '{ error: string, invalid: bool, touched: bool, valid: bool, validating: bool }',
+        },
+    },
+}
+
+export {
+    toggleGroupOptionsProp,
+    inputPropType,
+    inputArgType,
+    metaPropType,
+    metaArgType,
+}

package/src/transformers/arrayWithIdObjects.js

@@ -0,0 +1,8 @@
+const format = (value) => (!value ? [] : value.map(({ id }) => id))
+
+const parse = (value) =>
+    !value || (Array.isArray(value) && value.length === 0)
+        ? undefined
+        : value.map((id) => ({ id }))
+
+export const arrayWithIdObjects = { format, parse }

package/src/transformers/index.js

@@ -0,0 +1 @@
+export { arrayWithIdObjects } from './arrayWithIdObjects.js'

package/src/validators/__tests__/alphaNumeric.test.js

@@ -0,0 +1,29 @@
+import { alphaNumeric, invalidAlphaNumericMessage } from '../alphaNumeric.js'
+import {
+    testValidatorValues,
+    allowsEmptyValues,
+} from '../test-helpers/index.js'
+
+describe('validator: alphaNumeric', () => {
+    allowsEmptyValues(alphaNumeric)
+
+    describe('allows alpha-numeric values', () => {
+        testValidatorValues(alphaNumeric, undefined, [
+            '123456',
+            'abcdef',
+            'a1b2c3',
+            'A1B2C3d4e5',
+            'I have spaces',
+        ])
+    })
+
+    describe('rejects non-alpha-numeric values', () => {
+        testValidatorValues(alphaNumeric, invalidAlphaNumericMessage, [
+            '.,/|~',
+            true,
+            false,
+            0,
+            1,
+        ])
+    })
+})

package/src/validators/__tests__/boolean.test.js

@@ -0,0 +1,23 @@
+import { boolean, invalidBooleanMessage } from '../boolean.js'
+import {
+    testValidatorValues,
+    allowsEmptyValues,
+} from '../test-helpers/index.js'
+
+describe('validator: boolean', () => {
+    allowsEmptyValues(boolean)
+
+    describe('allows boolean values', () => {
+        testValidatorValues(boolean, undefined, [true, false])
+    })
+
+    describe('rejects non-boolean values', () => {
+        testValidatorValues(boolean, invalidBooleanMessage, [
+            'text',
+            3,
+            {},
+            [],
+            () => {},
+        ])
+    })
+})

package/src/validators/__tests__/composeValidators.test.js

@@ -0,0 +1,23 @@
+import { composeValidators } from '../composeValidators.js'
+import { email, invalidEmailMessage } from '../email.js'
+import { hasValue, hasValueMessage } from '../hasValue.js'
+
+describe('composeValidators', () => {
+    const validator = composeValidators(hasValue, email)
+
+    it('should return undefined for valid values', () => {
+        expect(validator('test@dhis2.org')).toBe(undefined)
+    })
+
+    it('should return the required message for empty values', () => {
+        const validator = composeValidators(hasValue, email)
+
+        expect(validator('')).toBe(hasValueMessage)
+    })
+
+    it('should return invalid e-mail message for malformed strings', () => {
+        const validator = composeValidators(hasValue, email)
+
+        expect(validator('test@dhis2.')).toBe(invalidEmailMessage)
+    })
+})

package/src/validators/__tests__/createCharacterLengthRange.test.js

@@ -0,0 +1,59 @@
+import { createCharacterLengthRange } from '../createCharacterLengthRange.js'
+import { requiredArgumentErrorMessage } from '../helpers/index.js'
+import {
+    testValidatorValues,
+    allowsEmptyValues,
+} from '../test-helpers/index.js'
+
+describe('validator: createCharacterLengthRange', () => {
+    const betweenSixAndTenChars = createCharacterLengthRange(6, 10)
+    const inValidMsg = 'Please enter between 6 and 10 characters'
+
+    it('should throw an error when lower or upper bound are not a number', () => {
+        expect(() => {
+            createCharacterLengthRange(undefined, undefined)
+        }).toThrowError(requiredArgumentErrorMessage)
+        expect(() => {
+            createCharacterLengthRange('test', 'test')
+        }).toThrowError(requiredArgumentErrorMessage)
+        expect(() => {
+            createCharacterLengthRange(1, undefined)
+        }).toThrowError(requiredArgumentErrorMessage)
+        expect(() => {
+            createCharacterLengthRange(undefined, 0)
+        }).toThrowError(requiredArgumentErrorMessage)
+    })
+
+    it('should create a function', () => {
+        expect(typeof betweenSixAndTenChars).toEqual('function')
+    })
+
+    allowsEmptyValues(betweenSixAndTenChars)
+
+    describe('allows within-range strings', () => {
+        testValidatorValues(betweenSixAndTenChars, undefined, [
+            'abcdef', // 6
+            'abcdefgh',
+            'abcdefghij', // 10
+        ])
+    })
+
+    describe('rejects non-string values', () => {
+        testValidatorValues(betweenSixAndTenChars, inValidMsg, [
+            true,
+            3,
+            {},
+            [],
+            () => {},
+        ])
+    })
+
+    describe('rejects out-of-range strings', () => {
+        testValidatorValues(betweenSixAndTenChars, inValidMsg, [
+            'a',
+            'abcde', // 5
+            'abcdefghijk', // 11
+            'abcdefghijklmnopqrstuvw',
+        ])
+    })
+})

package/src/validators/__tests__/createEqualTo.test.js

@@ -0,0 +1,43 @@
+import { createEqualTo } from '../createEqualTo.js'
+import { requiredArgumentErrorMessage } from '../helpers/index.js'
+import { allowsEmptyValues } from '../test-helpers/index.js'
+
+describe('validator: createEqualTo', () => {
+    const equalToFoo = createEqualTo('foo')
+
+    it('should throw an error when key is not a string', () => {
+        expect(() => {
+            createEqualTo(undefined)
+        }).toThrowError(requiredArgumentErrorMessage)
+        expect(() => {
+            createEqualTo({})
+        }).toThrowError(requiredArgumentErrorMessage)
+    })
+
+    it('should create a function', () => {
+        expect(typeof equalToFoo).toEqual('function')
+    })
+
+    allowsEmptyValues(equalToFoo)
+
+    it('should return undefined when the fields have equal values', () => {
+        const sameValue = 'abcde'
+
+        expect(equalToFoo(sameValue, { foo: sameValue })).toEqual(undefined)
+    })
+
+    it('should return an error string when the fields have inequal values', () => {
+        const inValidFooMsg =
+            'Please make sure the value of this input matches the value in "foo".'
+
+        expect(equalToFoo('this', { foo: 'that' })).toEqual(inValidFooMsg)
+    })
+
+    it('should use the property description in the error string if provided', () => {
+        const equalToBar = createEqualTo('bar', 'Barista')
+        const inValidBarMsg =
+            'Please make sure the value of this input matches the value in "Barista".'
+
+        expect(equalToBar('this', { bar: 'that' })).toEqual(inValidBarMsg)
+    })
+})

package/src/validators/__tests__/createMaxCharacterLength.test.js

@@ -0,0 +1,24 @@
+import { createMaxCharacterLength } from '../createMaxCharacterLength.js'
+import { testValidatorValues } from '../test-helpers/index.js'
+
+describe('validator: createMaxCharacterLength', () => {
+    const maxSixChars = createMaxCharacterLength(6)
+    const errorMessage = 'Please enter a maximum of 6 characters'
+
+    /*
+     * Since createMaxCharacterLength calls createNumberRange internally
+     * a lot of things have been tested there and here we focus
+     * purely on the bounderies
+     */
+
+    describe('allows strings with a lower or equal length than the upper bound', () => {
+        testValidatorValues(maxSixChars, undefined, ['a', '123456'])
+    })
+
+    describe('rejects strings a length above the upper bound', () => {
+        testValidatorValues(maxSixChars, errorMessage, [
+            '1234567',
+            'some even longer text here....',
+        ])
+    })
+})

package/src/validators/__tests__/createMaxNumber.test.js

@@ -0,0 +1,21 @@
+import { createMaxNumber } from '../createMaxNumber.js'
+import { testValidatorValues } from '../test-helpers/index.js'
+
+describe('validator: createMaxNumber', () => {
+    const maxSix = createMaxNumber(6)
+    const errorMessage = 'Please enter a number with a maximum of 6'
+
+    /*
+     * Since createMaxNumber calls createNumberRange internally
+     * a lot of things have been tested there and here we focus
+     * purely on the bounderies
+     */
+
+    describe('allows numbers up to and including the upper bound', () => {
+        testValidatorValues(maxSix, undefined, [-1000, 0, 1, 6])
+    })
+
+    describe('rejects numbers above the upper bound', () => {
+        testValidatorValues(maxSix, errorMessage, [6.000001, 7, 100000])
+    })
+})

package/src/validators/__tests__/createMinCharacterLength.test.js

@@ -0,0 +1,24 @@
+import { createMinCharacterLength } from '../createMinCharacterLength.js'
+import { testValidatorValues } from '../test-helpers/index.js'
+
+describe('validator: createMinCharacterLength', () => {
+    const atLeastSixChars = createMinCharacterLength(6)
+    const errorMessage = 'Please enter at least 6 characters'
+
+    /*
+     * Since createMinCharacterLength calls createCharacterLengthRange internally
+     * a lot of things have been tested there and here we focus
+     * purely on the bounderies
+     */
+
+    describe('allows strings with an equal or greater length than the lower bound', () => {
+        testValidatorValues(atLeastSixChars, undefined, [
+            '123456',
+            'an even longer string',
+        ])
+    })
+
+    describe('rejects strings a length below the lower bound', () => {
+        testValidatorValues(atLeastSixChars, errorMessage, ['a', '12345'])
+    })
+})

package/src/validators/__tests__/createMinNumber.test.js

@@ -0,0 +1,21 @@
+import { createMinNumber } from '../createMinNumber.js'
+import { testValidatorValues } from '../test-helpers/index.js'
+
+describe('validator: createMinNumber', () => {
+    const atLeastSix = createMinNumber(6)
+    const errorMessage = 'Please enter a number of at least 6'
+
+    /*
+     * Since createMinNumber calls createNumberRange internally
+     * a lot of things have been tested there and here we focus
+     * purely on the bounderies
+     */
+
+    describe('allows numbers equal to or greater than the lower bound', () => {
+        testValidatorValues(atLeastSix, undefined, [6, 6.00001, 1000000])
+    })
+
+    describe('rejects numbers below the lower bound', () => {
+        testValidatorValues(atLeastSix, errorMessage, [-10000, 0, 1, 5.999999])
+    })
+})

package/src/validators/__tests__/createNumberRange.test.js

@@ -0,0 +1,68 @@
+import { createNumberRange } from '../createNumberRange.js'
+import { requiredArgumentErrorMessage } from '../helpers/index.js'
+import {
+    testValidatorValues,
+    allowsEmptyValues,
+} from '../test-helpers/index.js'
+
+describe('validator: createNumberRange', () => {
+    const betweenSixAndTen = createNumberRange(6, 10)
+    const errorMessage = 'Number cannot be less than 6 or more than 10'
+
+    it('should throw an error when lower or upper bound are not a number', () => {
+        expect(() => {
+            createNumberRange(undefined, undefined)
+        }).toThrowError(requiredArgumentErrorMessage)
+        expect(() => {
+            createNumberRange('test', 'test')
+        }).toThrowError(requiredArgumentErrorMessage)
+        expect(() => {
+            createNumberRange(1, undefined)
+        }).toThrowError(requiredArgumentErrorMessage)
+        expect(() => {
+            createNumberRange(undefined, 0)
+        }).toThrowError(requiredArgumentErrorMessage)
+    })
+
+    it('should create a function', () => {
+        expect(typeof betweenSixAndTen).toEqual('function')
+    })
+
+    allowsEmptyValues(betweenSixAndTen)
+
+    describe('allows floats, integers and string representations of numbers', () => {
+        testValidatorValues(betweenSixAndTen, undefined, [
+            7,
+            7.1,
+            0.71e1,
+            '7',
+            '7.1',
+        ])
+    })
+
+    describe('allows within-range numbers', () => {
+        testValidatorValues(
+            betweenSixAndTen,
+            undefined,
+            [6, 8, 10, 9.999999, 6.000001]
+        )
+    })
+
+    describe('rejects non-numerical values', () => {
+        testValidatorValues(betweenSixAndTen, errorMessage, [
+            'test',
+            true,
+            {},
+            [],
+            () => {},
+        ])
+    })
+
+    describe('rejects out-of-range numbers', () => {
+        testValidatorValues(
+            betweenSixAndTen,
+            errorMessage,
+            [3, 5, 5.999999, 10.000001, 1000000]
+        )
+    })
+})

package/src/validators/__tests__/createPattern.test.js

@@ -0,0 +1,40 @@
+import { createPattern, invalidPatternMessage } from '../createPattern.js'
+import { allowsEmptyValues } from '../test-helpers/index.js'
+
+describe('validator: createPattern', () => {
+    const pattern = /^test$/
+    const equalToTestPattern = createPattern(pattern)
+
+    it('should throw an error when pattern is not a regex object', () => {
+        expect(() => {
+            createPattern(undefined)
+        }).toThrowError(invalidPatternMessage)
+        expect(() => {
+            createPattern('test')
+        }).toThrowError(invalidPatternMessage)
+    })
+
+    it('should create a function', () => {
+        expect(typeof equalToTestPattern).toEqual('function')
+    })
+
+    allowsEmptyValues(equalToTestPattern)
+
+    it('should return undefined when the input matches the pattern', () => {
+        expect(equalToTestPattern('test')).toEqual(undefined)
+    })
+
+    it('should return an error string when input does not match the pattern', () => {
+        const escapedRegexString = '/^test$/'
+        const invalidMsg = `Please make sure the value of this input matches the pattern ${escapedRegexString}.`
+
+        expect(equalToTestPattern('bad input')).toEqual(invalidMsg)
+    })
+
+    it('should return an custon error string when one was provided and input does not match the pattern', () => {
+        const invalidMsg = 'You should not have done this'
+        const withCustomMessage = createPattern(pattern, invalidMsg)
+
+        expect(withCustomMessage('bad input')).toEqual(invalidMsg)
+    })
+})

package/src/validators/__tests__/dhis2Password.test.js

@@ -0,0 +1,51 @@
+import { dhis2Password, errorMessages } from '../dhis2Password.js'
+import {
+    testValidatorValues,
+    allowsEmptyValues,
+} from '../test-helpers/index.js'
+
+describe('validator: dhis2Password', () => {
+    allowsEmptyValues(dhis2Password)
+
+    it('should return undefined for a valid password', () => {
+        expect(dhis2Password('Testing123!')).toEqual(undefined)
+    })
+
+    describe('rejects value types other than string', () => {
+        testValidatorValues(dhis2Password, errorMessages.notString, [
+            true,
+            3,
+            {},
+            [],
+            () => {},
+        ])
+    })
+
+    it('should return the "password too short" message if password is less than 8 characters', () => {
+        expect(dhis2Password('123')).toEqual(errorMessages.tooShort)
+    })
+
+    it('should return the "password too long" message if password is more than 34 characters', () => {
+        expect(
+            dhis2Password('abcdefghijklmnopqrstuvwxyz12345678910111213')
+        ).toEqual(errorMessages.tooLong)
+    })
+
+    it('should return the "no lowercase" message if password does not contain lower case characters', () => {
+        expect(dhis2Password('TESTING123!')).toEqual(errorMessages.noLowerCase)
+    })
+
+    it('should return the "no uppercase" message if password has no uppercase characters', () => {
+        expect(dhis2Password('testing123!')).toEqual(errorMessages.noUpperCase)
+    })
+
+    it('should return the "no number" message if password has no digits', () => {
+        expect(dhis2Password('Testing!')).toEqual(errorMessages.noNumber)
+    })
+
+    it('should return the "no special character" message if password has no special characters', () => {
+        expect(dhis2Password('Testing123')).toEqual(
+            errorMessages.noSpecialCharacter
+        )
+    })
+})