|
|
|
@ -1,6 +1,11 @@ |
|
|
|
// @flow
|
|
|
|
|
|
|
|
import React, { PureComponent } from 'react' |
|
|
|
import { ipcRenderer } from 'electron' |
|
|
|
import { translate } from 'react-i18next' |
|
|
|
import { AreaChart, Area } from 'recharts' |
|
|
|
import takeRight from 'lodash/takeRight' |
|
|
|
import last from 'lodash/last' |
|
|
|
import reduce from 'lodash/fp/reduce' |
|
|
|
import flow from 'lodash/fp/flow' |
|
|
|
import filter from 'lodash/fp/filter' |
|
|
|
@ -9,6 +14,8 @@ import styled from 'styled-components' |
|
|
|
import color from 'color' |
|
|
|
|
|
|
|
import Box from 'components/base/Box' |
|
|
|
import GrowScroll from 'components/base/GrowScroll' |
|
|
|
import CopyToClipboard from 'components/base/CopyToClipboard' |
|
|
|
|
|
|
|
import theme from 'styles/theme' |
|
|
|
|
|
|
|
@ -61,12 +68,15 @@ const Container = styled(Box).attrs({ |
|
|
|
|
|
|
|
const Handle = styled(Box).attrs({ |
|
|
|
bg: 'night', |
|
|
|
justify: 'center', |
|
|
|
px: 1, |
|
|
|
})` |
|
|
|
cursor: pointer; |
|
|
|
padding: 3px 8px 3px 8px; |
|
|
|
position: absolute; |
|
|
|
bottom: 100%; |
|
|
|
right: 5px; |
|
|
|
font-size: 9px; |
|
|
|
height: 20px; |
|
|
|
border-top-left-radius: 3px; |
|
|
|
border-top-right-radius: 3px; |
|
|
|
` |
|
|
|
@ -76,7 +86,6 @@ const Colors = styled(Box).attrs({ |
|
|
|
align: 'flex-start', |
|
|
|
})` |
|
|
|
flex-wrap: wrap; |
|
|
|
width: 416px; |
|
|
|
` |
|
|
|
|
|
|
|
const Cl = styled(Box).attrs({ |
|
|
|
@ -85,38 +94,136 @@ const Cl = styled(Box).attrs({ |
|
|
|
p: 2, |
|
|
|
})` |
|
|
|
border: 2px solid white; |
|
|
|
cursor: pointer; |
|
|
|
margin: 2px; |
|
|
|
width: 100px; |
|
|
|
user-select: text; |
|
|
|
cursor: text; |
|
|
|
width: 80px; |
|
|
|
` |
|
|
|
|
|
|
|
const Color = ({ color }: { color: ColorType }) => ( |
|
|
|
<Cl bg={color.val} color={color.isDark ? 'white' : 'night'}> |
|
|
|
const Color = ({ onClick, color }: { onClick: Function, color: ColorType }) => ( |
|
|
|
<Cl bg={color.val} color={color.isDark ? 'white' : 'night'} onClick={onClick}> |
|
|
|
{color.name} |
|
|
|
</Cl> |
|
|
|
) |
|
|
|
|
|
|
|
const Lang = styled(Box).attrs({ |
|
|
|
bg: p => (p.current ? 'white' : 'night'), |
|
|
|
color: p => (p.current ? 'night' : 'white'), |
|
|
|
borderColor: 'white', |
|
|
|
borderWidth: 1, |
|
|
|
p: 1, |
|
|
|
})` |
|
|
|
border-radius: 3px; |
|
|
|
cursor: pointer; |
|
|
|
` |
|
|
|
|
|
|
|
const LANGUAGES = { |
|
|
|
fr: 'français', |
|
|
|
en: 'english', |
|
|
|
} |
|
|
|
|
|
|
|
type State = { |
|
|
|
isOpened: boolean, |
|
|
|
cpuUsage: Object, |
|
|
|
} |
|
|
|
|
|
|
|
class DevToolbar extends PureComponent<any, State> { |
|
|
|
state = { |
|
|
|
isOpened: false, |
|
|
|
cpuUsage: {}, |
|
|
|
} |
|
|
|
|
|
|
|
componentDidMount() { |
|
|
|
ipcRenderer.on('msg', this.handleMessage) |
|
|
|
} |
|
|
|
|
|
|
|
componentWillUnmount() { |
|
|
|
ipcRenderer.removeListener('msg', this.handleMessage) |
|
|
|
} |
|
|
|
|
|
|
|
handleMessage = (e: any, { type, data }: Object) => { |
|
|
|
if (type === 'usage.cpu') { |
|
|
|
this.setState(prev => ({ |
|
|
|
cpuUsage: { |
|
|
|
...prev.cpuUsage, |
|
|
|
[data.name]: takeRight( |
|
|
|
[ |
|
|
|
...(prev.cpuUsage[data.name] || []), |
|
|
|
{ |
|
|
|
value: parseFloat(data.value), |
|
|
|
}, |
|
|
|
], |
|
|
|
10, |
|
|
|
), |
|
|
|
}, |
|
|
|
})) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
handleToggle = () => this.setState({ isOpened: !this.state.isOpened }) |
|
|
|
handleChangeLanguage = lang => () => this.props.i18n.changeLanguage(lang) |
|
|
|
|
|
|
|
render() { |
|
|
|
const { isOpened } = this.state |
|
|
|
const { i18n } = this.props |
|
|
|
const { isOpened, cpuUsage } = this.state |
|
|
|
|
|
|
|
return ( |
|
|
|
<Container isOpened={isOpened}> |
|
|
|
<Handle onClick={this.handleToggle}>{'DEV'}</Handle> |
|
|
|
<Colors>{colors.map(color => <Color key={color.name} color={color} />)}</Colors> |
|
|
|
<Box horizontal grow flow={10}> |
|
|
|
<Box flow={10}> |
|
|
|
{Object.keys(LANGUAGES).map(lang => ( |
|
|
|
<Lang |
|
|
|
key={lang} |
|
|
|
current={i18n.language === lang} |
|
|
|
onClick={this.handleChangeLanguage(lang)} |
|
|
|
> |
|
|
|
{LANGUAGES[lang]} |
|
|
|
</Lang> |
|
|
|
))} |
|
|
|
</Box> |
|
|
|
<Box style={{ width: 168 }}> |
|
|
|
<GrowScroll> |
|
|
|
<Colors> |
|
|
|
{colors.map(color => ( |
|
|
|
<CopyToClipboard |
|
|
|
key={color.name} |
|
|
|
data={color.name} |
|
|
|
render={copy => <Color color={color} onClick={copy} />} |
|
|
|
/> |
|
|
|
))} |
|
|
|
</Colors> |
|
|
|
</GrowScroll> |
|
|
|
</Box> |
|
|
|
<Box flow={10}> |
|
|
|
{Object.keys(cpuUsage).map(k => ( |
|
|
|
<Box key={k} grow> |
|
|
|
<Box horizontal align="center"> |
|
|
|
<Box grow>{k}</Box> |
|
|
|
<Box fontSize="8px">{last(cpuUsage[k]).value}%</Box> |
|
|
|
</Box> |
|
|
|
<Box> |
|
|
|
<AreaChart |
|
|
|
width={100} |
|
|
|
height={40} |
|
|
|
data={cpuUsage[k]} |
|
|
|
margin={{ top: 10, right: 0, left: 0, bottom: 0 }} |
|
|
|
> |
|
|
|
<Area |
|
|
|
type="monotone" |
|
|
|
stroke="#8884d8" |
|
|
|
fill="#8884d8" |
|
|
|
dataKey="value" |
|
|
|
isAnimationActive={false} |
|
|
|
/> |
|
|
|
</AreaChart> |
|
|
|
</Box> |
|
|
|
</Box> |
|
|
|
))} |
|
|
|
</Box> |
|
|
|
</Box> |
|
|
|
</Container> |
|
|
|
) |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
export default DevToolbar |
|
|
|
export default translate()(DevToolbar) |
|
|
|
|
Meriadec Pillet
7 years ago
GitHub