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