Provide facility for translating strings in code, not just in HTML
Description
Environment
Potential Workaround
Checklist
hideTestRail: Results
Activity

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.
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, inui-organization/settings/index.js
we have:We'd like to provide translations for the settings labels, using some Stripes-provided function like: