@commercetools-uikit/localized-rich-text-input

LocalizedRichTextInput

Description

A controlled text input component for localized rich text input with validation states.

Installation

yarn add @commercetools-uikit/localized-rich-text-input

npm --save install @commercetools-uikit/localized-rich-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 LocalizedRichTextInput from '@commercetools-uikit/localized-rich-text-input';

const Example = () => (
  <LocalizedRichTextInput
    value={{
      en: '',
      de: '',
    }}
    onChange={(event) => console.log('event.target.value', event.target.value)}
    selectedLanguage="en"
  />
);

export default Example;

Properties

Props	Type	Required	Default	Description
id	string			Used as prefix of HTML id property. Each input field id will have the language as a suffix (${idPrefix}.${lang}), e.g. `foo.en
name	string			Used 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
value	Record	✅		Values to use. Keyed by language, the values are the actual values, e.g. `{ en: ' Horse ', de: ' Pferd ' }
onChange	Function See signature.			Gets called when any input is changed. Is called with the change event of the changed input.
selectedLanguage	string	✅		Specifies which language will be shown in case the LocalizedRichTextInput is collapsed.
onBlur	FocusEventHandler			Called when any field is blurred. Is called with the event of that field.
onFocus	FocusEventHandler			Called when any field is focussed. Is called with the event of that field.
defaultExpandMultilineText	boolean			Expands input components holding multiline values instead of collapsing them by default.
hideLanguageExpansionControls	boolean			Will hide the language expansion controls when set to true. All languages will be shown when set to true
defaultExpandLanguages	boolean			Controls whether one or all languages are visible by default. Pass true to show all languages by default.
isDisabled	boolean			Disables all input
isReadOnly	boolean			Disables all input fields and shows them in read-only mode.
placeholder	Record			Placeholders for each language. Object of the same shape as
horizontalConstraint	union Possible values: , 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'		'scale'	Horizontal size limit of the input fields.
hasError	boolean			Will apply the error state to each input without showing any error message.
hasWarning	boolean			Will apply the warning state to each input without showing any warning message.
errors	Record			Used to show errors underneath the inputs of specific languages. Pass an object whose key is a language and whose value is the error to show for that key.
warnings	Record			Used to show warnings underneath the inputs of specific languages. Pass an object whose key is a language and whose value is the warning to show for that key.
additionalInfo	Record			An object mapping locales to additional messages to be rendered below each input element. Example: { en: 'Some value', es: 'Algún valor', }
showExpandIcon	boolean		false	Shows an expand icon in the toolbar
onClickExpand	Function See signature.			Called when the expand button is clicked

Signatures

Signature onChange

(event: TCustomEvent) => void

Signature onClickExpand

() => boolean;

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'];
LocalizedRichTextInput.createLocalizedString(languages);
// -> { en: '<p></p>', de: '<p></p>' }

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: '<p>Tree</p>', ar: '<p>شجرة</p>' };
LocalizedRichTextInput.createLocalizedString(languages, existingTranslations);
// -> { en: 'Tree', de: '', ar: '<p>شجرة</p>' }

isEmpty(localizedField)

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

LocalizedRichTextInput.isEmpty({});
// -> true

LocalizedRichTextInput.isEmpty({ en: '', de: '<p></p>' });
// -> true

LocalizedRichTextInput.isEmpty({ en: '<p>Tree</p>', de: '<p></p>' });
// -> false

omitEmptyTranslations(localizedField)

Omits translations with empty values.

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

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

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