[ARVADOS-WORKBENCH2] updated: 90b2eff699cfd45186e8d5b9b7947da316c0140d
Git user
git at public.curoverse.com
Mon Jun 11 10:21:06 EDT 2018
Summary of changes:
src/components/main-app-bar/main-app-bar.tsx | 36 ++++++++++----------
.../main-app-bar/search-bar/search-bar.tsx | 38 +++++++++++++++++++---
src/views/workbench/workbench.tsx | 20 ++++++------
3 files changed, 60 insertions(+), 34 deletions(-)
via 90b2eff699cfd45186e8d5b9b7947da316c0140d (commit)
from 8bfcbaea5e9f11543bbc4d721817978e621d2ffa (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit 90b2eff699cfd45186e8d5b9b7947da316c0140d
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Mon Jun 11 16:20:50 2018 +0200
replace search-box callbacks with onSearch, flatten appbar actions interface
Feature #13590
Arvados-DCO-1.1-Signed-off-by: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
diff --git a/src/components/main-app-bar/main-app-bar.tsx b/src/components/main-app-bar/main-app-bar.tsx
index f5d4cc3..2b37af0 100644
--- a/src/components/main-app-bar/main-app-bar.tsx
+++ b/src/components/main-app-bar/main-app-bar.tsx
@@ -13,7 +13,7 @@ import DropdownMenu from "./dropdown-menu/dropdown-menu"
import { User } from "../../models/user";
export interface MainAppBarMenuItem {
- label: string
+ label: string;
}
export interface MainAppBarMenuItems {
@@ -23,19 +23,17 @@ export interface MainAppBarMenuItems {
}
interface MainAppBarDataProps {
- searchQuery: string,
- breadcrumbs: Breadcrumb[],
- user?: User,
- menuItems: MainAppBarMenuItems
+ searchText: string;
+ searchDebounce?: number;
+ breadcrumbs: Breadcrumb[];
+ user?: User;
+ menuItems: MainAppBarMenuItems;
}
export interface MainAppBarActionProps {
- actions: {
- onSearchQueryChange: (searchQuery: string) => void,
- onSearchQuerySubmit: () => void,
- onBreadcrumbClick: (breadcrumb: Breadcrumb) => void,
- onMenuItemClick: (menuItem: MainAppBarMenuItem) => void
- }
+ onSearch: (searchText: string) => void,
+ onBreadcrumbClick: (breadcrumb: Breadcrumb) => void,
+ onMenuItemClick: (menuItem: MainAppBarMenuItem) => void
}
type MainAppBarProps = MainAppBarDataProps & MainAppBarActionProps & WithStyles<CssRules>;
@@ -43,7 +41,7 @@ type MainAppBarProps = MainAppBarDataProps & MainAppBarActionProps & WithStyles<
export class MainAppBar extends React.Component<MainAppBarProps> {
render() {
- const { classes, searchQuery, breadcrumbs } = this.props
+ const { classes, searchText, breadcrumbs, searchDebounce } = this.props
return <AppBar className={classes.appBar} position="static">
<Toolbar>
<Grid
@@ -58,9 +56,9 @@ export class MainAppBar extends React.Component<MainAppBarProps> {
<Grid item xs={6} container alignItems="center">
{
this.props.user && <SearchBar
- value={searchQuery}
- onChange={this.props.actions.onSearchQueryChange}
- onSubmit={this.props.actions.onSearchQuerySubmit}
+ value={searchText}
+ onSearch={this.props.onSearch}
+ debounce={searchDebounce}
/>
}
</Grid>
@@ -73,14 +71,14 @@ export class MainAppBar extends React.Component<MainAppBarProps> {
</Toolbar>
{
this.props.user && <Toolbar>
- <Breadcrumbs items={breadcrumbs} onClick={this.props.actions.onBreadcrumbClick} />
+ <Breadcrumbs items={breadcrumbs} onClick={this.props.onBreadcrumbClick} />
</Toolbar>
}
</AppBar>
}
renderMenuForUser = () => {
- const { user, actions } = this.props
+ const { user } = this.props
return (
<>
<IconButton color="inherit">
@@ -101,13 +99,13 @@ export class MainAppBar extends React.Component<MainAppBarProps> {
renderMenuForAnonymous = () => {
return this.props.menuItems.anonymousMenu.map((item, index) => (
- <Button color="inherit" onClick={() => this.props.actions.onMenuItemClick(item)}>{item.label}</Button>
+ <Button color="inherit" onClick={() => this.props.onMenuItemClick(item)}>{item.label}</Button>
))
}
renderMenuItems = (menuItems: MainAppBarMenuItem[]) => {
return menuItems.map((item, index) => (
- <MenuItem key={index} onClick={() => this.props.actions.onMenuItemClick(item)}>{item.label}</MenuItem>
+ <MenuItem key={index} onClick={() => this.props.onMenuItemClick(item)}>{item.label}</MenuItem>
))
}
diff --git a/src/components/main-app-bar/search-bar/search-bar.tsx b/src/components/main-app-bar/search-bar/search-bar.tsx
index c07ddca..b2c95a9 100644
--- a/src/components/main-app-bar/search-bar/search-bar.tsx
+++ b/src/components/main-app-bar/search-bar/search-bar.tsx
@@ -15,13 +15,28 @@ interface SearchBarDataProps {
}
interface SearchBarActionProps {
- onChange: (value: string) => any;
- onSubmit: () => any;
+ onSearch: (value: string) => any;
+ debounce?: number;
}
type SearchBarProps = SearchBarDataProps & SearchBarActionProps & WithStyles<CssRules>
+interface SearchBarState {
+ value: string;
+ prevValue: string;
+}
+
+const DEFAULT_SEARCH_DEBOUNCE = 1000;
+
class SearchBar extends React.Component<SearchBarProps> {
+
+ state: SearchBarState = {
+ value: "",
+ prevValue: ""
+ }
+
+ timeout: NodeJS.Timer;
+
render() {
const { classes } = this.props
return <Paper className={classes.container}>
@@ -30,7 +45,7 @@ class SearchBar extends React.Component<SearchBarProps> {
className={classes.input}
onChange={this.handleChange}
placeholder="Search"
- value={this.props.value}
+ value={this.state.value}
/>
<IconButton className={classes.button}>
<SearchIcon />
@@ -39,13 +54,26 @@ class SearchBar extends React.Component<SearchBarProps> {
</Paper>
}
+ componentWillReceiveProps(nextProps: SearchBarProps) {
+ if (nextProps.value !== this.props.value) {
+ this.setState({ value: nextProps.value });
+ }
+ }
+
handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
- this.props.onSubmit();
+ clearTimeout(this.timeout);
+ this.props.onSearch(this.state.value);
}
handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
- this.props.onChange(event.target.value);
+ clearTimeout(this.timeout);
+ this.setState({ value: event.target.value });
+ this.timeout = setTimeout(
+ () => this.props.onSearch(this.state.value),
+ this.props.debounce || DEFAULT_SEARCH_DEBOUNCE
+ );
+
}
}
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 15f6fa5..d014083 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -83,7 +83,7 @@ interface NavMenuItem extends MainAppBarMenuItem {
interface WorkbenchState {
anchorEl: any;
breadcrumbs: NavBreadcrumb[];
- searchQuery: string;
+ searchText: string;
menuItems: {
accountMenu: NavMenuItem[],
helpMenu: NavMenuItem[],
@@ -94,7 +94,7 @@ interface WorkbenchState {
class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
state = {
anchorEl: null,
- searchQuery: "",
+ searchText: "",
breadcrumbs: [
{
label: "Projects",
@@ -132,12 +132,12 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
mainAppBarActions: MainAppBarActionProps = {
- actions: {
- onBreadcrumbClick: (breadcrumb: NavBreadcrumb) => this.props.dispatch(push(breadcrumb.path)),
- onSearchQueryChange: searchQuery => this.setState({ searchQuery }),
- onSearchQuerySubmit: () => this.props.dispatch(push(`/search?q=${this.state.searchQuery}`)),
- onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action()
- }
+ onBreadcrumbClick: (breadcrumb: NavBreadcrumb) => this.props.dispatch(push(breadcrumb.path)),
+ onSearch: searchText => {
+ this.setState({ searchText });
+ this.props.dispatch(push(`/search?q=${searchText}`));
+ },
+ onMenuItemClick: (menuItem: NavMenuItem) => menuItem.action()
}
render() {
@@ -147,10 +147,10 @@ class Workbench extends React.Component<WorkbenchProps, WorkbenchState> {
<div className={classes.appBar}>
<MainAppBar
breadcrumbs={this.state.breadcrumbs}
- searchQuery={this.state.searchQuery}
+ searchText={this.state.searchText}
user={this.props.user}
menuItems={this.state.menuItems}
- actions={this.mainAppBarActions.actions}
+ {...this.mainAppBarActions}
/>
</div>
{user &&
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list