Add React Material boolean toggle switch control and cell

In addition to the default checkbox renderers for boolean controls and cells,
provide a control and cell rendering a boolean as a toggle switch for the React
Material renderers.

packages/examples/src/booleanToggle.ts

@@ -0,0 +1,70 @@
+/*
+  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 { registerExamples } from "./register";
+
+export const schema = {
+  type: 'object',
+  properties: {
+    checkbox: {
+      type: 'boolean'
+    },
+    toggle: {
+      type: 'boolean'
+    }
+  }
+};
+
+export const uischema = {
+  type: 'VerticalLayout',
+  elements: [
+    {
+      type: 'Control',
+      scope: '#/properties/checkbox'
+    },
+    {
+      type: 'Control',
+      scope: '#/properties/toggle',
+      options: {
+        toggle: true
+      }
+    }
+  ]
+};
+
+export const data = {
+  checkbox: false,
+  toggle: false
+};
+
+export const booleanToggleExample = {
+  name: 'booleanToggle',
+  label: 'Boolean Toggle',
+  data,
+  schema,
+  uischema
+};
+
+registerExamples([booleanToggleExample]);

packages/examples/src/control-options.ts

@@ -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
@@ -137,6 +137,10 @@ export const extendedSchema = {
     hideRequiredAsterisk: {
       type: 'string',
       description: 'Hides the "*" symbol, when the field is required',
+    },
+    toggle: {
+      type: 'boolean',
+      description: 'The "toggle" option renders boolean values as a toggle.'
     }
   },
   required: ['hideRequiredAsterisk', 'restrictText']
@@ -186,6 +190,14 @@ export const extendedUischema = {
       options: {
         hideRequiredAsterisk: true
       }
+    },
+    {
+      type: 'Control',
+      scope: '#/properties/toggle',
+      label: 'Boolean as Toggle',
+      options: {
+        toggle: true
+      }
     }
   ]
 };
@@ -194,7 +206,8 @@ export const extendedData = {
   multilineString: 'Multi-\nline\nexample',
   slider: 4,
   trimText: 'abcdefg',
-  restrictText: 'abcde'
+  restrictText: 'abcde',
+  toggle: false
 };
 
 const combinedSchema = {

packages/examples/src/index.ts

@@ -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
@@ -69,6 +69,7 @@ import * as defaultExample from './default';
 import * as onChange from './onChange';
 import * as enumExample from './enum';
 import * as radioGroupExample from './radioGroup';
+import * as booleanToggle from './booleanToggle';
 export * from './register';
 export * from './example';
 
@@ -122,5 +123,6 @@ export {
   ifThenElse,
   onChange,
   enumExample,
-  radioGroupExample
+  radioGroupExample,
+  booleanToggle
 };

packages/material/src/cells/MaterialBooleanToggleCell.tsx

@@ -0,0 +1,47 @@
+/*
+  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 {
+  and,
+  CellProps,
+  isBooleanControl,
+  optionIs,
+  RankedTester,
+  rankWith,
+  WithClassname
+} from '@jsonforms/core';
+import { withJsonFormsCellProps } from '@jsonforms/react';
+import { MuiToggle } from '../mui-controls/MuiToggle';
+
+export const MaterialBooleanToggleCell = (props: CellProps & WithClassname) => {
+  return <MuiToggle {...props} />;
+};
+
+export const materialBooleanToggleCellTester: RankedTester = rankWith(
+  3,
+  and(isBooleanControl, optionIs('toggle', true))
+);;
+
+export default withJsonFormsCellProps(MaterialBooleanToggleCell);

packages/material/src/cells/index.ts

@@ -25,6 +25,9 @@
 import MaterialBooleanCell, {
   materialBooleanCellTester
 } from './MaterialBooleanCell';
+import MaterialBooleanToggleCell, {
+  materialBooleanToggleCellTester
+} from './MaterialBooleanToggleCell';
 import MaterialDateCell, { materialDateCellTester } from './MaterialDateCell';
 import MaterialEnumCell, { materialEnumCellTester } from './MaterialEnumCell';
 import MaterialIntegerCell, {
@@ -42,6 +45,8 @@ import MaterialTimeCell, { materialTimeCellTester } from './MaterialTimeCell';
 export {
   MaterialBooleanCell,
   materialBooleanCellTester,
+  MaterialBooleanToggleCell,
+  materialBooleanToggleCellTester,
   MaterialDateCell,
   materialDateCellTester,
   MaterialEnumCell,

packages/material/src/controls/MaterialBooleanToggleControl.tsx

@@ -0,0 +1,84 @@
+/*
+  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 isEmpty from 'lodash/isEmpty';
+import React from 'react';
+import {
+  isBooleanControl,
+  RankedTester,
+  rankWith,
+  ControlProps,
+  optionIs,
+  and
+} from '@jsonforms/core';
+import { withJsonFormsControlProps } from '@jsonforms/react';
+import { FormControlLabel, Hidden } from '@material-ui/core';
+import { MuiToggle } from '../mui-controls/MuiToggle';
+
+export const MaterialBooleanToggleControl = ({
+  data,
+  visible,
+  label,
+  id,
+  enabled,
+  uischema,
+  schema,
+  rootSchema,
+  handleChange,
+  errors,
+  path,
+  config
+}: ControlProps) => {
+  return (
+    <Hidden xsUp={!visible}>
+      <FormControlLabel
+        label={label}
+        id={id}
+        control={
+          <MuiToggle
+            id={`${id}-input`}
+            isValid={isEmpty(errors)}
+            data={data}
+            enabled={enabled}
+            visible={visible}
+            path={path}
+            uischema={uischema}
+            schema={schema}
+            rootSchema={rootSchema}
+            handleChange={handleChange}
+            errors={errors}
+            config={config}
+          />
+        }
+      />
+    </Hidden>
+  );
+};
+
+export const materialBooleanToggleControlTester: RankedTester = rankWith(
+  3,
+  and(isBooleanControl, optionIs('toggle', true))
+);
+
+export default withJsonFormsControlProps(MaterialBooleanToggleControl);

packages/material/src/controls/index.ts

@@ -26,6 +26,10 @@ import MaterialBooleanControl, {
   materialBooleanControlTester,
   MaterialBooleanControl as MaterialBooleanControlUnwrapped
 } from './MaterialBooleanControl';
+import MaterialBooleanToggleControl, {
+  materialBooleanToggleControlTester,
+  MaterialBooleanToggleControl as MaterialBooleanToggleControlUnwrapped
+} from './MaterialBooleanToggleControl';
 import MaterialEnumControl, {
   materialEnumControlTester,
   MaterialEnumControl as MaterialEnumControlUnwrapped
@@ -80,6 +84,7 @@ import MaterialOneOfRadioGroupControl, {
 
 export const Unwrapped = {
   MaterialBooleanControl: MaterialBooleanControlUnwrapped,
+  MaterialBooleanToggleControl: MaterialBooleanToggleControlUnwrapped,
   MaterialEnumControl: MaterialEnumControlUnwrapped,
   MaterialNativeControl: MaterialNativeControlUnwrapped,
   MaterialDateControl: MaterialDateControlUnwrapped,
@@ -97,6 +102,8 @@ export const Unwrapped = {
 export {
   MaterialBooleanControl,
   materialBooleanControlTester,
+  MaterialBooleanToggleControl,
+  materialBooleanToggleControlTester,
   MaterialEnumControl,
   materialEnumControlTester,
   MaterialNativeControl,

packages/material/src/index.ts

@@ -49,6 +49,8 @@ import {
   materialAnyOfStringOrEnumControlTester,
   MaterialBooleanControl,
   materialBooleanControlTester,
+  MaterialBooleanToggleControl,
+  materialBooleanToggleControlTester,
   MaterialDateControl,
   materialDateControlTester,
   MaterialDateTimeControl,
@@ -87,6 +89,8 @@ import {
 import {
   MaterialBooleanCell,
   materialBooleanCellTester,
+  MaterialBooleanToggleCell,
+  materialBooleanToggleCellTester,
   MaterialDateCell,
   materialDateCellTester,
   MaterialEnumCell,
@@ -120,6 +124,7 @@ export const materialRenderers: JsonFormsRendererRegistryEntry[] = [
     renderer: MaterialArrayControlRenderer
   },
   { tester: materialBooleanControlTester, renderer: MaterialBooleanControl },
+  { tester: materialBooleanToggleControlTester, renderer: MaterialBooleanToggleControl },
   { tester: materialNativeControlTester, renderer: MaterialNativeControl },
   { tester: materialEnumControlTester, renderer: MaterialEnumControl },
   { tester: materialIntegerControlTester, renderer: MaterialIntegerControl },
@@ -171,6 +176,7 @@ export const materialRenderers: JsonFormsRendererRegistryEntry[] = [
 
 export const materialCells: JsonFormsCellRendererRegistryEntry[] = [
   { tester: materialBooleanCellTester, cell: MaterialBooleanCell },
+  { tester: materialBooleanToggleCellTester, cell: MaterialBooleanToggleCell },
   { tester: materialDateCellTester, cell: MaterialDateCell },
   { tester: materialEnumCellTester, cell: MaterialEnumCell },
   { tester: materialIntegerCellTester, cell: MaterialIntegerCell },