/
navHeader.tsx
115 lines (107 loc) · 3.79 KB
/
navHeader.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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/*
* Copyright 2017 Palantir Technologies, Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import {
Classes,
Hotkey,
Hotkeys,
HotkeysTarget,
Menu,
MenuItem,
NavbarHeading,
Popover,
Position,
Tag,
} from "@blueprintjs/core";
import { NavButton } from "@blueprintjs/docs-theme";
import { INpmPackage } from "@documentalist/client";
import * as React from "react";
import { Logo } from "./logo";
export interface INavHeaderProps {
onToggleDark: (useDark: boolean) => void;
useDarkTheme: boolean;
useNextVersion: boolean;
packageData: INpmPackage;
}
@HotkeysTarget
export class NavHeader extends React.PureComponent<INavHeaderProps, {}> {
public render() {
const { useDarkTheme } = this.props;
return (
<>
<div className="docs-nav-title">
<a className="docs-logo" href="/">
<Logo />
</a>
<div>
<NavbarHeading className="docs-heading">
<span>Blueprint</span> {this.renderVersionsMenu()}
</NavbarHeading>
<a className={Classes.TEXT_MUTED} href="https://github.com/palantir/blueprint" target="_blank">
<small>View on GitHub</small>
</a>
</div>
</div>
<div className="docs-nav-divider" />
<NavButton
icon={useDarkTheme ? "flash" : "moon"}
hotkey="shift + d"
text={useDarkTheme ? "Light theme" : "Dark theme"}
onClick={this.handleDarkSwitchChange}
/>
</>
);
}
public renderHotkeys() {
return (
<Hotkeys>
<Hotkey
global={true}
combo="shift + d"
label="Toggle dark theme"
onKeyDown={this.handleDarkSwitchChange}
/>
</Hotkeys>
);
}
private renderVersionsMenu() {
const { version, nextVersion, versions } = this.props.packageData;
if (versions.length === 1) {
return <div className={Classes.TEXT_MUTED}>v{versions[0]}</div>;
}
// default to latest release if we can't find a major version in the URL
const [current] = /\/versions\/([0-9]+)/.exec(location.href) || [
this.props.useNextVersion ? nextVersion : version,
];
const releaseItems = versions
.filter(v => +major(v) > 0)
.map(v => <MenuItem href={v === current ? "/docs" : `/docs/versions/${major(v)}`} key={v} text={v} />);
return (
<Popover position={Position.BOTTOM}>
<Tag interactive={true} minimal={true} round={true} rightIcon="caret-down">
v{major(current)}
</Tag>
<Menu className="docs-version-list">{releaseItems}</Menu>
</Popover>
);
}
private handleDarkSwitchChange = () => {
this.props.onToggleDark(!this.props.useDarkTheme);
};
}
/** Get major component of semver string. */
function major(version: string) {
return version.split(".", 1)[0];
}