sartography/spiff-arena
1
0
Fork 0
mirror of https://github.com/sartography/spiff-arena.git synced 2025-01-28 02:05:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

revert to working mui radio

Browse Source
This commit is contained in:
burnettk 2022-11-16 22:50:19 -05:00
parent e449bc351c
commit 5786900228
2 changed files with 50 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
spiffworkflow-frontend/src/routes/TaskShow.tsx
View File

@ -3,6 +3,7 @@ import { Link, useNavigate, useParams } from 'react-router-dom';
// FIXME: npm install @rjsf/validator-ajv8 and use it as soon as // FIXME: npm install @rjsf/validator-ajv8 and use it as soon as
// rawErrors is fixed. // rawErrors is fixed.
// https://react-jsonschema-form.readthedocs.io/en/latest/usage/validation/
// https://github.com/rjsf-team/react-jsonschema-form/issues/2309 links to a codesandbox that might be useful to fork // https://github.com/rjsf-team/react-jsonschema-form/issues/2309 links to a codesandbox that might be useful to fork
// if we wanted to file a defect against rjsf to show the difference between validator-ajv6 and validator-ajv8. // if we wanted to file a defect against rjsf to show the difference between validator-ajv6 and validator-ajv8.
// https://github.com/rjsf-team/react-jsonschema-form/blob/main/docs/api-reference/uiSchema.md talks about rawErrors // https://github.com/rjsf-team/react-jsonschema-form/blob/main/docs/api-reference/uiSchema.md talks about rawErrors

49
spiffworkflow-frontend/src/themes/carbon/RadioWidget/RadioWidget.tsx
View File

@ -1,9 +1,11 @@
import React from 'react'; import React from "react";
// @ts-ignore import FormControlLabel from "@mui/material/FormControlLabel";
import { RadioButtonGroup, RadioButton } from '@carbon/react'; import FormLabel from "@mui/material/FormLabel";
import { WidgetProps } from '@rjsf/utils'; import Radio from "@mui/material/Radio";
import RadioGroup from "@mui/material/RadioGroup";
import { WidgetProps } from "@rjsf/utils";
function RadioWidget({ const RadioWidget = ({
id, id,
schema, schema,
options, options,
@ -15,11 +17,11 @@ function RadioWidget({
onChange, onChange,
onBlur, onBlur,
onFocus, onFocus,
}: WidgetProps) { }: WidgetProps) => {
const { enumOptions, enumDisabled } = options; const { enumOptions, enumDisabled } = options;
const localOnChange = (_: any, value: any) => const _onChange = (_: any, value: any) =>
onChange(schema.type == 'boolean' ? value !== 'false' : value); onChange(schema.type == "boolean" ? value !== "false" : value);
const _onBlur = ({ target: { value } }: React.FocusEvent<HTMLInputElement>) => const _onBlur = ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
onBlur(id, value); onBlur(id, value);
const _onFocus = ({ const _onFocus = ({
@ -29,14 +31,16 @@ function RadioWidget({
const row = options ? options.inline : false; const row = options ? options.inline : false;
return ( return (
<RadioButtonGroup <>
orientation="vertical" <FormLabel required={required} htmlFor={id}>
{label || schema.title}
</FormLabel>
<RadioGroup
id={id} id={id}
name={id} name={id}
value={`${value}`} value={`${value}`}
row={row as boolean} row={row as boolean}
legendText={label || schema.title} onChange={_onChange}
onChange={localOnChange}
onBlur={_onBlur} onBlur={_onBlur}
onFocus={_onFocus} onFocus={_onFocus}
> >
@ -45,18 +49,27 @@ function RadioWidget({
const itemDisabled = const itemDisabled =
Array.isArray(enumDisabled) && Array.isArray(enumDisabled) &&
enumDisabled.indexOf(option.value) !== -1; enumDisabled.indexOf(option.value) !== -1;
return ( const radio = (
<RadioButton <FormControlLabel
labelText={`${option.label}`} control={
value={`${option.value}`} <Radio
name={id}
id={`${id}-${option.value}`} id={`${id}-${option.value}`}
color="primary"
/>
}
label={`${option.label}`}
value={`${option.value}`}
key={option.value} key={option.value}
disabled={disabled || itemDisabled || readonly} disabled={disabled || itemDisabled || readonly}
/> />
); );
return radio;
})} })}
</RadioButtonGroup> </RadioGroup>
</>
); );
} };
export default RadioWidget; export default RadioWidget;