BrowseMenu.tsx 3.95 KB
Newer Older
Valeriy Panov's avatar
Valeriy Panov committed
1
2
import * as React from 'react';
import compose from 'recompose/compose';
Maxim Babichev's avatar
Maxim Babichev committed
3
import { withStyles } from 'material-ui/styles';
Valeriy Panov's avatar
Valeriy Panov committed
4
5
import Grid from 'material-ui/Grid';
import Divider from 'material-ui/Divider';
6
import List, { ListItem, ListItemText } from 'material-ui/List';
Maxim Babichev's avatar
Maxim Babichev committed
7
import PlayArrow from 'material-ui-icons/PlayArrow';
Valeriy Panov's avatar
Valeriy Panov committed
8
9
10
11
12
13
14
15
16
17
import Collapse from 'material-ui/transitions/Collapse';
import Hidden from 'material-ui/Hidden';
import withWidth from 'material-ui/utils/withWidth';

interface IBrowseMenuProps extends React.ClassAttributes<any> {
    classes: any;
    width: any;
}

const styles = (theme) => ({
Maxim Babichev's avatar
Maxim Babichev committed
18
19
20
21
    root: theme.leftPanel.root,
    expandArrow: theme.arrows.expand,
    arrowOpened: theme.arrows.opened,
    arrowClosed: theme.arrows.closed,
Maxim Babichev's avatar
Maxim Babichev committed
22
    ulTitle: theme.leftPanel.title,
23
    ulWrapper: {
Maxim Babichev's avatar
Maxim Babichev committed
24
        padding: 0,
25
    },
Maxim Babichev's avatar
Maxim Babichev committed
26
});
Valeriy Panov's avatar
Valeriy Panov committed
27
28
29
30
31
32
33
34
35
36
37
38
39

class BrowseMenu extends React.Component<IBrowseMenuProps, any> {

    public constructor(props: any) {
        super(props);

        this.state = {
            expanded: true,
        };
    }

    public componentDidMount() {
        if (['sm', 'xs'].indexOf(this.props.width) !== -1) {
40
            this.setState({ expanded: false });
Valeriy Panov's avatar
Valeriy Panov committed
41
42
43
44
        }
    }

    private handleExpandClick = () => {
45
        this.setState({ expanded: !this.state.expanded });
Valeriy Panov's avatar
Valeriy Panov committed
46
47
48
49
    }

    public componentWillReceiveProps(nextProps) {
        if (['sm', 'xs'].indexOf(nextProps.width) === -1 && !this.state.expanded) {
50
            this.setState({ expanded: true });
Valeriy Panov's avatar
Valeriy Panov committed
51
52
53
54
55
        }
    }

    public render() {

56
        const { classes } = this.props;
Valeriy Panov's avatar
Valeriy Panov committed
57
58
59

        return (
            <Grid item xs={ 12 } md={ 2 } className={ classes.root }>
60
                <List className={ classes.ulWrapper }>
Valeriy Panov's avatar
Valeriy Panov committed
61

Maxim Babichev's avatar
Maxim Babichev committed
62
                    <div>
Maxim Babichev's avatar
Maxim Babichev committed
63
                        <h3 className={ `pl-20 pt-10 pb-10 green font-bold ${ classes.ulTitle }` }>BROWSE</h3>
Matija Obreza's avatar
Matija Obreza committed
64
                        <Hidden implementation="css" mdUp>
Maxim Babichev's avatar
Maxim Babichev committed
65
66
67
                            <PlayArrow onClick={ this.handleExpandClick }
                                       className={ `${classes.expandArrow} ${ this.state.expanded ? classes.arrowOpened : classes.arrowClosed }` }
                            />
Valeriy Panov's avatar
Valeriy Panov committed
68
                        </Hidden>
Maxim Babichev's avatar
Maxim Babichev committed
69
                    </div>
Valeriy Panov's avatar
Valeriy Panov committed
70

71
                    <Collapse in={ this.state.expanded } timeout="auto" unmountOnExit>
Valeriy Panov's avatar
Valeriy Panov committed
72
73
                        <div>
                            <Divider />
Maxym Borodenko's avatar
Maxym Borodenko committed
74
75
76
77
78
                            <a href="#dataset-top">
                                <ListItem button>
                                    <ListItemText primary="DATASET"/>
                                </ListItem>
                            </a>
Valeriy Panov's avatar
Valeriy Panov committed
79
                            <Divider />
Maxym Borodenko's avatar
Maxym Borodenko committed
80
81
82
83
84
                            <a href="#dataset-metadata">
                                <ListItem button>
                                    <ListItemText primary="METADATA"/>
                                </ListItem>
                            </a>
Valeriy Panov's avatar
Valeriy Panov committed
85
                            <Divider />
Maxym Borodenko's avatar
Maxym Borodenko committed
86
87
88
89
90
                            <a href="#dataset-locations">
                                <ListItem button>
                                    <ListItemText primary="LOCATION"/>
                                </ListItem>
                            </a>
Valeriy Panov's avatar
Valeriy Panov committed
91
                            <Divider />
Maxym Borodenko's avatar
Maxym Borodenko committed
92
93
94
95
96
                            <a href="#dataset-traits">
                                <ListItem button>
                                    <ListItemText primary="TRAITS OBSERVED"/>
                                </ListItem>
                            </a>
Valeriy Panov's avatar
Valeriy Panov committed
97
                            <Divider />
Maxym Borodenko's avatar
Maxym Borodenko committed
98
99
100
101
102
                            <a href="#dataset-accessions">
                                <ListItem button>
                                    <ListItemText primary="ACCESSIONS"/>
                                </ListItem>
                            </a>
Valeriy Panov's avatar
Valeriy Panov committed
103
104
105
106
107
108
                            <Divider />
                        </div>
                    </Collapse>
                </List>
            </Grid>
        );
Maxim Babichev's avatar
Maxim Babichev committed
109
    }
Valeriy Panov's avatar
Valeriy Panov committed
110
111
112
113

}

export default compose(withStyles(styles), withWidth())(BrowseMenu);