102 lines
2 KiB
JavaScript
102 lines
2 KiB
JavaScript
import React from "react";
|
|
|
|
const buttonClassName = "btn";
|
|
|
|
const styleContainer = {
|
|
display: "inline-block",
|
|
height: "2.5rem"
|
|
};
|
|
|
|
const styleIcon = {
|
|
lineHeight: "2.5rem",
|
|
height: "2.5rem",
|
|
margin: "0 -0.25rem 0 0.5rem"
|
|
};
|
|
|
|
const styleBase = {
|
|
background: "transparent",
|
|
lineHeight: "2.5rem",
|
|
fontSize: "0.875rem",
|
|
border: "none",
|
|
outline: "none",
|
|
padding: "0 0.75rem",
|
|
textAlign: "center"
|
|
};
|
|
|
|
const styleDefault = {
|
|
...styleBase
|
|
};
|
|
|
|
const styleStr = `
|
|
.${buttonClassName}:hover {
|
|
opacity: 0.7;
|
|
transition: opacity 0.25s;
|
|
}
|
|
|
|
.${buttonClassName}:active {
|
|
opacity: 0.7;
|
|
transition: opacity 0.25s;
|
|
}
|
|
|
|
.${buttonClassName}:disabled {
|
|
opacity: 0.2;
|
|
transition: opacity 0.25s;
|
|
}
|
|
|
|
button::-moz-focus-inner {
|
|
border: 0;
|
|
}
|
|
`;
|
|
|
|
export class Button extends React.PureComponent {
|
|
constructor(props) {
|
|
super(props);
|
|
this.styleDefault = { ...styleDefault, ...this.props.styleDefault };
|
|
this.styleStr = this.props.styleStr ? this.props.styleStr : styleStr;
|
|
}
|
|
|
|
onClick = e => {
|
|
if (this.props.onClick && this.props.isEnabled) {
|
|
this.props.onClick(e);
|
|
}
|
|
};
|
|
|
|
render() {
|
|
const style = this.props.isEnabled ? this.styleDefault : this.styleDisabled;
|
|
const icon =
|
|
this.props.icon != null ? (
|
|
<span style={{ ...styleIcon, ...this.props.styleIcon }}>
|
|
{this.props.icon}
|
|
</span>
|
|
) : (
|
|
<span />
|
|
);
|
|
|
|
return (
|
|
<div
|
|
style={{ ...styleContainer, ...this.props.styleContainer }}
|
|
className={`${buttonClassName} ${this.props.className}`}
|
|
onClick={this.onClick}
|
|
>
|
|
{icon}
|
|
<button style={style}>
|
|
<span style={this.props.styleLabel}>{this.props.label}</span>
|
|
<style>{this.styleStr}</style>
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
Button.defaultProps = {
|
|
className: "btn",
|
|
isEnabled: true,
|
|
icon: null,
|
|
onClick: () => true,
|
|
styleContainer: {},
|
|
styleDefault: {},
|
|
styleDisabled: {},
|
|
styleLabel: {},
|
|
styleIcon: {},
|
|
styleStr: undefined
|
|
};
|