Register RadioGroupControl in React Vanilla

packages/vanilla/src/controls/OneOfRadioGroupControl.tsx

@@ -0,0 +1,48 @@
+/*
+  The MIT License
+
+  Copyright (c) 2018-2021 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 {
+  and,
+  ControlProps,
+  isOneOfEnumControl,
+  optionIs,
+  RankedTester,
+  rankWith,
+} from '@jsonforms/core';
+import { withVanillaControlProps } from '../util';
+import { VanillaRendererProps } from '../index';
+import { withJsonFormsOneOfEnumProps } from '@jsonforms/react';
+import { RadioGroup } from './RadioGroup';
+
+export const OneOfRadioGroupControl = (props: ControlProps & VanillaRendererProps) => {
+  return <RadioGroup {...props} />;
+};
+
+export const oneOfRadioGroupControlTester: RankedTester = rankWith(
+  3,
+  and(isOneOfEnumControl, optionIs('format', 'radio'))
+);
+
+export default withVanillaControlProps(withJsonFormsOneOfEnumProps(OneOfRadioGroupControl));

packages/vanilla/src/controls/RadioGroup.tsx

@@ -0,0 +1,107 @@
+/*
+  The MIT License
+
+  Copyright (c) 2017-2021 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 {
+  computeLabel,
+  ControlProps,
+  ControlState,
+  isDescriptionHidden,
+  OwnPropsOfEnum
+} from '@jsonforms/core';
+import { Control } from '@jsonforms/react';
+import { VanillaRendererProps } from '../index';
+import merge from 'lodash/merge';
+
+export class RadioGroup extends Control<
+  ControlProps & VanillaRendererProps & OwnPropsOfEnum,
+  ControlState
+> {
+  render() {
+    const {
+      classNames,
+      id,
+      label,
+      options,
+      required,
+      description,
+      errors,
+      data,
+      uischema,
+      visible,
+      config
+    } = this.props;
+    const isValid = errors.length === 0;
+    const divClassNames = `validation  ${isValid ? classNames.description : 'validation_error'
+      }`;
+    const groupStyle: { [x: string]: any } = {
+      display: 'flex',
+      flexDirection: 'row'
+    };
+
+    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    const showDescription = !isDescriptionHidden(
+      visible,
+      description,
+      this.state.isFocused,
+      appliedUiSchemaOptions.showUnfocusedDescription
+    );
+
+    return (
+      <div
+        className={classNames.wrapper}
+        hidden={!visible}
+        onFocus={this.onFocus}
+        onBlur={this.onBlur}
+      >
+        <label htmlFor={id} className={classNames.label}>
+          {computeLabel(
+            label,
+            required,
+            appliedUiSchemaOptions.hideRequiredAsterisk
+          )}
+        </label>
+
+        <div style={groupStyle}>
+          {options.map(option => (
+            <div key={option.label}>
+              <input
+                type='radio'
+                value={option.value}
+                id={option.value}
+                name={id}
+                checked={data === option.value}
+                onChange={ev => this.handleChange(ev.currentTarget.value)}
+              />
+              <label htmlFor={option.value}>{option.label}</label>
+            </div>
+          ))}
+        </div>
+        <div className={divClassNames}>
+          {!isValid ? errors : showDescription ? description : null}
+        </div>
+      </div>
+    );
+  }
+}

packages/vanilla/src/controls/RadioGroupControl.tsx

@@ -1,7 +1,7 @@
 /*
   The MIT License
 
-  Copyright (c) 2017-2019 EclipseSource Munich
+  Copyright (c) 2017-2021 EclipseSource Munich
   https://github.com/eclipsesource/jsonforms
 
   Permission is hereby granted, free of charge, to any person obtaining a copy
@@ -24,91 +24,21 @@
 */
 import React from 'react';
 import {
-  computeLabel,
+  and,
   ControlProps,
-  ControlState,
-  isDescriptionHidden,
+  isEnumControl,
+  optionIs, RankedTester, rankWith
 } from '@jsonforms/core';
-import { Control, withJsonFormsControlProps } from '@jsonforms/react';
+import { withJsonFormsEnumProps } from '@jsonforms/react';
+import { RadioGroup } from './RadioGroup';
 import { withVanillaControlProps } from '../util';
 import { VanillaRendererProps } from '../index';
-import merge from 'lodash/merge';
+export const RadioGroupControl = (props: ControlProps & VanillaRendererProps) => {
+  return <RadioGroup {...props} />;
+};
 
-export class RadioGroupControl extends Control<
-  ControlProps & VanillaRendererProps,
-  ControlState
-> {
-  render() {
-    const {
-      classNames,
-      id,
-      label,
-      required,
-      description,
-      errors,
-      data,
-      schema,
-      uischema,
-      visible,
-      config
-    } = this.props;
-    const isValid = errors.length === 0;
-    const divClassNames = `validation  ${
-      isValid ? classNames.description : 'validation_error'
-    }`;
-    const groupStyle: { [x: string]: any } = {
-      display: 'flex',
-      flexDirection: 'row'
-    };
-
-    const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    const showDescription = !isDescriptionHidden(
-      visible,
-      description,
-      this.state.isFocused,
-      appliedUiSchemaOptions.showUnfocusedDescription
-    );
-
-    const options = schema.enum;
-
-    return (
-      <div
-        className={classNames.wrapper}
-        hidden={!visible}
-        onFocus={this.onFocus}
-        onBlur={this.onBlur}
-      >
-        <label htmlFor={id} className={classNames.label}>
-          {computeLabel(
-            label,
-            required,
-            appliedUiSchemaOptions.hideRequiredAsterisk
-          )}
-        </label>
-
-        <div style={groupStyle}>
-          {options.map(optionValue => (
-            <div key={optionValue}>
-              <input
-                type='radio'
-                value={optionValue}
-                id={optionValue}
-                name={id}
-                checked={data === optionValue}
-                onChange={ev => this.handleChange(ev.currentTarget.value)}
-              />
-              <label htmlFor={optionValue}>{optionValue}</label>
-            </div>
-          ))}
-        </div>
-        <div className={divClassNames}>
-          {!isValid ? errors : showDescription ? description : null}
-        </div>
-      </div>
-    );
-  }
-}
-
-export default withVanillaControlProps(
-  withJsonFormsControlProps(RadioGroupControl)
+export const radioGroupControlTester: RankedTester = rankWith(
+  3,
+  and(isEnumControl, optionIs('format', 'radio'))
 );
+export default withVanillaControlProps(withJsonFormsEnumProps(RadioGroupControl));

packages/vanilla/src/controls/index.ts

@@ -23,4 +23,13 @@
   THE SOFTWARE.
 */
 import InputControl, { inputControlTester } from './InputControl';
-export { InputControl, inputControlTester };
+import RadioGroupControl, { radioGroupControlTester } from './RadioGroupControl';
+import OneOfRadioGroupControl, { oneOfRadioGroupControlTester } from './OneOfRadioGroupControl';
+export {
+  InputControl,
+  inputControlTester,
+  RadioGroupControl,
+  radioGroupControlTester,
+  OneOfRadioGroupControl,
+  oneOfRadioGroupControlTester
+};

packages/vanilla/src/index.ts

@@ -46,7 +46,7 @@ import {
   timeCellTester
 } from './cells';
 
-import { InputControl, inputControlTester } from './controls';
+import { InputControl, inputControlTester, RadioGroupControl, radioGroupControlTester, OneOfRadioGroupControl, oneOfRadioGroupControlTester,  } from './controls';
 
 import {
   ArrayControl,
@@ -110,6 +110,8 @@ export * from './styles';
 
 export const vanillaRenderers: { tester: RankedTester; renderer: any }[] = [
   { tester: inputControlTester, renderer: InputControl },
+  { tester: radioGroupControlTester, renderer: RadioGroupControl },
+  { tester: oneOfRadioGroupControlTester, renderer: OneOfRadioGroupControl },
   { tester: arrayControlTester, renderer: ArrayControl },
   { tester: labelRendererTester, renderer: LabelRenderer },
   { tester: categorizationTester, renderer: Categorization },