[ARVADOS-WORKBENCH2] updated: 1.1.4-51-g8d401d8
Git user
git at public.curoverse.com
Wed Jun 13 04:49:09 EDT 2018
Summary of changes:
src/components/main-app-bar/main-app-bar.tsx | 151 +++++++++++++--------------
1 file changed, 73 insertions(+), 78 deletions(-)
via 8d401d8610a2a5f9845f4dd4d2dca81ba9b77252 (commit)
from 528b1f4623fa22d956b8ac1652833fc375a0bfc1 (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 8d401d8610a2a5f9845f4dd4d2dca81ba9b77252
Author: Michal Klobukowski <michal.klobukowski at contractors.roche.com>
Date: Wed Jun 13 10:48:54 2018 +0200
Transform main app bar to stateless component
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 0626415..d0dee65 100644
--- a/src/components/main-app-bar/main-app-bar.tsx
+++ b/src/components/main-app-bar/main-app-bar.tsx
@@ -38,86 +38,81 @@ export interface MainAppBarActionProps {
type MainAppBarProps = MainAppBarDataProps & MainAppBarActionProps & WithStyles<CssRules>;
-export class MainAppBar extends React.Component<MainAppBarProps> {
-
- render() {
- const { classes, searchText, breadcrumbs, searchDebounce } = this.props;
- return <AppBar className={classes.appBar} position="static">
- <Toolbar className={classes.toolbar}>
- <Grid
- container
- justify="space-between"
- >
- <Grid item xs={3}>
- <Typography variant="headline" color="inherit" noWrap>
- Arvados
- </Typography>
- <Typography variant="body1" color="inherit" noWrap >
- Workbench 2
- </Typography>
- </Grid>
- <Grid item xs={6} container alignItems="center">
- {
- this.props.user && <SearchBar
- value={searchText}
- onSearch={this.props.onSearch}
- debounce={searchDebounce}
- />
- }
- </Grid>
- <Grid item xs={3} container alignItems="center" justify="flex-end">
- {
- this.props.user ? this.renderMenuForUser() : this.renderMenuForAnonymous()
- }
- </Grid>
+export const MainAppBar: React.SFC<MainAppBarProps> = (props) => {
+ const { classes, searchText, breadcrumbs, searchDebounce, user } = props;
+ return <AppBar className={classes.appBar} position="static">
+ <Toolbar className={classes.toolbar}>
+ <Grid
+ container
+ justify="space-between"
+ >
+ <Grid item xs={3}>
+ <Typography variant="headline" color="inherit" noWrap>
+ Arvados
+ </Typography>
+ <Typography variant="body1" color="inherit" noWrap >
+ Workbench 2
+ </Typography>
+ </Grid>
+ <Grid item xs={6} container alignItems="center">
+ {
+ props.user && <SearchBar
+ value={searchText}
+ onSearch={props.onSearch}
+ debounce={searchDebounce}
+ />
+ }
</Grid>
+ <Grid item xs={3} container alignItems="center" justify="flex-end">
+ {
+ props.user ? renderMenuForUser(props) : renderMenuForAnonymous(props)
+ }
+ </Grid>
+ </Grid>
+ </Toolbar>
+ {
+ props.user && <Toolbar className={classes.toolbar}>
+ <Breadcrumbs items={breadcrumbs} onClick={props.onBreadcrumbClick} />
</Toolbar>
- {
- this.props.user && <Toolbar className={classes.toolbar}>
- <Breadcrumbs items={breadcrumbs} onClick={this.props.onBreadcrumbClick} />
- </Toolbar>
- }
- </AppBar>;
- }
-
- renderMenuForUser = () => {
- const { user } = this.props;
- return (
- <>
- <IconButton color="inherit">
- <Badge badgeContent={3} color="primary">
- <NotificationsIcon />
- </Badge>
- </IconButton>
- <DropdownMenu icon={PersonIcon} id="account-menu">
- <MenuItem>{this.getUserFullname()}</MenuItem>
- {this.renderMenuItems(this.props.menuItems.accountMenu)}
- </DropdownMenu>
- <DropdownMenu icon={HelpIcon} id="help-menu">
- {this.renderMenuItems(this.props.menuItems.helpMenu)}
- </DropdownMenu>
- </>
- );
- }
-
- renderMenuForAnonymous = () => {
- return this.props.menuItems.anonymousMenu.map((item, index) => (
- <Button key={index} color="inherit" onClick={() => this.props.onMenuItemClick(item)}>{item.label}</Button>
- ));
- }
-
- renderMenuItems = (menuItems: MainAppBarMenuItem[]) => {
- return menuItems.map((item, index) => (
- <MenuItem key={index} onClick={() => this.props.onMenuItemClick(item)}>{item.label}</MenuItem>
- ));
- }
-
- getUserFullname = () => {
- const { user } = this.props;
- return user ? `${user.firstName} ${user.lastName}` : "";
- }
-
-}
+ }
+ </AppBar>;
+};
+
+
+const renderMenuForUser = ({ user, menuItems, onMenuItemClick }: MainAppBarProps) => {
+ return (
+ <>
+ <IconButton color="inherit">
+ <Badge badgeContent={3} color="primary">
+ <NotificationsIcon />
+ </Badge>
+ </IconButton>
+ <DropdownMenu icon={PersonIcon} id="account-menu">
+ <MenuItem>{getUserFullname(user)}</MenuItem>
+ {renderMenuItems(menuItems.accountMenu, onMenuItemClick)}
+ </DropdownMenu>
+ <DropdownMenu icon={HelpIcon} id="help-menu">
+ {renderMenuItems(menuItems.helpMenu, onMenuItemClick)}
+ </DropdownMenu>
+ </>
+ );
+};
+
+const renderMenuForAnonymous = ({ onMenuItemClick, menuItems }: MainAppBarProps) => {
+ return menuItems.anonymousMenu.map((item, index) => (
+ <Button key={index} color="inherit" onClick={() => onMenuItemClick(item)}>{item.label}</Button>
+ ));
+};
+
+const renderMenuItems = (menuItems: MainAppBarMenuItem[], onMenuItemClick: (menuItem: MainAppBarMenuItem) => void) => {
+ return menuItems.map((item, index) => (
+ <MenuItem key={index} onClick={() => onMenuItemClick(item)}>{item.label}</MenuItem>
+ ));
+};
+
+const getUserFullname = (user?: User) => {
+ return user ? `${user.firstName} ${user.lastName}` : "";
+};
type CssRules = "appBar" | "toolbar";
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list