services/workbench2/src/views-components/search-bar/search-bar-recent-queries.tsx

   1 // Copyright (C) The Arvados Authors. All rights reserved.
   2 //
   3 // SPDX-License-Identifier: AGPL-3.0
   4
   5 import React from 'react';
   6 import { CustomStyleRulesCallback } from 'common/custom-theme';
   7 import { withStyles, WithStyles, List, ListItem, ListItemText } from '@material-ui/core';
   8 import { ArvadosTheme } from 'common/custom-theme';
   9 import { SearchBarSelectedItem } from "store/search-bar/search-bar-reducer";
  10
  11 type CssRules = 'root' | 'listItem' | 'listItemText';
  12
  13 const styles: CustomStyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  14     root: {
  15         padding: '0px'
  16     },
  17     listItem: {
  18         paddingLeft: theme.spacing(1),
  19         paddingRight: theme.spacing(2),
  20     },
  21     listItemText: {
  22         fontSize: '0.8125rem',
  23         color: theme.palette.grey["900"]
  24     }
  25 });
  26
  27 export interface SearchBarRecentQueriesDataProps {
  28     selectedItem: SearchBarSelectedItem;
  29 }
  30
  31 export interface SearchBarRecentQueriesActionProps {
  32     onSearch: (searchValue: string) => void;
  33     loadRecentQueries: () => string[];
  34 }
  35
  36 type SearchBarRecentQueriesProps = SearchBarRecentQueriesDataProps & SearchBarRecentQueriesActionProps & WithStyles<CssRules>;
  37
  38 export const SearchBarRecentQueries = withStyles(styles)(
  39     ({ classes, onSearch, loadRecentQueries, selectedItem }: SearchBarRecentQueriesProps) =>
  40         <List component="nav" className={classes.root}>
  41             {loadRecentQueries().map((query, index) =>
  42                 <ListItem button key={index} className={classes.listItem} selected={`RQ-${index}-${query}` === selectedItem.id}>
  43                     <ListItemText disableTypography
  44                         secondary={query}
  45                         onClick={() => onSearch(query)}
  46                         className={classes.listItemText} />
  47                 </ListItem>
  48             )}
  49         </List>);