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