added missing rjsf elements into typeahead widget

This commit is contained in:
jasquat 2023-06-01 10:43:34 -04:00
parent 4894a07f90
commit 391cf4987c
2 changed files with 50 additions and 36 deletions

View File

@ -1,4 +1,4 @@
import { useEffect, useRef, useState } from 'react'; import { useCallback, useEffect, useRef, useState } from 'react';
import { ComboBox } from '@carbon/react'; import { ComboBox } from '@carbon/react';
import HttpService from '../../../services/HttpService'; import HttpService from '../../../services/HttpService';
@ -7,6 +7,11 @@ interface typeaheadArgs {
onChange: any; onChange: any;
options: any; options: any;
value: any; value: any;
uiSchema?: any;
disabled?: boolean;
readonly?: boolean;
required?: boolean;
rawErrors?: any;
} }
export default function TypeaheadWidget({ export default function TypeaheadWidget({
@ -14,31 +19,45 @@ export default function TypeaheadWidget({
onChange, onChange,
options: { category, itemFormat }, options: { category, itemFormat },
value, value,
...args uiSchema,
required,
disabled,
readonly,
rawErrors = [],
}: typeaheadArgs) { }: typeaheadArgs) {
const pathForCategory = (inputText: string) => {
return `/connector-proxy/typeahead/${category}?prefix=${inputText}&limit=100`;
};
console.log('args', args);
console.log('value', value);
console.log('itemFormat', itemFormat);
// if (value) {
//
// }
const lastSearchTerm = useRef(''); const lastSearchTerm = useRef('');
const [items, setItems] = useState<any[]>([]); const [items, setItems] = useState<any[]>([]);
const [selectedItem, setSelectedItem] = useState<any>(null); const [selectedItem, setSelectedItem] = useState<any>(null);
const itemFormatRegex = /[^{}]+(?=})/g; const itemFormatRegex = /[^{}]+(?=})/g;
const itemFormatSubstitutions = itemFormat.match(itemFormatRegex); const itemFormatSubstitutions = itemFormat.match(itemFormatRegex);
const typeaheadSearch = useCallback(
(inputText: string) => {
const pathForCategory = (text: string) => {
return `/connector-proxy/typeahead/${category}?prefix=${text}&limit=100`;
};
if (inputText) {
lastSearchTerm.current = inputText;
// TODO: check cache of prefixes -> results
HttpService.makeCallToBackend({
path: pathForCategory(inputText),
successCallback: (result: any) => {
if (lastSearchTerm.current === inputText) {
setItems(result);
}
},
});
}
},
[category]
);
useEffect(() => { useEffect(() => {
if (value) { if (value) {
setSelectedItem(JSON.parse(value)); setSelectedItem(JSON.parse(value));
typeaheadSearch(value);
} }
typeaheadSearch(value); }, [value, typeaheadSearch]);
}, [value]);
const itemToString = (item: any) => { const itemToString = (item: any) => {
if (!item) { if (!item) {
@ -52,33 +71,23 @@ export default function TypeaheadWidget({
return str; return str;
}; };
const handleTypeAheadResult = (result: any, inputText: string) => { let helperText = null;
if (lastSearchTerm.current === inputText) { if (uiSchema && uiSchema['ui:help']) {
setItems(result); helperText = uiSchema['ui:help'];
} }
};
const typeaheadSearch = (inputText: string) => { let invalid = false;
if (inputText) { let errorMessageForField = null;
lastSearchTerm.current = inputText; if (rawErrors && rawErrors.length > 0) {
// TODO: check cache of prefixes -> results invalid = true;
HttpService.makeCallToBackend({ [errorMessageForField] = rawErrors;
path: pathForCategory(inputText), }
successCallback: (result: any) =>
handleTypeAheadResult(result, inputText),
});
}
};
console.log('selectedItem', selectedItem);
return ( return (
<ComboBox <ComboBox
onInputChange={typeaheadSearch} onInputChange={typeaheadSearch}
onChange={(event: any) => { onChange={(event: any) => {
console.log('event.selectedItem', event.selectedItem);
setSelectedItem(event.selectedItem); setSelectedItem(event.selectedItem);
// onChange(itemToString(event.selectedItem));
onChange(JSON.stringify(event.selectedItem)); onChange(JSON.stringify(event.selectedItem));
}} }}
id={id} id={id}
@ -86,6 +95,12 @@ export default function TypeaheadWidget({
itemToString={itemToString} itemToString={itemToString}
placeholder={`Start typing to search for ${category}...`} placeholder={`Start typing to search for ${category}...`}
selectedItem={selectedItem} selectedItem={selectedItem}
helperText={helperText}
required={required}
disabled={disabled}
readOnly={readonly}
invalid={invalid}
invalidText={errorMessageForField}
/> />
); );
} }

View File

@ -84,7 +84,6 @@ export default function TaskShow() {
}, [params]); }, [params]);
const processSubmitResult = (result: any) => { const processSubmitResult = (result: any) => {
return null;
removeError(); removeError();
if (result.ok) { if (result.ok) {
navigate(`/tasks`); navigate(`/tasks`);