Add handling of default values

packages/core/src/reducers/core.ts

@@ -210,10 +210,7 @@ export const coreReducer = (
         };
       } else {
         const oldData: any = get(state.data, action.path);
-        let newData = action.updater(cloneDeep(oldData));
-        if (newData === '') {
-          newData = undefined;
-        }
+        const newData = action.updater(cloneDeep(oldData));
 
         const newState: any = set(cloneDeep(state.data), action.path, newData);
         const errors = sanitizeErrors(state.validator, newState);

packages/examples/src/default.ts

@@ -0,0 +1,118 @@
+/*
+  The MIT License
+
+  Copyright (c) 2017-2019 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.
+*/
+import { registerExamples } from './register';
+
+export const schema = {
+  type: 'object',
+  properties: {
+    name: {
+      type: 'string',
+      default: 'foo'
+    },
+    name_noDefault: {
+      type: 'string'
+    },
+    description: {
+      type: 'string',
+      default: 'bar'
+    },
+    done: {
+      type: 'boolean',
+      default: false
+    },
+    rating: {
+      type: 'integer',
+      default: 5
+    },
+    cost: {
+      type: 'number',
+      default: 5.5
+    },
+    dueDate: {
+      type: 'string',
+      format: 'date',
+      default: '2019-04-01'
+    }
+  },
+  required: ['name', 'name_noDefault']
+};
+
+export const uischema = {
+  type: 'VerticalLayout',
+  elements: [
+    {
+      type: 'Control',
+      scope: '#/properties/name'
+    },
+    {
+      type: 'Control',
+      scope: '#/properties/name_noDefault'
+    },
+    {
+      type: 'Control',
+      label: false,
+      scope: '#/properties/done'
+    },
+    {
+      type: 'Control',
+      scope: '#/properties/description',
+      options: {
+        multi: true
+      }
+    },
+    {
+      type: 'Control',
+      scope: '#/properties/rating'
+    },
+    {
+      type: 'Control',
+      scope: '#/properties/cost'
+    },
+    {
+      type: 'Control',
+      scope: '#/properties/dueDate'
+    }
+  ]
+};
+
+export const data = {
+  name: 'Send email to Adrian',
+  name_noDefault: 'Send email to Adrian',
+  description: 'Confirm if you have passed the subject\nHereby ...',
+  done: true,
+  rating: 1,
+  cost: 3.14,
+  dueDate: '2019-05-01'
+};
+
+registerExamples([
+  {
+    name: 'default',
+    label: 'Default',
+    data,
+    schema,
+    uischema
+  }
+]);

packages/examples/src/index.ts

@@ -61,12 +61,14 @@ import * as issue_1253 from './1253';
 import * as issue_1254 from './1254';
 import * as oneOfRecursive from './oneOf-recursive';
 import * as huge from './huge';
+import * as defaultExample from './default';
 export * from './register';
 export * from './example';
 
 import * as ifThenElse from './if_then_else';
 
 export {
+  defaultExample,
   allOf,
   anyOf,
   oneOf,

packages/material/src/mui-controls/MuiInputText.tsx

@@ -23,52 +23,81 @@
   THE SOFTWARE.
 */
 import React from 'react';
-import {
-  CellProps,
-  WithClassname
-} from '@jsonforms/core';
+import { CellProps, WithClassname } from '@jsonforms/core';
 import Input from '@material-ui/core/Input';
 import merge from 'lodash/merge';
+import IconButton from '@material-ui/core/IconButton';
+import InputAdornment from '@material-ui/core/InputAdornment';
+import Close from '@material-ui/icons/Close';
+import { Hidden } from '@material-ui/core';
 
-export const MuiInputText = (props: CellProps & WithClassname) => {
-  const {
-    data,
-    config,
-    className,
-    id,
-    enabled,
-    uischema,
-    isValid,
-    path,
-    handleChange,
-    schema
-  } = props;
-  const maxLength = schema.maxLength;
-  const mergedConfig = merge({}, config, uischema.options);
-  let inputProps: any;
-  if (mergedConfig.restrict) {
-    inputProps = {'maxLength': maxLength};
-  } else {
-    inputProps = {};
-  }
-  if (mergedConfig.trim && maxLength !== undefined) {
-    inputProps.size = maxLength;
-  }
-  const onChange = (ev: any) => handleChange(path, ev.target.value);
+interface MuiInputTextStatus {
+  showAdornment: boolean;
+}
 
-  return (
-    <Input
-      type={uischema.options && (uischema.options.format === 'password') ? 'password' : 'text'}
-      value={data || ''}
-      onChange={onChange}
-      className={className}
-      id={id}
-      disabled={!enabled}
-      autoFocus={uischema.options && uischema.options.focus}
-      multiline={uischema.options && uischema.options.multi}
-      fullWidth={!mergedConfig.trim || maxLength === undefined}
-      inputProps={inputProps}
-      error={!isValid}
-    />
-  );
-};
+export class MuiInputText extends React.Component<
+  CellProps & WithClassname,
+  MuiInputTextStatus
+> {
+  state: MuiInputTextStatus = { showAdornment: false };
+  render() {
+    const {
+      data,
+      config,
+      className,
+      id,
+      enabled,
+      uischema,
+      isValid,
+      path,
+      handleChange,
+      schema
+    } = this.props;
+    const maxLength = schema.maxLength;
+    const mergedConfig = merge({}, config, uischema.options);
+    let inputProps: any;
+    if (mergedConfig.restrict) {
+      inputProps = { maxLength: maxLength };
+    } else {
+      inputProps = {};
+    }
+    if (mergedConfig.trim && maxLength !== undefined) {
+      inputProps.size = maxLength;
+    }
+    const onChange = (ev: any) => handleChange(path, ev.target.value);
+
+    return (
+      <Input
+        type={
+          uischema.options && uischema.options.format === 'password'
+            ? 'password'
+            : 'text'
+        }
+        value={data || ''}
+        onChange={onChange}
+        className={className}
+        id={id}
+        disabled={!enabled}
+        autoFocus={uischema.options && uischema.options.focus}
+        multiline={uischema.options && uischema.options.multi}
+        fullWidth={!mergedConfig.trim || maxLength === undefined}
+        inputProps={inputProps}
+        error={!isValid}
+        onPointerEnter={() => this.setState({ showAdornment: true })}
+        onPointerLeave={() => this.setState({ showAdornment: false })}
+        endAdornment={
+          <InputAdornment position='end'>
+            <Hidden xsUp={!this.state.showAdornment}>
+              <IconButton
+                aria-label='Clear input field'
+                onClick={() => handleChange(path, undefined)}
+              >
+                <Close />
+              </IconButton>
+            </Hidden>
+          </InputAdornment>
+        }
+      />
+    );
+  }
+}