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 } from '@material-ui/core';
   7 import { SearchView } from '~/store/search-bar/search-bar-reducer';
   8 import {
   9     SearchBarRecentQueries,
  10     SearchBarRecentQueriesActionProps
  11 } from '~/views-components/search-bar/search-bar-recent-queries';
  12 import {
  13     SearchBarSavedQueries,
  14     SearchBarSavedQueriesDataProps,
  15     SearchBarSavedQueriesActionProps
  16 } from '~/views-components/search-bar/search-bar-save-queries';
  17
  18 type CssRules = 'advanced' | 'label' | 'root';
  19
  20 const styles: StyleRulesCallback<CssRules> = theme => {
  21     return {
  22         root: {
  23             color: theme.palette.common.black,
  24             borderRadius: `0 0 ${theme.spacing.unit / 2}px ${theme.spacing.unit / 2}px`
  25         },
  26         advanced: {
  27             display: 'flex',
  28             justifyContent: 'flex-end',
  29             padding: theme.spacing.unit,
  30             fontSize: '0.875rem',
  31             cursor: 'pointer',
  32             color: theme.palette.primary.main
  33         },
  34         label: {
  35             fontSize: '0.875rem',
  36             padding: `${theme.spacing.unit}px ${theme.spacing.unit}px `,
  37             color: theme.palette.grey["900"],
  38             background: theme.palette.grey["200"]
  39         }
  40     };
  41 };
  42
  43 export type SearchBarBasicViewDataProps = SearchBarSavedQueriesDataProps;
  44
  45 export type SearchBarBasicViewActionProps = {
  46     onSetView: (currentView: string) => void;
  47     onSearch: (searchValue: string) => void;
  48 } & SearchBarRecentQueriesActionProps & SearchBarSavedQueriesActionProps;
  49
  50 type SearchBarBasicViewProps = SearchBarBasicViewDataProps & SearchBarBasicViewActionProps & WithStyles<CssRules>;
  51
  52 export const SearchBarBasicView = withStyles(styles)(
  53     ({ classes, onSetView, loadRecentQueries, deleteSavedQuery, savedQueries, onSearch, editSavedQuery, selectedItem }: SearchBarBasicViewProps) =>
  54         <Paper className={classes.root}>
  55             <div className={classes.label}>Recent search queries</div>
  56             <SearchBarRecentQueries
  57                 onSearch={onSearch}
  58                 loadRecentQueries={loadRecentQueries}
  59                 selectedItem={selectedItem} />
  60             <div className={classes.label}>Saved search queries</div>
  61             <SearchBarSavedQueries
  62                 onSearch={onSearch}
  63                 savedQueries={savedQueries}
  64                 editSavedQuery={editSavedQuery}
  65                 deleteSavedQuery={deleteSavedQuery}
  66                 selectedItem={selectedItem} />
  67             <div className={classes.advanced} onClick={() => onSetView(SearchView.ADVANCED)}>Advanced search</div>
  68         </Paper>
  69 );