Add material boolean toggle control and cell #1693
Conversation
In addition to the default checkbox renderers for boolean controls and cells, provide a control and cell rendering a boolean as a toggle. * Add MuiToggle wrapping a Material UI Switch * Add material boolean toggle control and cell * Add unit tests for control and cell * Add boolean toggle example to material examples showcasing a checkbox and toggle side by side.
| } = props; | ||
| const appliedUiSchemaOptions = merge({}, config, uischema.options); | ||
| const inputProps = { autoFocus: !!appliedUiSchemaOptions.focus }; | ||
| // !! causes undefined value to be converted to false, otherwise has no effect |
packages/material/example/index.ts
Outdated
| @@ -38,6 +39,8 @@ const addCustomAutocompleteControl = (examples: ReactExampleDescription[]) => { | |||
| } | |||
| return example; | |||
| }); | |||
| enhancedExamples.push(booleanToggleExample); | |||
There was a problem hiding this comment.
This should be a regular example, so we don't need any changes here.
| @@ -0,0 +1,66 @@ | |||
| /* | |||
There was a problem hiding this comment.
The example should be a regular example in the examples package. It's fine when it doesn't work for other renderer sets. We have many of those. It's also a good way to see which renderer set supports which arguments.
Add a new example 'Boolean Toggle' that showcases checkbox vs toggle boolean rendering.
|
@sdirix I made the boolean toggle a separate example and added a boolean checkbox and toggle to the control options example. |
| }, | ||
| checkbox: { | ||
| type: 'boolean', | ||
| description: 'Checkbox is the default control for boolean values.' | ||
| }, |
There was a problem hiding this comment.
We already have a boolean/checkbox in the first schema. No need to re-add it here in extendedSchema.
There was a problem hiding this comment.
That's true but I'm concerned this might break the jsonforms website. There we use the base example and the one with options separately (see https://jsonforms.io/examples/control). Thus, I imagine we only use the extentedData and extendedSchema there. But I can also remove it.
There was a problem hiding this comment.
That's true :) I meant to remove both, the checkbox property and its Control. We don't need to show the normal checkbox in the extendedSchema and extendedUischema as it's already a part of the normal schema and uischema.
There was a problem hiding this comment.
I see, that makes sense. I'll remove it :)
lucas-koehler
force-pushed
the
material-boolean-toggle-control
branch
from
2a97610
to
bae0cc1
Compare
|
@sdirix I removed the duplicate normal checkbox from the control options example and integrated it in the original commit. |
In addition to the default checkbox renderers for boolean controls and cells,
provide a control and cell rendering a boolean as a toggle.
toggleNew example:
