react-intl 4.4.0 → 4.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/dist/components/createFormattedComponent.js +3 -1
- package/dist/error.d.ts +1 -1
- package/dist/formatters/relativeTime.js +1 -4
- package/dist/react-intl.d.ts +2 -1
- package/dist/react-intl.js +31 -17
- package/dist/react-intl.js.map +1 -1
- package/dist/react-intl.min.js +1 -1
- package/dist/react-intl.min.js.map +1 -1
- package/lib/components/createFormattedComponent.js +3 -1
- package/lib/error.d.ts +1 -1
- package/lib/formatters/relativeTime.js +1 -4
- package/package.json +14 -21
- package/src/components/createFormattedComponent.tsx +50 -48
- package/src/components/injectIntl.tsx +32 -32
- package/src/components/message.tsx +29 -29
- package/src/components/plural.tsx +22 -22
- package/src/components/provider.tsx +36 -36
- package/src/components/relative.tsx +70 -70
- package/src/components/useIntl.ts +7 -7
- package/src/error.ts +25 -16
- package/src/formatters/dateTime.ts +25 -33
- package/src/formatters/displayName.ts +11 -11
- package/src/formatters/list.ts +29 -29
- package/src/formatters/message.ts +36 -36
- package/src/formatters/number.ts +15 -15
- package/src/formatters/plural.ts +10 -10
- package/src/formatters/relativeTime.ts +18 -19
- package/src/index.ts +47 -37
- package/src/tsconfig.cjs.json +8 -8
- package/src/tsconfig.json +7 -7
- package/src/types.ts +57 -57
- package/src/utils.ts +29 -24
- package/src/vendor.d.ts +1 -1
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import {IntlConfig, Formatters, IntlFormatters} from '../types'
|
|
2
|
-
import {filterProps} from '../utils'
|
|
1
|
+
import {IntlConfig, Formatters, IntlFormatters} from '../types'
|
|
2
|
+
import {filterProps} from '../utils'
|
|
3
3
|
import {
|
|
4
4
|
DisplayNamesOptions,
|
|
5
5
|
DisplayNames as IntlDisplayNames,
|
|
6
|
-
} from '@formatjs/intl-displaynames'
|
|
7
|
-
import {FormatError, ErrorCode} from 'intl-messageformat'
|
|
8
|
-
import {ReactIntlErrorCode, ReactIntlError} from '../error'
|
|
6
|
+
} from '@formatjs/intl-displaynames'
|
|
7
|
+
import {FormatError, ErrorCode} from 'intl-messageformat'
|
|
8
|
+
import {ReactIntlErrorCode, ReactIntlError} from '../error'
|
|
9
9
|
|
|
10
10
|
const DISPLAY_NAMES_OPTONS: Array<keyof DisplayNamesOptions> = [
|
|
11
11
|
'localeMatcher',
|
|
12
12
|
'style',
|
|
13
13
|
'type',
|
|
14
14
|
'fallback',
|
|
15
|
-
]
|
|
15
|
+
]
|
|
16
16
|
|
|
17
17
|
export function formatDisplayName(
|
|
18
18
|
{locale, onError}: Pick<IntlConfig, 'locale' | 'onError'>,
|
|
@@ -20,7 +20,7 @@ export function formatDisplayName(
|
|
|
20
20
|
value: Parameters<IntlFormatters['formatDisplayName']>[0],
|
|
21
21
|
options: Parameters<IntlFormatters['formatDisplayName']>[1] = {}
|
|
22
22
|
): string | undefined {
|
|
23
|
-
const DisplayNames: typeof IntlDisplayNames = (Intl as any).DisplayNames
|
|
23
|
+
const DisplayNames: typeof IntlDisplayNames = (Intl as any).DisplayNames
|
|
24
24
|
if (!DisplayNames) {
|
|
25
25
|
onError(
|
|
26
26
|
new FormatError(
|
|
@@ -29,11 +29,11 @@ Try polyfilling it using "@formatjs/intl-displaynames"
|
|
|
29
29
|
`,
|
|
30
30
|
ErrorCode.MISSING_INTL_API
|
|
31
31
|
)
|
|
32
|
-
)
|
|
32
|
+
)
|
|
33
33
|
}
|
|
34
|
-
const filteredOptions = filterProps(options, DISPLAY_NAMES_OPTONS)
|
|
34
|
+
const filteredOptions = filterProps(options, DISPLAY_NAMES_OPTONS)
|
|
35
35
|
try {
|
|
36
|
-
return getDisplayNames(locale, filteredOptions).of(value)
|
|
36
|
+
return getDisplayNames(locale, filteredOptions).of(value)
|
|
37
37
|
} catch (e) {
|
|
38
38
|
onError(
|
|
39
39
|
new ReactIntlError(
|
|
@@ -41,6 +41,6 @@ Try polyfilling it using "@formatjs/intl-displaynames"
|
|
|
41
41
|
'Error formatting display name.',
|
|
42
42
|
e
|
|
43
43
|
)
|
|
44
|
-
)
|
|
44
|
+
)
|
|
45
45
|
}
|
|
46
46
|
}
|
package/src/formatters/list.ts
CHANGED
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
import * as React from 'react'
|
|
2
|
-
import {IntlConfig, Formatters, IntlFormatters} from '../types'
|
|
3
|
-
import {filterProps} from '../utils'
|
|
4
|
-
import IntlListFormat, {IntlListFormatOptions} from '@formatjs/intl-listformat'
|
|
5
|
-
import {FormatError, ErrorCode} from 'intl-messageformat'
|
|
6
|
-
import {ReactIntlError, ReactIntlErrorCode} from '../error'
|
|
1
|
+
import * as React from 'react'
|
|
2
|
+
import {IntlConfig, Formatters, IntlFormatters} from '../types'
|
|
3
|
+
import {filterProps} from '../utils'
|
|
4
|
+
import IntlListFormat, {IntlListFormatOptions} from '@formatjs/intl-listformat'
|
|
5
|
+
import {FormatError, ErrorCode} from 'intl-messageformat'
|
|
6
|
+
import {ReactIntlError, ReactIntlErrorCode} from '../error'
|
|
7
7
|
|
|
8
8
|
const LIST_FORMAT_OPTIONS: Array<keyof IntlListFormatOptions> = [
|
|
9
9
|
'localeMatcher',
|
|
10
10
|
'type',
|
|
11
11
|
'style',
|
|
12
|
-
]
|
|
12
|
+
]
|
|
13
13
|
|
|
14
|
-
const now = Date.now()
|
|
14
|
+
const now = Date.now()
|
|
15
15
|
|
|
16
16
|
function generateToken(i: number): string {
|
|
17
|
-
return `${now}_${i}_${now}
|
|
17
|
+
return `${now}_${i}_${now}`
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
export function formatList(
|
|
@@ -22,14 +22,14 @@ export function formatList(
|
|
|
22
22
|
getListFormat: Formatters['getListFormat'],
|
|
23
23
|
values: Array<string>,
|
|
24
24
|
options: Parameters<IntlFormatters['formatList']>[1]
|
|
25
|
-
): string
|
|
25
|
+
): string
|
|
26
26
|
export function formatList(
|
|
27
27
|
{locale, onError}: Pick<IntlConfig, 'locale' | 'onError'>,
|
|
28
28
|
getListFormat: Formatters['getListFormat'],
|
|
29
29
|
values: Parameters<IntlFormatters['formatList']>[0],
|
|
30
30
|
options: Parameters<IntlFormatters['formatList']>[1] = {}
|
|
31
31
|
): React.ReactNode {
|
|
32
|
-
const ListFormat: typeof IntlListFormat = (Intl as any).ListFormat
|
|
32
|
+
const ListFormat: typeof IntlListFormat = (Intl as any).ListFormat
|
|
33
33
|
if (!ListFormat) {
|
|
34
34
|
onError(
|
|
35
35
|
new FormatError(
|
|
@@ -38,37 +38,37 @@ Try polyfilling it using "@formatjs/intl-listformat"
|
|
|
38
38
|
`,
|
|
39
39
|
ErrorCode.MISSING_INTL_API
|
|
40
40
|
)
|
|
41
|
-
)
|
|
41
|
+
)
|
|
42
42
|
}
|
|
43
|
-
const filteredOptions = filterProps(options, LIST_FORMAT_OPTIONS)
|
|
43
|
+
const filteredOptions = filterProps(options, LIST_FORMAT_OPTIONS)
|
|
44
44
|
|
|
45
45
|
try {
|
|
46
|
-
const richValues: Record<string, React.ReactNode> = {}
|
|
46
|
+
const richValues: Record<string, React.ReactNode> = {}
|
|
47
47
|
const serializedValues = values.map((v, i) => {
|
|
48
48
|
if (typeof v === 'object') {
|
|
49
|
-
const id = generateToken(i)
|
|
50
|
-
richValues[id] = v
|
|
51
|
-
return id
|
|
49
|
+
const id = generateToken(i)
|
|
50
|
+
richValues[id] = v
|
|
51
|
+
return id
|
|
52
52
|
}
|
|
53
|
-
return String(v)
|
|
54
|
-
})
|
|
53
|
+
return String(v)
|
|
54
|
+
})
|
|
55
55
|
if (!Object.keys(richValues).length) {
|
|
56
|
-
return getListFormat(locale, filteredOptions).format(serializedValues)
|
|
56
|
+
return getListFormat(locale, filteredOptions).format(serializedValues)
|
|
57
57
|
}
|
|
58
58
|
const parts = getListFormat(locale, filteredOptions).formatToParts(
|
|
59
59
|
serializedValues
|
|
60
|
-
)
|
|
60
|
+
)
|
|
61
61
|
return parts.reduce((all: Array<string | React.ReactNode>, el) => {
|
|
62
|
-
const val = el.value
|
|
62
|
+
const val = el.value
|
|
63
63
|
if (richValues[val]) {
|
|
64
|
-
all.push(richValues[val])
|
|
64
|
+
all.push(richValues[val])
|
|
65
65
|
} else if (typeof all[all.length - 1] === 'string') {
|
|
66
|
-
all[all.length - 1] += val
|
|
66
|
+
all[all.length - 1] += val
|
|
67
67
|
} else {
|
|
68
|
-
all.push(val)
|
|
68
|
+
all.push(val)
|
|
69
69
|
}
|
|
70
|
-
return all
|
|
71
|
-
}, [])
|
|
70
|
+
return all
|
|
71
|
+
}, [])
|
|
72
72
|
} catch (e) {
|
|
73
73
|
onError(
|
|
74
74
|
new ReactIntlError(
|
|
@@ -76,8 +76,8 @@ Try polyfilling it using "@formatjs/intl-listformat"
|
|
|
76
76
|
'Error formatting list.',
|
|
77
77
|
e
|
|
78
78
|
)
|
|
79
|
-
)
|
|
79
|
+
)
|
|
80
80
|
}
|
|
81
81
|
|
|
82
|
-
return values
|
|
82
|
+
return values
|
|
83
83
|
}
|
|
@@ -4,21 +4,21 @@
|
|
|
4
4
|
* See the accompanying LICENSE file for terms.
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
|
-
import * as React from 'react'
|
|
8
|
-
import {invariant} from '@formatjs/intl-utils'
|
|
7
|
+
import * as React from 'react'
|
|
8
|
+
import {invariant} from '@formatjs/intl-utils'
|
|
9
9
|
|
|
10
10
|
import {
|
|
11
11
|
Formatters,
|
|
12
12
|
IntlConfig,
|
|
13
13
|
MessageDescriptor,
|
|
14
14
|
CustomFormats,
|
|
15
|
-
} from '../types'
|
|
15
|
+
} from '../types'
|
|
16
16
|
|
|
17
17
|
import IntlMessageFormat, {
|
|
18
18
|
FormatXMLElementFn,
|
|
19
19
|
PrimitiveType,
|
|
20
|
-
} from 'intl-messageformat'
|
|
21
|
-
import {ReactIntlError, ReactIntlErrorCode} from '../error'
|
|
20
|
+
} from 'intl-messageformat'
|
|
21
|
+
import {ReactIntlError, ReactIntlErrorCode} from '../error'
|
|
22
22
|
|
|
23
23
|
function setTimeZoneInOptions(
|
|
24
24
|
opts: Record<string, Intl.DateTimeFormatOptions>,
|
|
@@ -29,25 +29,25 @@ function setTimeZoneInOptions(
|
|
|
29
29
|
all[k] = {
|
|
30
30
|
timeZone,
|
|
31
31
|
...opts[k],
|
|
32
|
-
}
|
|
33
|
-
return all
|
|
32
|
+
}
|
|
33
|
+
return all
|
|
34
34
|
},
|
|
35
35
|
{}
|
|
36
|
-
)
|
|
36
|
+
)
|
|
37
37
|
}
|
|
38
38
|
|
|
39
39
|
function deepMergeOptions(
|
|
40
40
|
opts1: Record<string, Intl.DateTimeFormatOptions>,
|
|
41
41
|
opts2: Record<string, Intl.DateTimeFormatOptions>
|
|
42
42
|
): Record<string, Intl.DateTimeFormatOptions> {
|
|
43
|
-
const keys = Object.keys({...opts1, ...opts2})
|
|
43
|
+
const keys = Object.keys({...opts1, ...opts2})
|
|
44
44
|
return keys.reduce((all: Record<string, Intl.DateTimeFormatOptions>, k) => {
|
|
45
45
|
all[k] = {
|
|
46
46
|
...(opts1[k] || {}),
|
|
47
47
|
...(opts2[k] || {}),
|
|
48
|
-
}
|
|
49
|
-
return all
|
|
50
|
-
}, {})
|
|
48
|
+
}
|
|
49
|
+
return all
|
|
50
|
+
}, {})
|
|
51
51
|
}
|
|
52
52
|
|
|
53
53
|
function deepMergeFormatsAndSetTimeZone(
|
|
@@ -55,9 +55,9 @@ function deepMergeFormatsAndSetTimeZone(
|
|
|
55
55
|
timeZone?: string
|
|
56
56
|
): CustomFormats {
|
|
57
57
|
if (!timeZone) {
|
|
58
|
-
return f1
|
|
58
|
+
return f1
|
|
59
59
|
}
|
|
60
|
-
const mfFormats = IntlMessageFormat.formats
|
|
60
|
+
const mfFormats = IntlMessageFormat.formats
|
|
61
61
|
return {
|
|
62
62
|
...mfFormats,
|
|
63
63
|
...f1,
|
|
@@ -69,13 +69,13 @@ function deepMergeFormatsAndSetTimeZone(
|
|
|
69
69
|
setTimeZoneInOptions(mfFormats.time, timeZone),
|
|
70
70
|
setTimeZoneInOptions(f1.time || {}, timeZone)
|
|
71
71
|
),
|
|
72
|
-
}
|
|
72
|
+
}
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
function prepareIntlMessageFormatHtmlOutput(
|
|
76
76
|
chunks: React.ReactNodeArray
|
|
77
77
|
): React.ReactElement {
|
|
78
|
-
return React.createElement(React.Fragment, null, ...chunks)
|
|
78
|
+
return React.createElement(React.Fragment, null, ...chunks)
|
|
79
79
|
}
|
|
80
80
|
|
|
81
81
|
export function formatMessage(
|
|
@@ -98,7 +98,7 @@ export function formatMessage(
|
|
|
98
98
|
state: Formatters,
|
|
99
99
|
messageDescriptor?: MessageDescriptor,
|
|
100
100
|
values?: Record<string, PrimitiveType>
|
|
101
|
-
): string
|
|
101
|
+
): string
|
|
102
102
|
export function formatMessage(
|
|
103
103
|
{
|
|
104
104
|
locale,
|
|
@@ -131,23 +131,23 @@ export function formatMessage(
|
|
|
131
131
|
>
|
|
132
132
|
| undefined = {}
|
|
133
133
|
): React.ReactNode {
|
|
134
|
-
const {id, defaultMessage} = messageDescriptor
|
|
134
|
+
const {id, defaultMessage} = messageDescriptor
|
|
135
135
|
|
|
136
136
|
// `id` is a required field of a Message Descriptor.
|
|
137
|
-
invariant(!!id, '[React Intl] An `id` must be provided to format a message.')
|
|
138
|
-
const message = messages && messages[String(id)]
|
|
139
|
-
formats = deepMergeFormatsAndSetTimeZone(formats, timeZone)
|
|
140
|
-
defaultFormats = deepMergeFormatsAndSetTimeZone(defaultFormats, timeZone)
|
|
137
|
+
invariant(!!id, '[React Intl] An `id` must be provided to format a message.')
|
|
138
|
+
const message = messages && messages[String(id)]
|
|
139
|
+
formats = deepMergeFormatsAndSetTimeZone(formats, timeZone)
|
|
140
|
+
defaultFormats = deepMergeFormatsAndSetTimeZone(defaultFormats, timeZone)
|
|
141
141
|
|
|
142
|
-
let formattedMessageParts: React.ReactNode = ''
|
|
142
|
+
let formattedMessageParts: React.ReactNode = ''
|
|
143
143
|
|
|
144
144
|
if (message) {
|
|
145
145
|
try {
|
|
146
146
|
const formatter = state.getMessageFormat(message, locale, formats, {
|
|
147
147
|
formatters: state,
|
|
148
|
-
})
|
|
148
|
+
})
|
|
149
149
|
|
|
150
|
-
formattedMessageParts = formatter.format<React.ReactNode>(values)
|
|
150
|
+
formattedMessageParts = formatter.format<React.ReactNode>(values)
|
|
151
151
|
} catch (e) {
|
|
152
152
|
onError(
|
|
153
153
|
new ReactIntlError(
|
|
@@ -157,7 +157,7 @@ export function formatMessage(
|
|
|
157
157
|
messageDescriptor,
|
|
158
158
|
e
|
|
159
159
|
)
|
|
160
|
-
)
|
|
160
|
+
)
|
|
161
161
|
}
|
|
162
162
|
} else if (
|
|
163
163
|
!defaultMessage ||
|
|
@@ -173,7 +173,7 @@ export function formatMessage(
|
|
|
173
173
|
(defaultMessage ? ', using default message as fallback.' : ''),
|
|
174
174
|
messageDescriptor
|
|
175
175
|
)
|
|
176
|
-
)
|
|
176
|
+
)
|
|
177
177
|
}
|
|
178
178
|
|
|
179
179
|
if (!formattedMessageParts && defaultMessage) {
|
|
@@ -182,9 +182,9 @@ export function formatMessage(
|
|
|
182
182
|
defaultMessage,
|
|
183
183
|
defaultLocale,
|
|
184
184
|
defaultFormats
|
|
185
|
-
)
|
|
185
|
+
)
|
|
186
186
|
|
|
187
|
-
formattedMessageParts = formatter.format(values)
|
|
187
|
+
formattedMessageParts = formatter.format(values)
|
|
188
188
|
} catch (e) {
|
|
189
189
|
onError(
|
|
190
190
|
new ReactIntlError(
|
|
@@ -193,7 +193,7 @@ export function formatMessage(
|
|
|
193
193
|
messageDescriptor,
|
|
194
194
|
e
|
|
195
195
|
)
|
|
196
|
-
)
|
|
196
|
+
)
|
|
197
197
|
}
|
|
198
198
|
}
|
|
199
199
|
|
|
@@ -207,17 +207,17 @@ export function formatMessage(
|
|
|
207
207
|
} as fallback.`,
|
|
208
208
|
messageDescriptor
|
|
209
209
|
)
|
|
210
|
-
)
|
|
210
|
+
)
|
|
211
211
|
if (typeof message === 'string') {
|
|
212
|
-
return message || defaultMessage || String(id)
|
|
212
|
+
return message || defaultMessage || String(id)
|
|
213
213
|
}
|
|
214
|
-
return defaultMessage || String(id)
|
|
214
|
+
return defaultMessage || String(id)
|
|
215
215
|
}
|
|
216
216
|
if (Array.isArray(formattedMessageParts)) {
|
|
217
217
|
if (wrapRichTextChunksInFragment) {
|
|
218
|
-
return prepareIntlMessageFormatHtmlOutput(formattedMessageParts)
|
|
218
|
+
return prepareIntlMessageFormatHtmlOutput(formattedMessageParts)
|
|
219
219
|
}
|
|
220
|
-
return formattedMessageParts
|
|
220
|
+
return formattedMessageParts
|
|
221
221
|
}
|
|
222
|
-
return formattedMessageParts as React.ReactNode
|
|
222
|
+
return formattedMessageParts as React.ReactNode
|
|
223
223
|
}
|
package/src/formatters/number.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {IntlConfig, Formatters, IntlFormatters} from '../types'
|
|
2
|
-
import {getNamedFormat, filterProps} from '../utils'
|
|
3
|
-
import {UnifiedNumberFormatOptions} from '@formatjs/intl-unified-numberformat'
|
|
4
|
-
import {ReactIntlError, ReactIntlErrorCode} from '../error'
|
|
1
|
+
import {IntlConfig, Formatters, IntlFormatters} from '../types'
|
|
2
|
+
import {getNamedFormat, filterProps} from '../utils'
|
|
3
|
+
import {UnifiedNumberFormatOptions} from '@formatjs/intl-unified-numberformat'
|
|
4
|
+
import {ReactIntlError, ReactIntlErrorCode} from '../error'
|
|
5
5
|
|
|
6
6
|
const NUMBER_FORMAT_OPTIONS: Array<keyof UnifiedNumberFormatOptions> = [
|
|
7
7
|
'localeMatcher',
|
|
@@ -27,7 +27,7 @@ const NUMBER_FORMAT_OPTIONS: Array<keyof UnifiedNumberFormatOptions> = [
|
|
|
27
27
|
'signDisplay',
|
|
28
28
|
'unit',
|
|
29
29
|
'unitDisplay',
|
|
30
|
-
]
|
|
30
|
+
]
|
|
31
31
|
|
|
32
32
|
export function getFormatter(
|
|
33
33
|
{
|
|
@@ -38,13 +38,13 @@ export function getFormatter(
|
|
|
38
38
|
getNumberFormat: Formatters['getNumberFormat'],
|
|
39
39
|
options: Parameters<IntlFormatters['formatNumber']>[1] = {}
|
|
40
40
|
): Intl.NumberFormat {
|
|
41
|
-
const {format} = options
|
|
41
|
+
const {format} = options
|
|
42
42
|
const defaults = ((format &&
|
|
43
43
|
getNamedFormat(formats!, 'number', format, onError)) ||
|
|
44
|
-
{}) as UnifiedNumberFormatOptions
|
|
45
|
-
const filteredOptions = filterProps(options, NUMBER_FORMAT_OPTIONS, defaults)
|
|
44
|
+
{}) as UnifiedNumberFormatOptions
|
|
45
|
+
const filteredOptions = filterProps(options, NUMBER_FORMAT_OPTIONS, defaults)
|
|
46
46
|
|
|
47
|
-
return getNumberFormat(locale, filteredOptions)
|
|
47
|
+
return getNumberFormat(locale, filteredOptions)
|
|
48
48
|
}
|
|
49
49
|
|
|
50
50
|
export function formatNumber(
|
|
@@ -54,7 +54,7 @@ export function formatNumber(
|
|
|
54
54
|
options: Parameters<IntlFormatters['formatNumber']>[1] = {}
|
|
55
55
|
): string {
|
|
56
56
|
try {
|
|
57
|
-
return getFormatter(config, getNumberFormat, options).format(value)
|
|
57
|
+
return getFormatter(config, getNumberFormat, options).format(value)
|
|
58
58
|
} catch (e) {
|
|
59
59
|
config.onError(
|
|
60
60
|
new ReactIntlError(
|
|
@@ -62,10 +62,10 @@ export function formatNumber(
|
|
|
62
62
|
'Error formatting number.',
|
|
63
63
|
e
|
|
64
64
|
)
|
|
65
|
-
)
|
|
65
|
+
)
|
|
66
66
|
}
|
|
67
67
|
|
|
68
|
-
return String(value)
|
|
68
|
+
return String(value)
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
export function formatNumberToParts(
|
|
@@ -75,7 +75,7 @@ export function formatNumberToParts(
|
|
|
75
75
|
options: Parameters<IntlFormatters['formatNumber']>[1] = {}
|
|
76
76
|
): Intl.NumberFormatPart[] {
|
|
77
77
|
try {
|
|
78
|
-
return getFormatter(config, getNumberFormat, options).formatToParts(value)
|
|
78
|
+
return getFormatter(config, getNumberFormat, options).formatToParts(value)
|
|
79
79
|
} catch (e) {
|
|
80
80
|
config.onError(
|
|
81
81
|
new ReactIntlError(
|
|
@@ -83,8 +83,8 @@ export function formatNumberToParts(
|
|
|
83
83
|
'Error formatting number.',
|
|
84
84
|
e
|
|
85
85
|
)
|
|
86
|
-
)
|
|
86
|
+
)
|
|
87
87
|
}
|
|
88
88
|
|
|
89
|
-
return []
|
|
89
|
+
return []
|
|
90
90
|
}
|
package/src/formatters/plural.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import {IntlConfig, Formatters, IntlFormatters} from '../types'
|
|
2
|
-
import {filterProps} from '../utils'
|
|
3
|
-
import {ReactIntlErrorCode, ReactIntlError} from '../error'
|
|
4
|
-
import {FormatError, ErrorCode} from 'intl-messageformat'
|
|
1
|
+
import {IntlConfig, Formatters, IntlFormatters} from '../types'
|
|
2
|
+
import {filterProps} from '../utils'
|
|
3
|
+
import {ReactIntlErrorCode, ReactIntlError} from '../error'
|
|
4
|
+
import {FormatError, ErrorCode} from 'intl-messageformat'
|
|
5
5
|
|
|
6
6
|
const PLURAL_FORMAT_OPTIONS: Array<keyof Intl.PluralRulesOptions> = [
|
|
7
7
|
'localeMatcher',
|
|
8
8
|
'type',
|
|
9
|
-
]
|
|
9
|
+
]
|
|
10
10
|
|
|
11
11
|
export function formatPlural(
|
|
12
12
|
{locale, onError}: Pick<IntlConfig, 'locale' | 'onError'>,
|
|
@@ -22,12 +22,12 @@ Try polyfilling it using "@formatjs/intl-pluralrules"
|
|
|
22
22
|
`,
|
|
23
23
|
ErrorCode.MISSING_INTL_API
|
|
24
24
|
)
|
|
25
|
-
)
|
|
25
|
+
)
|
|
26
26
|
}
|
|
27
|
-
const filteredOptions = filterProps(options, PLURAL_FORMAT_OPTIONS)
|
|
27
|
+
const filteredOptions = filterProps(options, PLURAL_FORMAT_OPTIONS)
|
|
28
28
|
|
|
29
29
|
try {
|
|
30
|
-
return getPluralRules(locale, filteredOptions).select(value)
|
|
30
|
+
return getPluralRules(locale, filteredOptions).select(value)
|
|
31
31
|
} catch (e) {
|
|
32
32
|
onError(
|
|
33
33
|
new ReactIntlError(
|
|
@@ -35,8 +35,8 @@ Try polyfilling it using "@formatjs/intl-pluralrules"
|
|
|
35
35
|
'Error formatting plural.',
|
|
36
36
|
e
|
|
37
37
|
)
|
|
38
|
-
)
|
|
38
|
+
)
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
-
return 'other'
|
|
41
|
+
return 'other'
|
|
42
42
|
}
|
|
@@ -1,16 +1,15 @@
|
|
|
1
|
-
import {IntlConfig, IntlFormatters, Formatters} from '../types'
|
|
1
|
+
import {IntlConfig, IntlFormatters, Formatters} from '../types'
|
|
2
2
|
|
|
3
|
-
import {getNamedFormat, filterProps} from '../utils'
|
|
3
|
+
import {getNamedFormat, filterProps} from '../utils'
|
|
4
4
|
import RelativeTimeFormat, {
|
|
5
5
|
IntlRelativeTimeFormatOptions,
|
|
6
|
-
} from '@formatjs/intl-relativetimeformat'
|
|
7
|
-
import {FormatError, ErrorCode} from 'intl-messageformat'
|
|
8
|
-
import {ReactIntlError, ReactIntlErrorCode} from '../error'
|
|
6
|
+
} from '@formatjs/intl-relativetimeformat'
|
|
7
|
+
import {FormatError, ErrorCode} from 'intl-messageformat'
|
|
8
|
+
import {ReactIntlError, ReactIntlErrorCode} from '../error'
|
|
9
9
|
|
|
10
|
-
const RELATIVE_TIME_FORMAT_OPTIONS: Array<
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
];
|
|
10
|
+
const RELATIVE_TIME_FORMAT_OPTIONS: Array<
|
|
11
|
+
keyof IntlRelativeTimeFormatOptions
|
|
12
|
+
> = ['numeric', 'style']
|
|
14
13
|
|
|
15
14
|
function getFormatter(
|
|
16
15
|
{
|
|
@@ -21,17 +20,17 @@ function getFormatter(
|
|
|
21
20
|
getRelativeTimeFormat: Formatters['getRelativeTimeFormat'],
|
|
22
21
|
options: Parameters<IntlFormatters['formatRelativeTime']>[2] = {}
|
|
23
22
|
): RelativeTimeFormat {
|
|
24
|
-
const {format} = options
|
|
23
|
+
const {format} = options
|
|
25
24
|
|
|
26
25
|
const defaults =
|
|
27
|
-
(!!format && getNamedFormat(formats, 'relative', format, onError)) || {}
|
|
26
|
+
(!!format && getNamedFormat(formats, 'relative', format, onError)) || {}
|
|
28
27
|
const filteredOptions = filterProps(
|
|
29
28
|
options,
|
|
30
29
|
RELATIVE_TIME_FORMAT_OPTIONS,
|
|
31
30
|
defaults as IntlRelativeTimeFormatOptions
|
|
32
|
-
)
|
|
31
|
+
)
|
|
33
32
|
|
|
34
|
-
return getRelativeTimeFormat(locale, filteredOptions)
|
|
33
|
+
return getRelativeTimeFormat(locale, filteredOptions)
|
|
35
34
|
}
|
|
36
35
|
|
|
37
36
|
export function formatRelativeTime(
|
|
@@ -42,9 +41,9 @@ export function formatRelativeTime(
|
|
|
42
41
|
options: Parameters<IntlFormatters['formatRelativeTime']>[2] = {}
|
|
43
42
|
): string {
|
|
44
43
|
if (!unit) {
|
|
45
|
-
unit = 'second'
|
|
44
|
+
unit = 'second'
|
|
46
45
|
}
|
|
47
|
-
const RelativeTimeFormat = (Intl as any).RelativeTimeFormat
|
|
46
|
+
const RelativeTimeFormat = (Intl as any).RelativeTimeFormat
|
|
48
47
|
if (!RelativeTimeFormat) {
|
|
49
48
|
config.onError(
|
|
50
49
|
new FormatError(
|
|
@@ -53,13 +52,13 @@ Try polyfilling it using "@formatjs/intl-relativetimeformat"
|
|
|
53
52
|
`,
|
|
54
53
|
ErrorCode.MISSING_INTL_API
|
|
55
54
|
)
|
|
56
|
-
)
|
|
55
|
+
)
|
|
57
56
|
}
|
|
58
57
|
try {
|
|
59
58
|
return getFormatter(config, getRelativeTimeFormat, options).format(
|
|
60
59
|
value,
|
|
61
60
|
unit
|
|
62
|
-
)
|
|
61
|
+
)
|
|
63
62
|
} catch (e) {
|
|
64
63
|
config.onError(
|
|
65
64
|
new ReactIntlError(
|
|
@@ -67,8 +66,8 @@ Try polyfilling it using "@formatjs/intl-relativetimeformat"
|
|
|
67
66
|
'Error formatting relative time.',
|
|
68
67
|
e
|
|
69
68
|
)
|
|
70
|
-
)
|
|
69
|
+
)
|
|
71
70
|
}
|
|
72
71
|
|
|
73
|
-
return String(value)
|
|
72
|
+
return String(value)
|
|
74
73
|
}
|
package/src/index.ts
CHANGED
|
@@ -3,59 +3,69 @@
|
|
|
3
3
|
* Copyrights licensed under the New BSD License.
|
|
4
4
|
* See the accompanying LICENSE file for terms.
|
|
5
5
|
*/
|
|
6
|
-
import * as React from 'react'
|
|
7
|
-
export * from './types'
|
|
6
|
+
import * as React from 'react'
|
|
7
|
+
export * from './types'
|
|
8
8
|
export function defineMessages<T, U extends Record<string, T>>(msgs: U): U {
|
|
9
|
-
return msgs
|
|
9
|
+
return msgs
|
|
10
10
|
}
|
|
11
11
|
export function defineMessage<T>(msg: T): T {
|
|
12
|
-
return msg
|
|
12
|
+
return msg
|
|
13
13
|
}
|
|
14
14
|
import {
|
|
15
15
|
createFormattedComponent,
|
|
16
16
|
createFormattedDateTimePartsComponent,
|
|
17
|
-
} from './components/createFormattedComponent'
|
|
18
|
-
import {CustomFormatConfig} from './types'
|
|
19
|
-
import {UnifiedNumberFormatOptions} from '@formatjs/intl-unified-numberformat'
|
|
20
|
-
import {IntlListFormatOptions} from '@formatjs/intl-listformat'
|
|
21
|
-
import {DisplayNamesOptions} from '@formatjs/intl-displaynames/lib'
|
|
17
|
+
} from './components/createFormattedComponent'
|
|
18
|
+
import {CustomFormatConfig} from './types'
|
|
19
|
+
import {UnifiedNumberFormatOptions} from '@formatjs/intl-unified-numberformat'
|
|
20
|
+
import {IntlListFormatOptions} from '@formatjs/intl-listformat'
|
|
21
|
+
import {DisplayNamesOptions} from '@formatjs/intl-displaynames/lib'
|
|
22
22
|
export {
|
|
23
23
|
default as injectIntl,
|
|
24
24
|
Provider as RawIntlProvider,
|
|
25
25
|
Context as IntlContext,
|
|
26
26
|
WithIntlProps,
|
|
27
27
|
WrappedComponentProps,
|
|
28
|
-
} from './components/injectIntl'
|
|
29
|
-
export {default as useIntl} from './components/useIntl'
|
|
30
|
-
export {default as IntlProvider, createIntl} from './components/provider'
|
|
28
|
+
} from './components/injectIntl'
|
|
29
|
+
export {default as useIntl} from './components/useIntl'
|
|
30
|
+
export {default as IntlProvider, createIntl} from './components/provider'
|
|
31
31
|
// IMPORTANT: Explicit here to prevent api-extractor from outputing `import('./types').CustomFormatConfig`
|
|
32
|
-
export const FormattedDate: React.FC<
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
export const
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
32
|
+
export const FormattedDate: React.FC<
|
|
33
|
+
Intl.DateTimeFormatOptions &
|
|
34
|
+
CustomFormatConfig & {
|
|
35
|
+
value: string | number | Date | undefined
|
|
36
|
+
}
|
|
37
|
+
> = createFormattedComponent('formatDate')
|
|
38
|
+
export const FormattedTime: React.FC<
|
|
39
|
+
Intl.DateTimeFormatOptions &
|
|
40
|
+
CustomFormatConfig & {
|
|
41
|
+
value: string | number | Date | undefined
|
|
42
|
+
}
|
|
43
|
+
> = createFormattedComponent('formatTime')
|
|
44
|
+
export const FormattedNumber: React.FC<
|
|
45
|
+
UnifiedNumberFormatOptions &
|
|
46
|
+
CustomFormatConfig & {
|
|
47
|
+
value: number
|
|
48
|
+
}
|
|
49
|
+
> = createFormattedComponent('formatNumber')
|
|
50
|
+
export const FormattedList: React.FC<
|
|
51
|
+
IntlListFormatOptions & {
|
|
52
|
+
value: React.ReactNode[]
|
|
53
|
+
}
|
|
54
|
+
> = createFormattedComponent('formatList')
|
|
55
|
+
export const FormattedDisplayName: React.FC<
|
|
56
|
+
DisplayNamesOptions & {
|
|
57
|
+
value: string | number | object
|
|
58
|
+
}
|
|
59
|
+
> = createFormattedComponent('formatDisplayName')
|
|
50
60
|
export const FormattedDateParts = createFormattedDateTimePartsComponent(
|
|
51
61
|
'formatDate'
|
|
52
|
-
)
|
|
62
|
+
)
|
|
53
63
|
export const FormattedTimeParts = createFormattedDateTimePartsComponent(
|
|
54
64
|
'formatTime'
|
|
55
|
-
)
|
|
56
|
-
export {FormattedNumberParts} from './components/createFormattedComponent'
|
|
57
|
-
export {default as FormattedRelativeTime} from './components/relative'
|
|
58
|
-
export {default as FormattedPlural} from './components/plural'
|
|
59
|
-
export {default as FormattedMessage} from './components/message'
|
|
60
|
-
export {createIntlCache} from './utils'
|
|
65
|
+
)
|
|
66
|
+
export {FormattedNumberParts} from './components/createFormattedComponent'
|
|
67
|
+
export {default as FormattedRelativeTime} from './components/relative'
|
|
68
|
+
export {default as FormattedPlural} from './components/plural'
|
|
69
|
+
export {default as FormattedMessage} from './components/message'
|
|
70
|
+
export {createIntlCache} from './utils'
|
|
61
71
|
export {ReactIntlError, ReactIntlErrorCode} from './error'
|