Add label support for enums

Support labels for enums with an oneOf-based construct. The
idea is to model enums as a 'oneOf' of 'const' values each defining
a label for their value with the 'title' property.

- Add an example for enums
- Add a tester for oneOf enums
- Add a control to render oneOf enums based on MUISelect

Also:
- Updated dependencies to include typescript > 3.7

package.json

@@ -36,7 +36,7 @@
     "tslint-loader": "^3.5.4",
     "tslint-react": "^4.1.0",
     "typedoc": "^0.15.3",
-    "typescript": "3.6.4",
+    "typescript": "3.8.3",
     "webpack": "^4.41.2",
     "webpack-merge": "^4.2.2"
   }

packages/core/src/testers/index.ts

@@ -304,6 +304,19 @@ export const isEnumControl = and(
   )
 );
 
+/**
+ * Tests whether the given UI schema is of type Control and if the schema
+ * has an enum based on oneOf.
+ * @type {Tester}
+ */
+export const isOneOfEnumControl = and(
+  uiTypeIs('Control'),
+  schemaMatches(schema =>
+    schema.hasOwnProperty('oneOf') &&
+    (schema.oneOf as JsonSchema[]).every(s => s.const !== undefined)
+  )
+);
+
 /**
  * Tests whether the given UI schema is of type Control and if the schema
  * is of type integer

packages/core/src/util/cell.ts

@@ -34,7 +34,12 @@ import {
   Resolve,
   StatePropsOfScopedRenderer
 } from '.';
-import { DispatchPropsOfControl, mapDispatchToControlProps } from './renderer';
+import {
+  DispatchPropsOfControl,
+  EnumOption,
+  enumToEnumOptionMapper,
+  mapDispatchToControlProps,
+} from './renderer';
 import { JsonFormsState } from '../store';
 import { AnyAction, Dispatch } from 'redux';
 import { JsonFormsCellRendererRegistryEntry } from '../reducers/cells';
@@ -157,8 +162,10 @@ export const defaultMapStateToEnumCellProps = (
   ownProps: OwnPropsOfEnumCell
 ): StatePropsOfEnumCell => {
   const props: StatePropsOfCell = mapStateToCellProps(state, ownProps);
-  const options =
-    ownProps.options !== undefined ? ownProps.options : props.schema.enum;
+  const options: EnumOption[] =
+    ownProps.options ||
+    props.schema.enum?.map(enumToEnumOptionMapper) ||
+    props.schema.const && [enumToEnumOptionMapper(props.schema.const)];
   return {
     ...props,
     options

packages/core/src/util/renderer.ts

@@ -172,6 +172,16 @@ export interface WithClassname {
   className?: string;
 }
 
+export interface EnumOption {
+  label: string;
+  value: any;
+}
+
+export const enumToEnumOptionMapper = (e: any): EnumOption => {
+  const stringifiedEnum = typeof e === 'string' ? e : JSON.stringify(e);
+  return { label: stringifiedEnum, value: e };
+};
+
 export interface OwnPropsOfRenderer {
   /**
    * The UI schema to be rendered.
@@ -209,7 +219,7 @@ export interface OwnPropsOfControl extends OwnPropsOfRenderer {
 }
 
 export interface OwnPropsOfEnum {
-  options?: any[];
+  options?: EnumOption[];
 }
 
 export interface OwnPropsOfLayout extends OwnPropsOfRenderer {
@@ -455,10 +465,33 @@ export const mapStateToEnumControlProps = (
   ownProps: OwnPropsOfControl & OwnPropsOfEnum
 ): StatePropsOfControl & OwnPropsOfEnum => {
   const props: StatePropsOfControl = mapStateToControlProps(state, ownProps);
-  const options =
-    ownProps.options !== undefined
-      ? ownProps.options
-      : props.schema.enum || [props.schema.const];
+  const options: EnumOption[] =
+      ownProps.options ||
+      props.schema.enum?.map(enumToEnumOptionMapper) ||
+      props.schema.const && [enumToEnumOptionMapper(props.schema.const)];
+  return {
+    ...props,
+    options
+  };
+};
+
+/**
+ * Default mapStateToCellProps for enum control based on oneOf. Options is used for populating dropdown list
+ * @param state
+ * @param ownProps
+ * @returns {StatePropsOfControl & OwnPropsOfEnum}
+ */
+export const mapStateToOneOfEnumControlProps = (
+  state: JsonFormsState,
+  ownProps: OwnPropsOfControl & OwnPropsOfEnum
+): StatePropsOfControl & OwnPropsOfEnum => {
+  const props: StatePropsOfControl = mapStateToControlProps(state, ownProps);
+  const options: EnumOption[] =
+    ownProps.options ||
+    (props.schema.oneOf as JsonSchema[])?.map(e => ({
+      value: e.const,
+      label: e.title || (typeof e.const === 'string' ? e.const : JSON.stringify(e.const))
+    }));
   return {
     ...props,
     options

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

@@ -40,6 +40,7 @@ import {
   RuleEffect,
   UISchemaElement
 } from '../../src';
+import { enumToEnumOptionMapper } from '../../src/util/renderer';
 
 const middlewares: Redux.Middleware[] = [];
 const mockStore = configureStore<JsonFormsState>(middlewares);
@@ -283,7 +284,7 @@ test('mapStateToEnumCellProps - set default options for dropdown list', t => {
   };
 
   const props = defaultMapStateToEnumCellProps(createState(uischema), ownProps);
-  t.deepEqual(props.options, ['DE', 'IT', 'JP', 'US', 'RU', 'Other']);
+  t.deepEqual(props.options, ['DE', 'IT', 'JP', 'US', 'RU', 'Other'].map(enumToEnumOptionMapper));
   t.is(props.data, undefined);
 });
 

packages/examples/src/enum.ts

@@ -0,0 +1,57 @@
+/*
+  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';
+import { UISchemaElement } from '@jsonforms/core';
+
+export const schema = {
+  type: 'object',
+  properties: {
+    plainEnum: {
+      type: 'string',
+      enum: ['foo', 'bar']
+    },
+    oneOfEnum: {
+        type: 'string',
+        oneOf: [
+            {const: 'foo', title: 'Foo'},
+            {const: 'bar', title: 'Bar'}
+        ]
+    }
+  }
+};
+
+export const uischema: UISchemaElement = undefined;
+
+export const data = {};
+
+registerExamples([
+  {
+    name: 'enum',
+    label: 'Enums',
+    data,
+    schema,
+    uischema
+  }
+]);

packages/examples/src/index.ts

@@ -66,6 +66,7 @@ import * as oneOfRecursive from './oneOf-recursive';
 import * as huge from './huge';
 import * as defaultExample from './default';
 import * as onChange from './onChange';
+import * as enumExample from './enum';
 export * from './register';
 export * from './example';
 
@@ -116,5 +117,6 @@ export {
   oneOfRecursive,
   huge,
   ifThenElse,
-  onChange
+  onChange,
+  enumExample
 };

packages/material/src/controls/MaterialOneOfEnumControl.tsx

@@ -0,0 +1,49 @@
+/*
+  The MIT License
+
+  Copyright (c) 2018-2020 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 {
+  ControlProps,
+  isOneOfEnumControl,
+  OwnPropsOfEnum,
+  RankedTester,
+  rankWith,
+} from '@jsonforms/core';
+import { withJsonFormsOneOfEnumProps } from '@jsonforms/react';
+import { MuiSelect } from '../mui-controls/MuiSelect';
+import { MaterialInputControl } from './MaterialInputControl';
+
+export const MaterialOneOfEnumControl = (props: ControlProps & OwnPropsOfEnum) => (
+  <MaterialInputControl
+    {...props}
+    input={MuiSelect}
+  />
+);
+
+export const materialOneOfEnumControlTester: RankedTester = rankWith(
+  10,
+  isOneOfEnumControl
+);
+
+export default withJsonFormsOneOfEnumProps(MaterialOneOfEnumControl);

packages/material/src/controls/index.ts

@@ -68,6 +68,11 @@ import MaterialAnyOfStringOrEnumControl, {
   MaterialAnyOfStringOrEnumControl as MaterialAnyOfStringOrEnumControlUnwrapped
 } from './MaterialAnyOfStringOrEnumControl';
 
+import MaterialOneOfEnumControl, {
+  materialOneOfEnumControlTester,
+  MaterialOneOfEnumControl as MaterialOneOfEnumControlUnwrapped
+} from './MaterialOneOfEnumControl';
+
 export const Unwrapped = {
   MaterialBooleanControl: MaterialBooleanControlUnwrapped,
   MaterialEnumControl: MaterialEnumControlUnwrapped,
@@ -79,7 +84,8 @@ export const Unwrapped = {
   MaterialIntegerControl: MaterialIntegerControlUnwrapped,
   MaterialNumberControl: MaterialNumberControlUnwrapped,
   MaterialTextControl: MaterialTextControlUnwrapped,
-  MaterialAnyOfStringOrEnumControl: MaterialAnyOfStringOrEnumControlUnwrapped
+  MaterialAnyOfStringOrEnumControl: MaterialAnyOfStringOrEnumControlUnwrapped,
+  MaterialOneOfEnumControl: MaterialOneOfEnumControlUnwrapped,
 };
 
 export {
@@ -104,5 +110,7 @@ export {
   MaterialTextControl,
   materialTextControlTester,
   MaterialAnyOfStringOrEnumControl,
-  materialAnyOfStringOrEnumControlTester
+  materialAnyOfStringOrEnumControlTester,
+  MaterialOneOfEnumControl,
+  materialOneOfEnumControlTester,
 };

packages/material/src/index.ts

@@ -61,6 +61,8 @@ import {
   materialNativeControlTester,
   MaterialNumberControl,
   materialNumberControlTester,
+  MaterialOneOfEnumControl,
+  materialOneOfEnumControlTester,
   MaterialRadioGroupControl,
   materialRadioGroupControlTester,
   MaterialSliderControl,
@@ -132,6 +134,7 @@ export const materialRenderers: JsonFormsRendererRegistryEntry[] = [
     tester: materialRadioGroupControlTester,
     renderer: MaterialRadioGroupControl
   },
+  { tester: materialOneOfEnumControlTester, renderer: MaterialOneOfEnumControl },
   // layouts
   { tester: materialGroupTester, renderer: MaterialGroupLayout },
   {

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

@@ -56,8 +56,8 @@ export const MuiSelect = React.memo((props: EnumCellProps & WithClassname) => {
     >
       {[<MenuItem value='' key={'empty'} />].concat(
         options.map(optionValue => (
-          <MenuItem value={optionValue} key={optionValue}>
-            {optionValue}
+          <MenuItem value={optionValue.value} key={optionValue.value}>
+            {optionValue.label}
           </MenuItem>
         ))
       )}

packages/react/src/JsonFormsContext.tsx

@@ -30,6 +30,7 @@ import {
   CellProps,
   CombinatorProps,
   ControlProps,
+  defaultMapStateToEnumCellProps,
   DispatchCellProps,
   DispatchPropsOfControl,
   EnumCellProps,
@@ -64,6 +65,7 @@ import {
   mapStateToLayoutProps,
   mapStateToMasterListItemProps,
   mapStateToOneOfProps,
+  mapStateToOneOfEnumControlProps,
   update
 } from '@jsonforms/core';
 import React, { ComponentType, Dispatch, ReducerAction, useCallback, useContext, useEffect, useReducer, useRef } from 'react';
@@ -193,6 +195,9 @@ export const ctxToControlProps = (ctx: JsonFormsStateContext, props: OwnPropsOfC
 export const ctxToEnumControlProps = (ctx: JsonFormsStateContext, props: OwnPropsOfControl) =>
   mapStateToEnumControlProps({ jsonforms: { ...ctx } }, props);
 
+export const ctxToOneOfEnumControlProps = (ctx: JsonFormsStateContext, props: OwnPropsOfControl) =>
+  mapStateToOneOfEnumControlProps({ jsonforms: { ...ctx } }, props);
+
 export const ctxToControlWithDetailProps = (
   ctx: JsonFormsStateContext,
   props: OwnPropsOfControl
@@ -261,6 +266,13 @@ export const ctxToCellProps = (
   return mapStateToCellProps({ jsonforms: { ...ctx } }, ownProps);
 };
 
+export const ctxToEnumCellProps = (
+  ctx: JsonFormsStateContext,
+  ownProps: OwnPropsOfCell
+) => {
+  return defaultMapStateToEnumCellProps({ jsonforms: { ...ctx } }, ownProps);
+};
+
 export const ctxToDispatchCellProps = (
   ctx: JsonFormsStateContext,
   ownProps: OwnPropsOfCell
@@ -375,11 +387,10 @@ const withContextToDispatchCellProps = (
 const withContextToEnumCellProps =
   (Component: ComponentType<EnumCellProps>): ComponentType<OwnPropsOfEnumCell> =>
     ({ ctx, props }: JsonFormsStateContext & EnumCellProps) => {
-      const cellProps = ctxToCellProps(ctx, props);
+      const cellProps = ctxToEnumCellProps(ctx, props);
       const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
-      const options = props.options !== undefined ? props.options : props.schema.enum || [props.schema.const];
 
-      return (<Component {...props} {...dispatchProps} {...cellProps} options={options} />);
+      return (<Component {...props} {...dispatchProps} {...cellProps} />);
     };
 
 const withContextToEnumProps =
@@ -389,6 +400,13 @@ const withContextToEnumProps =
       const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
       return (<Component {...props} {...dispatchProps} {...stateProps} options={stateProps.options} />);
     };
+const withContextToOneOfEnumProps =
+  (Component: ComponentType<ControlProps & OwnPropsOfEnum>): ComponentType<OwnPropsOfControl & OwnPropsOfEnum> =>
+    ({ ctx, props }: JsonFormsStateContext & ControlProps & OwnPropsOfEnum) => {
+      const stateProps = ctxToOneOfEnumControlProps(ctx, props);
+      const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
+      return (<Component {...props} {...dispatchProps} {...stateProps} options={stateProps.options} />);
+    };
 
 // --
 
@@ -502,4 +520,10 @@ export const withJsonFormsEnumProps =
       Component,
       (prevProps: ControlProps & OwnPropsOfEnum, nextProps: ControlProps & OwnPropsOfEnum) => isEqual(prevProps, nextProps)
     )));
+export const withJsonFormsOneOfEnumProps =
+  (Component: ComponentType<ControlProps & OwnPropsOfEnum>): ComponentType<OwnPropsOfControl & OwnPropsOfEnum> =>
+    withJsonFormsContext(withContextToOneOfEnumProps(React.memo(
+      Component,
+      (prevProps: ControlProps & OwnPropsOfEnum, nextProps: ControlProps & OwnPropsOfEnum) => isEqual(prevProps, nextProps)
+    )));
 // --