PageHeader.jsx 5.97 KB
Newer Older
1
import React, { useEffect, useRef, useState } from 'react';
2
import { useTranslation } from 'react-i18next';
3
import {
4
    AppBar, Button, ClickAwayListener, Drawer, Grid, Grow, MenuItem, MenuList, Paper, Popper, Toolbar, Typography
5
} from '@material-ui/core';
6
import TranslateIcon from '@material-ui/icons/Translate';
7
import { useStyles } from '../../styles';
8
import { CollapsedFilters } from "../CollapsedFilters/CollapsedFilters";
9
10
import { Filters } from "../Filters/Filters";
import ExpandLessIcon from "@material-ui/icons/ExpandLess";
11
12
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
import SearchIcon from '@material-ui/icons/Search';
13

14

15
16
17
18
19
export const PageHeader = (props) => {

    const [input, dispatch] = props.reducer;
    const {chronOntologyTerms, regions} = props;

20
    const { t, i18n } = useTranslation();
21
22

    const changeLanguage = lng => {
23
        i18n.changeLanguage(lng).then();
24
25
    };

Elisabeth Reuhl's avatar
Elisabeth Reuhl committed
26
    const classes = useStyles();
27

28
29
30
    // Language menu: state, ref, handlers
    const [open, setOpen] = useState(false);
    const anchorRef = useRef(null);
31
32
33
34
35
36
37
38
39
40
41
42
43

    const handleToggle = () => {
        setOpen(prevOpen => !prevOpen);
    };

    const handleClose = event => {
        if (anchorRef.current && anchorRef.current.contains(event.target)) {
            return;
        }

        setOpen(false);
    };

Elisabeth Reuhl's avatar
Elisabeth Reuhl committed
44
45
46
47
48
    function handleLanguageChange(newLang) {
        changeLanguage(newLang);
        setOpen(false);
    }

49
50
51
52
53
54
55
    function handleListKeyDown(event) {
        if (event.key === 'Tab') {
            event.preventDefault();
            setOpen(false);
        }
    }

56
57
58
    // Language menu: return focus to the button when we transitioned from !open -> open
    const prevOpen = useRef(open);
    useEffect(() => {
59
60
61
62
63
64
65
66
        if (prevOpen.current === true && open === false) {
            anchorRef.current.focus();
        }

        prevOpen.current = open;
    }, [open]);


67
68
69
70
71
72
73
74
75
76
    //Filters drawer: state, toggling
    const [drawerOpen, setDrawerOpen] = useState(false);

    const toggleDrawer = () => (event) => {
        if (event && event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) {
            return;
        }
        setDrawerOpen(!drawerOpen);
    };

77
    return(
78
79
80
81
82
83
84
85
86
87
88
        <>
            <AppBar
                className={classes.appBar}
                color="primary"
                position="relative"
            >
                <Toolbar>
                    <Grid container direction="row" className={classes.dashboardHeader}>
                        <Grid item xs={10}>
                            <Typography variant="h1" className={classes.h1}>Entangled Africa Data Explorer</Typography>
                            <Typography variant="h2" className={classes.h2}>{t('EntangledAfrica1')}: {t('EntangledAfrica2')}</Typography>
89
                            <Button onClick={toggleDrawer()}>
90
91
92
                                <SearchIcon/> Filters <ExpandMoreIcon/>
                            </Button>
                            <CollapsedFilters
93
                                input={input}
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
                            />
                        </Grid>
                        <Grid item xs={1}>
                            <Button
                                ref={anchorRef}
                                aria-controls={open ? 'menu-list-grow' : undefined}
                                aria-haspopup="true"
                                onClick={handleToggle}

                            >
                                <TranslateIcon/> {t('current language')}
                            </Button>
                            <Popper open={open} anchorEl={anchorRef.current} role={undefined} transition disablePortal placement="bottom-end">
                                {({ TransitionProps, placement }) => (
                                    <Grow
                                        {...TransitionProps}
                                        style={{ transformOrigin: placement === 'top' ? 'left top' : 'left bottom' }}
                                    >
                                        <Paper className={classes.paper}>
                                            <ClickAwayListener onClickAway={handleClose}>
                                                <MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
                                                    <MenuItem onClick={() => handleLanguageChange('de')}>Deutsch</MenuItem>
                                                    <MenuItem onClick={() => handleLanguageChange('en')}>English</MenuItem>
                                                    <MenuItem onClick={() => handleLanguageChange('fr')}>Français</MenuItem>
                                                    <MenuItem onClick={() => handleLanguageChange('ar')}>لعربية</MenuItem>
                                                </MenuList>
                                            </ClickAwayListener>
                                        </Paper>
                                    </Grow>
                                )}
                            </Popper>
                        </Grid>
                    </Grid>
                </Toolbar>
            </AppBar>
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

            <Drawer
                classes={{
                    paper: classes.drawerPaper
                }}
                anchor="top"
                open={drawerOpen}
                onClose={toggleDrawer()}
                //onClose={toggleDrawer(false)}
                //onOpen={setDrawerOpen(true)}
            >
                <Button
                    variant="contained"
                    color="primary"
                    disableElevation
                    onClick={toggleDrawer()}
                >
                    <SearchIcon/> Close filters <ExpandLessIcon/>
                </Button>
                <Filters
                    chronOntologyTerms={chronOntologyTerms}
                    reducer={[input, dispatch]}
                    regions={regions}
                />
            </Drawer>
154
        </>
155
    );
156
};