486e8e35d9
For the most part the changes are taking the "static propTypes" declaration off of components and declaring them as Flow types. Sometimes to support flow some method signatures had to be added. There are some exceptions in which more had to be done to tame the beast: - AbstractVideoTrack: put in additional truthy checks for videoTrack. - Video: add truthy checks for the _videoElement ref. - shouldRenderVideoTrack function: Some component could pass null for the videoTrack argument and Flow wanted that called out explicitly. - DisplayName: Add a truthy check for the input ref before acting on it. - NumbersList: Move array checks inline for Flow to comprehend array methods could be called. Add type checks in the Object.entries loop as the value is assumed to be a mixed type by Flow. - AbstractToolbarButton: add additional truthy check for passed in type.
116 lines
3.0 KiB
JavaScript
116 lines
3.0 KiB
JavaScript
/* @flow */
|
|
|
|
import InlineDialog from '@atlaskit/inline-dialog';
|
|
import React, { Component } from 'react';
|
|
|
|
import { createToolbarEvent, sendAnalytics } from '../../../analytics';
|
|
import { translate } from '../../../base/i18n';
|
|
|
|
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;
|
|
const iconClasses = `icon-thumb-menu ${isOpen ? 'toggled' : ''}`;
|
|
|
|
return (
|
|
<div className = 'toolbox-button-wth-dialog'>
|
|
<InlineDialog
|
|
content = { children }
|
|
isOpen = { isOpen }
|
|
onClose = { this._onCloseDialog }
|
|
position = { 'top right' }>
|
|
<ToolbarButton
|
|
accessibilityLabel =
|
|
{ t('toolbar.accessibilityLabel.moreActions') }
|
|
iconName = { iconClasses }
|
|
onClick = { this._onToggleDialogVisibility }
|
|
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);
|