-
-
Notifications
You must be signed in to change notification settings - Fork 829
/
Navigation.tsx
98 lines (88 loc) · 2.74 KB
/
Navigation.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
import app from '../../common/app';
import Component from '../Component';
import Button from './Button';
import LinkButton from './LinkButton';
import type Mithril from 'mithril';
import classList from '../utils/classList';
/**
* The `Navigation` component displays a set of navigation buttons. Typically
* this is just a back button which pops the app's History. If the user is on
* the root page and there is no history to pop, then in some instances it may
* show a button that toggles the app's drawer.
*
* If the app has a pane, it will also include a 'pin' button which toggles the
* pinned state of the pane.
*
* Accepts the following attrs:
*
* - `className` The name of a class to set on the root element.
* - `drawer` Whether or not to show a button to toggle the app's drawer if
* there is no more history to pop.
*/
export default class Navigation extends Component {
view() {
const { history, pane } = app;
return (
<div
className={classList('Navigation ButtonGroup', this.attrs.className)}
onmouseenter={pane && pane.show.bind(pane)}
onmouseleave={pane && pane.onmouseleave.bind(pane)}
>
{history?.canGoBack() ? [this.getBackButton(), this.getPaneButton()] : this.getDrawerButton()}
</div>
);
}
/**
* Get the back button.
*/
protected getBackButton(): Mithril.Children {
const { history } = app;
const previous = history?.getPrevious();
return (
<LinkButton
className="Button Navigation-back Button--icon"
href={history?.backUrl()}
icon="fas fa-chevron-left"
aria-label={previous?.title}
onclick={(e: MouseEvent) => {
if (e.shiftKey || e.ctrlKey || e.metaKey || e.which === 2) return;
e.preventDefault();
history?.back();
}}
/>
);
}
/**
* Get the pane pinned toggle button.
*/
protected getPaneButton(): Mithril.Children {
const { pane } = app;
if (!pane || !pane.active) return null;
return (
<Button
className={classList('Button Button--icon Navigation-pin', { active: pane.pinned })}
onclick={pane.togglePinned.bind(pane)}
icon="fas fa-thumbtack"
/>
);
}
/**
* Get the drawer toggle button.
*/
protected getDrawerButton(): Mithril.Children {
if (!this.attrs.drawer) return null;
const { drawer } = app;
const user = app.session.user;
return (
<Button
className={classList('Button Button--icon Navigation-drawer', { new: user?.newNotificationCount() })}
onclick={(e: MouseEvent) => {
e.stopPropagation();
drawer.show();
}}
icon="fas fa-bars"
aria-label={app.translator.trans('core.lib.nav.drawer_button')}
/>
);
}
}