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