moved carbon theme items around w/ burnettk

This commit is contained in:
jasquat 2023-05-31 15:16:51 -04:00
parent bf85a37a02
commit 781a7be04a
No known key found for this signature in database
60 changed files with 73 additions and 75 deletions

View File

@ -1 +1 @@
/src/themes/carbon
/src/rjsf/carbon_theme

View File

@ -1,6 +1,4 @@
import React from 'react';
import { FieldHelpProps } from '@rjsf/utils';
import FormHelperText from '@mui/material/FormHelperText';
/** The `FieldHelpTemplate` component renders any help desired for a field
*

View File

@ -1,5 +1,4 @@
import React from 'react';
// import Box from '@mui/material/Box';
// @ts-ignore
import { Button } from '@carbon/react';
import { SubmitButtonProps, getSubmitButtonOptions } from '@rjsf/utils';

View File

@ -0,0 +1,68 @@
import { useRef, useState } from 'react';
import { ComboBox } from '@carbon/react';
import HttpService from '../../../services/HttpService';
export default function TypeaheadWidget({
id,
onChange,
options: { category, itemFormat },
}: {
id: string;
onChange: any;
options: any;
}) {
const pathForCategory = (inputText: string) => {
return `/connector-proxy/typeahead/${category}?prefix=${inputText}&limit=100`;
};
const lastSearchTerm = useRef('');
const [items, setItems] = useState<any[]>([]);
const [selectedItem, setSelectedItem] = useState<any>(null);
const itemFormatRegex = /[^{}]+(?=})/g;
const itemFormatSubstitutions = itemFormat.match(itemFormatRegex);
const itemToString = (item: any) => {
if (!item) {
return null;
}
let str = itemFormat;
itemFormatSubstitutions.forEach((key: string) => {
str = str.replace(`{${key}}`, item[key]);
});
return str;
};
const handleTypeAheadResult = (result: any, inputText: string) => {
if (lastSearchTerm.current === inputText) {
setItems(result);
}
};
const typeaheadSearch = (inputText: string) => {
if (inputText) {
lastSearchTerm.current = inputText;
// TODO: check cache of prefixes -> results
HttpService.makeCallToBackend({
path: pathForCategory(inputText),
successCallback: (result: any) =>
handleTypeAheadResult(result, inputText),
});
}
};
return (
<ComboBox
onInputChange={typeaheadSearch}
onChange={(event: any) => {
setSelectedItem(event.selectedItem);
onChange(itemToString(event.selectedItem));
}}
id={id}
items={items}
itemToString={itemToString}
placeholder={`Start typing to search for ${category}...`}
selectedItem={selectedItem}
/>
);
}

View File

@ -12,7 +12,7 @@ import {
} from '@carbon/react';
import validator from '@rjsf/validator-ajv8';
import { FormField, JsonSchemaForm } from '../interfaces';
import { Form } from '../themes/carbon';
import { Form } from '../rjsf/carbon_theme';
import {
modifyProcessIdentifierForPathParam,
slugifyString,

View File

@ -1,4 +1,4 @@
import React, { useEffect, useRef, useState } from 'react';
import React, { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import validator from '@rjsf/validator-ajv8';
@ -8,85 +8,18 @@ import {
Tabs,
Grid,
Column,
ComboBox,
Button,
ButtonSet,
} from '@carbon/react';
// eslint-disable-next-line import/no-named-as-default
import Form from '../themes/carbon';
import { Form } from '../rjsf/carbon_theme';
import HttpService from '../services/HttpService';
import useAPIError from '../hooks/UseApiError';
import { modifyProcessIdentifierForPathParam } from '../helpers';
import { EventDefinition, Task } from '../interfaces';
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
import InstructionsForEndUser from '../components/InstructionsForEndUser';
// TODO: move this somewhere else
function TypeaheadWidget({
id,
onChange,
options: { category, itemFormat },
}: {
id: string;
onChange: any;
options: any;
}) {
const pathForCategory = (inputText: string) => {
return `/connector-proxy/typeahead/${category}?prefix=${inputText}&limit=100`;
};
const lastSearchTerm = useRef('');
const [items, setItems] = useState<any[]>([]);
const [selectedItem, setSelectedItem] = useState<any>(null);
const itemFormatRegex = /[^{}]+(?=})/g;
const itemFormatSubstitutions = itemFormat.match(itemFormatRegex);
const itemToString = (item: any) => {
if (!item) {
return null;
}
let str = itemFormat;
itemFormatSubstitutions.forEach((key: string) => {
str = str.replace(`{${key}}`, item[key]);
});
return str;
};
const handleTypeAheadResult = (result: any, inputText: string) => {
if (lastSearchTerm.current === inputText) {
setItems(result);
}
};
const typeaheadSearch = (inputText: string) => {
if (inputText) {
lastSearchTerm.current = inputText;
// TODO: check cache of prefixes -> results
HttpService.makeCallToBackend({
path: pathForCategory(inputText),
successCallback: (result: any) =>
handleTypeAheadResult(result, inputText),
});
}
};
return (
<ComboBox
onInputChange={typeaheadSearch}
onChange={(event: any) => {
setSelectedItem(event.selectedItem);
onChange(itemToString(event.selectedItem));
}}
id={id}
items={items}
itemToString={itemToString}
placeholder={`Start typing to search for ${category}...`}
selectedItem={selectedItem}
/>
);
}
import TypeaheadWidget from '../rjsf/custom_widgets/TypeaheadWidget/TypeaheadWidget';
export default function TaskShow() {
const [task, setTask] = useState<Task | null>(null);