124 lines
3.9 KiB
TypeScript
124 lines
3.9 KiB
TypeScript
import * as React from 'react';
|
|
|
|
import { styled } from '@mui/material/styles';
|
|
import Button from '@mui/material/Button';
|
|
import List from '@mui/material/List';
|
|
import ListItemButton from '@mui/material/ListItemButton';
|
|
import MuiListItemText from '@mui/material/ListItemText';
|
|
import Paper from '@mui/material/Paper';
|
|
import Collapse from '@mui/material/Collapse';
|
|
import Typography from '@mui/material/Typography';
|
|
import ExpandLess from '@mui/icons-material/ExpandLess';
|
|
import ExpandMore from '@mui/icons-material/ExpandMore';
|
|
import type { IStep } from '@automatisch/types';
|
|
|
|
const ListItemText = styled(MuiListItemText)``;
|
|
|
|
type SuggestionsProps = {
|
|
data: any[];
|
|
onSuggestionClick: (variable: any) => void;
|
|
};
|
|
|
|
const SHORT_LIST_LENGTH = 4;
|
|
const LIST_HEIGHT = 256;
|
|
|
|
const getPartialArray = (array: any[], length = array.length) => {
|
|
return array.slice(0, length);
|
|
};
|
|
|
|
const Suggestions = (props: SuggestionsProps) => {
|
|
const { data, onSuggestionClick = () => null } = props;
|
|
const [current, setCurrent] = React.useState<number | null>(0);
|
|
const [listLength, setListLength] = React.useState<number>(SHORT_LIST_LENGTH);
|
|
|
|
const expandList = () => {
|
|
setListLength(Infinity);
|
|
};
|
|
|
|
const collapseList = () => {
|
|
setListLength(SHORT_LIST_LENGTH);
|
|
};
|
|
|
|
React.useEffect(() => {
|
|
setListLength(SHORT_LIST_LENGTH);
|
|
}, [current]);
|
|
|
|
return (
|
|
<Paper elevation={5} sx={{ width: '100%' }}>
|
|
<Typography variant="subtitle2" sx={{ p: 2 }}>
|
|
Variables
|
|
</Typography>
|
|
<List disablePadding>
|
|
{data.map((option: IStep, index: number) => (
|
|
<>
|
|
<ListItemButton
|
|
divider
|
|
onClick={() =>
|
|
setCurrent((currentIndex) =>
|
|
currentIndex === index ? null : index
|
|
)
|
|
}
|
|
sx={{ py: 0.5 }}
|
|
>
|
|
<ListItemText primary={option.name} />
|
|
|
|
{!!option.output?.length &&
|
|
(current === index ? <ExpandLess /> : <ExpandMore />)}
|
|
</ListItemButton>
|
|
|
|
<Collapse in={current === index} timeout="auto" unmountOnExit>
|
|
<List
|
|
component="div"
|
|
disablePadding
|
|
sx={{ maxHeight: LIST_HEIGHT, overflowY: 'auto' }}
|
|
data-test="power-input-suggestion-group"
|
|
>
|
|
{getPartialArray((option.output as any) || [], listLength).map(
|
|
(suboption: any, index: number) => (
|
|
<ListItemButton
|
|
sx={{ pl: 4 }}
|
|
divider
|
|
onClick={() => onSuggestionClick(suboption)}
|
|
data-test="power-input-suggestion-item"
|
|
key={`suggestion-${suboption.name}`}
|
|
>
|
|
<ListItemText
|
|
primary={suboption.name}
|
|
primaryTypographyProps={{
|
|
variant: 'subtitle1',
|
|
title: 'Property name',
|
|
sx: { fontWeight: 700 },
|
|
}}
|
|
secondary={suboption.value || ''}
|
|
secondaryTypographyProps={{
|
|
variant: 'subtitle2',
|
|
title: 'Sample value',
|
|
noWrap: true,
|
|
}}
|
|
/>
|
|
</ListItemButton>
|
|
)
|
|
)}
|
|
</List>
|
|
|
|
{(option.output?.length || 0) > listLength && (
|
|
<Button fullWidth onClick={expandList}>
|
|
Show all
|
|
</Button>
|
|
)}
|
|
|
|
{listLength === Infinity && (
|
|
<Button fullWidth onClick={collapseList}>
|
|
Show less
|
|
</Button>
|
|
)}
|
|
</Collapse>
|
|
</>
|
|
))}
|
|
</List>
|
|
</Paper>
|
|
);
|
|
};
|
|
|
|
export default Suggestions;
|