import { colors, Styles } from '@0xproject/react-shared'; import * as _ from 'lodash'; import * as React from 'react'; export interface IconButtonProps { iconName: string; labelText?: string; onClick?: () => void; color?: string; display?: string; } interface IconButtonState { isHovering: boolean; } export class IconButton extends React.Component { public static defaultProps: Partial = { labelText: '', color: colors.mediumBlue, }; public constructor(props: IconButtonProps) { super(props); this.state = { isHovering: false, }; } public render(): React.ReactNode { const styles: Styles = { root: { cursor: this.props.onClick ? 'pointer' : 'undefined', opacity: this.state.isHovering && this.props.onClick ? 0.5 : 1, display: this.props.display, }, icon: { color: this.props.color, fontSize: 20, }, label: { color: this.props.color, fontSize: 10, }, }; return (
{!_.isEmpty(this.props.labelText) && (
{this.props.labelText}
)}
); } private _onToggleHover(isHovering: boolean): void { this.setState({ isHovering, }); } }