React intl JSX.Element values (#25074)

* allow formatted message children to be a JSX Element

* tests for JSX.Element children

* lint
This commit is contained in:
Omar Diab
2018-04-24 17:03:16 -07:00
committed by Wesley Wigham
parent f958ca5669
commit 48e4b60094
2 changed files with 20 additions and 2 deletions
+1 -1
View File
@@ -142,7 +142,7 @@ declare namespace ReactIntl {
interface Props extends MessageDescriptor {
values?: {[key: string]: MessageValue | JSX.Element};
tagName?: string;
children?: (...formattedMessage: string[]) => React.ReactNode;
children?: (...formattedMessage: Array<string | JSX.Element>) => React.ReactNode;
}
}
class FormattedMessage extends React.Component<FormattedMessage.Props> { }
+19 -1
View File
@@ -154,7 +154,7 @@ class SomeComponent extends React.Component<SomeComponentProps & InjectedIntlPro
id="test"
description="Test"
>
{(text) => <input placeholder={text} />}
{(text) => <input placeholder={text as string} />}
</FormattedMessage>
<FormattedMessage
@@ -164,6 +164,24 @@ class SomeComponent extends React.Component<SomeComponentProps & InjectedIntlPro
{(...text) => <ul>{text.map(t => <li>{t}</li>)}</ul>}
</FormattedMessage>
<FormattedMessage
id="legal-statement"
values={{
privacy_policy: (
<a href="/privacy-policy">
<FormattedMessage id="request_invite.privacy_policy" />
</a>
),
terms_of_service: (
<a href="/terms-of-service">
<FormattedMessage id="request_invite.terms_of_service" />
</a>
)
}}
>
{(...messages) => messages.map(message => <>{message}</>)}
</FormattedMessage>
<FormattedHTMLMessage
id="test"
description="Test"