From 0de7ebbc2fb6152edc95d016fe52bd8df969ef30 Mon Sep 17 00:00:00 2001
From: esikkala <esko.ikkala@aalto.fi>
Date: Tue, 22 Jan 2019 17:17:04 +0200
Subject: [PATCH] Facet header to separate component
---
src/client/components/FacetBar.js | 59 ++++++---------
src/client/components/FacetHeader.js | 109 +++++++++++++++++++++++++++
2 files changed, 132 insertions(+), 36 deletions(-)
create mode 100644 src/client/components/FacetHeader.js
diff --git a/src/client/components/FacetBar.js b/src/client/components/FacetBar.js
index 386b189c..48aa3abf 100644
--- a/src/client/components/FacetBar.js
+++ b/src/client/components/FacetBar.js
@@ -2,10 +2,9 @@ import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import HierarchicalFacet from './HierarchicalFacet';
-import Typography from '@material-ui/core/Typography';
import Paper from '@material-ui/core/Paper';
-import IconButton from '@material-ui/core/IconButton';
-import { PieChart, ExpandLess, /*ExpandMore*/ } from '@material-ui/icons';
+import FacetHeader from './FacetHeader';
+
const styles = theme => ({
root: {
@@ -47,17 +46,13 @@ class FacetBar extends React.Component {
<React.Fragment>
<Paper className={classes.facetContainer}>
- <Paper className={classes.headingContainer}>
- <Typography variant="h6">Source {this.props.source.distinctValueCount > 0 ? `(${this.props.source.distinctValueCount})` : ''}</Typography>
- <div className={classes.facetHeaderButtons}>
- <IconButton disabled aria-label="Statistics">
- <PieChart />
- </IconButton>
- <IconButton disabled aria-label="Expand">
- <ExpandLess />
- </IconButton>
- </div>
- </Paper>
+ <FacetHeader
+ label='Source'
+ distinctValueCount={this.props.source.distinctValueCount}
+ sortBy={this.props.source.sortBy}
+ sortDirection={this.props.source.sortDirection}
+ fetchFacet={this.props.fetchFacet}
+ />
<div className={classes.facetValuesContainerThree}>
<HierarchicalFacet
key='source'
@@ -76,17 +71,13 @@ class FacetBar extends React.Component {
</Paper>
<Paper className={classes.facetContainer}>
- <Paper className={classes.headingContainer}>
- <Typography variant="h6">Author {this.props.author.distinctValueCount > 0 ? `(${this.props.author.distinctValueCount})` : ''}</Typography>
- <div className={classes.facetHeaderButtons}>
- <IconButton disabled aria-label="Statistics">
- <PieChart />
- </IconButton>
- <IconButton disabled aria-label="Expand">
- <ExpandLess />
- </IconButton>
- </div>
- </Paper>
+ <FacetHeader
+ label='Author'
+ distinctValueCount={this.props.author.distinctValueCount}
+ sortBy={this.props.author.sortBy}
+ sortDirection={this.props.author.sortDirection}
+ fetchFacet={this.props.fetchFacet}
+ />
<div className={classes.facetValuesContainerTen}>
<HierarchicalFacet
key='author'
@@ -105,17 +96,13 @@ class FacetBar extends React.Component {
</Paper>
<Paper className={classes.facetContainerLast}>
- <Paper className={classes.headingContainer}>
- <Typography variant="h6">Production place {this.props.productionPlace.distinctValueCount > 0 ? `(${this.props.productionPlace.distinctValueCount})` : ''}</Typography>
- <div className={classes.facetHeaderButtons}>
- <IconButton disabled aria-label="Statistics">
- <PieChart />
- </IconButton>
- <IconButton disabled aria-label="Expand">
- <ExpandLess />
- </IconButton>
- </div>
- </Paper>
+ <FacetHeader
+ label='Production place'
+ distinctValueCount={this.props.productionPlace.distinctValueCount}
+ sortBy={this.props.productionPlace.sortBy}
+ sortDirection={this.props.productionPlace.sortDirection}
+ fetchFacet={this.props.fetchFacet}
+ />
<div className={classes.facetValuesContainerTen}>
<HierarchicalFacet
key='productionPlace'
diff --git a/src/client/components/FacetHeader.js b/src/client/components/FacetHeader.js
new file mode 100644
index 00000000..3c71958f
--- /dev/null
+++ b/src/client/components/FacetHeader.js
@@ -0,0 +1,109 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import Menu from '@material-ui/core/Menu';
+import MenuItem from '@material-ui/core/MenuItem';
+//import MoreVertIcon from '@material-ui/icons/MoreVert';
+import SortByAlphaIcon from '@material-ui/icons/SortByAlpha';
+import { PieChart, ExpandLess, /*ExpandMore*/ } from '@material-ui/icons';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+
+const options = [
+ 'Sort alphabetically',
+ 'Sort by manuscript count',
+];
+
+const styles = theme => ({
+ root: {
+ width: '100%',
+ height: '100%'
+ },
+ headingContainer: {
+ display: 'flex',
+ alignItems: 'center',
+ paddingLeft: theme.spacing.unit,
+ borderBottomLeftRadius: 0,
+ borderBottomRightRadius: 0,
+ },
+ facetContainer: {
+ marginBottom: theme.spacing.unit,
+ },
+ facetContainerLast: {
+ marginBottom: 2,
+ },
+ facetValuesContainerTen: {
+ height: 345,
+ padding: theme.spacing.unit,
+ },
+ facetValuesContainerThree: {
+ height: 108,
+ padding: theme.spacing.unit,
+ },
+ facetHeaderButtons: {
+ marginLeft: 'auto'
+ }
+});
+
+class FacetHeader extends React.Component {
+ state = {
+ anchorEl: null,
+ };
+
+ handleClick = event => {
+ this.setState({ anchorEl: event.currentTarget });
+ };
+
+ handleClose = () => {
+ this.setState({ anchorEl: null });
+ };
+
+ render() {
+ const { classes } = this.props;
+ const { anchorEl } = this.state;
+ const open = Boolean(anchorEl);
+
+ return (
+ <Paper className={classes.headingContainer}>
+ <Typography variant="h6">{this.props.label} {this.props.distinctValueCount > 0 ? `(${this.props.distinctValueCount})` : ''}</Typography>
+ <div className={classes.facetHeaderButtons}>
+ <IconButton disabled aria-label="Statistics">
+ <PieChart />
+ </IconButton>
+ <IconButton
+ aria-label="More"
+ aria-owns={open ? 'long-menu' : undefined}
+ aria-haspopup="true"
+ onClick={this.handleClick}
+ >
+ <SortByAlphaIcon />
+ </IconButton>
+ <Menu
+ id="long-menu"
+ anchorEl={anchorEl}
+ open={open}
+ onClose={this.handleClose}
+ >
+ {options.map(option => (
+ <MenuItem key={option} selected={option === 'Pyxis'} onClick={this.handleClose}>
+ {option}
+ </MenuItem>
+ ))}
+ </Menu>
+ <IconButton disabled aria-label="Expand">
+ <ExpandLess />
+ </IconButton>
+ </div>
+ </Paper>
+ );
+ }
+}
+
+FacetHeader.propTypes = {
+ classes: PropTypes.object.isRequired,
+ label: PropTypes.string.isRequired,
+ distinctValueCount: PropTypes.number.isRequired
+};
+
+export default withStyles(styles)(FacetHeader);
--
GitLab