added missing rjsf elements into typeahead widget
This commit is contained in:
parent
4894a07f90
commit
391cf4987c
|
@ -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]);
|
}
|
||||||
|
}, [value, typeaheadSearch]);
|
||||||
|
|
||||||
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}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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`);
|
||||||
|
|
Loading…
Reference in New Issue