WP-Builder: Implement OneOf Toggle Group control

src/js/component/form.jsx

@@ -10,6 +10,7 @@ import ColorPaletteTextControl, { colorPaletteControlTester } from "../renderers
 import BooleanCheckboxControl, { booleanCheckboxControlTester } from "../renderers/Primitive/BooleanCheckboxControl";
 import BooleanToggleControl, { booleanToggleControlTester } from "../renderers/Primitive/BooleanToggleControl";
 import GutenbergToggleGroupControl, { gutenbergToggleGroupTester } from "../renderers/Primitive/ToggleGroupControl";
+import GutenbergToggleGroupOneOfControl, { gutenbergToggleGroupOneOfTester } from "../renderers/Primitive/ToggleGroupOneOfControl";
 import GutenbergObjectRenderer, { gutenbergObjectControlTester } from "../renderers/ObjectRenderer";
 import GutenbergArrayRenderer, { gutenbergArrayControlTester } from "../renderers/ArrayRenderer";
 import PortedArrayRenderer, { portedArrayControlTester } from "../renderers/PortedArrayRenderer";
@@ -40,10 +41,19 @@ const schema = {
         },
         gender: {
           type: "string",
-          enum: ["male", "female", "other"],
+          enum: [ "male", "female", "other" ],
           format: 'toggle-group',
           description: "The gender of the user"
         },
+        oneOfEnum: {
+          type: 'string',
+          format: 'toggle-group',
+          oneOf: [
+            { const: 'foo', title: 'Foo' },
+            { const: 'bar', title: 'Bar' },
+            { const: 'foobar', title: 'FooBar' },
+          ],
+        },
         comments: {
           type: 'array',
           items: {
@@ -89,6 +99,7 @@ const uischema = {
 const initialData = {
   address: {
     isOffice: false,
+    gender: "other",
     comments: [{
       comment: 'test'
     },{
@@ -107,6 +118,7 @@ const renderers = [
   { tester: booleanToggleControlTester, renderer: BooleanToggleControl},
   { tester: booleanCheckboxControlTester, renderer: BooleanCheckboxControl},
   { tester: gutenbergToggleGroupTester, renderer: GutenbergToggleGroupControl},
+  { tester: gutenbergToggleGroupOneOfTester, renderer: GutenbergToggleGroupOneOfControl},
   { tester: gutenbergObjectControlTester, renderer: GutenbergObjectRenderer},
   { tester: gutenbergArrayControlTester, renderer: GutenbergArrayRenderer},
   // { tester: portedArrayControlTester, renderer: PortedArrayRenderer},

src/js/renderers/Primitive/ToggleGroupOneOfControl.js

@@ -0,0 +1,92 @@
+import React from "react";
+import merge from "lodash/merge";
+import { 
+    and, 
+    isOneOfEnumControl, 
+    formatIs, 
+    rankWith 
+} from "@jsonforms/core";
+import { withJsonFormsOneOfEnumProps } from "@jsonforms/react";
+
+import { isDescriptionHidden } from "@jsonforms/core";
+import {
+    __experimentalToggleGroupControl as ToggleGroupControl,
+    __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+    __experimentalVStack as VStack,
+	__experimentalSpacer as Spacer,
+	Tooltip,	
+    FlexItem,
+} from '@wordpress/components';
+
+export const GutenbergToggleGroupOneOf = props => {
+  const {
+    config,
+    id,
+    label,
+    required,
+    description,
+    errors,
+    data,
+    visible,
+    options,
+    handleChange,
+    path,
+    enabled
+  } = props
+  const focused = true;
+  const isValid = errors.length === 0
+  const appliedUiSchemaOptions = merge({}, config, props.uischema.options)
+  const showDescription = !isDescriptionHidden(
+    visible,
+    description,
+    focused,
+    appliedUiSchemaOptions.showUnfocusedDescription
+  )
+  const onChange = ( value ) => handleChange( path, value )
+
+  return !visible ? null : (
+    <>
+        <VStack justify="space-between">
+            <FlexItem>
+            { description ? (
+                <Tooltip text={ description }>
+                <label htmlFor={ id }>
+                    { label }
+                </label>
+            </Tooltip>
+            ) : ( 
+                <label htmlFor={ id }>
+                    { label }
+                </label> 
+            ) }
+            </FlexItem>
+            <FlexItem>
+                <ToggleGroupControl 
+                    value={ data }
+                    isBlock
+                    onChange={ onChange }
+                >
+                    {options.map((option) => (
+                        <ToggleGroupControlOption 
+                            value={option.value}
+                            key={option.label}
+                            label={option.label}
+                            disabled={!enabled}
+                        />
+                    ))}
+                </ToggleGroupControl>
+            </FlexItem>
+        </VStack>
+    </>
+  )
+}
+
+export const GutenbergToggleGroupOneOfControl = props => {
+  return <GutenbergToggleGroupOneOf {...props} />
+}
+
+export const gutenbergToggleGroupOneOfTester = rankWith(
+  21,
+  and(isOneOfEnumControl, formatIs("toggle-group"))
+)
+export default withJsonFormsOneOfEnumProps(GutenbergToggleGroupOneOfControl)