Add simple any of renderer

* this renderer handles only cases where the schema has
an anyof with strings and enums.

Author: eneufeld

packages/examples/src/anyOf.ts

@@ -92,12 +92,28 @@ const data = {
   }
 };
 
+const schema_simple = {
+  type: 'object',
+  properties: {
+    foo: {
+      anyOf: [{ type: 'string' }, { enum: ['foo', 'bar'] }]
+    }
+  }
+};
+
 registerExamples([
   {
     name: 'anyOf',
     label: 'anyOf',
     data,
     schema,
     uischema
+  },
+  {
+    name: 'anyOf_simple',
+    label: 'AnyOf Simple',
+    data: { foo: 'foo' },
+    schema: schema_simple,
+    uischema: undefined
   }
 ]);

packages/material/src/controls/MaterialSimpleAnyOfControl.tsx

@@ -0,0 +1,139 @@
+/*
+  The MIT License
+
+  Copyright (c) 2018-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 {
+  and,
+  ControlProps,
+  ControlState,
+  EnumCellProps,
+  JsonSchema,
+  mapDispatchToControlProps,
+  mapStateToControlProps,
+  RankedTester,
+  rankWith,
+  schemaMatches,
+  uiTypeIs,
+  WithClassname
+} from '@jsonforms/core';
+import { Control } from '@jsonforms/react';
+import { Input } from '@material-ui/core';
+import { InputBaseComponentProps } from '@material-ui/core/InputBase';
+import merge from 'lodash/merge';
+import React from 'react';
+import { connect } from 'react-redux';
+import { MaterialInputControl } from './MaterialInputControl';
+
+const MuiAutocompleteInputText = (props: EnumCellProps & WithClassname) => {
+  const {
+    data,
+    config,
+    className,
+    id,
+    enabled,
+    uischema,
+    isValid,
+    path,
+    handleChange,
+    schema
+  } = props;
+
+  const findEnumSchema = (schemas: JsonSchema[]) =>
+    schemas.find(
+      s => s.enum !== undefined && (s.type === 'string' || s.type === undefined)
+    );
+  const findTextSchema = (schemas: JsonSchema[]) =>
+    schemas.find(s => s.type === 'string' && s.enum === undefined);
+  const enumSchema = findEnumSchema(schema.anyOf);
+  const textSchema = findTextSchema(schema.anyOf);
+  const maxLength = textSchema.maxLength;
+  const mergedConfig = merge({}, config, uischema.options);
+  let inputProps: InputBaseComponentProps = {};
+  if (mergedConfig.restrict) {
+    inputProps = { maxLength: maxLength };
+  }
+  if (mergedConfig.trim && maxLength !== undefined) {
+    inputProps.size = maxLength;
+  }
+  const onChange = (ev: any) => handleChange(path, ev.target.value);
+
+  inputProps.list = props.id + 'datalist';
+  const dataList = (
+    <datalist id={props.id + 'datalist'}>
+      {enumSchema.enum.map(optionValue => (
+        <option value={optionValue} key={optionValue} />
+      ))}
+    </datalist>
+  );
+  return (
+    <Input
+      type='text'
+      value={data || ''}
+      onChange={onChange}
+      className={className}
+      id={id}
+      disabled={!enabled}
+      autoFocus={uischema.options && uischema.options.focus}
+      fullWidth={!mergedConfig.trim || maxLength === undefined}
+      inputProps={inputProps}
+      error={!isValid}
+      endAdornment={dataList}
+    />
+  );
+};
+
+export class MaterialSimpleAnyOfControl extends Control<ControlProps, ControlState> {
+  render() {
+    return (
+      <MaterialInputControl {...this.props} input={MuiAutocompleteInputText} />
+    );
+  }
+}
+const hasEnumAndText = (schemas: JsonSchema[]) => {
+  // idea: map to type,enum and check that all types are string and at least one item is of type enum,
+  const enumSchema = schemas.find(
+    s => s.enum !== undefined && (s.type === 'string' || s.type === undefined)
+  );
+  const textSchema = schemas.find(
+    s => s.type === 'string' && s.enum === undefined
+  );
+  const remainingSchemas = schemas.filter(
+    s => s !== enumSchema || s !== textSchema
+  );
+  const wrongType = remainingSchemas.find(s => s.type && s.type !== 'string');
+  return enumSchema && textSchema && !wrongType;
+};
+const simpleAnyOf = and(
+  uiTypeIs('Control'),
+  schemaMatches(
+    schema => schema.hasOwnProperty('anyOf') && hasEnumAndText(schema.anyOf)
+  )
+);
+export const materialSimpleAnyOfControlTester: RankedTester = rankWith(
+  5,
+  simpleAnyOf
+);
+export default connect(
+  mapStateToControlProps,
+  mapDispatchToControlProps
+)(MaterialSimpleAnyOfControl);

packages/material/src/controls/index.ts

@@ -53,6 +53,10 @@ import MaterialTextControl, {
   materialTextControlTester
 } from './MaterialTextControl';
 
+import MaterialSimpleAnyOfControl, {
+  materialSimpleAnyOfControlTester
+} from './MaterialSimpleAnyOfControl';
+
 export {
   MaterialBooleanControl,
   materialBooleanControlTester,
@@ -73,5 +77,7 @@ export {
   MaterialNumberControl,
   materialNumberControlTester,
   MaterialTextControl,
-  materialTextControlTester
+  materialTextControlTester,
+  MaterialSimpleAnyOfControl,
+  materialSimpleAnyOfControlTester
 };

packages/material/src/index.ts

@@ -55,16 +55,18 @@ import {
   materialEnumControlTester,
   MaterialIntegerControl,
   materialIntegerControlTester,
-  MaterialNumberControl,
-  materialNumberControlTester,
-  MaterialTextControl,
-  materialTextControlTester,
   MaterialNativeControl,
   materialNativeControlTester,
+  MaterialNumberControl,
+  materialNumberControlTester,
   MaterialRadioGroupControl,
   materialRadioGroupControlTester,
+  MaterialSimpleAnyOfControl,
+  materialSimpleAnyOfControlTester,
   MaterialSliderControl,
-  materialSliderControlTester
+  materialSliderControlTester,
+  MaterialTextControl,
+  materialTextControlTester
 } from './controls';
 import {
   MaterialArrayLayout,
@@ -151,6 +153,10 @@ export const materialRenderers: JsonFormsRendererRegistryEntry[] = [
   {
     tester: materialListWithDetailTester,
     renderer: MaterialListWithDetailRenderer
+  },
+  {
+    tester: materialSimpleAnyOfControlTester,
+    renderer: MaterialSimpleAnyOfControl
   }
 ];
 

packages/material/test/renderers/MaterialSimpleAnyOfRenderer.test.tsx

@@ -0,0 +1,137 @@
+/*
+  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 React from 'react';
+import { Provider } from 'react-redux';
+
+import Enzyme, { mount, ReactWrapper } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import {
+  Actions,
+  ControlElement,
+  jsonformsReducer,
+  JsonFormsState,
+  JsonSchema,
+  UISchemaElement
+} from '@jsonforms/core';
+import {
+  materialRenderers, MaterialSimpleAnyOfControl, materialSimpleAnyOfControlTester
+} from '../../src';
+import { combineReducers, createStore, Store } from 'redux';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+const schema: JsonSchema = {
+  anyOf: [{ type: 'string' }, { enum: ['foo', 'bar'] }]
+};
+
+const uischema: ControlElement = {
+  type: 'Control',
+  scope: '#'
+};
+
+describe('Material simple any of control tester', () => {
+  it('should only be applicable for simple any of cases', () => {
+    expect(materialSimpleAnyOfControlTester({ type: 'Foo' }, schema)).toBe(-1);
+    expect(materialSimpleAnyOfControlTester(uischema, schema)).toBe(5);
+
+    const nestedSchema: JsonSchema = {
+      properties: {
+        foo: { anyOf: [{ type: 'string' }, { enum: ['foo', 'bar'] }] }
+      }
+    };
+    const nestedUischema: ControlElement = {
+      type: 'Control',
+      scope: '#/properties/foo'
+    };
+    expect(materialSimpleAnyOfControlTester(nestedUischema, nestedSchema)).toBe(
+      5
+    );
+    const schemaNoEnum: JsonSchema = {
+      anyOf: [{ type: 'string' }]
+    };
+    const schemaConflictTypes: JsonSchema = {
+      anyOf: [{ type: 'string' }, { type: 'integer', enum: [1, 2] }]
+    };
+    const schemaAdditionalProps: JsonSchema = {
+      anyOf: [{ type: 'string' }, { enum: ['foo', 'bar'] }, { maxLength: 5 }]
+    };
+    const schemaNoString: JsonSchema = {
+      anyOf: [{ type: 'integer' }, { enum: [1, 2] }]
+    };
+    expect(materialSimpleAnyOfControlTester(uischema, schemaNoEnum)).toBe(-1);
+    expect(
+      materialSimpleAnyOfControlTester(uischema, schemaConflictTypes)
+    ).toBe(-1);
+    expect(
+      materialSimpleAnyOfControlTester(uischema, schemaAdditionalProps)
+    ).toBe(5);
+    expect(materialSimpleAnyOfControlTester(uischema, schemaNoString)).toBe(-1);
+  });
+});
+
+const initJsonFormsStore = (
+    testData: any,
+    testSchema: JsonSchema,
+    testUiSchema: UISchemaElement
+  ): Store<JsonFormsState> => {
+    const s: JsonFormsState = {
+      jsonforms: {
+        renderers: materialRenderers
+      }
+    };
+    const store: Store<JsonFormsState> = createStore(
+      combineReducers({ jsonforms: jsonformsReducer() }),
+      s
+    );
+    store.dispatch(Actions.init(testData, testSchema, testUiSchema));
+    return store;
+  };
+
+describe('Material input control', () => {
+    let wrapper: ReactWrapper;
+
+    afterEach(() => {
+      wrapper.unmount();
+    });
+
+    it('render', () => {
+      const store = initJsonFormsStore('foo', schema, uischema);
+      wrapper = mount(
+        <Provider store={store}>
+          <MaterialSimpleAnyOfControl schema={schema} uischema={uischema} />
+        </Provider>
+      );
+      const inputs = wrapper.find('input');
+      expect(inputs).toHaveLength(1);
+
+      const datalist = wrapper.find('datalist');
+      expect(datalist).toHaveLength(1);
+      expect(datalist.children()).toHaveLength(2);
+
+      const validation = wrapper.find('p').first();
+      expect(validation.props().className).toContain('MuiFormHelperText-root');
+      expect(validation.children()).toHaveLength(0);
+    });
+});