-
Notifications
You must be signed in to change notification settings - Fork 125
/
Banner.tsx
103 lines (95 loc) · 2.93 KB
/
Banner.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
import React, { useMemo } from 'react'
import { MenuUnfoldOutlined, MenuFoldOutlined } from '@ant-design/icons'
import { useSize } from '@umijs/hooks'
import Flexbox from '@g07cha/flexbox-react'
import { useSpring, animated } from 'react-spring'
import { useClientRequest } from '@lib/utils/useClientRequest'
import client, { InfoInfoResponse } from '@lib/client'
import { ReactComponent as Logo } from './logo-icon-light.svg'
import styles from './Banner.module.less'
const toggleWidth = 40
const toggleHeight = 50
function parseVersion(i: InfoInfoResponse) {
if (!i.version) {
return null
}
if (i.version.standalone !== 'No') {
// For Standalone == Yes / Unknown, display internal version
if (i.version.internal_version === 'nightly') {
let vPrefix = i.version.internal_version
if (i.version.build_git_hash) {
vPrefix += `-${i.version.build_git_hash.substr(0, 8)}`
}
// e.g. nightly-xxxxxxxx
return vPrefix
}
if (i.version.internal_version) {
// e.g. v2020.07.01.1
return `v${i.version.internal_version}`
}
return null
}
if (i.version.pd_version) {
// e.g. PD v4.0.1
return `PD ${i.version.pd_version}`
}
}
export default function ToggleBanner({
fullWidth,
collapsedWidth,
collapsed,
onToggle,
}) {
const [bannerSize, bannerRef] = useSize<HTMLDivElement>()
const transBanner = useSpring({
opacity: collapsed ? 0 : 1,
height: collapsed ? toggleHeight : bannerSize.height || 0,
})
const transButton = useSpring({
left: collapsed ? 0 : fullWidth - toggleWidth,
width: collapsed ? collapsedWidth : toggleWidth,
})
const { data, isLoading } = useClientRequest((cancelToken) =>
client.getInstance().getInfo({ cancelToken })
)
const version = useMemo(() => {
if (data) {
return parseVersion(data)
}
return null
}, [data])
return (
<div className={styles.banner} onClick={onToggle}>
<animated.div
style={transBanner}
className={styles.bannerLeftAnimationWrapper}
>
<div
ref={bannerRef}
className={styles.bannerLeft}
style={{ width: fullWidth - toggleWidth }}
>
<Flexbox flexDirection="row">
<div className={styles.bannerLogo}>
<Logo height={30} />
</div>
<div className={styles.bannerContent}>
<div className={styles.bannerTitle}>TiDB Dashboard</div>
<div className={styles.bannerVersion}>
{isLoading && '...'}
{!isLoading && (version || 'Version unknown')}
</div>
</div>
</Flexbox>
</div>
</animated.div>
<animated.div style={transButton} className={styles.bannerRight}>
{collapsed ? (
<MenuUnfoldOutlined style={{ margin: 'auto' }} />
) : (
<MenuFoldOutlined style={{ margin: 'auto' }} />
)}
</animated.div>
</div>
)
}