What is the recommended approach to translate labels, descriptions, etc?

[bjbrewster]

Prerequisites

• I have read the documentation;
• In the case of a bug report, I understand that providing a SSCCE example is tremendously useful to the maintainers.

Description

I am attempting to implement label/description/help translation using react-intl in a custom FieldTemplate and am trying to get the path to the current field. I can almost use the id property like id.split('_').slice(1) except field names may have _ as part of their name, and the root id name can change (uiSchema["ui:rootFieldId"]) and may contain _ also.

Is there some other way to get the path to the current property? If not, can I request the id field separator in utils toIdSchema() and ArrayField be changed to a double underscore __ similar to BEM notation. So 'myroot__foo_bar__0__qux'.split('__').slice(1) would yield ['foo_bar', '0', 'qux']? This also works for field names that begin with a single underscore as sometimes used to denote private or reserved field names like in CouchDB _id and _deleted.

Perhaps this approach is completely flawed when taking into account definitions etc. Another approach may be to recursively traverse the schema object and definitions separately, building up the path as I go, and add a title, description and help attribute to each object property.

How are others translating the labels, field titles, descriptions, help text etc?

Steps to Reproduce

N/A

Expected behavior

N/A

Actual behavior

N/A

Version

0.51.0

[glasserc]

Hi, I'm not super familiar with react-intl, but I would have expected translating labels and things to happen at the schema layer, before it gets rendered. I wouldn't object to a PR adding a method to get the path to the current element. There's also an outstanding PR to parametrize the separator in #688, and if olzraiti's comments are addressed I would be willing to merge that too.

[ugogo]

On my side, I used a custom FieldTemplate

// FieldTemplate.jsx

const FormTemplate = ({ id, children, label, rawErrors, required, schema }) => {
...
return (
    <FormField errored={isErrored}>
      <FormLabel
        i18n={label}
        inputId={id}
        required={required}
      />

      { children }

      { !!rawErrors.length && (
        <FormErrors errors={rawErrors} />
      )}
    </FormField>
  );

// FormLabel.jsx
const FormLabel = ({ i18n, inputId, required }) => (
  <label htmlFor={inputId}>
    <FormattedMessage id={i18n} />
    { required ? '*' : null }
  </label>
);

Not sure this is the best way to do it because you have to rewrite some logic, but you'll have a full control on the displayed items, i18n included

[landsman]

Is there some good solution please?

[bjbrewster]

I originally tried adding custom widgets and field templates etc and had a dodgy function to get the property path and attempt look up the title, description and help text during render. Getting the property path is not really possible, especially when definitions are also used.

In the end, we wrote a intlSchema method to transform the json schema (returns new object, original schema is not touched) before passing to react-jsonschema-form, updating the title, description and help properties if found in the locale text. I'm using redux, so I used this method in the redux connector when passing the schema to my react component. I also use redux-intl so I was able to easily pass all the intl messages to my helper.

I hope this points you in the right direction. I'll post a Codepen example with my recursive method soon.

Cheers,
Brendan

[bjbrewster]

Here is an example Codepen with my recursive intlSchema method.

https://codepen.io/bjbrewster/pen/xQeRKR

Cheers,
Brendan

[epicfaace]

Closing this in favor of #1195.