Provide facility for translating strings in code, not just in HTML

Description

At present, once we have defined a translation for a message, we render it using <FormattedMessage> from the react-intl library. That works fine, but sometimes we also need to translate an string inline in code rather than in React-rendered HTML. For example, in ui-organization/settings/index.js we have:

We'd like to provide translations for the settings labels, using some Stripes-provided function like:

Environment

None

Potential Workaround

None

Checklist

hide

TestRail: Results

Activity

Show:

Mike Taylor August 17, 2017 at 5:31 PM

All done, thank heavens!

Mike Taylor August 17, 2017 at 4:47 PM

Ha! Got it! https://github.com/folio-org/stripes-core/commit/75076a3e42c0a958c3e12077f244988d422cf0d7

(But I won't close this until I've tidied that code up a bit.)

Mike Taylor August 17, 2017 at 4:00 PM

It's apparent from the source of <IntlProvider> that it creates the intl object itself – see https://github.com/yahoo/react-intl/blob/master/src/components/provider.js – so there's no way to create it outside of React and pass it into <IntlProvider>.

That would have been the sane approach; but in the absence of that, the only way to furnish the intl object to Stripes components (without requiring them to pluck it out of the context themselves as ui-users current does) is to have a component down inside <Root> pull it out of the context, make a new Stripes object that contains it, and arrange for that to be passed down to the lower-level components.

Mike Taylor August 17, 2017 at 11:44 AM

The problem is this: the intl object is furnished only inside the React component <IntlProvider> (which of course exists for precisely that purpose). But by the time we call that component inside <Root>, we've already created the Stripes object. I have made some attempts to have a lower-level React component modify the Stripes object that's established in the surrounding closure, but that is not working for reasons that are not clear to me.

Mike Taylor August 17, 2017 at 11:27 AM

This is proving extremely intractable.

I have code now in ui-users that translates a string outside the context of React: https://github.com/folio-org/ui-users/commit/7aab1368f22ce116a5b4b2c0c1370cf183b6c04b

But it's rather verbose:

What I want to be able to do is just:

but it's hard to get the intl object into the Stripes object.

Done

Details

Assignee

Reporter

Priority

Fix versions

TestRail: Cases

Open TestRail: Cases

TestRail: Runs

Open TestRail: Runs
Created August 15, 2017 at 4:13 PM
Updated August 28, 2017 at 12:43 PM
Resolved August 17, 2017 at 5:31 PM
TestRail: Cases
TestRail: Runs