Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Improve React Material date/time input handling
Whenever the user entered an invalid date/time string, the renderers stored `undefined` in the data, i.e. the attribute was deleted. This is now changed to pass through the invalid string which is a much more flexible behavior. However dayjs is actually very lenient when parsing strings and tries its best to parse *something* out of any given string. This can have the effect that what the user entered is not necessarily what is actually stored in the data. To improve UX the date/time inputs now always reflect the actual stored data once they lose focus. Co-authored-by: Stefan Dirix <sdirix@eclipsesource.com>
- Loading branch information
1 parent
23a3a9e
commit d2bf053
Showing
8 changed files
with
214 additions
and
47 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
import { TextField, TextFieldProps } from '@mui/material'; | ||
import dayjs from 'dayjs'; | ||
import customParsing from 'dayjs/plugin/customParseFormat'; | ||
import React, { useRef} from 'react'; | ||
|
||
// required for the custom save formats in the date, time and date-time pickers | ||
dayjs.extend(customParsing); | ||
|
||
export const createOnChangeHandler = ( | ||
path: string, | ||
handleChange: (path: string, value: any) => void, | ||
saveFormat: string | undefined | ||
) => (time: dayjs.Dayjs, textInputValue: string) => { | ||
if (!time) { | ||
handleChange(path, undefined); | ||
return; | ||
} | ||
const result = dayjs(time).format(saveFormat); | ||
handleChange(path, result === 'Invalid Date' ? textInputValue : result); | ||
}; | ||
|
||
export const getData = ( | ||
data: any, | ||
saveFormat: string | undefined | ||
): dayjs.Dayjs | null => { | ||
if (!data) { | ||
return null; | ||
} | ||
const dayjsData = dayjs(data, saveFormat); | ||
if (dayjsData.toString() === 'Invalid Date') { | ||
return null; | ||
} | ||
return dayjsData; | ||
}; | ||
|
||
|
||
interface InputRef { | ||
lastInput: string; | ||
toShow: string; | ||
} | ||
|
||
type ResettableTextFieldProps = TextFieldProps & { | ||
rawValue: any; | ||
dayjsValueIsValid: boolean; | ||
valueInInputFormat: string; | ||
focused: boolean; | ||
} | ||
|
||
/** | ||
* The dayjs formatter/parser is very lenient and for example ignores additional digits and/or characters. | ||
* In these cases the input text can look vastly different than the actual value stored in the data. | ||
* The 'ResettableTextField' component adjusts the text field to reflect the actual value stored in the data | ||
* once it's no longer 'focused', i.e. when the user stops editing. | ||
*/ | ||
export const ResettableTextField: React.FC<ResettableTextFieldProps> = ({ rawValue, dayjsValueIsValid, valueInInputFormat, focused, inputProps, ...props }) => { | ||
const value = useRef<InputRef>({ lastInput: inputProps?.value, toShow: inputProps?.value }); | ||
if (!focused) { | ||
// The input text is not focused, therefore let's show the value actually stored in the data | ||
if (!dayjsValueIsValid) { | ||
// pass through the "raw" value in case it can't be formatted by dayjs | ||
value.current.toShow = typeof rawValue === 'string' || rawValue === null || rawValue === undefined ? rawValue : JSON.stringify(rawValue) | ||
} else { | ||
// otherwise use the specified format | ||
value.current.toShow = valueInInputFormat; | ||
} | ||
} | ||
if (focused && inputProps?.value !== value.current.lastInput) { | ||
// Show the current text the user is typing into the text input | ||
value.current.lastInput = inputProps?.value; | ||
value.current.toShow = inputProps?.value; | ||
} | ||
return <TextField {...props} inputProps={{ ...inputProps, value: value.current.toShow || '' }} /> | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters