import merge from 'lodash/merge' ; import React , { useMemo } from 'react' ; import { ControlProps , isDateControl , isDescriptionHidden , RankedTester , rankWith , } from '@jsonforms/core' ; import { withJsonFormsControlProps } from '@jsonforms/react' ; import { FormHelperText , Hidden , TextField } from '@mui/material' ; import { DatePicker , LocalizationProvider } from '@mui/lab' ; import AdapterDayjs from '@mui/lab/AdapterDayjs' ; import { createOnChangeHandler , getData , useFocus } from '../util' ; export const MaterialDateControl = ( props ) => { const [ focused , onFocus , onBlur ] = useFocus ( ) ; const { description , id , errors , label , uischema , visible , enabled , required , path , handleChange , data , config } = props ; const isValid = errors . length === 0 ; const appliedUiSchemaOptions = merge ( { } , config , uischema . options ) ; const showDescription = ! isDescriptionHidden ( visible , description , focused , appliedUiSchemaOptions . showUnfocusedDescription ) ; const format = appliedUiSchemaOptions . dateFormat ?? 'YYYY-MM-DD' ; const saveFormat = appliedUiSchemaOptions . dateSaveFormat ?? 'YYYY-MM-DD' ; const firstFormHelperText = showDescription ? description : ! isValid ? errors : null ; const secondFormHelperText = showDescription && ! isValid ? errors : null ; const onChange = useMemo ( ( ) => createOnChangeHandler ( path , handleChange , saveFormat ) , [ path , handleChange , saveFormat ] ) ; return ( < Hidden xsUp = { ! visible } > < LocalizationProvider dateAdapter = { AdapterDayjs } > < DatePicker label = { label } value = { getData ( data , saveFormat ) } clearable onChange = { onChange } inputFormat = { format } disableMaskedInput views = { appliedUiSchemaOptions . views } disabled = { ! enabled } cancelText = { appliedUiSchemaOptions . cancelLabel } clearText = { appliedUiSchemaOptions . clearLabel } okText = { appliedUiSchemaOptions . okLabel } renderInput = { params => ( < TextField { ... params } id = { id + '-input' } required = { required && ! appliedUiSchemaOptions . hideRequiredAsterisk } autoFocus = { appliedUiSchemaOptions . focus } error = { ! isValid } fullWidth = { ! appliedUiSchemaOptions . trim } inputProps = { { ... params . inputProps , type : 'text' } } InputLabelProps = { data ? { shrink : true } : undefined } onFocus = { onFocus } onBlur = { onBlur } variant = { 'standard' } / > ) } /> < FormHelperText error = { ! isValid && ! showDescription } > { firstFormHelperText } < /FormHelperText> < FormHelperText error = { ! isValid } > { secondFormHelperText } < /FormHelperText> < /LocalizationProvider> < /Hidden>); } ; export const materialDateControlTester = rankWith ( 4 , isDateControl ) ; export default withJsonFormsControlProps ( MaterialDateControl ) ;