import * as React from 'react';
import { withStyles, WithStyles, StyleRulesCallback, List, ListItem, ListItemText } from '@material-ui/core';
import { ArvadosTheme } from '~/common/custom-theme';
+import { SearchBarSelectedItem } from "~/store/search-bar/search-bar-reducer";
type CssRules = 'root' | 'listItem' | 'listItemText';
}
});
+export interface SearchBarRecentQueriesDataProps {
+ selectedItem: SearchBarSelectedItem;
+}
+
export interface SearchBarRecentQueriesActionProps {
onSearch: (searchValue: string) => void;
loadRecentQueries: () => string[];
}
-type SearchBarRecentQueriesProps = SearchBarRecentQueriesActionProps & WithStyles<CssRules>;
+type SearchBarRecentQueriesProps = SearchBarRecentQueriesDataProps & SearchBarRecentQueriesActionProps & WithStyles<CssRules>;
export const SearchBarRecentQueries = withStyles(styles)(
- ({ classes, onSearch, loadRecentQueries }: SearchBarRecentQueriesProps) =>
+ ({ classes, onSearch, loadRecentQueries, selectedItem }: SearchBarRecentQueriesProps) =>
<List component="nav" className={classes.root}>
{loadRecentQueries().map((query, index) =>
- <ListItem button key={index} className={classes.listItem}>
- <ListItemText disableTypography
- secondary={query}
- onClick={() => onSearch(query)}
+ <ListItem button key={index} className={classes.listItem} selected={`RQ-${index}-${query}` === selectedItem.id}>
+ <ListItemText disableTypography
+ secondary={query}
+ onClick={() => onSearch(query)}
className={classes.listItemText} />
</ListItem>
)}
- </List>);
\ No newline at end of file
+ </List>);