mirror of
https://github.com/laurent22/joplin.git
synced 2024-12-21 09:38:01 +02:00
b7f5f848f2
Will also allow using them when exporting HTML or PDF from CLI.
52 lines
1.3 KiB
JavaScript
52 lines
1.3 KiB
JavaScript
const React = require('react');
|
|
const { themeStyle } = require('lib/theme');
|
|
|
|
class ToolbarButton extends React.Component {
|
|
render() {
|
|
const theme = themeStyle(this.props.theme);
|
|
|
|
const style = Object.assign({}, theme.toolbarStyle);
|
|
|
|
const title = this.props.title ? this.props.title : '';
|
|
const tooltip = this.props.tooltip ? this.props.tooltip : title;
|
|
|
|
let icon = null;
|
|
if (this.props.iconName) {
|
|
const iconStyle = {
|
|
fontSize: Math.round(theme.fontSize * 1.5),
|
|
color: theme.iconColor,
|
|
};
|
|
if (title) iconStyle.marginRight = 5;
|
|
icon = <i style={iconStyle} className={`fas ${this.props.iconName}`}></i>;
|
|
}
|
|
|
|
// Keep this for legacy compatibility but for consistency we should use "disabled" prop
|
|
let isEnabled = !('enabled' in this.props) || this.props.enabled === true;
|
|
if (this.props.disabled) isEnabled = false;
|
|
|
|
const classes = ['button'];
|
|
if (!isEnabled) classes.push('disabled');
|
|
|
|
const finalStyle = Object.assign({}, style, {
|
|
opacity: isEnabled ? 1 : 0.4,
|
|
});
|
|
|
|
return (
|
|
<a
|
|
className={classes.join(' ')}
|
|
style={finalStyle}
|
|
title={tooltip}
|
|
href="#"
|
|
onClick={() => {
|
|
if (isEnabled && this.props.onClick) this.props.onClick();
|
|
}}
|
|
>
|
|
{icon}
|
|
{title}
|
|
</a>
|
|
);
|
|
}
|
|
}
|
|
|
|
module.exports = ToolbarButton;
|