projects
/
arvados.git
/ blobdiff
summary
|
shortlog
|
log
|
commit
|
commitdiff
|
tree
raw
|
inline
| side by side
add native select field, data text field and search bar model
[arvados.git]
/
src
/
views-components
/
search-bar
/
search-bar-view.tsx
diff --git
a/src/views-components/search-bar/search-bar-view.tsx
b/src/views-components/search-bar/search-bar-view.tsx
index b2575a8f5f3ec171c24f192ab235262aa9295334..d0967712177eb09effeef030f83c8393a329f950 100644
(file)
--- a/
src/views-components/search-bar/search-bar-view.tsx
+++ b/
src/views-components/search-bar/search-bar-view.tsx
@@
-21,27
+21,30
@@
import { SearchBarBasicView } from '~/views-components/search-bar/search-bar-bas
import { SearchBarAdvancedView } from '~/views-components/search-bar/search-bar-advanced-view';
import { SearchBarAutocompleteView, SearchBarAutocompleteViewDataProps } from '~/views-components/search-bar/search-bar-autocomplete-view';
import { ArvadosTheme } from '~/common/custom-theme';
import { SearchBarAdvancedView } from '~/views-components/search-bar/search-bar-advanced-view';
import { SearchBarAutocompleteView, SearchBarAutocompleteViewDataProps } from '~/views-components/search-bar/search-bar-autocomplete-view';
import { ArvadosTheme } from '~/common/custom-theme';
+import { SearchBarAdvanceFormData } from '~/models/search-bar';
-type CssRules = 'container' | 'containerSearchViewOpened' | 'input' | '
searchBar
';
+type CssRules = 'container' | 'containerSearchViewOpened' | 'input' | '
view
';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => {
return {
container: {
position: 'relative',
width: '100%',
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => {
return {
container: {
position: 'relative',
width: '100%',
- borderRadius: theme.spacing.unit /
4
+ borderRadius: theme.spacing.unit /
2
},
containerSearchViewOpened: {
position: 'relative',
width: '100%',
},
containerSearchViewOpened: {
position: 'relative',
width: '100%',
- borderRadius: `${theme.spacing.unit /
4}px ${theme.spacing.unit / 4
}px 0 0`
+ borderRadius: `${theme.spacing.unit /
2}px ${theme.spacing.unit / 2
}px 0 0`
},
input: {
border: 'none',
padding: `0px ${theme.spacing.unit}px`
},
},
input: {
border: 'none',
padding: `0px ${theme.spacing.unit}px`
},
- searchBar: {
- height: '30px'
+ view: {
+ position: 'absolute',
+ width: '100%',
+ zIndex: 1
}
};
};
}
};
};
@@
-49,17
+52,20
@@
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => {
type SearchBarDataProps = {
searchValue: string;
currentView: string;
type SearchBarDataProps = {
searchValue: string;
currentView: string;
- open: boolean;
+ isPopoverOpen: boolean;
+ savedQueries: string[];
} & SearchBarAutocompleteViewDataProps;
interface SearchBarActionProps {
onSearch: (value: string) => any;
debounce?: number;
onSetView: (currentView: string) => void;
} & SearchBarAutocompleteViewDataProps;
interface SearchBarActionProps {
onSearch: (value: string) => any;
debounce?: number;
onSetView: (currentView: string) => void;
- openView: () => void;
closeView: () => void;
closeView: () => void;
- saveQuery: (query: string) => void;
- loadQueries: () => string[];
+ saveRecentQuery: (query: string) => void;
+ loadRecentQueries: () => string[];
+ saveQuery: (data: SearchBarAdvanceFormData) => void;
+ deleteSavedQuery: (id: number) => void;
+ openSearchView: () => void;
}
type SearchBarProps = SearchBarDataProps & SearchBarActionProps & WithStyles<CssRules>;
}
type SearchBarProps = SearchBarDataProps & SearchBarActionProps & WithStyles<CssRules>;
@@
-68,23
+74,29
@@
interface SearchBarState {
value: string;
}
value: string;
}
-interface RenderQueriesProps {
+interface RenderSavedQueriesProps {
+ text: string | JSX.Element;
+ id: number;
+ deleteSavedQuery: (id: number) => void;
+}
+
+interface RenderRecentQueriesProps {
text: string | JSX.Element;
}
text: string | JSX.Element;
}
-export const RecentQueriesItem = (props: RenderQueriesProps) => {
+export const RecentQueriesItem = (props: Render
Recent
QueriesProps) => {
return <ListItem button>
<ListItemText secondary={props.text} />
</ListItem>;
};
return <ListItem button>
<ListItemText secondary={props.text} />
</ListItem>;
};
-export const RenderSavedQueries = (props: RenderQueriesProps) => {
+export const RenderSavedQueries = (props: Render
Saved
QueriesProps) => {
return <ListItem button>
<ListItemText secondary={props.text} />
<ListItemSecondaryAction>
<Tooltip title="Remove">
return <ListItem button>
<ListItemText secondary={props.text} />
<ListItemSecondaryAction>
<Tooltip title="Remove">
- <IconButton aria-label="Remove">
+ <IconButton aria-label="Remove"
onClick={() => props.deleteSavedQuery(props.id)}
>
<RemoveIcon />
</IconButton>
</Tooltip>
<RemoveIcon />
</IconButton>
</Tooltip>
@@
-103,10
+115,10
@@
export const SearchBarView = withStyles(styles)(
timeout: number;
render() {
timeout: number;
render() {
- const { classes, currentView, open
View, closeView, o
pen } = this.props;
+ const { classes, currentView, open
SearchView, closeView, isPopoverO
pen } = this.props;
return <ClickAwayListener onClickAway={() => closeView()}>
return <ClickAwayListener onClickAway={() => closeView()}>
- <Paper className={
o
pen ? classes.containerSearchViewOpened : classes.container} >
- <form onSubmit={this.handleSubmit}
className={classes.searchBar}
>
+ <Paper className={
isPopoverO
pen ? classes.containerSearchViewOpened : classes.container} >
+ <form onSubmit={this.handleSubmit}>
<Input
className={classes.input}
onChange={this.handleChange}
<Input
className={classes.input}
onChange={this.handleChange}
@@
-114,7
+126,7
@@
export const SearchBarView = withStyles(styles)(
value={this.state.value}
fullWidth={true}
disableUnderline={true}
value={this.state.value}
fullWidth={true}
disableUnderline={true}
- onClick={
() => openView()
}
+ onClick={
openSearchView
}
endAdornment={
<InputAdornment position="end">
<Tooltip title='Search'>
endAdornment={
<InputAdornment position="end">
<Tooltip title='Search'>
@@
-124,8
+136,10
@@
export const SearchBarView = withStyles(styles)(
</Tooltip>
</InputAdornment>
} />
</Tooltip>
</InputAdornment>
} />
- {open && this.getView(currentView)}
</form>
</form>
+ <div className={classes.view}>
+ {isPopoverOpen && this.getView(currentView)}
+ </div>
</Paper >
</ClickAwayListener>;
}
</Paper >
</ClickAwayListener>;
}
@@
-145,26
+159,27
@@
export const SearchBarView = withStyles(styles)(
}
getView = (currentView: string) => {
}
getView = (currentView: string) => {
+ const { onSetView, loadRecentQueries, savedQueries, deleteSavedQuery, searchValue, searchResults, saveQuery } = this.props;
switch (currentView) {
case SearchView.BASIC:
switch (currentView) {
case SearchView.BASIC:
- return <SearchBarBasicView setView={
this.props.onSetView} recentQueries={this.props.loadQueries
} />;
+ return <SearchBarBasicView setView={
onSetView} recentQueries={loadRecentQueries} savedQueries={savedQueries} deleteSavedQuery={deleteSavedQuery
} />;
case SearchView.ADVANCED:
case SearchView.ADVANCED:
- return <SearchBarAdvancedView setView={
this.props.onSetView}
/>;
+ return <SearchBarAdvancedView setView={
onSetView} saveQuery={saveQuery}
/>;
case SearchView.AUTOCOMPLETE:
case SearchView.AUTOCOMPLETE:
- return <SearchBarAutocompleteView
- searchResults={this.props.searchResults}
-
searchValue={this.props.
searchValue} />;
+ return <SearchBarAutocompleteView
+ searchResults={searchResults}
+
searchValue={
searchValue} />;
default:
default:
- return <SearchBarBasicView setView={
this.props.onSetView} recentQueries={this.props.loadQueries
} />;
+ return <SearchBarBasicView setView={
onSetView} recentQueries={loadRecentQueries} savedQueries={savedQueries} deleteSavedQuery={deleteSavedQuery
} />;
}
}
handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
clearTimeout(this.timeout);
}
}
handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
clearTimeout(this.timeout);
- this.props.saveQuery(this.state.value);
+ this.props.save
Recent
Query(this.state.value);
this.props.onSearch(this.state.value);
this.props.onSearch(this.state.value);
- this.props.loadQueries();
+ this.props.load
Recent
Queries();
}
handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
}
handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {