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.775rem',
  36             padding: `${theme.spacing.unit}px ${theme.spacing.unit}px `,
  37             color: theme.palette.grey["900"],
  38             background: 'white',
  39             textAlign: 'right',
  40             fontWeight: 'bold'
  41         }
  42     };
  43 };
  44
  45 export type SearchBarBasicViewDataProps = SearchBarSavedQueriesDataProps;
  46
  47 export type SearchBarBasicViewActionProps = {
  48     onSetView: (currentView: string) => void;
  49     onSearch: (searchValue: string) => void;
  50 } & SearchBarRecentQueriesActionProps & SearchBarSavedQueriesActionProps;
  51
  52 type SearchBarBasicViewProps = SearchBarBasicViewDataProps & SearchBarBasicViewActionProps & WithStyles<CssRules>;
  53
  54 export const SearchBarBasicView = withStyles(styles)(
  55     ({ classes, onSetView, loadRecentQueries, deleteSavedQuery, savedQueries, onSearch, editSavedQuery, selectedItem }: SearchBarBasicViewProps) =>
  56         <Paper className={classes.root}>
  57             <div className={classes.label}>{"Recent queries"}</div>
  58             <SearchBarRecentQueries
  59                 onSearch={onSearch}
  60                 loadRecentQueries={loadRecentQueries}
  61                 selectedItem={selectedItem} />
  62             <div className={classes.label}>{"Saved queries"}</div>
  63             <SearchBarSavedQueries
  64                 onSearch={onSearch}
  65                 savedQueries={savedQueries}
  66                 editSavedQuery={editSavedQuery}
  67                 deleteSavedQuery={deleteSavedQuery}
  68                 selectedItem={selectedItem} />
  69         </Paper>
  70 );