From 442dca56f909dc11d7e39bd69bd057101e616953 Mon Sep 17 00:00:00 2001
From: Esko Ikkala <esko.ikkala@aalto.fi>
Date: Thu, 9 Aug 2018 16:11:12 +0300
Subject: [PATCH] Seperate component for top bar
---
src/client/components/TopBar.js | 115 ++++++++++++++++++++++++++++++++
src/client/containers/MapApp.js | 23 +------
src/client/reducers/options.js | 2 +-
3 files changed, 118 insertions(+), 22 deletions(-)
create mode 100644 src/client/components/TopBar.js
diff --git a/src/client/components/TopBar.js b/src/client/components/TopBar.js
new file mode 100644
index 00000000..8383be08
--- /dev/null
+++ b/src/client/components/TopBar.js
@@ -0,0 +1,115 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Toolbar from '@material-ui/core/Toolbar';
+
+import NavTabs from '../components/NavTabs';
+import Typography from '@material-ui/core/Typography';
+import IconButton from '@material-ui/core/IconButton';
+
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+import MenuIcon from '@material-ui/icons/Menu';
+import MenuList from '@material-ui/core/MenuList';
+import ListItemIcon from '@material-ui/core/ListItemIcon';
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
+import ListItemText from '@material-ui/core/ListItemText';
+
+import Switch from '@material-ui/core/Switch';
+import WifiIcon from '@material-ui/icons/Wifi';
+import BluetoothIcon from '@material-ui/icons/Bluetooth';
+
+
+const styles = () => ({
+ menuButton: {
+ marginLeft: -12,
+ marginRight: 20,
+ },
+ menuList: {
+ width: 350
+ }
+});
+
+class TopBar extends React.Component {
+ state = {
+ anchorEl: null,
+ checked: ['cluster'],
+ };
+
+ handleClick = event => {
+ this.setState({ anchorEl: event.currentTarget });
+ };
+
+ handleToggle = value => () => {
+ const { checked } = this.state;
+ const currentIndex = checked.indexOf(value);
+ const newChecked = [...checked];
+
+ if (currentIndex === -1) {
+ newChecked.push(value);
+ } else {
+ newChecked.splice(currentIndex, 1);
+ }
+
+ this.setState({
+ checked: newChecked,
+ });
+ };
+
+ handleClose = () => {
+ this.setState({ anchorEl: null });
+ };
+
+ render() {
+ const { anchorEl } = this.state;
+ const { classes } = this.props;
+
+ return (
+ <AppBar position="absolute">
+ <Toolbar>
+ <IconButton
+ className={classes.menuButton}
+ color="inherit"
+ aria-label="Menu"
+ onClick={this.handleClick}
+ >
+ <MenuIcon />
+ </IconButton>
+ <Menu
+ id="simple-menu"
+ anchorEl={anchorEl}
+ open={Boolean(anchorEl)}
+ onClose={this.handleClose}
+ >
+ <MenuList className={classes.menuList}>
+ <MenuItem>
+ <ListItemIcon>
+ <WifiIcon />
+ </ListItemIcon>
+ <ListItemText primary="Cluster markers" />
+ <ListItemSecondaryAction>
+ <Switch
+ onChange={this.handleToggle('cluster')}
+ checked={this.state.checked.indexOf('cluster') !== -1}
+ />
+ </ListItemSecondaryAction>
+ </MenuItem>
+ </MenuList>
+ </Menu>
+ <Typography variant="title" color="inherit" className={classes.flex}>
+ NameSampo
+ </Typography>
+ {this.props.oneColumnView && <NavTabs /> }
+ </Toolbar>
+ </AppBar>
+ );
+ }
+}
+
+TopBar.propTypes = {
+ classes: PropTypes.object.isRequired,
+ oneColumnView: PropTypes.bool.isRequired,
+};
+
+export default withStyles(styles)(TopBar);
diff --git a/src/client/containers/MapApp.js b/src/client/containers/MapApp.js
index 1b3fabe6..b12f0b37 100644
--- a/src/client/containers/MapApp.js
+++ b/src/client/containers/MapApp.js
@@ -4,18 +4,13 @@ import { connect } from 'react-redux';
import { withStyles } from '@material-ui/core/styles';
import withWidth from '@material-ui/core/withWidth';
import compose from 'recompose/compose';
-import AppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import IconButton from '@material-ui/core/IconButton';
-import MenuIcon from '@material-ui/icons/Menu';
import Paper from '@material-ui/core/Paper';
import Immutable from 'immutable';
import VirtualizedTable from '../components/VirtualizedTable';
import LeafletMap from '../components/map/LeafletMap';
import GMap from '../components/map/GMap';
import Pie from '../components/Pie';
-import NavTabs from '../components/NavTabs';
+import TopBar from '../components/TopBar';
import {
getVisibleResults,
@@ -44,10 +39,6 @@ const styles = theme => ({
flex: {
flexGrow: 1,
},
- menuButton: {
- marginLeft: -12,
- marginRight: 20,
- },
appFrame: {
height: '100%',
zIndex: 1,
@@ -160,17 +151,7 @@ let MapApp = (props) => {
return (
<div className={classes.root}>
<div className={classes.appFrame}>
- <AppBar position="absolute">
- <Toolbar>
- <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
- <MenuIcon />
- </IconButton>
- <Typography variant="title" color="inherit" className={classes.flex}>
- NameSampo
- </Typography>
- {oneColumnView && <NavTabs /> }
- </Toolbar>
- </AppBar>
+ <TopBar oneColumnView={oneColumnView} />
<div className={classes.mainContainer}>
<div className={oneColumnView ? classes.resultTableOneColumn : classes.resultTable}>
<VirtualizedTable
diff --git a/src/client/reducers/options.js b/src/client/reducers/options.js
index 6a871597..217020ce 100644
--- a/src/client/reducers/options.js
+++ b/src/client/reducers/options.js
@@ -6,7 +6,7 @@ import {
const DEFAULT_LANGUAGE = 'en';
const DEFAULT_RESULT_FORMAT = 'table';
-const DEFAULT_MAP_MODE = 'noCluster';
+const DEFAULT_MAP_MODE = 'cluster';
export const INITIAL_STATE = {
language: DEFAULT_LANGUAGE,
--
GitLab