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

85
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,34 +31,45 @@ function RadioWidget({
const row = options ? options.inline : false; const row = options ? options.inline : false;
return ( return (
<RadioButtonGroup <>
orientation="vertical" <FormLabel required={required} htmlFor={id}>
id={id} {label || schema.title}
name={id} </FormLabel>
value={`${value}`} <RadioGroup
row={row as boolean} id={id}
legendText={label || schema.title} name={id}
onChange={localOnChange} value={`${value}`}
onBlur={_onBlur} row={row as boolean}
onFocus={_onFocus} onChange={_onChange}
> onBlur={_onBlur}
{Array.isArray(enumOptions) && onFocus={_onFocus}
enumOptions.map((option) => { >
const itemDisabled = {Array.isArray(enumOptions) &&
Array.isArray(enumDisabled) && enumOptions.map((option) => {
enumDisabled.indexOf(option.value) !== -1; const itemDisabled =
return ( Array.isArray(enumDisabled) &&
<RadioButton enumDisabled.indexOf(option.value) !== -1;
labelText={`${option.label}`} const radio = (
value={`${option.value}`} <FormControlLabel
id={`${id}-${option.value}`} control={
key={option.value} <Radio
disabled={disabled || itemDisabled || readonly} name={id}
/> id={`${id}-${option.value}`}
); color="primary"
})} />
</RadioButtonGroup> }
label={`${option.label}`}
value={`${option.value}`}
key={option.value}
disabled={disabled || itemDisabled || readonly}
/>
);
return radio;
})}
</RadioGroup>
</>
); );
} };
export default RadioWidget; export default RadioWidget;