feat(toolbar): use AtlasKit tooltip
This commit is contained in:
parent
38e2443ab7
commit
c3a4a38414
|
@ -1,13 +1,11 @@
|
|||
/* @flow */
|
||||
|
||||
import { Tooltip } from '@atlaskit/tooltip';
|
||||
import React, { Component } from 'react';
|
||||
|
||||
import { translate } from '../../base/i18n';
|
||||
|
||||
import {
|
||||
setTooltip,
|
||||
setTooltipText
|
||||
} from '../../../../modules/UI/util/Tooltip';
|
||||
import { isButtonEnabled } from '../functions';
|
||||
|
||||
import StatelessToolbarButton from './StatelessToolbarButton';
|
||||
|
||||
|
@ -23,6 +21,22 @@ class ToolbarButton extends Component {
|
|||
button: Object;
|
||||
_createRefToButton: Function;
|
||||
|
||||
_onClick: Function;
|
||||
|
||||
_onMouseOut: Function;
|
||||
|
||||
_onMouseOver: Function;
|
||||
|
||||
state: {
|
||||
|
||||
/**
|
||||
* Whether or not the tooltip for the button should be displayed.
|
||||
*
|
||||
* @type {boolean}
|
||||
*/
|
||||
showTooltip: boolean
|
||||
}
|
||||
|
||||
/**
|
||||
* Toolbar button component's property types.
|
||||
*
|
||||
|
@ -67,8 +81,15 @@ class ToolbarButton extends Component {
|
|||
constructor(props: Object) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
showTooltip: false
|
||||
};
|
||||
|
||||
// Bind methods to save the context
|
||||
this._createRefToButton = this._createRefToButton.bind(this);
|
||||
this._onClick = this._onClick.bind(this);
|
||||
this._onMouseOut = this._onMouseOut.bind(this);
|
||||
this._onMouseOver = this._onMouseOver.bind(this);
|
||||
}
|
||||
|
||||
/**
|
||||
|
@ -79,7 +100,7 @@ class ToolbarButton extends Component {
|
|||
* @returns {void}
|
||||
*/
|
||||
componentDidMount(): void {
|
||||
this._setShortcutAndTooltip();
|
||||
this._setShortcut();
|
||||
|
||||
if (this.props.onMount) {
|
||||
this.props.onMount();
|
||||
|
@ -105,21 +126,41 @@ class ToolbarButton extends Component {
|
|||
* @returns {ReactElement}
|
||||
*/
|
||||
render(): ReactElement<*> {
|
||||
const { button } = this.props;
|
||||
const { button, t, tooltipPosition } = this.props;
|
||||
const popups = button.popups || [];
|
||||
|
||||
const props = {
|
||||
...this.props,
|
||||
onClick: this._onClick,
|
||||
createRefToButton: this._createRefToButton
|
||||
};
|
||||
|
||||
return (
|
||||
<StatelessToolbarButton { ...props }>
|
||||
{ this._renderPopups(popups) }
|
||||
</StatelessToolbarButton>
|
||||
<Tooltip
|
||||
description = { button.tooltipText || t(button.tooltipKey) }
|
||||
onMouseOut = { this._onMouseOut }
|
||||
onMouseOver = { this._onMouseOver }
|
||||
position = { tooltipPosition }
|
||||
visible = { this.state.showTooltip }>
|
||||
<StatelessToolbarButton { ...props }>
|
||||
{ this._renderPopups(popups) }
|
||||
</StatelessToolbarButton>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Wrapper on on click handler props for current button.
|
||||
*
|
||||
* @param {Event} event - Click event object.
|
||||
* @returns {void}
|
||||
* @private
|
||||
*/
|
||||
_onClick(event) {
|
||||
this.props.onClick(event);
|
||||
this.setState({ showTooltip: false });
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates reference to current toolbar button.
|
||||
*
|
||||
|
@ -175,26 +216,39 @@ class ToolbarButton extends Component {
|
|||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Hides any displayed tooltip.
|
||||
*
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
_onMouseOut(): void {
|
||||
this.setState({ showTooltip: false });
|
||||
}
|
||||
|
||||
/**
|
||||
* Hides any displayed tooltip.
|
||||
*
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
_onMouseOver(): void {
|
||||
const { button } = this.props;
|
||||
|
||||
this.setState({
|
||||
showTooltip: isButtonEnabled(button.buttonName)
|
||||
&& !button.unclickable
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets shortcut and tooltip for current toolbar button.
|
||||
*
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
_setShortcutAndTooltip(): void {
|
||||
const { button, tooltipPosition } = this.props;
|
||||
|
||||
if (!button.unclickable) {
|
||||
if (button.tooltipText) {
|
||||
setTooltipText(this.button,
|
||||
button.tooltipText,
|
||||
tooltipPosition);
|
||||
} else {
|
||||
setTooltip(this.button,
|
||||
button.tooltipKey,
|
||||
tooltipPosition);
|
||||
}
|
||||
}
|
||||
_setShortcut(): void {
|
||||
const { button } = this.props;
|
||||
|
||||
if (button.shortcut && APP && APP.keyboardshortcut) {
|
||||
APP.keyboardshortcut.registerShortcut(
|
||||
|
|
Loading…
Reference in New Issue