2018-04-13 13:03:12 +00:00
|
|
|
// @flow
|
|
|
|
|
|
|
|
import React, { Component } from 'react';
|
|
|
|
|
2018-05-22 10:41:23 +00:00
|
|
|
import { combineStyles } from '../../styles';
|
|
|
|
|
2018-05-10 23:01:55 +00:00
|
|
|
import type { Styles } from './AbstractToolboxItem';
|
|
|
|
import ToolboxItem from './ToolboxItem';
|
2018-04-13 13:03:12 +00:00
|
|
|
|
|
|
|
export type Props = {
|
|
|
|
|
2018-05-22 09:32:09 +00:00
|
|
|
/**
|
|
|
|
* Function to be called after the click handler has been processed.
|
|
|
|
*/
|
|
|
|
afterClick: ?Function,
|
|
|
|
|
2018-05-22 10:41:23 +00:00
|
|
|
/**
|
|
|
|
* Extra styles which will be applied in conjunction with `styles` or
|
|
|
|
* `toggledStyles` when the button is disabled;
|
|
|
|
*/
|
|
|
|
disabledStyles: ?Styles,
|
|
|
|
|
2018-04-13 13:03:12 +00:00
|
|
|
/**
|
|
|
|
* Whether to show the label or not.
|
|
|
|
*/
|
|
|
|
showLabel: boolean,
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Collection of styles for the button.
|
|
|
|
*/
|
|
|
|
styles: ?Styles,
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Collection of styles for the button, when in toggled state.
|
|
|
|
*/
|
|
|
|
toggledStyles: ?Styles,
|
|
|
|
|
|
|
|
/**
|
2018-05-11 02:10:26 +00:00
|
|
|
* From which direction the tooltip should appear, relative to the button.
|
2018-04-13 13:03:12 +00:00
|
|
|
*/
|
|
|
|
tooltipPosition: string,
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Whether this button is visible or not.
|
|
|
|
*/
|
|
|
|
visible: boolean
|
|
|
|
};
|
|
|
|
|
2018-05-22 10:41:23 +00:00
|
|
|
/**
|
|
|
|
* Default style for disabled buttons.
|
|
|
|
*/
|
|
|
|
export const defaultDisabledButtonStyles = {
|
|
|
|
iconStyle: {
|
|
|
|
opacity: 0.5
|
|
|
|
},
|
|
|
|
labelStyle: {
|
|
|
|
opacity: 0.5
|
|
|
|
},
|
|
|
|
style: undefined,
|
|
|
|
underlayColor: undefined
|
|
|
|
};
|
|
|
|
|
2018-04-13 13:03:12 +00:00
|
|
|
/**
|
|
|
|
* An abstract implementation of a button.
|
|
|
|
*/
|
2018-04-18 14:34:40 +00:00
|
|
|
export default class AbstractButton<P: Props, S: *> extends Component<P, S> {
|
2018-04-13 13:03:12 +00:00
|
|
|
static defaultProps = {
|
2018-05-22 09:32:09 +00:00
|
|
|
afterClick: undefined,
|
2018-05-22 10:41:23 +00:00
|
|
|
disabledStyles: defaultDisabledButtonStyles,
|
2018-04-13 13:03:12 +00:00
|
|
|
showLabel: false,
|
|
|
|
styles: undefined,
|
|
|
|
toggledStyles: undefined,
|
|
|
|
tooltipPosition: 'top',
|
|
|
|
visible: true
|
|
|
|
};
|
|
|
|
|
|
|
|
/**
|
|
|
|
* A succinct description of what the button does. Used by accessibility
|
|
|
|
* tools and torture tests.
|
|
|
|
*
|
|
|
|
* @abstract
|
|
|
|
*/
|
|
|
|
accessibilityLabel: string;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The name of the icon of this button.
|
|
|
|
*
|
|
|
|
* @abstract
|
|
|
|
*/
|
|
|
|
iconName: string;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The text associated with this button. When `showLabel` is set to
|
|
|
|
* {@code true}, it will be displayed alongside the icon.
|
|
|
|
*
|
|
|
|
* @abstract
|
|
|
|
*/
|
|
|
|
label: string;
|
|
|
|
|
2018-05-22 10:01:00 +00:00
|
|
|
/**
|
|
|
|
* The label for this button, when toggled.
|
|
|
|
*/
|
|
|
|
toggledLabel: string;
|
|
|
|
|
2018-04-13 13:03:12 +00:00
|
|
|
/**
|
|
|
|
* The name of the icon of this button, when toggled.
|
|
|
|
*
|
|
|
|
* @abstract
|
|
|
|
*/
|
|
|
|
toggledIconName: string;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The text to display in the tooltip. Used only on web.
|
|
|
|
*
|
|
|
|
* @abstract
|
|
|
|
*/
|
2018-06-28 13:25:58 +00:00
|
|
|
tooltip: ?string;
|
2018-04-13 13:03:12 +00:00
|
|
|
|
|
|
|
/**
|
|
|
|
* Initializes a new {@code AbstractButton} instance.
|
|
|
|
*
|
|
|
|
* @param {Props} props - The React {@code Component} props to initialize
|
2018-05-11 02:10:26 +00:00
|
|
|
* the new {@code AbstractButton} instance with.
|
2018-04-13 13:03:12 +00:00
|
|
|
*/
|
|
|
|
constructor(props: P) {
|
|
|
|
super(props);
|
|
|
|
|
2018-05-11 02:10:26 +00:00
|
|
|
// Bind event handlers so they are only bound once per instance.
|
2018-04-13 13:03:12 +00:00
|
|
|
this._onClick = this._onClick.bind(this);
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Helper function to be implemented by subclasses, which should be used
|
|
|
|
* to handle the button being clicked / pressed.
|
|
|
|
*
|
2018-05-11 02:10:26 +00:00
|
|
|
* @protected
|
2018-04-13 13:03:12 +00:00
|
|
|
* @returns {void}
|
|
|
|
*/
|
|
|
|
_handleClick() {
|
|
|
|
// To be implemented by subclass.
|
|
|
|
}
|
|
|
|
|
2018-07-17 02:15:34 +00:00
|
|
|
/**
|
2018-07-17 15:08:22 +00:00
|
|
|
* Helper function to be implemented by subclasses, which may return a
|
|
|
|
* new React Element to be appended at the end of the button.
|
2018-07-17 02:15:34 +00:00
|
|
|
*
|
|
|
|
* @protected
|
|
|
|
* @returns {ReactElement|null}
|
|
|
|
*/
|
|
|
|
_getElementAfter() {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2018-04-13 13:03:12 +00:00
|
|
|
/**
|
|
|
|
* Gets the current icon name, taking the toggled state into account. If no
|
|
|
|
* toggled icon is provided, the regular icon will also be used in the
|
|
|
|
* toggled state.
|
|
|
|
*
|
|
|
|
* @private
|
|
|
|
* @returns {string}
|
|
|
|
*/
|
|
|
|
_getIconName() {
|
2019-03-05 14:26:45 +00:00
|
|
|
return (
|
|
|
|
this._isToggled() ? this.toggledIconName : this.iconName
|
|
|
|
) || this.iconName;
|
2018-04-13 13:03:12 +00:00
|
|
|
}
|
|
|
|
|
2018-05-22 10:01:00 +00:00
|
|
|
/**
|
|
|
|
* Gets the current label, taking the toggled state into account. If no
|
|
|
|
* toggled label is provided, the regular label will also be used in the
|
|
|
|
* toggled state.
|
|
|
|
*
|
|
|
|
* @private
|
|
|
|
* @returns {string}
|
|
|
|
*/
|
|
|
|
_getLabel() {
|
|
|
|
return (this._isToggled() ? this.toggledLabel : this.label)
|
|
|
|
|| this.label;
|
|
|
|
}
|
|
|
|
|
2018-04-13 13:03:12 +00:00
|
|
|
/**
|
|
|
|
* Gets the current styles, taking the toggled state into account. If no
|
|
|
|
* toggled styles are provided, the regular styles will also be used in the
|
|
|
|
* toggled state.
|
|
|
|
*
|
|
|
|
* @private
|
|
|
|
* @returns {?Styles}
|
|
|
|
*/
|
2018-05-22 10:41:23 +00:00
|
|
|
_getStyles(): ?Styles {
|
|
|
|
const { disabledStyles, styles, toggledStyles } = this.props;
|
|
|
|
const buttonStyles
|
|
|
|
= (this._isToggled() ? toggledStyles : styles) || styles;
|
|
|
|
|
|
|
|
if (this._isDisabled() && buttonStyles && disabledStyles) {
|
|
|
|
return {
|
|
|
|
iconStyle: combineStyles(
|
|
|
|
buttonStyles.iconStyle, disabledStyles.iconStyle),
|
|
|
|
labelStyle: combineStyles(
|
|
|
|
buttonStyles.labelStyle, disabledStyles.labelStyle),
|
|
|
|
style: combineStyles(
|
|
|
|
buttonStyles.style, disabledStyles.style),
|
|
|
|
underlayColor:
|
|
|
|
disabledStyles.underlayColor || buttonStyles.underlayColor
|
|
|
|
};
|
|
|
|
}
|
|
|
|
|
|
|
|
return buttonStyles;
|
2018-04-13 13:03:12 +00:00
|
|
|
}
|
|
|
|
|
2018-10-29 02:10:43 +00:00
|
|
|
/**
|
|
|
|
* Get the tooltip to display when hovering over the button.
|
|
|
|
*
|
|
|
|
* @private
|
|
|
|
* @returns {string}
|
|
|
|
*/
|
|
|
|
_getTooltip() {
|
|
|
|
return this.tooltip || '';
|
|
|
|
}
|
|
|
|
|
2018-04-13 13:03:12 +00:00
|
|
|
/**
|
|
|
|
* Helper function to be implemented by subclasses, which must return a
|
|
|
|
* boolean value indicating if this button is disabled or not.
|
|
|
|
*
|
2018-05-11 02:10:26 +00:00
|
|
|
* @protected
|
2018-04-13 13:03:12 +00:00
|
|
|
* @returns {boolean}
|
|
|
|
*/
|
|
|
|
_isDisabled() {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Helper function to be implemented by subclasses, which must return a
|
2018-05-11 02:10:26 +00:00
|
|
|
* {@code boolean} value indicating if this button is toggled or not.
|
2018-04-13 13:03:12 +00:00
|
|
|
*
|
2018-05-11 02:10:26 +00:00
|
|
|
* @protected
|
2018-04-13 13:03:12 +00:00
|
|
|
* @returns {boolean}
|
|
|
|
*/
|
|
|
|
_isToggled() {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
_onClick: (*) => void;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Handles clicking / pressing the button, and toggles the audio mute state
|
|
|
|
* accordingly.
|
|
|
|
*
|
|
|
|
* @private
|
|
|
|
* @returns {void}
|
|
|
|
*/
|
|
|
|
_onClick() {
|
2018-05-22 09:32:09 +00:00
|
|
|
const { afterClick } = this.props;
|
|
|
|
|
2018-04-13 13:03:12 +00:00
|
|
|
this._handleClick();
|
2018-05-22 09:32:09 +00:00
|
|
|
afterClick && afterClick();
|
2018-04-13 13:03:12 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Implements React's {@link Component#render()}.
|
|
|
|
*
|
|
|
|
* @inheritdoc
|
2018-04-18 14:34:40 +00:00
|
|
|
* @returns {React$Node}
|
2018-04-13 13:03:12 +00:00
|
|
|
*/
|
2018-04-18 14:34:40 +00:00
|
|
|
render(): React$Node {
|
2018-04-13 13:03:12 +00:00
|
|
|
const props = {
|
|
|
|
...this.props,
|
|
|
|
accessibilityLabel: this.accessibilityLabel,
|
2018-07-17 02:15:34 +00:00
|
|
|
elementAfter: this._getElementAfter(),
|
2018-04-13 13:03:12 +00:00
|
|
|
iconName: this._getIconName(),
|
2018-05-22 10:01:00 +00:00
|
|
|
label: this._getLabel(),
|
2018-04-13 13:03:12 +00:00
|
|
|
styles: this._getStyles(),
|
2018-10-29 02:10:43 +00:00
|
|
|
tooltip: this._getTooltip()
|
2018-04-13 13:03:12 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<ToolboxItem
|
|
|
|
disabled = { this._isDisabled() }
|
|
|
|
onClick = { this._onClick }
|
|
|
|
{ ...props } />
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|