import * as React from 'react' ; import { FunctionComponent } from 'react' ; import PropTypes from 'prop-types' ; import TextField , { TextFieldProps } from '@material-ui/core/TextField' ; import { useInput , FieldTitle , InputProps } from 'ra-core' ; import InputHelperText from './InputHelperText' ; import sanitizeInputRestProps from './sanitizeInputRestProps' ; const convertStringToNumber = value => { const float = parseFloat ( value ) ; return isNaN ( float ) ? null : float ; } ; example example const NumberInput = ( { format , helperText , label , margin = 'dense' , onBlur , onFocus , onChange , options , parse = convertStringToNumber , resource , source , step , min , max , validate , variant = 'filled' , inputProps : overrideInputProps , ... rest } ) => { const { id , input , isRequired , meta : { error , submitError , touched } , } = useInput ( { format , onBlur , onChange , onFocus , parse , resource , source , type : 'number' , validate , ... rest , } ) ; const inputProps = { ... overrideInputProps , step , min , max } ; return ( < TextField id = { id } { ... input } variant = { variant } error = { ! ! ( touched && ( error || submitError ) ) } helperText = { < InputHelperText touched = { touched } error = { error || submitError } helperText = { helperText } / > } label = { < FieldTitle label = { label } source = { source } resource = { resource } isRequired = { isRequired } / > } margin = { margin } inputProps = { inputProps } { ... options } { ... sanitizeInputRestProps ( rest ) } />); } ; NumberInput . propTypes = { label : PropTypes . oneOfType ( [ PropTypes . string , PropTypes . bool ] ) , options : PropTypes . object , resource : PropTypes . string , source : PropTypes . string , step : PropTypes . oneOfType ( [ PropTypes . string , PropTypes . number ] ) , } ; NumberInput . defaultProps = { options : { } , step : 'any' , textAlign : 'right' , } ; export interface NumberInputProps extends InputProps < TextFieldProps > , Omit < TextFieldProps , 'label' | 'helperText' | 'onChange' | 'onBlur' | 'onFocus' | 'defaultValue' > { step ? : string | number ; min ? : string | number ; max ? : string | number ; } export default NumberInput ;