import React, { Component, ReactNode } from 'react'; import { IReduxState } from '../../../app/types'; // eslint-disable-next-line lines-around-comment // @ts-ignore import { DialogPortal, Drawer, JitsiPortal } from '../../../toolbox/components/web'; import { isMobileBrowser } from '../../environment/utils'; import { connect } from '../../redux/functions'; 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: ReactNode; /** * Additional CSS classnames to apply to the root of the {@code Popover} * component. */ className?: string; /** * The ReactElement to display within the dialog. */ content: ReactNode; /** * 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; /** * Where should the popover content be placed. */ position: string; /** * Whether the trigger for open/ close should be click or hover. */ trigger?: 'hover' | 'click'; /** * 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?: { bottom?: string; left?: string; position: string; top?: string; } | null; }; /** * Implements a React {@code Component} for showing an {@code Popover} on * mouseenter of the trigger and contents, and hiding the dialog on mouseleave. * * @augments Component */ class Popover extends Component { /** * Default values for {@code Popover} component's properties. * * @static */ static defaultProps = { className: '', id: '', trigger: 'hover' }; /** * Reference to the dialog container. */ _containerRef: React.RefObject; _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._onClick = this._onClick.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); this._onOutsideClick = this._onOutsideClick.bind(this); } /** * Sets up a touch event listener to attach. * * @inheritdoc * @returns {void} */ componentDidMount() { window.addEventListener('touchstart', this._onTouchStart); if (this.props.trigger === 'click') { // @ts-ignore window.addEventListener('click', this._onOutsideClick); } } /** * Removes the listener set up in the {@code componentDidMount} method. * * @inheritdoc * @returns {void} */ componentWillUnmount() { window.removeEventListener('touchstart', this._onTouchStart); if (this.props.trigger === 'click') { // @ts-ignore window.removeEventListener('click', this._onOutsideClick); } } /** * Handles click outside the popover. * * @param {MouseEvent} e - The click event. * @returns {void} */ _onOutsideClick(e: React.MouseEvent) { // @ts-ignore if (!this._containerRef?.current?.contains(e.target) && this.props.visible) { this._onHideDialog(); } } /** * Implements React's {@link Component#render()}. * * @inheritdoc * @returns {ReactElement} */ render() { const { children, className, content, id, overflowDrawer, visible, trigger } = this.props; if (overflowDrawer) { return (
{ children } { content }
); } return (
{ visible && ( {this._renderContent()} )} { children }
); } /** * 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: DOMRectReadOnly) { const style = this._getCustomDialogStyle(size); this.setState({ contextMenuStyle: style }); } /** * Sets the context menu's ref. * * @param {HTMLElement} elem -The html element of the context menu. * * @returns {void} */ _setContextMenuRef(elem: HTMLElement) { this._contextMenuRef = elem; } /** * Hide dialog on touch outside of the context menu. * * @param {TouchEvent} event - The touch event. * @private * @returns {void} */ _onTouchStart(event: TouchEvent) { if (this.props.visible && !this.props.overflowDrawer && this._contextMenuRef && this._contextMenuRef.contains // @ts-ignore && !this._contextMenuRef.contains(event.target)) { this._onHideDialog(); } } /** * Stops displaying the {@code Popover}. * * @private * @returns {void} */ _onHideDialog() { this.setState({ contextMenuStyle: null }); if (this.props.onPopoverClose) { this.props.onPopoverClose(); } } /** * Displays the {@code Popover} and calls any registered onPopoverOpen * callbacks. * * @param {Object} event - The mouse event or the keypress event to intercept. * @private * @returns {void} */ _onShowDialog(event?: React.MouseEvent | React.KeyboardEvent) { event?.stopPropagation(); if (!this.props.disablePopover) { this.props.onPopoverOpen?.(); } } /** * 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} */ _onClick(event: React.MouseEvent) { const { trigger, visible } = this.props; event.stopPropagation(); if (trigger === 'click') { if (visible) { this._onHideDialog(); } else { this._onShowDialog(); } } } /** * KeyPress handler for accessibility. * * @param {Object} e - The key event to handle. * * @returns {void} */ _onKeyPress(e: React.KeyboardEvent) { if (e.key === ' ' || e.key === 'Enter') { e.preventDefault(); if (this.props.visible) { this._onHideDialog(); } else { this._onShowDialog(e); } } } /** * KeyPress handler for accessibility. * * @param {Object} e - The key event to handle. * * @returns {void} */ _onEscKey(e: React.KeyboardEvent) { if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); if (this.props.visible) { this._onHideDialog(); } } } /** * 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: DOMRectReadOnly) { if (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 Popover}. * 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 (
{ content } {!isMobileBrowser() && ( <>
)}
); } } /** * 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: IReduxState) { return { overflowDrawer: state['features/toolbox'].overflowDrawer }; } export default connect(_mapStateToProps)(Popover);