8d94cc5cb2
This abstraction represents an action which can go anywhere in a toolbox (be that the main toolbar or the overflow menu) and it's platform independent. It does not depend on Redux, thus making it stateless, which facilitates its use in stateful button implementations as well as stateless ones.
80 lines
2.3 KiB
JavaScript
80 lines
2.3 KiB
JavaScript
// @flow
|
|
|
|
import Tooltip from '@atlaskit/tooltip';
|
|
import React from 'react';
|
|
|
|
import AbstractToolboxItem from './AbstractToolboxItem';
|
|
import type { Props } from './AbstractToolboxItem';
|
|
|
|
/**
|
|
* Web implementation of {@code AbstractToolboxItem}.
|
|
*/
|
|
export default class ToolboxItem extends AbstractToolboxItem<Props> {
|
|
_label: string;
|
|
_tooltip: string;
|
|
|
|
/**
|
|
* Handles rendering of the actual item. If the label is being shown, which
|
|
* is controlled with the `showLabel` prop, the item is rendered for its
|
|
* display in an overflow menu, otherwise it will only have an icon, which
|
|
* can be displayed on any toolbar.
|
|
*
|
|
* @protected
|
|
* @returns {ReactElement}
|
|
*/
|
|
_renderItem() {
|
|
const {
|
|
accessibilityLabel,
|
|
onClick,
|
|
showLabel
|
|
} = this.props;
|
|
const props = {
|
|
'aria-label': accessibilityLabel,
|
|
className: showLabel ? 'overflow-menu-item' : 'toolbox-button',
|
|
onClick
|
|
};
|
|
const elementType = showLabel ? 'li' : 'div';
|
|
// eslint-disable-next-line no-extra-parens
|
|
const children = (
|
|
|
|
// $FlowFixMe
|
|
<React.Fragment>
|
|
{ this._renderIcon() }
|
|
{ showLabel && this._label }
|
|
</React.Fragment>
|
|
);
|
|
|
|
return React.createElement(elementType, props, children);
|
|
}
|
|
|
|
/**
|
|
* Helper function to render the item's icon.
|
|
*
|
|
* @private
|
|
* @returns {ReactElement}
|
|
*/
|
|
_renderIcon() {
|
|
const { iconName, tooltipPosition, showLabel } = this.props;
|
|
const icon = <i className = { iconName } />;
|
|
const elementType = showLabel ? 'span' : 'div';
|
|
const className
|
|
= showLabel ? 'overflow-menu-item-icon' : 'toolbox-icon';
|
|
const iconWrapper
|
|
= React.createElement(elementType, { className }, icon);
|
|
const tooltip = this._tooltip;
|
|
const useTooltip = !showLabel && tooltip && tooltip.length > 0;
|
|
|
|
if (useTooltip) {
|
|
return (
|
|
<Tooltip
|
|
description = { tooltip }
|
|
position = { tooltipPosition }>
|
|
{ iconWrapper }
|
|
</Tooltip>
|
|
);
|
|
}
|
|
|
|
return iconWrapper;
|
|
}
|
|
}
|