import * as React from 'react' ; import { memo , FC } from 'react' ; import PropTypes from 'prop-types' ; import get from 'lodash/get' ; import Typography , { TypographyProps } from '@material-ui/core/Typography' ; import { useRecordContext } from 'ra-core' ; import sanitizeFieldRestProps from './sanitizeFieldRestProps' ; import { PublicFieldProps , InjectedFieldProps , fieldPropTypes } from './types' ; const hasNumberFormat = ! ! ( typeof Intl === 'object' && Intl && typeof Intl . NumberFormat === 'function' ) ; see https example export const NumberField = memo ( props => { const { className , emptyText , source , locales , options , textAlign , ... rest } = props ; const record = useRecordContext ( props ) ; if ( ! record ) { return null ; } const value = get ( record , source ) ; if ( value == null ) { return emptyText ? ( < Typography component = "span" variant = "body2" className = { className } { ... sanitizeFieldRestProps ( rest ) } > { emptyText } < /Typography>) : null; } return ( < Typography variant = "body2" component = "span" className = { className } { ... sanitizeFieldRestProps ( rest ) } > { hasNumberFormat ? value . toLocaleString ( locales , options ) : value } < /Typography>); } ) ; NumberField . displayName = 'NumberField' ; NumberField . defaultProps = { addLabel : true , textAlign : 'right' , } ; NumberField . propTypes = { ... Typography . propTypes , ... fieldPropTypes , locales : PropTypes . oneOfType ( [ PropTypes . string , PropTypes . arrayOf ( PropTypes . string ) , ] ) , options : PropTypes . object , } ; export interface NumberFieldProps extends PublicFieldProps , InjectedFieldProps , TypographyProps { locales ? : string | string [ ] ; options ? : object ; } export default NumberField ;