66 lines
1.8 KiB
JavaScript
66 lines
1.8 KiB
JavaScript
import Radium from 'radium'
|
|
import PropTypes from 'prop-types'
|
|
import React, { Component } from 'react'
|
|
import { Icon } from '.'
|
|
import { sizeInfo, fontInfo, colorInfo } from 'ui/style'
|
|
|
|
@Radium
|
|
export class PanelButton extends Component {
|
|
static propTypes = {
|
|
onClick: PropTypes.func,
|
|
icon: PropTypes.string.isRequired,
|
|
text: PropTypes.string.isRequired,
|
|
}
|
|
|
|
static style = {
|
|
button: {
|
|
borderWidth: sizeInfo.panelButtonBorderWidth,
|
|
borderRadius: sizeInfo.panelButtonBorderRadius,
|
|
padding: '0 0 0 0',
|
|
background: colorInfo.panelButtonBackground,
|
|
verticalAlign: 'middle',
|
|
outline: 'none',
|
|
':hover': {
|
|
background: colorInfo.panelButtonBackgroundHover,
|
|
},
|
|
':disabled': {
|
|
background: colorInfo.panelDisabledButtonBackground,
|
|
},
|
|
':active': {
|
|
borderWidth: 0,
|
|
background: colorInfo.panelButtonBackgroundActive,
|
|
}
|
|
}
|
|
}
|
|
|
|
render() {
|
|
const { onClick, icon, text } = this.props
|
|
|
|
return (
|
|
<button type='button'
|
|
style={[
|
|
PanelButton.style.button, { height: sizeInfo.panelButton, width: sizeInfo.panelButton }
|
|
]}
|
|
onClick={onClick}>
|
|
<div style={{ position: 'relative' }}>
|
|
<Icon
|
|
name={icon} size={sizeInfo.panelButtonIcon}
|
|
margin={sizeInfo.panelButtonIconMargin}
|
|
style={{ position: 'relative', top: sizeInfo.panelButtonIconOffset }} />
|
|
<span style={{
|
|
position: 'absolute',
|
|
top: sizeInfo.panelButtonTextOffset,
|
|
left: 0,
|
|
display: 'block',
|
|
fontSize: fontInfo.size.huge,
|
|
fontFamily: fontInfo.family,
|
|
color: fontInfo.color.text,
|
|
textAlign: 'center',
|
|
width: '100%',
|
|
}}>{text}</span>
|
|
</div>
|
|
</button>
|
|
)
|
|
}
|
|
}
|