Add React Material oneOf enum cell

Also includes example and test cases.

Author: ryan-bennett

packages/core/src/util/cell.ts

@@ -38,7 +38,7 @@ import { JsonFormsState } from '../store';
 import { JsonFormsCellRendererRegistryEntry } from '../reducers/cells';
 import { JsonSchema } from '../models/jsonSchema';
 import { isInherentlyEnabled, isVisible } from './runtime';
-import { AnyAction, Dispatch, formatErrorMessage, Resolve } from '.';
+import { AnyAction, Dispatch, formatErrorMessage, oneOfToEnumOptionMapper, Resolve } from '.';
 
 export { JsonFormsCellRendererRegistryEntry };
 
@@ -189,6 +189,27 @@ export const defaultMapStateToEnumCellProps = (
   };
 };
 
+/**
+ * mapStateToOneOfEnumCellProps for one of enum cell. Options is used for populating dropdown list from oneOf
+ * @param state
+ * @param ownProps
+ * @returns {StatePropsOfEnumCell}
+ */
+export const mapStateToOneOfEnumCellProps = (
+  state: JsonFormsState,
+  ownProps: OwnPropsOfEnumCell
+): StatePropsOfEnumCell => {
+  const props: StatePropsOfCell = mapStateToCellProps(state, ownProps);
+  const options: EnumOption[] =
+    ownProps.options ||
+    (props.schema.oneOf as JsonSchema[])?.map(oneOfToEnumOptionMapper);
+  return {
+    ...props,
+    options
+  };
+};
+
+
 /**
  * Synonym for mapDispatchToControlProps.
  *

packages/core/test/util/cell.test.ts

@@ -30,7 +30,7 @@ import {
   defaultMapDispatchToControlProps,
   defaultMapStateToEnumCellProps,
   DispatchPropsOfCell,
-  mapStateToCellProps
+  mapStateToCellProps, mapStateToOneOfEnumCellProps, oneOfToEnumOptionMapper
 } from '../../src/util';
 import { UPDATE_DATA, UpdateAction } from '../../src/actions';
 import configureStore from 'redux-mock-store';
@@ -291,6 +291,34 @@ test('mapStateToEnumCellProps - set default options for dropdown list', t => {
   t.is(props.data, undefined);
 });
 
+
+test('mapStateToOneOfEnumCellProps - set one of options for dropdown list', t => {
+  const uischema: ControlElement = {
+    type: 'Control',
+    scope: '#/properties/country'
+  };
+  const ownProps = {
+    schema: {
+      oneOf: [
+        {
+          const: 'AU',
+          title: 'Australia'
+        },
+        {
+          const: 'NZ',
+          title: 'New Zealand'
+        }
+      ]
+    },
+    uischema,
+    path: 'country'
+  };
+
+  const props = mapStateToOneOfEnumCellProps(createState(uischema), ownProps);
+  t.deepEqual(props.options, [{title: 'Australia' , const: 'AU', }, { title: 'New Zealand', const: 'NZ' }].map(oneOfToEnumOptionMapper));
+  t.is(props.data, undefined);
+});
+
 test('defaultMapDispatchToControlProps, initialized with custom handleChange', t => {
   let didChange = false;
   const uiSchema = {

packages/examples/src/enumInArray.ts

@@ -0,0 +1,44 @@
+import { registerExamples } from './register';
+
+export const schema = {
+  type: 'array',
+  items: {
+    type: 'object',
+    properties: {
+      plainEnum: {
+        type: 'string',
+        enum: ['foo', 'bar']
+      },
+      oneOfEnum: {
+        type: 'string',
+        oneOf: [
+          { const: 'foo', title: 'Foo' },
+          { const: 'bar', title: 'Bar' },
+          { const: 'foobar', title: 'FooBar' }
+        ]
+      },
+    }
+  }
+};
+
+export const uischema = {
+  type: 'VerticalLayout',
+  elements: [
+    {
+      type: 'Control',
+      scope: '#'
+    }
+  ]
+};
+
+export const data: any[] = [];
+
+registerExamples([
+  {
+    name: 'enumInArray',
+    label: 'Array containing enums',
+    data,
+    schema,
+    uischema
+  }
+]);

packages/examples/src/index.ts

@@ -72,6 +72,7 @@ import * as enumExample from './enum';
 import * as radioGroupExample from './radioGroup';
 import * as booleanToggle from './booleanToggle';
 import * as multiEnum from './multi-enum';
+import * as enumInArray from './enumInArray';
 import * as readonly from './readonly';
 export * from './register';
 export * from './example';
@@ -130,5 +131,6 @@ export {
   radioGroupExample,
   booleanToggle,
   multiEnum,
+  enumInArray,
   readonly
 };

packages/material/src/cells/CustomizableCells.ts

@@ -28,5 +28,6 @@ export { MaterialEnumCell } from './MaterialEnumCell';
 export { MaterialIntegerCell } from './MaterialIntegerCell';
 export { MaterialNumberCell } from './MaterialNumberCell';
 export { MaterialNumberFormatCell } from './MaterialNumberFormatCell';
+export { MaterialOneOfEnumCell } from './MaterialOneOfEnumCell';
 export { MaterialTextCell } from './MaterialTextCell';
 export { MaterialTimeCell } from './MaterialTimeCell';

packages/material/src/cells/MaterialOneOfEnumCell.tsx

@@ -0,0 +1,46 @@
+/*
+  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 {
+  EnumCellProps,
+  isOneOfEnumControl,
+  RankedTester,
+  rankWith,
+  WithClassname
+} from '@jsonforms/core';
+import { withJsonFormsOneOfEnumCellProps } from '@jsonforms/react';
+import { MuiSelect } from '../mui-controls/MuiSelect';
+
+export const MaterialOneOfEnumCell = (props: EnumCellProps & WithClassname) => (
+  <MuiSelect {...props} />
+);
+
+/**
+ * Default tester for oneOf enum controls.
+ * @type {RankedTester}
+ */
+export const materialOneOfEnumCellTester: RankedTester = rankWith(2, isOneOfEnumControl);
+
+export default withJsonFormsOneOfEnumCellProps(MaterialOneOfEnumCell);

packages/material/src/cells/index.ts

@@ -39,6 +39,9 @@ import MaterialNumberCell, {
 import MaterialNumberFormatCell, {
   materialNumberFormatCellTester
 } from './MaterialNumberFormatCell';
+import MaterialOneOfEnumCell, {
+  materialOneOfEnumCellTester
+} from './MaterialOneOfEnumCell';
 import MaterialTextCell, { materialTextCellTester } from './MaterialTextCell';
 import MaterialTimeCell, { materialTimeCellTester } from './MaterialTimeCell';
 
@@ -57,6 +60,8 @@ export {
   materialNumberCellTester,
   MaterialNumberFormatCell,
   materialNumberFormatCellTester,
+  MaterialOneOfEnumCell,
+  materialOneOfEnumCellTester,
   MaterialTextCell,
   materialTextCellTester,
   MaterialTimeCell,

packages/material/src/index.ts

@@ -103,6 +103,8 @@ import {
   materialNumberCellTester,
   MaterialNumberFormatCell,
   materialNumberFormatCellTester,
+  MaterialOneOfEnumCell,
+  materialOneOfEnumCellTester,
   MaterialTextCell,
   materialTextCellTester,
   MaterialTimeCell,
@@ -188,6 +190,7 @@ export const materialCells: JsonFormsCellRendererRegistryEntry[] = [
   { tester: materialIntegerCellTester, cell: MaterialIntegerCell },
   { tester: materialNumberCellTester, cell: MaterialNumberCell },
   { tester: materialNumberFormatCellTester, cell: MaterialNumberFormatCell },
+  { tester: materialOneOfEnumCellTester, cell: MaterialOneOfEnumCell },
   { tester: materialTextCellTester, cell: MaterialTextCell },
   { tester: materialTimeCellTester, cell: MaterialTimeCell }
 ];

packages/material/test/renderers/MaterialOneOfEnumCell.test.tsx

@@ -0,0 +1,93 @@
+/*
+  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 './MatchMediaMock';
+import * as React from 'react';
+import {
+  ControlElement
+} from '@jsonforms/core';
+import MaterialOneOfEnumCell, {
+  materialOneOfEnumCellTester
+} from '../../src/cells/MaterialOneOfEnumCell';
+import {  materialRenderers } from '../../src';
+
+import Enzyme, { mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import { JsonFormsStateProvider } from '@jsonforms/react';
+import { initCore } from './util';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+const data = { country: 'AU' };
+const schema = {
+  type: 'string',
+  oneOf: [
+    {
+      const: 'AU',
+      title: 'Australia'
+    },
+    {
+      const: 'NZ',
+      title: 'New Zealand'
+    }
+  ]
+};
+const uischema: ControlElement = {
+  type: 'Control',
+  scope: '#/properties/country'
+};
+
+describe('Material one of enum cell tester', () => {
+  it('should succeed with matching prop type', () => {
+    const control: ControlElement = {
+      type: 'Control',
+      scope: '#/properties/country'
+    };
+    expect(
+      materialOneOfEnumCellTester(control, {
+        type: 'object',
+        properties: {
+          country: schema
+        }
+      })
+    ).toBe(2);
+  });
+});
+
+describe('Material enum cell', () => {
+  it('should select an item from dropdown list', () => {
+    const core = initCore(schema, uischema, data);
+    const wrapper = mount(
+      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+        <MaterialOneOfEnumCell
+          schema={schema}
+          uischema={uischema}
+          path='country'
+        />
+      </JsonFormsStateProvider>
+    );
+    const input = wrapper.find('input');
+    expect(input.props().value).toBe('AU');
+  });
+});

packages/react/src/JsonFormsContext.tsx

@@ -65,6 +65,7 @@ import {
   mapStateToMasterListItemProps,
   mapStateToOneOfProps,
   mapStateToOneOfEnumControlProps,
+  mapStateToOneOfEnumCellProps,
   mapDispatchToMultiEnumProps,
   update,
   mapStateToMultiEnumControlProps,
@@ -271,6 +272,13 @@ export const ctxToEnumCellProps = (
   return defaultMapStateToEnumCellProps({ jsonforms: { ...ctx } }, ownProps);
 };
 
+export const ctxToOneOfEnumCellProps = (
+  ctx: JsonFormsStateContext,
+  props: OwnPropsOfControl
+) => {
+  return mapStateToOneOfEnumCellProps({jsonforms: {...ctx}}, props);
+};
+
 export const ctxToDispatchCellProps = (
   ctx: JsonFormsStateContext,
   ownProps: OwnPropsOfCell
@@ -402,6 +410,14 @@ const withContextToEnumProps =
       return (<Component {...props} {...dispatchProps} {...stateProps} options={stateProps.options} />);
     };
 
+const withContextToOneOfEnumCellProps =
+  (Component: ComponentType<EnumCellProps>): ComponentType<OwnPropsOfEnumCell> =>
+    ({ ctx, props }: JsonFormsStateContext & EnumCellProps) => {
+      const cellProps = ctxToOneOfEnumCellProps(ctx, props);
+      const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
+      return (<Component {...props} {...dispatchProps} {...cellProps} />);
+    };
+
 const withContextToOneOfEnumProps =
   (Component: ComponentType<ControlProps & OwnPropsOfEnum>): ComponentType<OwnPropsOfControl & OwnPropsOfEnum> =>
     ({ ctx, props }: JsonFormsStateContext & ControlProps & OwnPropsOfEnum) => {
@@ -532,6 +548,13 @@ export const withJsonFormsEnumProps =
       (prevProps: ControlProps & OwnPropsOfEnum, nextProps: ControlProps & OwnPropsOfEnum) => areEqual(prevProps, nextProps)
     )));
 
+export const withJsonFormsOneOfEnumCellProps =
+  (Component: ComponentType<EnumCellProps>): ComponentType<OwnPropsOfEnumCell> =>
+    withJsonFormsContext(withContextToOneOfEnumCellProps(React.memo(
+      Component,
+      (prevProps: EnumCellProps, nextProps: EnumCellProps) => areEqual(prevProps, nextProps)
+    )));
+
 export const withJsonFormsOneOfEnumProps =
   (Component: ComponentType<ControlProps & OwnPropsOfEnum>): ComponentType<OwnPropsOfControl & OwnPropsOfEnum> =>
     withJsonFormsContext(withContextToOneOfEnumProps(React.memo(