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 * as React from 'react';
   6 import { withStyles, WithStyles, StyleRulesCallback, List, ListItem, ListItemText } from '@material-ui/core';
   7 import { ArvadosTheme } from '~/common/custom-theme';
   8
   9 type CssRules = 'root' | 'listItem' | 'listItemText';
  10
  11 const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
  12     root: {
  13         padding: '0px'
  14     },
  15     listItem: {
  16         paddingLeft: theme.spacing.unit,
  17         paddingRight: theme.spacing.unit * 2,
  18     },
  19     listItemText: {
  20         fontSize: '0.8125rem',
  21         color: theme.palette.grey["900"]
  22     }
  23 });
  24
  25 export interface SearchBarRecentQueriesActionProps {
  26     onSearch: (searchValue: string) => void;
  27     loadRecentQueries: () => string[];
  28 }
  29
  30 type SearchBarRecentQueriesProps = SearchBarRecentQueriesActionProps & WithStyles<CssRules>;
  31
  32 export const SearchBarRecentQueries = withStyles(styles)(
  33     ({ classes, onSearch, loadRecentQueries }: SearchBarRecentQueriesProps) =>
  34         <List component="nav" className={classes.root}>
  35             {loadRecentQueries().map((query, index) =>
  36                 <ListItem button key={index} className={classes.listItem}>
  37                     <ListItemText disableTypography
  38                         secondary={query}
  39                         onClick={() => onSearch(query)}
  40                         className={classes.listItemText} />
  41                 </ListItem>
  42             )}
  43         </List>);