63 lines
1.4 KiB
JavaScript
63 lines
1.4 KiB
JavaScript
import Radium from "radium"
|
|
import PropTypes from "prop-types"
|
|
import React, { Component } from "react"
|
|
import { colorInfo, sizeInfo } from "./style"
|
|
import { Text, Icon } from "."
|
|
|
|
@Radium
|
|
export class FormIconButton extends Component {
|
|
static propTypes = {
|
|
visible: PropTypes.bool,
|
|
// disabled: PropTypes.bool,
|
|
icon: PropTypes.string,
|
|
onClick: PropTypes.func,
|
|
}
|
|
|
|
static defaultProps = {
|
|
visible: true,
|
|
disabled: false,
|
|
width: sizeInfo.buttonWidth,
|
|
}
|
|
|
|
static style = {
|
|
icon: {
|
|
borderWidth: 0,
|
|
borderRadius: sizeInfo.formButtonIconBorderRadius,
|
|
background: colorInfo.buttonBackgroundHover,
|
|
outline: "none",
|
|
padding: sizeInfo.formButtonIconPadding,
|
|
":hover": {
|
|
background: colorInfo.buttonBackground,
|
|
},
|
|
":disabled": {
|
|
background: colorInfo.buttonDisabledBackground,
|
|
},
|
|
":active": {
|
|
background: colorInfo.buttonBackgroundActive,
|
|
},
|
|
},
|
|
}
|
|
|
|
render() {
|
|
const { icon, visible } = this.props
|
|
|
|
if (!visible) {
|
|
return null
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<Text> </Text>
|
|
<br />
|
|
<Icon
|
|
name={icon}
|
|
size={sizeInfo.formButtonIcon}
|
|
margin={sizeInfo.formButtonIconMargin}
|
|
style={FormIconButton.style.icon}
|
|
onClick={this.props.onClick}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
}
|