npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

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

v19.15.0

Published

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

Downloads

14,512

Readme

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

| 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 | | autoComplete | string | | | Used as HTML autocomplete property | | aria-invalid | boolean | | | Indicate if the value entered in the input is invalid. | | aria-errormessage | string | | | HTML ID of an element containing an error message related to the input. | | value | ObjectSee 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: '' } | | onChange | ChangeEventHandler | | | 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 LocalizedTextInput is collapsed. | | onBlur | FocusEventHandler | | | Called when input is blurred | | onFocus | FunctionSee signature. | | | Called when input is focused | | defaultExpandMultilineText | boolean | | | Expands input components holding multiline values instead of collpasing them by default. | | cacheMeasurements | boolean | | true | Use this property to turn off caching input measurements. | | 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. | | isAutofocussed | boolean | | | Sets the focus on the first input when true is passed. | | isCondensed | boolean | | | Use this property to reduce the paddings of the component for a ui compact variant | | isDisabled | boolean | | | Disables all input fields. | | isReadOnly | boolean | | | Disables all input fields and shows them in read-only mode. | | placeholder | ObjectSee signature. | | | Placeholders for each language. Object of the same shape as value. | | horizontalConstraint | unionPossible values:, 6, 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 error message. | | errors | ObjectSee signature. | | | Used to show errors underneath the inputs of specific locales. Pass an object whose key is a locale and whose value is the error to show for that key. | | warnings | ObjectSee signature. | | | Used to show warnings underneath the inputs of specific locales. Pass an object whose key is a locale 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', } |

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>
  )
)