moved carbon theme items around w/ burnettk
This commit is contained in:
parent
247735b0d4
commit
ff61ba35b7
|
@ -1 +1 @@
|
||||||
/src/themes/carbon
|
/src/rjsf/carbon_theme
|
||||||
|
|
|
@ -1,6 +1,4 @@
|
||||||
import React from 'react';
|
|
||||||
import { FieldHelpProps } from '@rjsf/utils';
|
import { FieldHelpProps } from '@rjsf/utils';
|
||||||
import FormHelperText from '@mui/material/FormHelperText';
|
|
||||||
|
|
||||||
/** The `FieldHelpTemplate` component renders any help desired for a field
|
/** The `FieldHelpTemplate` component renders any help desired for a field
|
||||||
*
|
*
|
|
@ -1,5 +1,4 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
// import Box from '@mui/material/Box';
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
import { Button } from '@carbon/react';
|
import { Button } from '@carbon/react';
|
||||||
import { SubmitButtonProps, getSubmitButtonOptions } from '@rjsf/utils';
|
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';
|
} from '@carbon/react';
|
||||||
import validator from '@rjsf/validator-ajv8';
|
import validator from '@rjsf/validator-ajv8';
|
||||||
import { FormField, JsonSchemaForm } from '../interfaces';
|
import { FormField, JsonSchemaForm } from '../interfaces';
|
||||||
import { Form } from '../themes/carbon';
|
import { Form } from '../rjsf/carbon_theme';
|
||||||
import {
|
import {
|
||||||
modifyProcessIdentifierForPathParam,
|
modifyProcessIdentifierForPathParam,
|
||||||
slugifyString,
|
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 { useNavigate, useParams } from 'react-router-dom';
|
||||||
import validator from '@rjsf/validator-ajv8';
|
import validator from '@rjsf/validator-ajv8';
|
||||||
|
|
||||||
|
@ -8,85 +8,18 @@ import {
|
||||||
Tabs,
|
Tabs,
|
||||||
Grid,
|
Grid,
|
||||||
Column,
|
Column,
|
||||||
ComboBox,
|
|
||||||
Button,
|
Button,
|
||||||
ButtonSet,
|
ButtonSet,
|
||||||
} from '@carbon/react';
|
} from '@carbon/react';
|
||||||
|
|
||||||
// eslint-disable-next-line import/no-named-as-default
|
import { Form } from '../rjsf/carbon_theme';
|
||||||
import Form from '../themes/carbon';
|
|
||||||
import HttpService from '../services/HttpService';
|
import HttpService from '../services/HttpService';
|
||||||
import useAPIError from '../hooks/UseApiError';
|
import useAPIError from '../hooks/UseApiError';
|
||||||
import { modifyProcessIdentifierForPathParam } from '../helpers';
|
import { modifyProcessIdentifierForPathParam } from '../helpers';
|
||||||
import { EventDefinition, Task } from '../interfaces';
|
import { EventDefinition, Task } from '../interfaces';
|
||||||
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
|
import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
|
||||||
import InstructionsForEndUser from '../components/InstructionsForEndUser';
|
import InstructionsForEndUser from '../components/InstructionsForEndUser';
|
||||||
|
import TypeaheadWidget from '../rjsf/custom_widgets/TypeaheadWidget/TypeaheadWidget';
|
||||||
// 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}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function TaskShow() {
|
export default function TaskShow() {
|
||||||
const [task, setTask] = useState<Task | null>(null);
|
const [task, setTask] = useState<Task | null>(null);
|
||||||
|
|
Loading…
Reference in New Issue