40 lines
993 B
TypeScript
40 lines
993 B
TypeScript
import React from 'react'
|
|
import { AppState } from '../../reducers'
|
|
import { connect } from 'react-redux'
|
|
import { Tooltip } from '@material-ui/core'
|
|
|
|
function NumberFormatter(props: { locale: string; value: number; grouping?: boolean }) {
|
|
let formatter: Intl.NumberFormat | undefined
|
|
|
|
const formatterOptions = { useGrouping: Boolean(props.grouping) }
|
|
const defaultFormatter = Intl.NumberFormat(undefined, formatterOptions)
|
|
|
|
try {
|
|
formatter = Intl.NumberFormat(props.locale, formatterOptions)
|
|
} catch {
|
|
// locale unknown
|
|
}
|
|
|
|
try {
|
|
const formatted = (formatter || defaultFormatter).format(props.value)
|
|
|
|
return (
|
|
<Tooltip title={props.value}>
|
|
<span>{formatted}</span>
|
|
</Tooltip>
|
|
)
|
|
} catch {
|
|
// localization fail, use fallback
|
|
}
|
|
|
|
return <span>props.value</span>
|
|
}
|
|
|
|
const mapStateToProps = (state: AppState) => {
|
|
return {
|
|
locale: state.settings.get('timeLocale'),
|
|
}
|
|
}
|
|
|
|
export default connect(mapStateToProps)(NumberFormatter)
|