opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-09-25 20:13:53 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: Possibility to change document title on pages using the Page component

Browse Source
This commit is contained in:
Johannes Schill
2019-01-14 16:51:43 +01:00
parent 8237c22e24
commit 06d8243ab5
1 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
public/app/core/components/Page/Page.tsx
View File

@ -7,7 +7,7 @@ import PageContents from './PageContents';
import { CustomScrollbar } from '@grafana/ui'; import { CustomScrollbar } from '@grafana/ui';
interface Props { interface Props {
title: string; title?: string;
children: JSX.Element[] | JSX.Element; children: JSX.Element[] | JSX.Element;
} }
@ -23,12 +23,24 @@ class Page extends Component<Props> {
componentDidMount() { componentDidMount() {
this.body.classList.add(this.bodyClass); this.body.classList.add(this.bodyClass);
this.copyFooter(); this.copyFooter();
this.updateTitle();
}
componentDidUpdate(prevProps: Props) {
if (prevProps.title !== this.props.title) {
this.updateTitle();
}
} }
componentWillUnmount() { componentWillUnmount() {
this.body.classList.remove(this.bodyClass); this.body.classList.remove(this.bodyClass);
} }
updateTitle = () => {
const { title } = this.props;
document.title = title ? title + ' - Grafana' : 'Grafana';
}
copyFooter = () => { copyFooter = () => {
const c = this.scrollbarElementRef.current; const c = this.scrollbarElementRef.current;
c.append(this.footer); c.append(this.footer);
@ -37,11 +49,11 @@ class Page extends Component<Props> {
render() { render() {
return ( return (
<div className="page-scrollbar-wrapper"> <div className="page-scrollbar-wrapper">
<CustomScrollbar autoHeightMin={'100%'}> <CustomScrollbar autoHeightMin={'100%'}>
<div className="page-scrollbar-content" ref={this.scrollbarElementRef}> <div className="page-scrollbar-content" ref={this.scrollbarElementRef}>
{this.props.children} {this.props.children}
</div> </div>
</CustomScrollbar> </CustomScrollbar>
</div> </div>
); );
} }