moved carbon theme items around w/ burnettk
This commit is contained in:
parent
bf85a37a02
commit
781a7be04a
|
@ -1 +1 @@
|
|||
/src/themes/carbon
|
||||
/src/rjsf/carbon_theme
|
||||
|
|
|
@ -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
|
||||
*
|
|
@ -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';
|
|
@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
|
@ -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,
|
||||
|
|
|
@ -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);
|
||||
|
|
Loading…
Reference in New Issue