jiti-meet/react/features/base/popover/components/Popover.web.js

395 lines
10 KiB
JavaScript

/* @flow */
import React, { Component } from 'react';
import { DialogPortal, Drawer, JitsiPortal } from '../../../toolbox/components/web';
import { isMobileBrowser } from '../../environment/utils';
import { connect } from '../../redux';
import { getContextMenuStyle } from '../functions.web';
/**
* The type of the React {@code Component} props of {@link Popover}.
*/
type Props = {
/**
* A child React Element to use as the trigger for showing the dialog.
*/
children: React$Node,
/**
* Additional CSS classnames to apply to the root of the {@code Popover}
* component.
*/
className: string,
/**
* The ReactElement to display within the dialog.
*/
content: Object,
/**
* Whether displaying of the popover should be prevented.
*/
disablePopover: boolean,
/**
* An id attribute to apply to the root of the {@code Popover}
* component.
*/
id: string,
/**
* Callback to invoke when the popover has closed.
*/
onPopoverClose: Function,
/**
* Callback to invoke when the popover has opened.
*/
onPopoverOpen: Function,
/**
* Whether to display the Popover as a drawer.
*/
overflowDrawer: boolean,
/**
* From which side of the dialog trigger the dialog should display. The
* value will be passed to {@code InlineDialog}.
*/
position: string,
/**
* Whether the popover is visible or not.
*/
visible: boolean
};
/**
* The type of the React {@code Component} state of {@link Popover}.
*/
type State = {
/**
* The style to apply to the context menu in order to position it correctly.
*/
contextMenuStyle: Object
};
/**
* Implements a React {@code Component} for showing an {@code InlineDialog} on
* mouseenter of the trigger and contents, and hiding the dialog on mouseleave.
*
* @augments Component
*/
class Popover extends Component<Props, State> {
/**
* Default values for {@code Popover} component's properties.
*
* @static
*/
static defaultProps = {
className: '',
id: ''
};
/**
* Reference to the dialog container.
*/
_containerRef: Object;
_contextMenuRef: HTMLElement;
/**
* Initializes a new {@code Popover} instance.
*
* @param {Object} props - The read-only properties with which the new
* instance is to be initialized.
*/
constructor(props: Props) {
super(props);
this.state = {
contextMenuStyle: null
};
// Bind event handlers so they are only bound once for every instance.
this._onHideDialog = this._onHideDialog.bind(this);
this._onShowDialog = this._onShowDialog.bind(this);
this._onKeyPress = this._onKeyPress.bind(this);
this._containerRef = React.createRef();
this._onEscKey = this._onEscKey.bind(this);
this._onThumbClick = this._onThumbClick.bind(this);
this._onTouchStart = this._onTouchStart.bind(this);
this._setContextMenuRef = this._setContextMenuRef.bind(this);
this._setContextMenuStyle = this._setContextMenuStyle.bind(this);
this._getCustomDialogStyle = this._getCustomDialogStyle.bind(this);
}
/**
* Sets up a touch event listener to attach.
*
* @inheritdoc
* @returns {void}
*/
componentDidMount() {
window.addEventListener('touchstart', this._onTouchStart);
}
/**
* Removes the listener set up in the {@code componentDidMount} method.
*
* @inheritdoc
* @returns {void}
*/
componentWillUnmount() {
window.removeEventListener('touchstart', this._onTouchStart);
}
/**
* Implements React's {@link Component#render()}.
*
* @inheritdoc
* @returns {ReactElement}
*/
render() {
const { children, className, content, id, overflowDrawer, visible } = this.props;
if (overflowDrawer) {
return (
<div
className = { className }
id = { id }
onClick = { this._onShowDialog }>
{ children }
<JitsiPortal>
<Drawer
isOpen = { visible }
onClose = { this._onHideDialog }>
{ content }
</Drawer>
</JitsiPortal>
</div>
);
}
return (
<div
className = { className }
id = { id }
onClick = { this._onThumbClick }
onKeyPress = { this._onKeyPress }
onMouseEnter = { this._onShowDialog }
onMouseLeave = { this._onHideDialog }
ref = { this._containerRef }>
{ visible && (
<DialogPortal
getRef = { this._setContextMenuRef }
setSize = { this._setContextMenuStyle }
style = { this.state.contextMenuStyle }>
{this._renderContent()}
</DialogPortal>
)}
{ children }
</div>
);
}
_setContextMenuStyle: (size: Object) => void;
/**
* Sets the context menu dialog style for positioning it on screen.
*
* @param {DOMRectReadOnly} size -The size info of the current context menu.
*
* @returns {void}
*/
_setContextMenuStyle(size) {
const style = this._getCustomDialogStyle(size);
this.setState({ contextMenuStyle: style });
}
_setContextMenuRef: (elem: HTMLElement) => void;
/**
* Sets the context menu's ref.
*
* @param {HTMLElement} elem -The html element of the context menu.
*
* @returns {void}
*/
_setContextMenuRef(elem) {
this._contextMenuRef = elem;
}
_onTouchStart: (event: TouchEvent) => void;
/**
* Hide dialog on touch outside of the context menu.
*
* @param {TouchEvent} event - The touch event.
* @private
* @returns {void}
*/
_onTouchStart(event) {
if (this.props.visible
&& !this.props.overflowDrawer
&& this._contextMenuRef
&& this._contextMenuRef.contains
&& !this._contextMenuRef.contains(event.target)) {
this._onHideDialog();
}
}
_onHideDialog: () => void;
/**
* Stops displaying the {@code InlineDialog}.
*
* @private
* @returns {void}
*/
_onHideDialog() {
this.setState({
contextMenuStyle: null
});
if (this.props.onPopoverClose) {
this.props.onPopoverClose();
}
}
_onShowDialog: (Object) => void;
/**
* Displays the {@code InlineDialog} and calls any registered onPopoverOpen
* callbacks.
*
* @param {Object} event - The mouse event or the keypress event to intercept.
* @private
* @returns {void}
*/
_onShowDialog(event) {
event && event.stopPropagation();
if (!this.props.disablePopover) {
this.props.onPopoverOpen();
}
}
_onThumbClick: (Object) => void;
/**
* Prevents switching from tile view to stage view on accidentally clicking
* the popover thumbs.
*
* @param {Object} event - The mouse event or the keypress event to intercept.
* @private
* @returns {void}
*/
_onThumbClick(event) {
event.stopPropagation();
}
_onKeyPress: (Object) => void;
/**
* KeyPress handler for accessibility.
*
* @param {Object} e - The key event to handle.
*
* @returns {void}
*/
_onKeyPress(e) {
if (e.key === ' ' || e.key === 'Enter') {
e.preventDefault();
if (this.props.visible) {
this._onHideDialog();
} else {
this._onShowDialog(e);
}
}
}
_onEscKey: (Object) => void;
/**
* KeyPress handler for accessibility.
*
* @param {Object} e - The key event to handle.
*
* @returns {void}
*/
_onEscKey(e) {
if (e.key === 'Escape') {
e.preventDefault();
e.stopPropagation();
if (this.props.visible) {
this._onHideDialog();
}
}
}
_getCustomDialogStyle: (DOMRectReadOnly) => void;
/**
* Gets style for positioning the context menu on screen in regards to the trigger's
* position.
*
* @param {DOMRectReadOnly} size -The current context menu's size info.
*
* @returns {Object} - The new style of the context menu.
*/
_getCustomDialogStyle(size) {
if (this._containerRef && this._containerRef.current) {
const bounds = this._containerRef.current.getBoundingClientRect();
return getContextMenuStyle(bounds, size, this.props.position);
}
}
/**
* Renders the React Element to be displayed in the {@code InlineDialog}.
* Also adds padding to support moving the mouse from the trigger to the
* dialog to prevent mouseleave events.
*
* @private
* @returns {ReactElement}
*/
_renderContent() {
const { content } = this.props;
return (
<div
className = 'popover'
onKeyDown = { this._onEscKey }>
{ content }
{!isMobileBrowser() && (
<>
<div className = 'popover-mousemove-padding-top' />
<div className = 'popover-mousemove-padding-right' />
<div className = 'popover-mousemove-padding-left' />
<div className = 'popover-mousemove-padding-bottom' />
</>)}
</div>
);
}
}
/**
* Maps (parts of) the Redux state to the associated {@code Popover}'s props.
*
* @param {Object} state - The Redux state.
* @param {Object} ownProps - The own props of the component.
* @private
* @returns {Props}
*/
function _mapStateToProps(state) {
return {
overflowDrawer: state['features/toolbox'].overflowDrawer
};
}
export default connect(_mapStateToProps)(Popover);