Skip to content

Show description or tooltip on boolean controls #2072

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jan 9, 2023
Merged

Show description or tooltip on boolean controls #2072

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6ff90d0
Show description or tooltip for checkboxes
brockfanning Jan 9, 2023
2964308
Add description to boolean example
brockfanning Jan 9, 2023
d229886
Document hardcoded parameters in boolean control
brockfanning Jan 9, 2023
d292be4
Give toggle booleans the same description treatment as checkboxes
brockfanning Jan 9, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
82 changes: 59 additions & 23 deletions packages/material-renderers/src/controls/MaterialBooleanControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,15 +23,17 @@
THE SOFTWARE.
*/
import isEmpty from 'lodash/isEmpty';
import merge from 'lodash/merge';
import React from 'react';
import {
isBooleanControl,
RankedTester,
rankWith,
ControlProps
ControlProps,
isDescriptionHidden
} from '@jsonforms/core';
import { withJsonFormsControlProps } from '@jsonforms/react';
import { FormControlLabel, Hidden } from '@mui/material';
import { FormControlLabel, FormHelperText, Tooltip, Hidden } from '@mui/material';
import { MuiCheckbox } from '../mui-controls/MuiCheckbox';

export const MaterialBooleanControl = ({
Expand All @@ -46,30 +48,64 @@ export const MaterialBooleanControl = ({
handleChange,
errors,
path,
config
config,
description
}: ControlProps) => {

const isValid = errors.length === 0;
const appliedUiSchemaOptions = merge({}, config, uischema.options);

const showDescription = !isDescriptionHidden(
visible,
description,
false,
appliedUiSchemaOptions.showUnfocusedDescription
);

const showTooltip = !showDescription && !isDescriptionHidden(
visible,
description,
true,
true
);

const firstFormHelperText = showDescription
? description
: !isValid
? errors
: null;
const secondFormHelperText = showDescription && !isValid ? errors : null;

return (
<Hidden xsUp={!visible}>
<FormControlLabel
label={label}
id={id}
control={
<MuiCheckbox
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}
/>
}
/>
<Tooltip title={(showTooltip) ? description : ''}>
<FormControlLabel
label={label}
id={id}
control={
<MuiCheckbox
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}
/>
}
/>
</Tooltip>
<FormHelperText error={!isValid && !showDescription}>
{firstFormHelperText}
</FormHelperText>
<FormHelperText error={!isValid}>
{secondFormHelperText}
</FormHelperText>
</Hidden>
);
};
Expand Down