updated carbon react to 1.27 for react 18 support and updated all other libraries for it w/ burnettk
This commit is contained in:
parent
4efdbdc48e
commit
48ed3da06c
File diff suppressed because it is too large
Load Diff
|
@ -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": {
|
||||
|
|
|
@ -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,
|
||||
}
|
||||
);
|
||||
|
|
|
@ -11,7 +11,6 @@ import {
|
|||
ComboBox,
|
||||
Button,
|
||||
ButtonSet,
|
||||
// @ts-ignore
|
||||
} from '@carbon/react';
|
||||
|
||||
import MDEditor from '@uiw/react-md-editor';
|
||||
|
|
|
@ -143,7 +143,6 @@ export default function BaseInputTemplate<
|
|||
<>
|
||||
<TextInput
|
||||
id={id}
|
||||
name={id}
|
||||
className="text-input"
|
||||
helperText={helperText}
|
||||
invalid={invalid}
|
||||
|
|
|
@ -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={{
|
||||
|
|
|
@ -0,0 +1,2 @@
|
|||
// carbon/react is not very typescript safe so ignore it
|
||||
declare module '@carbon/react';
|
Loading…
Reference in New Issue