ref(overflow-menu-button) Change to function component (#12411)
Use makeStyles instead of withStyles
This commit is contained in:
Robert Pintilii
GitHub
parent
3eecf8063f
commit
ca4db54e6e
|
|
@ -1,17 +1,15 @@
|
|||
/* eslint-disable lines-around-comment */
|
||||
import InlineDialog from '@atlaskit/inline-dialog';
|
||||
import { withStyles } from '@mui/styles';
|
||||
import React, { Component, ReactElement } from 'react';
|
||||
import { WithTranslation } from 'react-i18next';
|
||||
import { connect } from 'react-redux';
|
||||
import React, { ReactNode, useCallback } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
import { createToolbarEvent } from '../../../analytics/AnalyticsEvents';
|
||||
import { sendAnalytics } from '../../../analytics/functions';
|
||||
import { IState } from '../../../app/types';
|
||||
import { translate } from '../../../base/i18n/functions';
|
||||
// @ts-ignore
|
||||
import { ReactionEmoji, ReactionsMenu } from '../../../reactions/components';
|
||||
import { REACTIONS_MENU_HEIGHT, type ReactionEmojiProps } from '../../../reactions/constants';
|
||||
import { REACTIONS_MENU_HEIGHT } from '../../../reactions/constants';
|
||||
import { getReactionsQueue } from '../../../reactions/functions.any';
|
||||
import { DRAWER_MAX_HEIGHT } from '../../constants';
|
||||
|
||||
|
|
@ -25,22 +23,17 @@ import OverflowToggleButton from './OverflowToggleButton';
|
|||
/**
|
||||
* The type of the React {@code Component} props of {@link OverflowMenuButton}.
|
||||
*/
|
||||
interface Props extends WithTranslation {
|
||||
interface Props {
|
||||
|
||||
/**
|
||||
* ID of the menu that is controlled by this button.
|
||||
*/
|
||||
ariaControls: String;
|
||||
ariaControls: string;
|
||||
|
||||
/**
|
||||
* A child React Element to display within {@code InlineDialog}.
|
||||
*/
|
||||
children: ReactElement;
|
||||
|
||||
/**
|
||||
* An object containing the CSS classes.
|
||||
*/
|
||||
classes: any;
|
||||
children: ReactNode;
|
||||
|
||||
/**
|
||||
* Whether or not the OverflowMenu popover should display.
|
||||
|
|
@ -52,161 +45,93 @@ interface Props extends WithTranslation {
|
|||
*/
|
||||
onVisibilityChange: Function;
|
||||
|
||||
/**
|
||||
* Whether to display the OverflowMenu as a drawer.
|
||||
*/
|
||||
overflowDrawer: boolean;
|
||||
|
||||
/**
|
||||
* The array of reactions to be displayed.
|
||||
*/
|
||||
reactionsQueue: Array<ReactionEmojiProps>;
|
||||
|
||||
/**
|
||||
* Whether or not to display the reactions in the mobile menu.
|
||||
*/
|
||||
showMobileReactions: boolean;
|
||||
}
|
||||
|
||||
const styles = () => {
|
||||
const useStyles = makeStyles()(() => {
|
||||
return {
|
||||
overflowMenuDrawer: {
|
||||
overflowY: 'auto' as const,
|
||||
height: `calc(${DRAWER_MAX_HEIGHT} - ${REACTIONS_MENU_HEIGHT}px - 16px)`
|
||||
}
|
||||
};
|
||||
};
|
||||
});
|
||||
|
||||
/**
|
||||
* A React {@code Component} for opening or closing the {@code OverflowMenu}.
|
||||
*
|
||||
* @augments 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);
|
||||
const OverflowMenuButton = ({
|
||||
children,
|
||||
isOpen,
|
||||
onVisibilityChange,
|
||||
showMobileReactions
|
||||
}: Props) => {
|
||||
const { classes } = useStyles();
|
||||
const overflowDrawer = useSelector((state: IState) => state['features/toolbox'].overflowDrawer);
|
||||
const reactionsQueue = useSelector(getReactionsQueue);
|
||||
|
||||
// Bind event handlers so they are only bound once per instance.
|
||||
this._onCloseDialog = this._onCloseDialog.bind(this);
|
||||
this._toggleDialogVisibility
|
||||
= this._toggleDialogVisibility.bind(this);
|
||||
this._onEscClick = this._onEscClick.bind(this);
|
||||
}
|
||||
const onCloseDialog = useCallback(() => {
|
||||
onVisibilityChange(false);
|
||||
}, [ onVisibilityChange ]);
|
||||
|
||||
/**
|
||||
* Click handler for the more actions entries.
|
||||
*
|
||||
* @param {KeyboardEvent} event - Esc key click to close the popup.
|
||||
* @returns {void}
|
||||
*/
|
||||
_onEscClick(event: React.KeyboardEvent) {
|
||||
if (event.key === 'Escape' && this.props.isOpen) {
|
||||
const onEscClick = useCallback((event: React.KeyboardEvent) => {
|
||||
if (event.key === 'Escape' && isOpen) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
this._onCloseDialog();
|
||||
onCloseDialog();
|
||||
}
|
||||
}
|
||||
}, [ onCloseDialog ]);
|
||||
|
||||
/**
|
||||
* Implements React's {@link Component#render()}.
|
||||
*
|
||||
* @inheritdoc
|
||||
* @returns {ReactElement}
|
||||
*/
|
||||
render() {
|
||||
const { children, classes, isOpen, overflowDrawer, reactionsQueue, showMobileReactions } = this.props;
|
||||
|
||||
return (
|
||||
<div className = 'toolbox-button-wth-dialog context-menu'>
|
||||
{
|
||||
overflowDrawer ? (
|
||||
<>
|
||||
<OverflowToggleButton
|
||||
handleClick = { this._toggleDialogVisibility }
|
||||
isOpen = { isOpen }
|
||||
onKeyDown = { this._onEscClick } />
|
||||
<JitsiPortal>
|
||||
<Drawer
|
||||
isOpen = { isOpen }
|
||||
onClose = { this._onCloseDialog }>
|
||||
<>
|
||||
<div className = { classes.overflowMenuDrawer }>
|
||||
{children}
|
||||
</div>
|
||||
{showMobileReactions && <ReactionsMenu overflowMenu = { true } />}
|
||||
</>
|
||||
</Drawer>
|
||||
{showMobileReactions && <div className = 'reactions-animations-container'>
|
||||
{reactionsQueue.map(({ reaction, uid }, index) => (<ReactionEmoji
|
||||
index = { index }
|
||||
key = { uid }
|
||||
reaction = { reaction }
|
||||
uid = { uid } />))}
|
||||
</div>}
|
||||
</JitsiPortal>
|
||||
</>
|
||||
) : (
|
||||
<InlineDialog
|
||||
content = { children }
|
||||
isOpen = { isOpen }
|
||||
onClose = { this._onCloseDialog }
|
||||
placement = 'top-end'>
|
||||
<OverflowToggleButton
|
||||
handleClick = { this._toggleDialogVisibility }
|
||||
isOpen = { isOpen }
|
||||
onKeyDown = { this._onEscClick } />
|
||||
</InlineDialog>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Callback invoked when {@code InlineDialog} signals that it should be
|
||||
* close.
|
||||
*
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
_onCloseDialog() {
|
||||
this.props.onVisibilityChange(false);
|
||||
}
|
||||
|
||||
/**
|
||||
* Callback invoked to signal that an event has occurred that should change
|
||||
* the visibility of the {@code InlineDialog} component.
|
||||
*
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
_toggleDialogVisibility() {
|
||||
const toggleDialogVisibility = useCallback(() => {
|
||||
sendAnalytics(createToolbarEvent('overflow'));
|
||||
|
||||
this.props.onVisibilityChange(!this.props.isOpen);
|
||||
}
|
||||
}
|
||||
onVisibilityChange(!isOpen);
|
||||
}, [ isOpen, onVisibilityChange ]);
|
||||
|
||||
/**
|
||||
* Maps (parts of) the Redux state to the associated props for the
|
||||
* {@code OverflowMenuButton} component.
|
||||
*
|
||||
* @param {Object} state - The Redux state.
|
||||
* @returns {Props}
|
||||
*/
|
||||
function mapStateToProps(state: IState) {
|
||||
const { overflowDrawer } = state['features/toolbox'];
|
||||
return (
|
||||
<div className = 'toolbox-button-wth-dialog context-menu'>
|
||||
{
|
||||
overflowDrawer ? (
|
||||
<>
|
||||
<OverflowToggleButton
|
||||
handleClick = { toggleDialogVisibility }
|
||||
isOpen = { isOpen }
|
||||
onKeyDown = { onEscClick } />
|
||||
<JitsiPortal>
|
||||
<Drawer
|
||||
isOpen = { isOpen }
|
||||
onClose = { onCloseDialog }>
|
||||
<>
|
||||
<div className = { classes.overflowMenuDrawer }>
|
||||
{children}
|
||||
</div>
|
||||
{showMobileReactions && <ReactionsMenu overflowMenu = { true } />}
|
||||
</>
|
||||
</Drawer>
|
||||
{showMobileReactions && <div className = 'reactions-animations-container'>
|
||||
{reactionsQueue.map(({ reaction, uid }, index) => (<ReactionEmoji
|
||||
index = { index }
|
||||
key = { uid }
|
||||
reaction = { reaction }
|
||||
uid = { uid } />))}
|
||||
</div>}
|
||||
</JitsiPortal>
|
||||
</>
|
||||
) : (
|
||||
<InlineDialog
|
||||
content = { children }
|
||||
isOpen = { isOpen }
|
||||
onClose = { onCloseDialog }
|
||||
placement = 'top-end'>
|
||||
<OverflowToggleButton
|
||||
handleClick = { toggleDialogVisibility }
|
||||
isOpen = { isOpen }
|
||||
onKeyDown = { onEscClick } />
|
||||
</InlineDialog>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
return {
|
||||
overflowDrawer,
|
||||
reactionsQueue: getReactionsQueue(state)
|
||||
};
|
||||
}
|
||||
|
||||
export default withStyles(styles)(translate(connect(mapStateToProps)(OverflowMenuButton)));
|
||||
export default OverflowMenuButton;
|
||||
|
|
|
|||
Loading…
Reference in New Issue