Need support for DateTimeFormat/NumberFormat#formatToParts()

[zincli]

Is there any plan to support formatToParts()? We need this to style the price and the currency symbol...

Due to this issue#30 of ECMA402, formatToParts() already reached Stage 4. And the Intl Polyfill already have the implementations.

Maybe we could do some work to make this available in react-intl as an optional function?

@ericf I saw you in #30 and other related issues in react-intl. What do you think about this now?

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[stale]

Issue was closed because of inactivity. If you think this is still a valid issue, please file a new issue with additional information.

[tlvenn]

@zincli can you please re-open, pretty interested to see some support for this as well.

[longlho]

@zincli @tlvenn can u guys provide some use cases?

[tlvenn]

This was a pretty compelling use case: #874

[longlho]

hmm I'm considering adding a new component like <FormattedDateParts> instead of overloading <FormattedDate> so we can keep the types sane. WDYT?

cc @redonkulus

[redonkulus]

@longlho What would the API look like for this?

[longlho]

<FormattedDateParts>
	{(parts: Intl.DateTimeFormatPart[]) => (
		<b>{parts[0]}</b>
		{parts[1]}
		<small>{parts[2]}</small>
	)}
</FormattedDateParts>

although I'd like to learn more about this use case, because ordering of the parts along w/ length of the parts is non-deterministic (bc of different locale + bidi) so styling might be tricky? @tlvenn

[robrichard]

I think correct usage would be something like this:

<FormattedDateParts>
    {parts => parts.map(part => 
        <span className={`number-part-${part.type}`}>{part.value}<span>
    )}
</FormattedDateParts>

.number-part-integer {
    font-size: 14px;
}

.number-part-fraction {
    font-size: 10px;
}

[longlho]

yeah I got that, but I feel like the styling would still be fairly inconsistent cross-locale

Anw, this does fit w/ the intention of the original formatToParts proposal and supporting it isn't too bad so I've added it to the backlog.

3.2 is looking like this feature + /~https://github.com/formatjs/formatjs/tree/master/packages/intl-unified-numberformat would make it

[longlho]

react-intl@next should have this.

[mrijke]

What about a formatDateParts() function next to /~https://github.com/formatjs/react-intl/blob/master/docs/API.md#formatdate ? Or is this already available some other way in cases where using the <FormattedDate> component is not possible?