updated carbon react to 1.27 for react 18 support and updated all other libraries for it w/ burnettk

This commit is contained in:
jasquat 2023-04-17 16:25:10 -04:00
parent 8fe98812fc
commit f6a0fd2448
7 changed files with 12636 additions and 12884 deletions

File diff suppressed because it is too large Load Diff

View File

@ -7,11 +7,10 @@
"@babel/plugin-transform-react-jsx": "^7.18.6",
"@babel/preset-react": "^7.18.6",
"@carbon/icons-react": "^11.10.0",
"@carbon/react": "^1.16.0",
"@carbon/react": "^1.27.0",
"@carbon/styles": "^1.16.0",
"@casl/ability": "^6.3.2",
"@casl/react": "^3.1.0",
"@ginkgo-bioworks/react-json-schema-form-builder": "^2.9.0",
"@monaco-editor/react": "^4.4.5",
"@mui/material": "^5.10.14",
"@react-icons/all-files": "^4.1.0",
@ -64,14 +63,6 @@
"overrides": {
"postcss-preset-env": {
"autoprefixer": "10.4.5"
},
"@ginkgo-bioworks/react-json-schema-form-builder": {
"react": "^18.2.0",
"bootstrap": "^5.2.0-beta1"
},
"@carbon/react": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
},
"scripts": {

View File

@ -890,7 +890,7 @@ export default function ProcessModelEditDiagram() {
const path = generatePath(
'/admin/process-models/:process_model_id/form/:file_name',
{
process_model_id: params.process_model_id,
process_model_id: params.process_model_id || null,
file_name: fileName,
}
);
@ -902,7 +902,7 @@ export default function ProcessModelEditDiagram() {
const path = generatePath(
'/admin/process-models/:process_model_id/files/:file_name',
{
process_model_id: params.process_model_id,
process_model_id: params.process_model_id || null,
file_name: file.name,
}
);

View File

@ -11,7 +11,6 @@ import {
ComboBox,
Button,
ButtonSet,
// @ts-ignore
} from '@carbon/react';
import MDEditor from '@uiw/react-md-editor';

View File

@ -143,7 +143,6 @@ export default function BaseInputTemplate<
<>
<TextInput
id={id}
name={id}
className="text-input"
helperText={helperText}
invalid={invalid}

View File

@ -1,59 +1,92 @@
// @ts-ignore
import { Select, SelectItem } from '@carbon/react';
import { WidgetProps, processSelectValue } from '@rjsf/utils';
import { ChangeEvent, FocusEvent, SyntheticEvent, useCallback } from 'react';
import {
enumOptionsValueForIndex,
FormContextType,
RJSFSchema,
StrictRJSFSchema,
WidgetProps,
} from '@rjsf/utils';
function SelectWidget({
function getValue(event: SyntheticEvent<HTMLSelectElement>, multiple: boolean) {
if (multiple) {
return Array.from((event.target as HTMLSelectElement).options)
.slice()
.filter((o) => o.selected)
.map((o) => o.value);
}
return (event.target as HTMLSelectElement).value;
}
/** The `SelectWidget` is a widget for rendering dropdowns.
* It is typically used with string properties constrained with enum options.
*
* @param props - The `WidgetProps` for this component
*/
function SelectWidget<
T = any,
S extends StrictRJSFSchema = RJSFSchema,
F extends FormContextType = any
>({
schema,
uiSchema,
id,
options,
label,
required,
value,
disabled,
readonly,
value,
multiple,
autofocus,
multiple = false,
autofocus = false,
onChange,
onBlur,
onFocus,
uiSchema,
placeholder,
rawErrors = [],
}: WidgetProps) {
const { enumOptions, enumDisabled } = options;
}: WidgetProps<T, S, F>) {
const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
const emptyValue = multiple ? [] : '';
const _onChange = ({
target: { value },
}: React.ChangeEvent<{ name?: string; value: unknown }>) =>
onChange(processSelectValue(schema, value, options));
const _onBlur = ({ target: { value } }: React.FocusEvent<HTMLInputElement>) =>
onBlur(id, processSelectValue(schema, value, options));
const _onFocus = ({
target: { value },
}: React.FocusEvent<HTMLInputElement>) =>
onFocus(id, processSelectValue(schema, value, options));
const handleFocus = useCallback(
(event: FocusEvent<HTMLSelectElement>) => {
const newValue = getValue(event, multiple);
return onFocus(
id,
enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyVal)
);
},
[onFocus, id, schema, multiple, options]
);
const handleBlur = useCallback(
(event: FocusEvent<HTMLSelectElement>) => {
const newValue = getValue(event, multiple);
return onBlur(
id,
enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyVal)
);
},
[onBlur, id, schema, multiple, options]
);
const handleChange = useCallback(
(event: ChangeEvent<HTMLSelectElement>) => {
const newValue = getValue(event, multiple);
return onChange(
enumOptionsValueForIndex<S>(newValue, enumOptions, optEmptyVal)
);
},
[onChange, schema, multiple, options]
);
let labelToUse = label;
if (uiSchema && uiSchema['ui:title']) {
labelToUse = uiSchema['ui:title'];
} else if (schema && schema.title) {
labelToUse = schema.title;
}
let helperText = null;
if (uiSchema && uiSchema['ui:help']) {
helperText = uiSchema['ui:help'];
}
if (required) {
labelToUse = `${labelToUse}*`;
}
let invalid = false;
let errorMessageForField = null;
if (rawErrors && rawErrors.length > 0) {
invalid = true;
// errorMessageForField = `${labelToUse.replace(/\*$/, '')} ${rawErrors[0]}`;
errorMessageForField = rawErrors[0];
}
@ -71,9 +104,9 @@ function SelectWidget({
disabled={disabled || readonly}
autoFocus={autofocus}
error={rawErrors.length > 0}
onChange={_onChange}
onBlur={_onBlur}
onFocus={_onFocus}
onChange={handleChange}
onBlur={handleBlur}
onFocus={handleFocus}
invalid={invalid}
invalidText={errorMessageForField}
InputLabelProps={{

View File

@ -0,0 +1,2 @@
// carbon/react is not very typescript safe so ignore it
declare module '@carbon/react';