src/views-components/search-bar/search-bar-basic-view.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 { Paper, StyleRulesCallback, withStyles, WithStyles, List } from '@material-ui/core';
   7 import { SearchView } from '~/store/search-bar/search-bar-reducer';
   8 import { RecentQueriesItem, RenderSavedQueries } from '~/views-components/search-bar/search-bar-view';
   9
  10 type CssRules = 'advanced' | 'searchQueryList' | 'list' | 'searchView';
  11
  12 const styles: StyleRulesCallback<CssRules> = theme => {
  13     return {
  14         advanced: {
  15             display: 'flex',
  16             justifyContent: 'flex-end',
  17             paddingRight: theme.spacing.unit * 2,
  18             paddingBottom: theme.spacing.unit,
  19             fontSize: '14px',
  20             cursor: 'pointer'
  21         },
  22         searchQueryList: {
  23             padding: `${theme.spacing.unit / 2}px ${theme.spacing.unit}px `,
  24             background: '#f2f2f2',
  25             fontSize: '14px'
  26         },
  27         list: {
  28             padding: '0px'
  29         },
  30         searchView: {
  31             color: theme.palette.common.black,
  32             borderRadius: `0 0 ${theme.spacing.unit / 4}px ${theme.spacing.unit / 4}px`
  33         }
  34     };
  35 };
  36
  37 interface SearchBarBasicViewProps {
  38     setView: (currentView: string) => void;
  39     recentQueries: () => string[];
  40 }
  41
  42 export const SearchBarBasicView = withStyles(styles)(
  43     ({ classes, setView, recentQueries }: SearchBarBasicViewProps & WithStyles<CssRules>) =>
  44         <Paper className={classes.searchView}>
  45             <div className={classes.searchQueryList}>Saved search queries</div>
  46             <List component="nav" className={classes.list}>
  47                 <RenderSavedQueries text="Test" />
  48                 <RenderSavedQueries text="Demo" />
  49             </List>
  50             <div className={classes.searchQueryList}>Recent search queries</div>
  51             <List component="nav" className={classes.list}>
  52                 {recentQueries().map((query, index) => <RecentQueriesItem key={query + index} text={query} />)}
  53             </List>
  54             <div className={classes.advanced} onClick={() => setView(SearchView.ADVANCED)}>Advanced search</div>
  55         </Paper>
  56 );