import * as React from 'react' ; import PropTypes from 'prop-types' ; import TextField , { TextFieldProps } from '@material-ui/core/TextField' ; import { useInput , FieldTitle , InputProps } from 'ra-core' ; import sanitizeInputRestProps from './sanitizeInputRestProps' ; import InputHelperText from './InputHelperText' ; const leftPad = ( nb = 2 ) => value => ( '0' . repeat ( nb ) + value ) . slice ( - nb ) ; const leftPad4 = leftPad ( 4 ) ; const leftPad2 = leftPad ( 2 ) ; param { Date } value returns { String } const convertDateToString = ( value ) => { if ( ! ( value instanceof Date ) || isNaN ( value . getDate ( ) ) ) return '' ; const yyyy = leftPad4 ( value . getFullYear ( ) ) ; const MM = leftPad2 ( value . getMonth ( ) + 1 ) ; const dd = leftPad2 ( value . getDate ( ) ) ; const hh = leftPad2 ( value . getHours ( ) ) ; const mm = leftPad2 ( value . getMinutes ( ) ) ; return `${ yyyy }-${ MM }-${ dd }T${ hh }:${ mm }` ; } ; const dateTimeRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}$/ ; const defaultInputLabelProps = { shrink : true } ; param { Date | String } value const formatDateTime = ( value ) => { if ( value == null || value === '' ) { return '' ; } if ( value instanceof Date ) { return convertDateToString ( value ) ; } if ( dateTimeRegex . test ( value ) ) { return value ; } return convertDateToString ( new Date ( value ) ) ; } ; param { string } value return { Date } const parseDateTime = ( value ) => new Date ( value ) ; /**
 * Input component for entering a date and a time with timezone, using the browser locale
 */ const DateTimeInput = ( { defaultValue , format = formatDateTime , initialValue , label , helperText , margin = 'dense' , onBlur , onChange , onFocus , options , source , resource , parse = parseDateTime , validate , variant = 'filled' , ... rest } ) => { const { id , input , isRequired , meta } = useInput ( { defaultValue , format , initialValue , onBlur , onChange , onFocus , parse , resource , source , type : 'datetime-local' , validate , ... rest , } ) ; const { error , submitError , touched } = meta ; return ( < TextField id = { id } { ... input } value = { format ( input . value ) || '' } variant = { variant } margin = { margin } error = { ! ! ( touched && ( error || submitError ) ) } helperText = { < InputHelperText touched = { touched } error = { error || submitError } helperText = { helperText } / > } label = { < FieldTitle label = { label } source = { source } resource = { resource } isRequired = { isRequired } / > } InputLabelProps = { defaultInputLabelProps } { ... options } { ... sanitizeInputRestProps ( rest ) } />); } ; DateTimeInput . propTypes = { label : PropTypes . oneOfType ( [ PropTypes . string , PropTypes . bool ] ) , options : PropTypes . object , resource : PropTypes . string , source : PropTypes . string , } ; DateTimeInput . defaultProps = { options : { } , } ; export type DateTimeInputProps = InputProps < TextFieldProps > & Omit < TextFieldProps , 'helperText' | 'label' > ; export default DateTimeInput ;