16.11.0 • Published 5 months ago

@commercetools-uikit/localized-multiline-text-input v16.11.0

Weekly downloads
1,061
License
MIT
Repository
github
Last release
5 months ago

LocalizedMultilineTextInput

Description

A controlled text input component for localized multi-line strings with validation states.

Installation

yarn add @commercetools-uikit/localized-multiline-text-input
npm --save install @commercetools-uikit/localized-multiline-text-input

Additionally install the peer dependencies (if not present)

yarn add react react-dom react-intl
npm --save install react react-dom react-intl

Usage

import LocalizedMultilineTextInput from '@commercetools-uikit/localized-multiline-text-input';

const Example = () => (
  <LocalizedMultilineTextInput
    value={{ en: 'House\nFoo', de: 'House' }}
    onChange={
      (/** event */) => {
        // alert(event.target.name, event.target.value)
      }
    }
  />
);

export default Example;

Properties

PropsTypeRequiredDefaultDescription
idstringUsed as prefix of HTML id property. Each input field id will have the language as a suffix (${idPrefix}.${lang}), e.g. foo.en
namestringUsed as HTML name property for each input field. Each input field name will have the language as a suffix (${namePrefix}.${lang}), e.g. foo.en
autoCompletestringUsed as HTML autocomplete property
aria-invalidbooleanIndicate if the value entered in the input is invalid.
aria-errormessagestringHTML ID of an element containing an error message related to the input.
valueObjectSee signature.Values to use. Keyed by language, the values are the actual values, e.g. { en: 'Horse', de: 'Pferd' } The input doesn't accept a "languages" prop, instead all possible languages have to exist (with empty or filled strings) on the value: { en: 'foo', de: '', es: '' }
onChangeChangeEventHandlerGets called when any input is changed. Is called with the change event of the changed input.
selectedLanguagestringSpecifies which language will be shown in case the LocalizedTextInput is collapsed.
onBlurFocusEventHandlerCalled when input is blurred
onFocusFunctionSee signature.Called when input is focused
defaultExpandMultilineTextbooleanExpands input components holding multiline values instead of collpasing them by default.
hideLanguageExpansionControlsbooleanWill hide the language expansion controls when set to true. All languages will be shown when set to true.
defaultExpandLanguagesbooleanControls whether one or all languages are visible by default. Pass true to show all languages by default.
isAutofocussedbooleanSets the focus on the first input when true is passed.
isDisabledbooleanDisables all input fields.
isReadOnlybooleanDisables all input fields and shows them in read-only mode.
placeholderObjectSee signature.Placeholders for each language. Object of the same shape as value.
horizontalConstraintunionPossible values:, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto''scale'Horizontal size limit of the input fields.
hasErrorbooleanWill apply the error state to each input without showing any error message.
hasWarningbooleanWill apply the warning state to each input without showing any error message.
errorsObjectSee signature.Used to show errors underneath the inputs of specific currencies. Pass an object whose key is a currency and whose value is the error to show for that key.
warningsObjectSee signature.Used to show warnings underneath the inputs of specific currencies. Pass an object whose key is a currency and whose value is the warning to show for that key.

Signatures

Signature value

{
  [key: string]: string;
}

Signature onFocus

() => void

Signature placeholder

{
  [key: string]: string;
}

Signature errors

{
  [key: string]: ReactNode;
}

Signature warnings

{
  [key: string]: ReactNode;
}

data-* props

The component forwards all data attribute props. It further adds a -${language} suffix to the values of the data-test and data-track-component attributes, e.g data-test="foo" will get added to the input for en as data-test="foo-en".

Main Functions and use cases are:

  • Receiving localized input from user

Static Properties

createLocalizedString(languages, existingTranslations)

This function creates a localized string. It merges the languages and the language keys of existing translations to form a localized string holding all languages. The existingTranslations argument is optional. If it is not passed, an empty localized field will be created.

const languages = ['en', 'de'];
LocalizedMultilineTextInput.createLocalizedString(languages);
// -> { en: '', de: '' }

In case existingTranslations is passed, it will merge an empty localized field with the existing translations. Usually this is used to ensure that a localized string contains at least the project's languages.

const languages = ['en', 'de'];
const existingTranslations = { en: 'Tree', ar: 'شجرة' };
LocalizedMultilineTextInput.createLocalizedString(
  languages,
  existingTranslations
);
// -> { en: 'Tree', de: '', ar: 'شجرة' }

isEmpty(localizedField)

Returns true when all values in a localized field are empty.

LocalizedMultilineTextInput.isEmpty({});
// -> true
LocalizedMultilineTextInput.isEmpty({ en: '', de: '  ' });
// -> true
LocalizedMultilineTextInput.isEmpty({ en: 'Tree', de: '' });
// -> false

omitEmptyTranslations(localizedField)

Omits translations with empty values.

LocalizedMultilineTextInput.omitEmptyTranslations({ en: '', de: '  ' });
// -> {}
LocalizedMultilineTextInput.omitEmptyTranslations({ en: 'Tree', de: '' });
// -> { en: 'Tree' }

isTouched(touched)

Expects to be called with an object or undefined. Returns true when at least one value is truthy.

RequiredValueErrorMessage

This field exports a default error message which can be used when the field is required, but the user provided no value. You can use it as

render (
  return (
    <div>
      <LocalizedMultilineTextInput hasError={isMissing} />
      {
        isMissing && <LocalizedMultilineTextInput.RequiredValueErrorMessage />
      }
    </div>
  )
)
16.5.0

10 months ago

16.9.0

6 months ago

16.7.3

8 months ago

16.7.2

8 months ago

16.7.1

8 months ago

16.7.0

8 months ago

16.7.5

7 months ago

16.7.4

8 months ago

16.10.0

6 months ago

16.6.1

9 months ago

16.6.0

9 months ago

16.4.1

10 months ago

16.8.0

6 months ago

16.11.0

5 months ago

16.4.0

10 months ago

16.3.0

11 months ago

16.2.1

11 months ago

16.2.0

11 months ago

16.1.1

12 months ago

16.1.0

12 months ago

15.15.0

1 year ago

15.15.1

1 year ago

16.0.0

1 year ago

15.13.2

1 year ago

15.14.3

1 year ago

15.14.1

1 year ago

15.14.2

1 year ago

15.14.0

1 year ago

15.13.1

1 year ago

15.13.0

1 year ago

15.12.0

1 year ago

15.9.0

1 year ago

15.10.0

1 year ago

15.11.2

1 year ago

15.11.0

1 year ago

15.11.1

1 year ago

15.7.0

1 year ago

15.8.0

1 year ago

15.5.0

1 year ago

15.5.1

1 year ago

15.6.0

1 year ago

15.4.0

1 year ago

15.3.0

2 years ago

15.2.4

2 years ago

15.2.1

2 years ago

15.2.2

2 years ago

15.2.3

2 years ago

15.1.1

2 years ago

15.1.2

2 years ago

15.1.0

2 years ago

15.2.0

2 years ago

15.0.0

2 years ago

14.0.2

2 years ago

14.0.3

2 years ago

14.0.6

2 years ago

13.0.4

2 years ago

14.0.0

2 years ago

14.0.1

2 years ago

13.0.2

2 years ago

13.0.3

2 years ago

13.0.0

2 years ago

13.0.1

2 years ago

12.2.9

2 years ago

12.2.5

2 years ago

12.2.6

2 years ago

12.2.7

2 years ago

12.2.4

3 years ago

12.2.3

3 years ago

12.2.2

3 years ago

12.2.1

3 years ago

12.2.0

3 years ago

12.1.0

3 years ago

12.0.12

3 years ago

12.0.8

3 years ago

12.0.7

3 years ago

12.0.3

3 years ago

12.0.4

3 years ago

12.0.6

3 years ago

12.0.2

3 years ago

12.0.0

3 years ago

11.3.0

3 years ago

11.2.1

3 years ago

11.2.0

3 years ago

11.1.0

3 years ago

11.0.2

3 years ago

11.0.1

3 years ago

10.47.4

3 years ago

10.47.3

3 years ago

10.47.2

3 years ago

10.47.0

3 years ago

10.46.3

3 years ago

10.46.2

3 years ago

10.46.1

3 years ago

10.45.0

3 years ago

10.44.4

3 years ago

10.44.3

3 years ago

10.44.1

3 years ago

10.44.0

3 years ago

10.43.3

3 years ago

10.43.2

3 years ago

10.42.3

3 years ago

10.42.2

3 years ago

10.42.0

3 years ago

10.42.1

3 years ago

10.41.0

3 years ago

10.40.1

3 years ago

10.40.0

3 years ago

10.39.8

3 years ago

10.39.7

3 years ago

10.39.6

3 years ago

10.39.2

3 years ago

10.39.4

3 years ago

10.39.3

3 years ago

10.39.1

4 years ago

10.38.0

4 years ago

10.36.1

4 years ago

10.36.0

4 years ago

10.35.1

4 years ago

10.34.1

4 years ago

10.33.0

4 years ago

10.32.0

4 years ago

10.30.1

4 years ago

10.27.1

4 years ago

10.27.0

4 years ago

10.24.0

4 years ago

10.22.1

4 years ago

10.22.0

4 years ago

10.21.0

4 years ago

10.20.0

4 years ago

10.19.0

4 years ago

10.18.7-canary.5

4 years ago

10.18.7-canary.6

4 years ago

10.18.7-canary.7

4 years ago

10.18.7-canary.4

4 years ago

10.18.7-canary.3

4 years ago

10.18.7-canary.2

4 years ago

10.18.7-canary.1

4 years ago

10.18.7-canary.0

4 years ago

10.18.6-canary.1

4 years ago

10.18.5-canary.4

4 years ago

10.18.6-canary.0

4 years ago

10.18.5-canary.3

4 years ago

10.18.5-canary.2

4 years ago

10.18.5-canary.1

4 years ago

10.18.5-canary.0

4 years ago

10.18.4

4 years ago

10.18.4-canary.9

4 years ago

10.18.4-canary.8

4 years ago

10.18.4-canary.7

4 years ago

10.18.4-canary.6

4 years ago

10.18.4-canary.3

4 years ago

10.18.4-canary.4

4 years ago

10.18.4-canary.5

4 years ago

10.18.4-canary.1

4 years ago

10.18.4-canary.2

4 years ago

10.18.4-canary.0

4 years ago

10.18.3-canary.2

4 years ago

10.18.3-canary.3

4 years ago

10.18.3-canary.1

4 years ago

10.18.3-canary.0

4 years ago

10.18.2

4 years ago

10.18.2-canary.3

4 years ago

10.18.2-canary.2

4 years ago

10.18.2-canary.1

4 years ago

10.17.1-canary.3

4 years ago

10.17.1-canary.2

4 years ago

10.18.1-canary.0

4 years ago

10.18.2-canary.0

4 years ago

10.18.0

4 years ago

10.17.1-canary.1

4 years ago

10.18.0-alpha.0

4 years ago

10.17.1-canary.0

4 years ago

10.17.0

4 years ago

10.16.1-canary.8

4 years ago

10.16.1-canary.7

4 years ago

10.16.1-canary.6

4 years ago

10.16.1-canary.5

4 years ago

10.16.1-canary.4

4 years ago

10.16.1-canary.3

4 years ago

10.16.1-canary.2

4 years ago

10.16.1-canary.1

4 years ago

10.16.1-canary.0

4 years ago

10.16.0

4 years ago

10.15.2-canary.4

4 years ago

10.15.2-canary.0

4 years ago

10.15.2-canary.2

4 years ago

10.15.2-canary.3

4 years ago

10.15.1-canary.6

4 years ago

10.15.1

4 years ago

10.15.1-canary.4

4 years ago

10.15.0

4 years ago

10.14.3-canary.4

4 years ago

10.14.1

4 years ago

10.14.1-canary.7

4 years ago

10.13.0

4 years ago

11.0.0-alpha.11

4 years ago

11.0.0-alpha.10

4 years ago

11.0.0-alpha.9

4 years ago

11.0.0-alpha.6

4 years ago

11.0.0-alpha.7

4 years ago

11.0.0-alpha.8

4 years ago

11.0.0-alpha.5

4 years ago

11.0.0-alpha.4

4 years ago

11.0.0-alpha.2

4 years ago

11.0.0-alpha.3

4 years ago

11.0.0-alpha.1

4 years ago

11.0.0-alpha.0

4 years ago