jiti-meet/react/features/toolbox/components/web/OverflowMenuButton.js

117 lines
3.1 KiB
JavaScript
Raw Normal View History

/* @flow */
import InlineDialog from '@atlaskit/inline-dialog';
import React, { Component } from 'react';
import { createToolbarEvent, sendAnalytics } from '../../../analytics';
import { translate } from '../../../base/i18n';
2019-08-30 16:39:06 +00:00
import { IconMenuThumb } from '../../../base/icons';
import ToolbarButton from './ToolbarButton';
/**
* The type of the React {@code Component} props of {@link OverflowMenuButton}.
*/
type Props = {
/**
* A child React Element to display within {@code InlineDialog}.
*/
children: React$Node,
/**
* Whether or not the OverflowMenu popover should display.
*/
isOpen: boolean,
/**
* Calback to change the visibility of the overflow menu.
*/
onVisibilityChange: Function,
/**
* Invoked to obtain translated strings.
*/
t: Function
};
/**
* A React {@code Component} for opening or closing the {@code OverflowMenu}.
*
* @extends Component
*/
class OverflowMenuButton extends Component<Props> {
/**
* Initializes a new {@code OverflowMenuButton} instance.
*
* @param {Object} props - The read-only properties with which the new
* instance is to be initialized.
*/
constructor(props: Props) {
super(props);
// Bind event handlers so they are only bound once per instance.
this._onCloseDialog = this._onCloseDialog.bind(this);
this._onToggleDialogVisibility
= this._onToggleDialogVisibility.bind(this);
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
const { children, isOpen, t } = this.props;
return (
<div className = 'toolbox-button-wth-dialog'>
<InlineDialog
content = { children }
isOpen = { isOpen }
onClose = { this._onCloseDialog }
position = { 'top right' }>
<ToolbarButton
fix(i18n) Accessiblity labels translations (#3071) * fix(toolbar): accessibilityLabel should be translatable. This commit adds a helper property to get the accessibilityLabel of an item, providing a translation if one is available. This mimics the behavior of label and tooltip. * fix(toolbar) 'hangup' button accessibilityLabel i18n * fix(toolbar) 'mute' button accessibilityLabel i18n * fix(toolbar) 'videomute' button accessibilityLabel i18n * fix(toolbar) 'moreActions' button accessibilityLabel i18n * fix(toolbar) 'shareRoom' button accessibilityLabel i18n * fix(toolbar) 'audioRoute' button accessibilityLabel i18n * fix(toolbar) 'toggleCamera' button accessibilityLabel i18n * fix(toolbar) 'audioOnly' button accessibilityLabel i18n * fix(toolbar) 'roomLock' button accessibilityLabel i18n * fix(toolbar) 'pip' button accessibilityLabel i18n * fix(toolbar) 'invite' button accessibilityLabel i18n * fix(toolbar) 'raiseHand' button accessibilityLabel i18n * fix(toolbar) 'chat' button accessibilityLabel i18n * fix(toolbar) 'shareYourScreen' button accessibilityLabel i18n * fix(toolbar) 'fullScreen' button accessibilityLabel i18n * fix(toolbar) 'sharedvideo' button accessibilityLabel i18n * fix(toolbar) 'document' button accessibilityLabel i18n * fix(toolbar) 'speakerStats' button accessibilityLabel i18n * fix(toolbar) 'feedback' button accessibilityLabel i18n * fix(toolbar) 'shortcuts' button accessibilityLabel i18n * fix(toolbar) 'recording' button accessibilityLabel i18n * fix(toolbar) 'settings' button accessibilityLabel i18n * fix(welcomepage) accessibilityLabels i18n * fix(toolbar) 'info' button accessibilityLabel i18n * fix(i18n): Add translation to various aria-label property values. * fix(i18n): Differentiate between overflow menu and button.
2018-06-07 20:32:18 +00:00
accessibilityLabel =
{ t('toolbar.accessibilityLabel.moreActions') }
2019-08-30 16:39:06 +00:00
icon = { IconMenuThumb }
onClick = { this._onToggleDialogVisibility }
2019-08-30 16:39:06 +00:00
toggled = { isOpen }
tooltip = { t('toolbar.moreActions') } />
</InlineDialog>
</div>
);
}
_onCloseDialog: () => void;
/**
* Callback invoked when {@code InlineDialog} signals that it should be
* close.
*
* @private
* @returns {void}
*/
_onCloseDialog() {
this.props.onVisibilityChange(false);
}
_onToggleDialogVisibility: () => void;
/**
* Callback invoked to signal that an event has occurred that should change
* the visibility of the {@code InlineDialog} component.
*
* @private
* @returns {void}
*/
_onToggleDialogVisibility() {
sendAnalytics(createToolbarEvent('overflow'));
this.props.onVisibilityChange(!this.props.isOpen);
}
}
export default translate(OverflowMenuButton);