Add MaterialRadioGroupControl and vanilla RadioGroupControl (#989)

- add new controls and tests

packages/material/src/controls/MaterialRadioGroupControl.tsx

@@ -0,0 +1,112 @@
+/*
+  The MIT License
+
+  Copyright (c) 2018 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 * as React from 'react';
+import {
+    computeLabel,
+    ControlElement,
+    ControlProps,
+    ControlState,
+    formatErrorMessage,
+    isDescriptionHidden,
+    isPlainLabel,
+    mapDispatchToControlProps,
+    mapStateToControlProps,
+    resolveSchema,
+} from '@jsonforms/core';
+import { connectToJsonForms, Control } from '@jsonforms/react';
+import Radio from '@material-ui/core/Radio';
+import RadioGroup from '@material-ui/core/RadioGroup';
+import {
+    FormControl,
+    FormControlLabel,
+    FormHelperText,
+    FormLabel
+} from '@material-ui/core';
+
+export class MaterialRadioGroupControl extends Control<ControlProps, ControlState> {
+    render() {
+        const {
+            config,
+            id,
+            label,
+            required,
+            description,
+            errors,
+            data,
+            uischema,
+            schema,
+            visible
+        } = this.props;
+        const isValid = errors.length === 0;
+        const style: { [x: string]: any } = {};
+        if (!visible) {
+            style.display = 'none';
+        }
+        const trim = config.trim;
+        const showDescription = !isDescriptionHidden(visible, description, this.state.isFocused);
+
+        const options = resolveSchema(schema, (uischema as ControlElement).scope).enum;
+
+        return (
+            <FormControl
+                component='fieldset'
+                fullWidth={!trim}
+            >
+                <FormLabel
+                    htmlFor={id}
+                    error={!isValid}
+                    component='legend'
+                >
+                    {computeLabel(isPlainLabel(label) ? label : label.default, required)}
+                </FormLabel>
+
+                <RadioGroup
+                    value={this.state.value}
+                    onChange={(_ev, value) => this.handleChange(value)}
+                    row={true}
+                >
+                    {
+                        options.map(optionValue =>
+                            (
+                                <FormControlLabel
+                                    value={optionValue}
+                                    key={optionValue}
+                                    control={<Radio checked={data === optionValue} />}
+                                    label={optionValue}
+                                />
+                            )
+                        )
+                    }
+                </RadioGroup>
+                <FormHelperText error={!isValid}>
+                    {!isValid ? formatErrorMessage(errors) : showDescription ? description : null}
+                </FormHelperText>
+            </FormControl>
+        );
+    }
+}
+
+export default connectToJsonForms(mapStateToControlProps, mapDispatchToControlProps)
+    (MaterialRadioGroupControl);

packages/material/test/renderers/MaterialRadioGroupControl.test.tsx

@@ -0,0 +1,115 @@
+/*
+  The MIT License
+
+  Copyright (c) 2018 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 * as React from 'react';
+import {
+  Actions,
+  isEnumControl,
+  jsonformsReducer,
+  JsonFormsState,
+  rankWith,
+  update
+} from '@jsonforms/core';
+import MaterialRadioGroupControl from '../../src/controls/MaterialRadioGroupControl';
+import { Provider } from 'react-redux';
+import * as TestUtils from 'react-dom/test-utils';
+import * as _ from 'lodash';
+import { materialFields, materialRenderers } from '../../src';
+import { combineReducers, createStore, Store } from 'redux';
+
+const data = { foo: 'D' };
+const schema = {
+  type: 'object',
+  properties: {
+    foo: {
+      type: 'string',
+      enum: ['A', 'B', 'C', 'D']
+    }
+  }
+};
+const uischema = {
+  type: 'Control',
+  scope: '#/properties/foo'
+};
+
+const initJsonFormsStore = (testData, testSchema, testUiSchema): Store<JsonFormsState> => {
+  const store: Store<JsonFormsState> = createStore(
+    combineReducers({ jsonforms: jsonformsReducer() }),
+    {
+      jsonforms: {
+        renderers: [
+          ...materialRenderers,
+           {
+      tester: rankWith(10, isEnumControl),
+      renderer: MaterialRadioGroupControl
+    }
+  ],
+  fields: materialFields
+      }
+    }
+  );
+
+  store.dispatch(Actions.init(testData, testSchema, testUiSchema));
+  return store;
+};
+
+describe('Material radio group control', () => {
+  it('Radio group should have data option selected', () => {
+    const store = initJsonFormsStore(data, schema, uischema);
+    const tree = TestUtils.renderIntoDocument(
+      <Provider store={store}>
+        <MaterialRadioGroupControl schema={schema} uischema={uischema} data={data} />
+      </Provider>
+    );
+
+    const inputs: HTMLInputElement[] = TestUtils.scryRenderedDOMComponentsWithTag(tree, 'input');
+    const radioButtons = _.filter(inputs, i => i.type === 'radio');
+    expect(radioButtons.length).toBe(4);
+    // make sure one option is selected and it is "D"
+    const currentlyChecked = _.filter(radioButtons, radio => radio.checked);
+    expect(currentlyChecked.length).toBe(1);
+    expect(currentlyChecked[0].value).toBe('D');
+  });
+});
+
+describe('Material radio group control selection', () => {
+  it('Radio group should have only one selected option ', () => {
+    const store = initJsonFormsStore(data, schema, uischema);
+    const tree = TestUtils.renderIntoDocument(
+      <Provider store={store}>
+        <MaterialRadioGroupControl schema={schema} uischema={uischema} data={data} />
+      </Provider>
+    );
+
+    const inputs: HTMLInputElement[] = TestUtils.scryRenderedDOMComponentsWithTag(tree, 'input');
+    const radioButtons = _.filter(inputs, i => i.type === 'radio');
+
+    // change and verify selection
+    store.dispatch(update('foo', () => 'A'));
+    store.dispatch(update('foo', () => 'B'));
+    const currentlyChecked = _.filter(radioButtons, radio => radio.checked);
+    expect(currentlyChecked.length).toBe(1);
+    expect(currentlyChecked[0].value).toBe('B');
+  });
+});

packages/vanilla/src/controls/RadioGroupControl.tsx

@@ -0,0 +1,112 @@
+/*
+  The MIT License
+
+  Copyright (c) 2018 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 * as React from 'react';
+import {
+    computeLabel,
+    ControlElement,
+    ControlState,
+    formatErrorMessage,
+    isDescriptionHidden,
+    isPlainLabel,
+    mapDispatchToControlProps,
+    mapStateToControlProps,
+    resolveSchema
+} from '@jsonforms/core';
+import { connectToJsonForms, Control } from '@jsonforms/react';
+import { VanillaControlProps } from '../index';
+import { addVanillaControlProps } from '../util';
+
+export class RadioGroupControl extends Control<VanillaControlProps, ControlState> {
+
+    render() {
+        const {
+            classNames,
+            id,
+            label,
+            required,
+            description,
+            errors,
+            data,
+            uischema,
+            schema,
+            visible,
+        } = this.props;
+        const isValid = errors.length === 0;
+        const divClassNames =
+            `validation  ${isValid ? classNames.description : 'validation_error'}`;
+        const style: { [x: string]: any } = {};
+        if (!visible) {
+            style.display = 'none';
+        }
+
+        const showDescription = !isDescriptionHidden(visible, description, this.state.isFocused);
+
+        const options = resolveSchema(schema, (uischema as ControlElement).scope).enum;
+
+        return (
+            <div
+                className={classNames.wrapper}
+                hidden={!visible}
+                onFocus={this.onFocus}
+                onBlur={this.onBlur}
+            >
+                <label htmlFor={id} className={classNames.label} >
+                    {computeLabel(isPlainLabel(label) ? label : label.default, required)}
+                </label>
+
+                <form>
+                    {
+                        options.map(optionValue =>
+                            (
+                                <div>
+                                    <input
+                                        type='radio'
+                                        value={optionValue}
+                                        key={optionValue}
+                                        id={optionValue}
+                                        name={id}
+                                        checked={data === optionValue}
+                                        onChange={ev =>
+                                            this.handleChange(ev.currentTarget.value)
+                                        }
+                                    />
+                                    <label htmlFor={optionValue}>{optionValue}</label>
+                                </div>
+
+                            )
+                        )
+                    }
+                </form>
+                <div className={divClassNames}>
+                    {!isValid ? formatErrorMessage(errors) : showDescription ? description : null}
+                </div>
+            </div>
+        );
+    }
+}
+
+export default connectToJsonForms(
+    addVanillaControlProps(mapStateToControlProps), mapDispatchToControlProps)
+    (RadioGroupControl);