Delete values where appropriate

LukasBoll · sdirix · web-flow · commit 3aeffce27f13 · 2022-07-25T12:06:27.000+02:00
When a user empties an input, they usually expect the corresponding attribute to be
deleted. This commit adapts all renderer sets to delete values instead of storing an
empty string or '0' into the data.

The previous behavior can be restored using custom renderers.

Also introduces a translatable 'None' label for the empty option in React Material.

Co-authored-by: Stefan Dirix &lt;sdirix@eclipsesource.com&gt;
diff --git a/packages/angular-material/src/controls/text.renderer.ts b/packages/angular-material/src/controls/text.renderer.ts
@@ -48,7 +48,7 @@ export class TextControlRenderer extends JsonFormsControl {
   constructor(jsonformsService: JsonFormsAngularService) {
     super(jsonformsService);
   }
-  getEventValue = (event: any) => event.target.value;
+  getEventValue = (event: any) => event.target.value || undefined;
   getType = (): string => {
     if (this.uischema.options && this.uischema.options.format) {
       return this.uischema.options.format;
diff --git a/packages/angular-material/src/controls/textarea.renderer.ts b/packages/angular-material/src/controls/textarea.renderer.ts
@@ -47,7 +47,7 @@ export class TextAreaRenderer extends JsonFormsControl {
   constructor(jsonformsService: JsonFormsAngularService) {
     super(jsonformsService);
   }
-  getEventValue = (event: any) => event.target.value;
+  getEventValue = (event: any) => event.target.value || undefined;
 }
 export const TextAreaRendererTester: RankedTester = rankWith(
   2,
diff --git a/packages/material/src/cells/MaterialEnumCell.tsx b/packages/material/src/cells/MaterialEnumCell.tsx
@@ -30,10 +30,10 @@ import {
   rankWith,
   WithClassname
 } from '@jsonforms/core';
-import { withJsonFormsEnumCellProps } from '@jsonforms/react';
+import { TranslateProps, withJsonFormsEnumCellProps, withTranslateProps } from '@jsonforms/react';
 import { MuiSelect } from '../mui-controls/MuiSelect';
 
-export const MaterialEnumCell = (props: EnumCellProps & WithClassname) => (
+export const MaterialEnumCell = (props: EnumCellProps & WithClassname & TranslateProps) => (
   <MuiSelect {...props} />
 );
 
@@ -43,4 +43,5 @@ export const MaterialEnumCell = (props: EnumCellProps & WithClassname) => (
  */
 export const materialEnumCellTester: RankedTester = rankWith(2, isEnumControl);
 
-export default withJsonFormsEnumCellProps(MaterialEnumCell);
+// HOC order can be reversed with https://github.com/eclipsesource/jsonforms/issues/1987
+export default withJsonFormsEnumCellProps(withTranslateProps(React.memo(MaterialEnumCell)), false);
diff --git a/packages/material/src/cells/MaterialOneOfEnumCell.tsx b/packages/material/src/cells/MaterialOneOfEnumCell.tsx
@@ -30,10 +30,10 @@ import {
   rankWith,
   WithClassname
 } from '@jsonforms/core';
-import { withJsonFormsOneOfEnumCellProps } from '@jsonforms/react';
+import { TranslateProps, withJsonFormsOneOfEnumCellProps, withTranslateProps } from '@jsonforms/react';
 import { MuiSelect } from '../mui-controls/MuiSelect';
 
-export const MaterialOneOfEnumCell = (props: EnumCellProps & WithClassname) => (
+export const MaterialOneOfEnumCell = (props: EnumCellProps & WithClassname & TranslateProps) => (
   <MuiSelect {...props} />
 );
 
@@ -43,4 +43,4 @@ export const MaterialOneOfEnumCell = (props: EnumCellProps & WithClassname) => (
  */
 export const materialOneOfEnumCellTester: RankedTester = rankWith(2, isOneOfEnumControl);
 
-export default withJsonFormsOneOfEnumCellProps(MaterialOneOfEnumCell);
+export default withJsonFormsOneOfEnumCellProps(withTranslateProps(React.memo(MaterialOneOfEnumCell)), false);
diff --git a/packages/material/src/controls/MaterialEnumControl.tsx b/packages/material/src/controls/MaterialEnumControl.tsx
@@ -30,13 +30,13 @@ import {
   RankedTester,
   rankWith,
 } from '@jsonforms/core';
-import { withJsonFormsEnumProps } from '@jsonforms/react';
+import { TranslateProps, withJsonFormsEnumProps, withTranslateProps } from '@jsonforms/react';
 import { MuiSelect } from '../mui-controls/MuiSelect';
 import merge from 'lodash/merge';
 import { MaterialInputControl } from './MaterialInputControl';
 import { MuiAutocomplete, WithOptionLabel } from '../mui-controls/MuiAutocomplete';
 
-export const MaterialEnumControl = (props: ControlProps & OwnPropsOfEnum & WithOptionLabel) => {
+export const MaterialEnumControl = (props: ControlProps & OwnPropsOfEnum & WithOptionLabel & TranslateProps) => {
   const {config, uischema, errors} = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const isValid = errors.length === 0;
@@ -58,4 +58,5 @@ export const materialEnumControlTester: RankedTester = rankWith(
   isEnumControl
 );
 
-export default withJsonFormsEnumProps(MaterialEnumControl);
+// HOC order can be reversed with https://github.com/eclipsesource/jsonforms/issues/1987
+export default withJsonFormsEnumProps(withTranslateProps(React.memo(MaterialEnumControl)), false);
diff --git a/packages/material/src/controls/MaterialOneOfEnumControl.tsx b/packages/material/src/controls/MaterialOneOfEnumControl.tsx
@@ -30,13 +30,13 @@ import {
   RankedTester,
   rankWith,
 } from '@jsonforms/core';
-import { withJsonFormsOneOfEnumProps } from '@jsonforms/react';
+import { TranslateProps, withJsonFormsOneOfEnumProps, withTranslateProps } from '@jsonforms/react';
 import { MuiAutocomplete, WithOptionLabel } from '../mui-controls/MuiAutocomplete';
 import { MuiSelect } from '../mui-controls/MuiSelect';
 import { MaterialInputControl } from '../controls/MaterialInputControl';
 import merge from 'lodash/merge';
 
-export const MaterialOneOfEnumControl = (props: ControlProps & OwnPropsOfEnum & WithOptionLabel) => {
+export const MaterialOneOfEnumControl = (props: ControlProps & OwnPropsOfEnum & WithOptionLabel & TranslateProps) => {
   const {config, uischema, errors} = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const isValid = errors.length === 0;
@@ -59,4 +59,5 @@ export const materialOneOfEnumControlTester: RankedTester = rankWith(
   isOneOfEnumControl
 );
 
-export default withJsonFormsOneOfEnumProps(MaterialOneOfEnumControl);
+// HOC order can be reversed with https://github.com/eclipsesource/jsonforms/issues/1987
+export default withJsonFormsOneOfEnumProps(withTranslateProps(React.memo(MaterialOneOfEnumControl)), false);
diff --git a/packages/material/src/mui-controls/MuiInputText.tsx b/packages/material/src/mui-controls/MuiInputText.tsx
@@ -40,6 +40,9 @@ interface MuiTextInputProps {
   muiInputProps?: InputProps['inputProps'];
   inputComponent?: InputProps['inputComponent'];
 }
+
+const eventToValue = (ev:any) => ev.target.value === '' ? undefined : ev.target.value;
+
 export const MuiInputText = React.memo((props: CellProps & WithClassname & MuiTextInputProps) => { 
   const [showAdornment, setShowAdornment] = useState(false);
   const {
@@ -71,7 +74,7 @@ export const MuiInputText = React.memo((props: CellProps & WithClassname & MuiTe
     inputProps.size = maxLength;
   };
   
-  const [inputText, onChange, onClear] = useDebouncedChange(handleChange, '', data, path);
+  const [inputText, onChange, onClear] = useDebouncedChange(handleChange, '', data, path, eventToValue);
   const onPointerEnter = () => setShowAdornment(true);
   const onPointerLeave = () => setShowAdornment(false);
 
diff --git a/packages/material/src/mui-controls/MuiSelect.tsx b/packages/material/src/mui-controls/MuiSelect.tsx
@@ -22,25 +22,30 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React from 'react';
+import React, { useMemo } from 'react';
 import { EnumCellProps, WithClassname } from '@jsonforms/core';
 
 import { MenuItem, Select } from '@mui/material';
 import merge from 'lodash/merge';
+import { TranslateProps } from '@jsonforms/react';
+import { i18nDefaults } from '../util';
 
-export const MuiSelect = React.memo((props: EnumCellProps & WithClassname) => {
+export const MuiSelect = React.memo((props: EnumCellProps & WithClassname & TranslateProps) => {
   const {
     data,
     className,
     id,
     enabled,
+    schema,
     uischema,
     path,
     handleChange,
     options,
-    config
+    config,
+    t
   } = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const noneOptionLabel = useMemo(() => t('enum.none', i18nDefaults['enum.none'], { schema, uischema, path}), [t, schema, uischema, path]);
 
   return (
     <Select
@@ -49,11 +54,11 @@ export const MuiSelect = React.memo((props: EnumCellProps & WithClassname) => {
       disabled={!enabled}
       autoFocus={appliedUiSchemaOptions.focus}
       value={data !== undefined ? data : ''}
-      onChange={ev => handleChange(path, ev.target.value)}
+      onChange={ev =>handleChange(path, ev.target.value || undefined)}
       fullWidth={true}
       variant={'standard'}
     >
-      {[<MenuItem value='' key={'empty'} />].concat(
+      {[<MenuItem value={''} key='jsonforms.enum.none'><em>{noneOptionLabel}</em></MenuItem>].concat(
         options.map(optionValue => (
           <MenuItem value={optionValue.value} key={optionValue.value}>
             {optionValue.label}
diff --git a/packages/material/src/util/i18nDefaults.ts b/packages/material/src/util/i18nDefaults.ts
@@ -0,0 +1,3 @@
+export const i18nDefaults = {
+    'enum.none': 'None'
+}
diff --git a/packages/material/src/util/index.ts b/packages/material/src/util/index.ts
@@ -27,3 +27,4 @@ export * from './layout';
 export * from './theme';
 export * from './debounce';
 export * from './focus';
+export * from './i18nDefaults';
diff --git a/packages/vanilla/src/cells/EnumCell.tsx b/packages/vanilla/src/cells/EnumCell.tsx
@@ -22,20 +22,20 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React from 'react';
+import React, { useMemo } from 'react';
 import {
   EnumCellProps,
   isEnumControl,
   RankedTester,
   rankWith,
 } from '@jsonforms/core';
-import { withJsonFormsEnumCellProps } from '@jsonforms/react';
-import { withVanillaEnumCellProps } from '../util';
+import { TranslateProps, withJsonFormsEnumCellProps, withTranslateProps } from '@jsonforms/react';
+import { i18nDefaults, withVanillaEnumCellProps } from '../util';
 import { VanillaRendererProps } from '../index';
 
-export const EnumCell = (props: EnumCellProps & VanillaRendererProps) => {
-  const { data, className, id, enabled, uischema, path, handleChange, options } = props;
-
+export const EnumCell = (props: EnumCellProps & VanillaRendererProps & TranslateProps) => {
+  const { data, className, id, enabled, schema, uischema, path, handleChange, options, t } = props;
+  const noneOptionLabel = useMemo(() => t('enum.none', i18nDefaults['enum.none'], { schema, uischema, path}), [t, schema, uischema, path]);
   return (
     <select
       className={className}
@@ -46,7 +46,7 @@ export const EnumCell = (props: EnumCellProps & VanillaRendererProps) => {
       onChange={ev => handleChange(path, ev.target.selectedIndex === 0 ? undefined : ev.target.value)}
     >
       {
-        [<option value='' key={'empty'} />]
+        [<option value={''} key={'jsonforms.enum.none'}>{noneOptionLabel}</option>]
           .concat(
             options.map(optionValue =>
               (
@@ -63,4 +63,4 @@ export const EnumCell = (props: EnumCellProps & VanillaRendererProps) => {
  */
 export const enumCellTester: RankedTester = rankWith(2, isEnumControl);
 
-export default withJsonFormsEnumCellProps(withVanillaEnumCellProps(EnumCell));
+export default withJsonFormsEnumCellProps(withTranslateProps(withVanillaEnumCellProps(EnumCell)));
diff --git a/packages/vanilla/src/cells/IntegerCell.tsx b/packages/vanilla/src/cells/IntegerCell.tsx
@@ -33,6 +33,9 @@ import { withJsonFormsCellProps } from '@jsonforms/react';
 import { VanillaRendererProps } from '../index';
 import { withVanillaCellProps } from '../util/index';
 
+const toNumber = (value: string) =>
+      value === '' ? undefined : parseInt(value, 10);
+
 export const IntegerCell = (props: CellProps & VanillaRendererProps) => {
   const { data, className, id, enabled, uischema, path, handleChange } = props;
 
@@ -41,7 +44,7 @@ export const IntegerCell = (props: CellProps & VanillaRendererProps) => {
       type='number'
       step='1'
       value={data ?? ''}
-      onChange={ev => handleChange(path, parseInt(ev.target.value, 10))}
+      onChange={ev => handleChange(path, toNumber(ev.target.value))}
       className={className}
       id={id}
       disabled={!enabled}
diff --git a/packages/vanilla/src/cells/NumberCell.tsx b/packages/vanilla/src/cells/NumberCell.tsx
@@ -33,6 +33,9 @@ import { withJsonFormsCellProps } from '@jsonforms/react';
 import { VanillaRendererProps } from '../index';
 import { withVanillaCellProps } from '../util/index';
 
+const toNumber = (value: string) =>
+      value === '' ? undefined : Number(value);
+
 export const NumberCell = (props: CellProps & VanillaRendererProps) => {
   const { data, className, id, enabled, uischema, path, handleChange } = props;
 
@@ -41,7 +44,7 @@ export const NumberCell = (props: CellProps & VanillaRendererProps) => {
       type='number'
       step='0.1'
       value={data ?? ''}
-      onChange={ev => handleChange(path, Number(ev.target.value))}
+      onChange={ev => handleChange(path, toNumber(ev.target.value))}
       className={className}
       id={id}
       disabled={!enabled}
diff --git a/packages/vanilla/src/cells/NumberFormatCell.tsx b/packages/vanilla/src/cells/NumberFormatCell.tsx
@@ -34,7 +34,7 @@ import { withJsonFormsCellProps } from '@jsonforms/react';
 import { VanillaRendererProps } from '../index';
 import { withVanillaCellProps } from '../util/index';
 
-export const NumberFormatCell = (props: CellProps & VanillaRendererProps & Formatted<number>) => {
+export const NumberFormatCell = (props: CellProps & VanillaRendererProps & Formatted<number|undefined>) => {
   const {
     className,
     id,
diff --git a/packages/vanilla/src/cells/TextAreaCell.tsx b/packages/vanilla/src/cells/TextAreaCell.tsx
@@ -40,7 +40,7 @@ export const TextAreaCell = (props: CellProps & VanillaRendererProps) => {
   return (
     <textarea
       value={data || ''}
-      onChange={ev => handleChange(path, ev.target.value)}
+      onChange={ev => handleChange(path, ev.target.value === '' ? undefined : ev.target.value)}
       className={className}
       id={id}
       disabled={!enabled}
diff --git a/packages/vanilla/src/cells/TextCell.tsx b/packages/vanilla/src/cells/TextCell.tsx
@@ -52,7 +52,7 @@ export const TextCell = (props: CellProps & VanillaRendererProps) => {
     <input
       type='text'
       value={data || ''}
-      onChange={ev => handleChange(path, ev.target.value)}
+      onChange={ev => handleChange(path, ev.target.value === '' ? undefined : ev.target.value)}
       className={className}
       id={id}
       disabled={!enabled}
diff --git a/packages/vanilla/src/util/i18nDefaults.ts b/packages/vanilla/src/util/i18nDefaults.ts
@@ -0,0 +1,3 @@
+export const i18nDefaults = {
+    'enum.none': 'None'
+}
diff --git a/packages/vanilla/src/util/index.tsx b/packages/vanilla/src/util/index.tsx
@@ -22,6 +22,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
+export * from './i18nDefaults';
 import React from 'react';
 import isEmpty from 'lodash/isEmpty';
 import {
diff --git a/packages/vue/vue-vanilla/src/controls/DateControlRenderer.vue b/packages/vue/vue-vanilla/src/controls/DateControlRenderer.vue
@@ -41,7 +41,7 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>()
   },
   setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsControl(props));
+    return useVanillaControl(useJsonFormsControl(props), target => target.value || undefined);
   },
 });
 
diff --git a/packages/vue/vue-vanilla/src/controls/DateTimeControlRenderer.vue b/packages/vue/vue-vanilla/src/controls/DateTimeControlRenderer.vue
@@ -33,7 +33,7 @@ import { default as ControlWrapper } from './ControlWrapper.vue';
 import { useVanillaControl } from '../util';
 
 const toISOString = (inputDateTime: string) => {
-  return inputDateTime === '' ? '' : inputDateTime + ':00.000Z';
+  return inputDateTime === '' ? undefined : inputDateTime + ':00.000Z';
 };
 
 const controlRenderer = defineComponent({
diff --git a/packages/vue/vue-vanilla/src/controls/EnumControlRenderer.vue b/packages/vue/vue-vanilla/src/controls/EnumControlRenderer.vue
@@ -49,7 +49,7 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>()
   },
   setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsEnumControl(props));
+    return useVanillaControl(useJsonFormsEnumControl(props), target => target.selectedIndex === 0 ? undefined : target.value);
   }
 });
 
diff --git a/packages/vue/vue-vanilla/src/controls/EnumOneOfControlRenderer.vue b/packages/vue/vue-vanilla/src/controls/EnumOneOfControlRenderer.vue
@@ -49,7 +49,7 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>()
   },
   setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsOneOfEnumControl(props));
+    return useVanillaControl(useJsonFormsOneOfEnumControl(props), target => target.selectedIndex === 0 ? undefined : target.value );
   }
 });
 
diff --git a/packages/vue/vue-vanilla/src/controls/IntegerControlRenderer.vue b/packages/vue/vue-vanilla/src/controls/IntegerControlRenderer.vue
@@ -42,7 +42,7 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>()
   },
   setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsControl(props), target => parseInt(target.value, 10));
+    return useVanillaControl(useJsonFormsControl(props), target => target.value === '' ? undefined : parseInt(target.value, 10));
   },
 });
 
diff --git a/packages/vue/vue-vanilla/src/controls/MultiStringControlRenderer.vue b/packages/vue/vue-vanilla/src/controls/MultiStringControlRenderer.vue
@@ -42,7 +42,7 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>()
   },
   setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsControl(props));
+    return useVanillaControl(useJsonFormsControl(props), target => target.value || undefined);
   }
 });
 
diff --git a/packages/vue/vue-vanilla/src/controls/NumberControlRenderer.vue b/packages/vue/vue-vanilla/src/controls/NumberControlRenderer.vue
@@ -43,7 +43,7 @@ const controlRenderer = defineComponent({
   },
   setup(props: RendererProps<ControlElement>) {
     return useVanillaControl(useJsonFormsControl(props), target =>
-      Number(target.value)
+      target.value === '' ? undefined : Number(target.value)
     );
   },
   computed: {
diff --git a/packages/vue/vue-vanilla/src/controls/StringControlRenderer.vue b/packages/vue/vue-vanilla/src/controls/StringControlRenderer.vue
@@ -40,7 +40,7 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>()
   },
   setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsControl(props));
+    return useVanillaControl(useJsonFormsControl(props), target => target.value || undefined);
   }
 });
 
diff --git a/packages/vue/vue-vanilla/src/controls/TimeControlRenderer.vue b/packages/vue/vue-vanilla/src/controls/TimeControlRenderer.vue
@@ -41,7 +41,7 @@ const controlRenderer = defineComponent({
     ...rendererProps<ControlElement>()
   },
   setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsControl(props));
+    return useVanillaControl(useJsonFormsControl(props), target => target.value || undefined);
   }
 });
 

Original file line number	Diff line number	Diff line change
`@@ -48,7 +48,7 @@ export class TextControlRenderer extends JsonFormsControl {`
`48`	`48`	`constructor(jsonformsService: JsonFormsAngularService) {`
`49`	`49`	`super(jsonformsService);`
`50`	`50`	`}`
`51`		`- getEventValue = (event: any) => event.target.value;`
	`51`	`+ getEventValue = (event: any) => event.target.value \|\| undefined;`
`52`	`52`	`getType = (): string => {`
`53`	`53`	`if (this.uischema.options && this.uischema.options.format) {`
`54`	`54`	`return this.uischema.options.format;`
Original file line number	Diff line number	Diff line change
`@@ -47,7 +47,7 @@ export class TextAreaRenderer extends JsonFormsControl {`
`47`	`47`	`constructor(jsonformsService: JsonFormsAngularService) {`
`48`	`48`	`super(jsonformsService);`
`49`	`49`	`}`
`50`		`- getEventValue = (event: any) => event.target.value;`
	`50`	`+ getEventValue = (event: any) => event.target.value \|\| undefined;`
`51`	`51`	`}`
`52`	`52`	`export const TextAreaRendererTester: RankedTester = rankWith(`
`53`	`53`	`2,`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export const i18nDefaults = {`
	`2`	`+ 'enum.none': 'None'`
	`3`	`+}`