fix(material): Improve usability of date renderers

Previously, data wasn't cleared when the input field was emptied.
This commit will set the value to 'undefined' when the input is empty or
invalid upon blurring. During editing, the data is only updated when the
current input is valid.

Closes #2183

Author: LukasBoll

packages/core/src/util/defaultDateFormat.ts

@@ -0,0 +1,28 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2023-2023 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+
+export const defaultDateFormat = 'YYYY-MM-DD';
+export const defaultTimeFormat = 'HH:mm:ss';
+export const defaultDateTimeFormat = 'YYYY-MM-DDTHH:mm:ss.sssZ';

packages/core/src/util/index.ts

@@ -38,3 +38,4 @@ export * from './type';
 export * from './uischema';
 export * from './util';
 export * from './validator';
+export * from './defaultDateFormat';

packages/examples/src/examples/dates.ts

@@ -129,12 +129,12 @@ export const uischema = {
 export const data = {
   schemaBased: {
     date: new Date().toISOString().substr(0, 10),
-    time: '13:37',
+    time: '13:37:00',
     datetime: new Date().toISOString(),
   },
   uiSchemaBased: {
     date: new Date().toISOString().substr(0, 10),
-    time: '13:37',
+    time: '13:37:00',
     datetime: '1999/12/11 10:05 am',
   },
 };

packages/material-renderers/package.json

@@ -59,7 +59,8 @@
     },
     "testEnvironment": "jsdom",
     "testMatch": [
-      "**/test/**/*.test.tsx"
+      "**/test/**/*.test.tsx",
+      "**/test/**.test.ts"
     ],
     "testPathIgnorePatterns": [
       "/node_modules/",

packages/material-renderers/src/controls/MaterialDateControl.tsx

@@ -23,9 +23,10 @@
   THE SOFTWARE.
 */
 import merge from 'lodash/merge';
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   ControlProps,
+  defaultDateFormat,
   isDateControl,
   isDescriptionHidden,
   RankedTester,
@@ -35,7 +36,12 @@ import { withJsonFormsControlProps } from '@jsonforms/react';
 import { FormHelperText, Hidden } from '@mui/material';
 import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { createOnChangeHandler, getData, useFocus } from '../util';
+import {
+  createOnBlurHandler,
+  createOnChangeHandler,
+  getData,
+  useFocus,
+} from '../util';
 
 export const MaterialDateControl = (props: ControlProps) => {
   const [focused, onFocus, onBlur] = useFocus();
@@ -62,8 +68,10 @@ export const MaterialDateControl = (props: ControlProps) => {
     appliedUiSchemaOptions.showUnfocusedDescription
   );
 
+  const [key, setKey] = useState<number>(0);
+
   const format = appliedUiSchemaOptions.dateFormat ?? 'YYYY-MM-DD';
-  const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? 'YYYY-MM-DD';
+  const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? defaultDateFormat;
 
   const views = appliedUiSchemaOptions.views ?? ['year', 'day'];
 
@@ -73,20 +81,36 @@ export const MaterialDateControl = (props: ControlProps) => {
     ? errors
     : null;
   const secondFormHelperText = showDescription && !isValid ? errors : null;
+
+  const updateChild = useCallback(() => setKey((key) => key + 1), []);
+
   const onChange = useMemo(
     () => createOnChangeHandler(path, handleChange, saveFormat),
     [path, handleChange, saveFormat]
   );
 
+  const onBlurHandler = useMemo(
+    () =>
+      createOnBlurHandler(
+        path,
+        handleChange,
+        format,
+        saveFormat,
+        updateChild,
+        onBlur
+      ),
+    [path, handleChange, format, saveFormat, updateChild]
+  );
   const value = getData(data, saveFormat);
 
   return (
     <Hidden xsUp={!visible}>
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <DatePicker
+          key={key}
           label={label}
           value={value}
-          onChange={onChange}
+          onAccept={onChange}
           format={format}
           views={views}
           disabled={!enabled}
@@ -109,7 +133,7 @@ export const MaterialDateControl = (props: ControlProps) => {
               },
               InputLabelProps: data ? { shrink: true } : undefined,
               onFocus: onFocus,
-              onBlur: onBlur,
+              onBlur: onBlurHandler,
             },
           }}
         />

packages/material-renderers/src/controls/MaterialDateTimeControl.tsx

@@ -22,10 +22,11 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import merge from 'lodash/merge';
 import {
   ControlProps,
+  defaultDateTimeFormat,
   isDateTimeControl,
   isDescriptionHidden,
   RankedTester,
@@ -35,7 +36,12 @@ import { withJsonFormsControlProps } from '@jsonforms/react';
 import { FormHelperText, Hidden } from '@mui/material';
 import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { createOnChangeHandler, getData, useFocus } from '../util';
+import {
+  createOnBlurHandler,
+  createOnChangeHandler,
+  getData,
+  useFocus,
+} from '../util';
 
 export const MaterialDateTimeControl = (props: ControlProps) => {
   const [focused, onFocus, onBlur] = useFocus();
@@ -64,7 +70,10 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
   );
 
   const format = appliedUiSchemaOptions.dateTimeFormat ?? 'YYYY-MM-DD HH:mm';
-  const saveFormat = appliedUiSchemaOptions.dateTimeSaveFormat ?? undefined;
+  const saveFormat =
+    appliedUiSchemaOptions.dateTimeSaveFormat ?? defaultDateTimeFormat;
+
+  const [key, setKey] = useState<number>(0);
 
   const views = appliedUiSchemaOptions.views ?? [
     'year',
@@ -80,20 +89,35 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
     : null;
   const secondFormHelperText = showDescription && !isValid ? errors : null;
 
+  const updateChild = useCallback(() => setKey((key) => key + 1), []);
+
   const onChange = useMemo(
     () => createOnChangeHandler(path, handleChange, saveFormat),
     [path, handleChange, saveFormat]
   );
 
+  const onBlurHandler = useMemo(
+    () =>
+      createOnBlurHandler(
+        path,
+        handleChange,
+        format,
+        saveFormat,
+        updateChild,
+        onBlur
+      ),
+    [path, handleChange, format, saveFormat, updateChild]
+  );
   const value = getData(data, saveFormat);
 
   return (
     <Hidden xsUp={!visible}>
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <DateTimePicker
+          key={key}
           label={label}
           value={value}
-          onChange={onChange}
+          onAccept={onChange}
           format={format}
           ampm={!!appliedUiSchemaOptions.ampm}
           views={views}
@@ -117,7 +141,7 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
               },
               InputLabelProps: data ? { shrink: true } : undefined,
               onFocus: onFocus,
-              onBlur: onBlur,
+              onBlur: onBlurHandler,
             },
           }}
         />

packages/material-renderers/src/controls/MaterialTimeControl.tsx

@@ -22,20 +22,26 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import merge from 'lodash/merge';
 import {
   ControlProps,
   isTimeControl,
   isDescriptionHidden,
   RankedTester,
   rankWith,
+  defaultTimeFormat,
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
 import { FormHelperText, Hidden } from '@mui/material';
 import { TimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { createOnChangeHandler, getData, useFocus } from '../util';
+import {
+  createOnBlurHandler,
+  createOnChangeHandler,
+  getData,
+  useFocus,
+} from '../util';
 
 export const MaterialTimeControl = (props: ControlProps) => {
   const [focused, onFocus, onBlur] = useFocus();
@@ -56,6 +62,8 @@ export const MaterialTimeControl = (props: ControlProps) => {
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const isValid = errors.length === 0;
 
+  const [key, setKey] = useState<number>(0);
+
   const showDescription = !isDescriptionHidden(
     visible,
     description,
@@ -64,7 +72,7 @@ export const MaterialTimeControl = (props: ControlProps) => {
   );
 
   const format = appliedUiSchemaOptions.timeFormat ?? 'HH:mm';
-  const saveFormat = appliedUiSchemaOptions.timeSaveFormat ?? 'HH:mm:ss';
+  const saveFormat = appliedUiSchemaOptions.timeSaveFormat ?? defaultTimeFormat;
 
   const views = appliedUiSchemaOptions.views ?? ['hours', 'minutes'];
 
@@ -75,19 +83,35 @@ export const MaterialTimeControl = (props: ControlProps) => {
     : null;
   const secondFormHelperText = showDescription && !isValid ? errors : null;
 
+  const updateChild = useCallback(() => setKey((key) => key + 1), []);
+
   const onChange = useMemo(
     () => createOnChangeHandler(path, handleChange, saveFormat),
     [path, handleChange, saveFormat]
   );
 
+  const onBlurHandler = useMemo(
+    () =>
+      createOnBlurHandler(
+        path,
+        handleChange,
+        format,
+        saveFormat,
+        updateChild,
+        onBlur
+      ),
+    [path, handleChange, format, saveFormat, updateChild]
+  );
   const value = getData(data, saveFormat);
+
   return (
     <Hidden xsUp={!visible}>
       <LocalizationProvider dateAdapter={AdapterDayjs}>
         <TimePicker
+          key={key}
           label={label}
           value={value}
-          onChange={onChange}
+          onAccept={onChange}
           format={format}
           ampm={!!appliedUiSchemaOptions.ampm}
           views={views}
@@ -111,7 +135,7 @@ export const MaterialTimeControl = (props: ControlProps) => {
               },
               InputLabelProps: data ? { shrink: true } : undefined,
               onFocus: onFocus,
-              onBlur: onBlur,
+              onBlur: onBlurHandler,
             },
           }}
         />

packages/material-renderers/src/util/datejs.tsx

@@ -8,17 +8,56 @@ export const createOnChangeHandler =
   (
     path: string,
     handleChange: (path: string, value: any) => void,
-    saveFormat: string | undefined
+    saveFormat: string
   ) =>
-  (time: dayjs.Dayjs) => {
-    if (!time) {
+  (value: dayjs.Dayjs) => {
+    if (!value) {
       handleChange(path, undefined);
-      return;
+    } else if (value.toString() !== 'Invalid Date') {
+      const formatedDate = formatDate(value, saveFormat);
+      handleChange(path, formatedDate);
     }
-    const result = dayjs(time).format(saveFormat);
-    handleChange(path, result);
   };
 
+export const createOnBlurHandler =
+  (
+    path: string,
+    handleChange: (path: string, value: any) => void,
+    format: string,
+    saveFormat: string,
+    rerenderChild: () => void,
+    onBlur: () => void
+  ) =>
+  (e: React.FocusEvent<HTMLTextAreaElement | HTMLInputElement, Element>) => {
+    const date = dayjs(e.target.value, format);
+    const formatedDate = formatDate(date, saveFormat);
+    if (formatedDate.toString() === 'Invalid Date') {
+      handleChange(path, undefined);
+      rerenderChild();
+    } else {
+      handleChange(path, formatedDate);
+    }
+    onBlur();
+  };
+
+export const formatDate = (date: dayjs.Dayjs, saveFormat: string) => {
+  let formatedDate = date.format(saveFormat);
+  // Workaround to address a bug in Dayjs, neglecting leading 0 (https://github.com/iamkun/dayjs/issues/1849)
+  const indexOfYear = saveFormat.indexOf('YYYY');
+  if (date.year() < 1000 && indexOfYear !== -1) {
+    const stringUpToYear = formatedDate.slice(0, indexOfYear);
+    const stringFromYear = formatedDate.slice(indexOfYear);
+    if (date.year() >= 100) {
+      formatedDate = [stringUpToYear, 0, stringFromYear].join('');
+    } else if (date.year() >= 10) {
+      formatedDate = [stringUpToYear, 0, 0, stringFromYear].join('');
+    } else if (date.year() >= 1) {
+      formatedDate = [stringUpToYear, 0, 0, 0, stringFromYear].join('');
+    }
+  }
+  return formatedDate;
+};
+
 export const getData = (
   data: any,
   saveFormat: string | undefined