add ordering filter component
This commit is contained in:
parent
a02a535d78
commit
c9c5ce7d4a
|
@ -0,0 +1,90 @@
|
||||||
|
import React, { Fragment, PureComponent } from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { withStyles } from '@material-ui/core/styles';
|
||||||
|
import Button from '@material-ui/core/Button';
|
||||||
|
import Dialog from '@material-ui/core/Dialog';
|
||||||
|
import ListItemText from '@material-ui/core/ListItemText';
|
||||||
|
import ListItem from '@material-ui/core/ListItem';
|
||||||
|
import List from '@material-ui/core/List';
|
||||||
|
import Divider from '@material-ui/core/Divider';
|
||||||
|
import AppBar from '@material-ui/core/AppBar';
|
||||||
|
import Toolbar from '@material-ui/core/Toolbar';
|
||||||
|
import IconButton from '@material-ui/core/IconButton';
|
||||||
|
import Typography from '@material-ui/core/Typography';
|
||||||
|
import CloseIcon from '@material-ui/icons/Close';
|
||||||
|
import Slide from '@material-ui/core/Slide';
|
||||||
|
|
||||||
|
const options = ['Most Votes', 'Most Voters', 'Newest Added', 'Ending Soonest', ]
|
||||||
|
const styles = {
|
||||||
|
appBar: {
|
||||||
|
position: 'relative',
|
||||||
|
},
|
||||||
|
flex: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
function Transition(props) {
|
||||||
|
return <Slide direction="up" {...props} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
const ListButton = ({ name }) => (
|
||||||
|
<Fragment>
|
||||||
|
<ListItem button>
|
||||||
|
<ListItemText primary={name} />
|
||||||
|
</ListItem>
|
||||||
|
<Divider />
|
||||||
|
</Fragment>
|
||||||
|
)
|
||||||
|
|
||||||
|
class OrderingDialog extends PureComponent {
|
||||||
|
state = {
|
||||||
|
open: false,
|
||||||
|
};
|
||||||
|
|
||||||
|
handleClickOpen = () => {
|
||||||
|
this.setState({ open: true });
|
||||||
|
};
|
||||||
|
|
||||||
|
handleClose = () => {
|
||||||
|
this.setState({ open: false });
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { classes } = this.props;
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Button color="inherit" variant="outlined" onClick={this.handleClickOpen}>Open Filters</Button>
|
||||||
|
<Dialog
|
||||||
|
fullScreen
|
||||||
|
open={this.state.open}
|
||||||
|
onClose={this.handleClose}
|
||||||
|
TransitionComponent={Transition}
|
||||||
|
>
|
||||||
|
<AppBar className={classes.appBar}>
|
||||||
|
<Toolbar>
|
||||||
|
<IconButton color="inherit" onClick={this.handleClose} aria-label="Close">
|
||||||
|
<CloseIcon />
|
||||||
|
</IconButton>
|
||||||
|
<Typography variant="title" color="inherit" className={classes.flex}>
|
||||||
|
close
|
||||||
|
</Typography>
|
||||||
|
<Button color="inherit" onClick={this.handleClose}>
|
||||||
|
save
|
||||||
|
</Button>
|
||||||
|
</Toolbar>
|
||||||
|
</AppBar>
|
||||||
|
<List>
|
||||||
|
{options.map((name, i) => <ListButton key={i} name={name} />)}
|
||||||
|
</List>
|
||||||
|
</Dialog>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
OrderingDialog.propTypes = {
|
||||||
|
classes: PropTypes.object.isRequired,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default withStyles(styles)(OrderingDialog);
|
|
@ -8,6 +8,7 @@ import Button from '@material-ui/core/Button';
|
||||||
import IconButton from '@material-ui/core/IconButton';
|
import IconButton from '@material-ui/core/IconButton';
|
||||||
import MenuIcon from '@material-ui/icons/Menu';
|
import MenuIcon from '@material-ui/icons/Menu';
|
||||||
import Hidden from '@material-ui/core/Hidden';
|
import Hidden from '@material-ui/core/Hidden';
|
||||||
|
import OrderingFilter from '../simple-voting/OrderingFilter';
|
||||||
import { VotingContext } from '../../context';
|
import { VotingContext } from '../../context';
|
||||||
|
|
||||||
const hasSnt = snt => Number(snt.balance) > 0;
|
const hasSnt = snt => Number(snt.balance) > 0;
|
||||||
|
@ -38,7 +39,7 @@ function ButtonAppBar(props) {
|
||||||
<div className={classes.root} >
|
<div className={classes.root} >
|
||||||
<AppBar position="static">
|
<AppBar position="static">
|
||||||
<Toolbar className={classes.toolBar}>
|
<Toolbar className={classes.toolBar}>
|
||||||
<Hidden lgDown>
|
<Hidden mdDown>
|
||||||
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu" onClick={toggleAdmin} />
|
<IconButton className={classes.menuButton} color="inherit" aria-label="Menu" onClick={toggleAdmin} />
|
||||||
</Hidden>
|
</Hidden>
|
||||||
<Hidden smDown>
|
<Hidden smDown>
|
||||||
|
@ -46,7 +47,8 @@ function ButtonAppBar(props) {
|
||||||
What should we build next?
|
What should we build next?
|
||||||
</Typography>
|
</Typography>
|
||||||
</Hidden>
|
</Hidden>
|
||||||
{snt && <Button disabled={!hasSnt(snt)} variant="outlined" color="inherit" style={{ fontSize: '16px' }} onClick={togglePoll}>{hasSnt(snt) ? 'Add Proposal' : 'Your account has no SNT'}</Button>}
|
{snt && <Button disabled={!hasSnt(snt)} variant="outlined" color="inherit" onClick={togglePoll}>{hasSnt(snt) ? 'Add Proposal' : 'Your account has no SNT'}</Button>}
|
||||||
|
<OrderingFilter />
|
||||||
</Toolbar>
|
</Toolbar>
|
||||||
</AppBar>
|
</AppBar>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue