Add ability to use elements in Translate interpolation options

[fzaninotto]

Problem

<Translate> supports string interpolation:

const messages = {
    custom: {
        hello_world: 'Hello, %{name}!',
    },
};

<Translate i18nKey="custom.hello_world" options={{ name: 'John' }} />
// Hello, John!

But it does not allow to use a React element in interpolatino:

const messages = {
    custom: {
        hello_world: 'Hello, %{name}!',
    },
};

<Translate i18nKey="custom.hello_world" options={{ name: <RecordRepresentation /> }} />
// Hello, John Doe!

Solution

Replace element options with placeholders, then pass the options to the translation provider, then replace the placeholders back with elements.

How To Test

http://localhost:9010/?path=/story/ra-i18n-polyglot--translate-with-react-element&args=locale:fr

Additional Checks

• The PR targets master for a bugfix or a documentation fix, or next for a feature
• The PR includes unit tests (if not possible, describe why)
• The PR includes one or several stories (if not possible, describe why)
• The documentation is up to date

[ThieryMichel]

How about adding useMemo around all those computations.

[fzaninotto]

When calling <Translate key="foo" options={{ name: <NameField /> }} />, the options prop receives a new object on every render, so useMemo will always recompute. The memo is effectively useless for the most common usage pattern.

Besides, we don't know if this computation is costly. Premature optimization?