framework/js/lib/components/Navigation.js

107 lines
2.9 KiB
JavaScript
Raw Normal View History

import Component from 'flarum/Component';
import Button from 'flarum/components/Button';
2015-08-02 15:56:57 +08:00
import LinkButton from 'flarum/components/LinkButton';
/**
* 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 props:
*
* - `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={'Navigation ButtonGroup ' + (this.props.className || '')}
onmouseenter={pane && pane.show.bind(pane)}
onmouseleave={pane && pane.onmouseleave.bind(pane)}>
{history.canGoBack()
? [this.getBackButton(), this.getPaneButton()]
: this.getDrawerButton()}
</div>
);
}
config(isInitialized, context) {
// Since this component is 'above' the content of the page (that is, it is a
// part of the global UI that persists between routes), we will flag the DOM
// to be retained across route changes.
context.retain = true;
}
/**
* Get the back button.
*
* @return {Object}
* @protected
*/
getBackButton() {
const {history} = app;
const previous = history.getPrevious() || {};
2015-08-02 15:56:57 +08:00
return LinkButton.component({
className: 'Button Navigation-back ' + (previous.title ? '' : 'Button--icon'),
2015-08-02 15:56:57 +08:00
href: history.backUrl(),
icon: 'chevron-left',
children: previous.title,
2015-08-02 15:56:57 +08:00
config: () => {},
onclick: e => {
if (e.shiftKey || e.ctrlKey || e.metaKey || e.which === 2) return;
e.preventDefault();
history.back();
}
});
}
/**
* Get the pane pinned toggle button.
*
* @return {Object|String}
* @protected
*/
getPaneButton() {
const {pane} = app;
if (!pane || !pane.active) return '';
return Button.component({
className: 'Button Button--icon Navigation-pin' + (pane.pinned ? ' active' : ''),
onclick: pane.togglePinned.bind(pane),
icon: 'thumb-tack'
});
}
/**
* Get the drawer toggle button.
*
* @return {Object|String}
* @protected
*/
getDrawerButton() {
if (!this.props.drawer) return '';
const {drawer} = app;
const user = app.session.user;
return Button.component({
className: 'Button Button--icon Navigation-drawer' +
(user && user.newNotificationsCount() ? ' new' : ''),
onclick: e => {
e.stopPropagation();
drawer.show();
},
icon: 'reorder'
});
}
}