diff --git a/spiffworkflow-frontend/src/routes/TaskShow.tsx b/spiffworkflow-frontend/src/routes/TaskShow.tsx index 5158933ed..9da0e30a7 100644 --- a/spiffworkflow-frontend/src/routes/TaskShow.tsx +++ b/spiffworkflow-frontend/src/routes/TaskShow.tsx @@ -3,6 +3,7 @@ import { Link, useNavigate, useParams } from 'react-router-dom'; // FIXME: npm install @rjsf/validator-ajv8 and use it as soon as // 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 // 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 diff --git a/spiffworkflow-frontend/src/themes/carbon/RadioWidget/RadioWidget.tsx b/spiffworkflow-frontend/src/themes/carbon/RadioWidget/RadioWidget.tsx index 70b8e3801..86dad81ea 100644 --- a/spiffworkflow-frontend/src/themes/carbon/RadioWidget/RadioWidget.tsx +++ b/spiffworkflow-frontend/src/themes/carbon/RadioWidget/RadioWidget.tsx @@ -1,9 +1,11 @@ -import React from 'react'; -// @ts-ignore -import { RadioButtonGroup, RadioButton } from '@carbon/react'; -import { WidgetProps } from '@rjsf/utils'; +import React from "react"; +import FormControlLabel from "@mui/material/FormControlLabel"; +import FormLabel from "@mui/material/FormLabel"; +import Radio from "@mui/material/Radio"; +import RadioGroup from "@mui/material/RadioGroup"; +import { WidgetProps } from "@rjsf/utils"; -function RadioWidget({ +const RadioWidget = ({ id, schema, options, @@ -15,11 +17,11 @@ function RadioWidget({ onChange, onBlur, onFocus, -}: WidgetProps) { +}: WidgetProps) => { const { enumOptions, enumDisabled } = options; - const localOnChange = (_: any, value: any) => - onChange(schema.type == 'boolean' ? value !== 'false' : value); + const _onChange = (_: any, value: any) => + onChange(schema.type == "boolean" ? value !== "false" : value); const _onBlur = ({ target: { value } }: React.FocusEvent) => onBlur(id, value); const _onFocus = ({ @@ -29,34 +31,45 @@ function RadioWidget({ const row = options ? options.inline : false; return ( - - {Array.isArray(enumOptions) && - enumOptions.map((option) => { - const itemDisabled = - Array.isArray(enumDisabled) && - enumDisabled.indexOf(option.value) !== -1; - return ( - - ); - })} - + <> + + {label || schema.title} + + + {Array.isArray(enumOptions) && + enumOptions.map((option) => { + const itemDisabled = + Array.isArray(enumDisabled) && + enumDisabled.indexOf(option.value) !== -1; + const radio = ( + + } + label={`${option.label}`} + value={`${option.value}`} + key={option.value} + disabled={disabled || itemDisabled || readonly} + /> + ); + + return radio; + })} + + ); -} +}; export default RadioWidget;