ref(participants-pane) Change to function component (#12410)
Use makeStyles instead of withStyles
This commit is contained in:
Robert Pintilii
GitHub
parent
748b66b04a
commit
ff29196f3a
|
|
@ -1,16 +1,15 @@
|
|||
/* eslint-disable lines-around-comment */
|
||||
import { Theme } from '@mui/material';
|
||||
import { withStyles } from '@mui/styles';
|
||||
import React, { Component } from 'react';
|
||||
import { WithTranslation } from 'react-i18next';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { makeStyles } from 'tss-react/mui';
|
||||
|
||||
import { IState } from '../../../app/types';
|
||||
import participantsPaneTheme from '../../../base/components/themes/participantsPaneTheme.json';
|
||||
import { openDialog } from '../../../base/dialog/actions';
|
||||
import { translate } from '../../../base/i18n/functions';
|
||||
import { IconClose, IconHorizontalPoints } from '../../../base/icons/svg';
|
||||
import { isLocalParticipantModerator } from '../../../base/participants/functions';
|
||||
import { connect } from '../../../base/redux/functions';
|
||||
import Button from '../../../base/ui/components/web/Button';
|
||||
import ClickableIcon from '../../../base/ui/components/web/ClickableIcon';
|
||||
import { BUTTON_TYPES } from '../../../base/ui/constants';
|
||||
|
|
@ -32,74 +31,8 @@ import { FooterContextMenu } from './FooterContextMenu';
|
|||
import LobbyParticipants from './LobbyParticipants';
|
||||
import MeetingParticipants from './MeetingParticipants';
|
||||
|
||||
/**
|
||||
* The type of the React {@code Component} props of {@link ParticipantsPane}.
|
||||
*/
|
||||
interface Props extends WithTranslation {
|
||||
|
||||
/**
|
||||
* Whether there is backend support for Breakout Rooms.
|
||||
*/
|
||||
_isBreakoutRoomsSupported: Boolean;
|
||||
|
||||
/**
|
||||
* Whether to display the context menu as a drawer.
|
||||
*/
|
||||
_overflowDrawer: boolean;
|
||||
|
||||
/**
|
||||
* Is the participants pane open.
|
||||
*/
|
||||
_paneOpen: boolean;
|
||||
|
||||
/**
|
||||
* Should the add breakout room button be displayed?
|
||||
*/
|
||||
_showAddRoomButton: boolean;
|
||||
|
||||
/**
|
||||
* Whether to show the footer menu.
|
||||
*/
|
||||
_showFooter: boolean;
|
||||
|
||||
/**
|
||||
* Whether to show the more actions button.
|
||||
*/
|
||||
_showMoreActionsButton: boolean;
|
||||
|
||||
/**
|
||||
* Whether to show the mute all button.
|
||||
*/
|
||||
_showMuteAllButton: boolean;
|
||||
|
||||
/**
|
||||
* An object containing the CSS classes.
|
||||
*/
|
||||
classes: any;
|
||||
|
||||
/**
|
||||
* The Redux dispatch function.
|
||||
*/
|
||||
dispatch: Function;
|
||||
}
|
||||
|
||||
/**
|
||||
* The type of the React {@code Component} state of {@link ParticipantsPane}.
|
||||
*/
|
||||
type State = {
|
||||
|
||||
/**
|
||||
* Indicates if the footer context menu is open.
|
||||
*/
|
||||
contextOpen: boolean;
|
||||
|
||||
/**
|
||||
* Participants search string.
|
||||
*/
|
||||
searchString: string;
|
||||
};
|
||||
|
||||
const styles = (theme: Theme) => {
|
||||
const useStyles = makeStyles()((theme: Theme) => {
|
||||
return {
|
||||
container: {
|
||||
boxSizing: 'border-box' as const,
|
||||
|
|
@ -159,74 +92,54 @@ const styles = (theme: Theme) => {
|
|||
position: 'relative' as const
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
const ParticipantsPane = () => {
|
||||
const { classes } = useStyles();
|
||||
const paneOpen = useSelector(getParticipantsPaneOpen);
|
||||
const isBreakoutRoomsSupported = useSelector((state: IState) => state['features/base/conference'])
|
||||
.conference?.getBreakoutRooms()?.isSupported();
|
||||
const showAddRoomButton = useSelector(isAddBreakoutRoomButtonVisible);
|
||||
const showFooter = useSelector(isLocalParticipantModerator);
|
||||
const showMuteAllButton = useSelector(isMuteAllVisible);
|
||||
const showMoreActionsButton = useSelector(isMoreActionsVisible);
|
||||
const dispatch = useDispatch();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const [ contextOpen, setContextOpen ] = useState(false);
|
||||
const [ searchString, setSearchString ] = useState('');
|
||||
|
||||
const onWindowClickListener = useCallback((e: any) => {
|
||||
if (contextOpen && !findAncestorByClass(e.target, classes.footerMoreContainer)) {
|
||||
setContextOpen(false);
|
||||
}
|
||||
}, [ contextOpen ]);
|
||||
|
||||
useEffect(() => {
|
||||
window.addEventListener('click', onWindowClickListener);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('click', onWindowClickListener);
|
||||
};
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* Implements the participants list.
|
||||
*/
|
||||
class ParticipantsPane extends Component<Props, State> {
|
||||
/**
|
||||
* Initializes a new {@code ParticipantsPane} instance.
|
||||
*
|
||||
* @inheritdoc
|
||||
*/
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
const onClosePane = useCallback(() => {
|
||||
dispatch(close());
|
||||
}, []);
|
||||
|
||||
this.state = {
|
||||
contextOpen: false,
|
||||
searchString: ''
|
||||
};
|
||||
const onDrawerClose = useCallback(() => {
|
||||
setContextOpen(false);
|
||||
}, []);
|
||||
|
||||
// Bind event handlers so they are only bound once per instance.
|
||||
this._onClosePane = this._onClosePane.bind(this);
|
||||
this._onDrawerClose = this._onDrawerClose.bind(this);
|
||||
this._onMuteAll = this._onMuteAll.bind(this);
|
||||
this._onToggleContext = this._onToggleContext.bind(this);
|
||||
this._onWindowClickListener = this._onWindowClickListener.bind(this);
|
||||
this.setSearchString = this.setSearchString.bind(this);
|
||||
}
|
||||
const onMuteAll = useCallback(() => {
|
||||
dispatch(openDialog(MuteEveryoneDialog));
|
||||
}, []);
|
||||
|
||||
const onToggleContext = useCallback(() => {
|
||||
setContextOpen(open => !open);
|
||||
}, []);
|
||||
|
||||
/**
|
||||
* Implements React's {@link Component#componentDidMount()}.
|
||||
*
|
||||
* @inheritdoc
|
||||
*/
|
||||
componentDidMount() {
|
||||
window.addEventListener('click', this._onWindowClickListener);
|
||||
}
|
||||
|
||||
/**
|
||||
* Implements React's {@link Component#componentWillUnmount()}.
|
||||
*
|
||||
* @inheritdoc
|
||||
*/
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener('click', this._onWindowClickListener);
|
||||
}
|
||||
|
||||
/**
|
||||
* Implements React's {@link Component#render}.
|
||||
*
|
||||
* @inheritdoc
|
||||
*/
|
||||
render() {
|
||||
const {
|
||||
_isBreakoutRoomsSupported,
|
||||
_paneOpen,
|
||||
_showAddRoomButton,
|
||||
_showFooter,
|
||||
_showMoreActionsButton,
|
||||
_showMuteAllButton,
|
||||
classes,
|
||||
t
|
||||
} = this.props;
|
||||
const { contextOpen, searchString } = this.state;
|
||||
|
||||
// when the pane is not open optimize to not
|
||||
// execute the MeetingParticipantList render for large list of participants
|
||||
if (!_paneOpen) {
|
||||
if (!paneOpen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
|
@ -237,38 +150,38 @@ class ParticipantsPane extends Component<Props, State> {
|
|||
<ClickableIcon
|
||||
accessibilityLabel = { t('participantsPane.close', 'Close') }
|
||||
icon = { IconClose }
|
||||
onClick = { this._onClosePane } />
|
||||
onClick = { onClosePane } />
|
||||
</div>
|
||||
<div className = { classes.container }>
|
||||
<LobbyParticipants />
|
||||
<br className = { classes.antiCollapse } />
|
||||
<MeetingParticipants
|
||||
searchString = { searchString }
|
||||
setSearchString = { this.setSearchString } />
|
||||
{_isBreakoutRoomsSupported && <RoomList searchString = { searchString } />}
|
||||
{_showAddRoomButton && <AddBreakoutRoomButton />}
|
||||
setSearchString = { setSearchString } />
|
||||
{isBreakoutRoomsSupported && <RoomList searchString = { searchString } />}
|
||||
{showAddRoomButton && <AddBreakoutRoomButton />}
|
||||
</div>
|
||||
{_showFooter && (
|
||||
{showFooter && (
|
||||
<div className = { classes.footer }>
|
||||
{_showMuteAllButton && (
|
||||
{showMuteAllButton && (
|
||||
<Button
|
||||
accessibilityLabel = { t('participantsPane.actions.muteAll') }
|
||||
labelKey = { 'participantsPane.actions.muteAll' }
|
||||
onClick = { this._onMuteAll }
|
||||
onClick = { onMuteAll }
|
||||
type = { BUTTON_TYPES.SECONDARY } />
|
||||
)}
|
||||
{_showMoreActionsButton && (
|
||||
{showMoreActionsButton && (
|
||||
<div className = { classes.footerMoreContainer }>
|
||||
<Button
|
||||
accessibilityLabel = { t('participantsPane.actions.moreModerationActions') }
|
||||
icon = { IconHorizontalPoints }
|
||||
id = 'participants-pane-context-menu'
|
||||
onClick = { this._onToggleContext }
|
||||
onClick = { onToggleContext }
|
||||
type = { BUTTON_TYPES.SECONDARY } />
|
||||
<FooterContextMenu
|
||||
isOpen = { contextOpen }
|
||||
onDrawerClose = { this._onDrawerClose }
|
||||
onMouseLeave = { this._onToggleContext } />
|
||||
onDrawerClose = { onDrawerClose }
|
||||
onMouseLeave = { onToggleContext } />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
|
@ -276,100 +189,7 @@ class ParticipantsPane extends Component<Props, State> {
|
|||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Sets the search string.
|
||||
*
|
||||
* @param {string} newSearchString - The new search string.
|
||||
* @returns {void}
|
||||
*/
|
||||
setSearchString(newSearchString: string) {
|
||||
this.setState({
|
||||
searchString: newSearchString
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Callback for closing the participant pane.
|
||||
*
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
_onClosePane() {
|
||||
this.props.dispatch(close());
|
||||
}
|
||||
|
||||
/**
|
||||
* Callback for closing the drawer.
|
||||
*
|
||||
* @private
|
||||
* @returns {void}
|
||||
*/
|
||||
_onDrawerClose() {
|
||||
this.setState({
|
||||
contextOpen: false
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* The handler for clicking mute all button.
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
_onMuteAll() {
|
||||
this.props.dispatch(openDialog(MuteEveryoneDialog));
|
||||
}
|
||||
|
||||
/**
|
||||
* Handler for toggling open/close of the footer context menu.
|
||||
*
|
||||
* @returns {void}
|
||||
*/
|
||||
_onToggleContext() {
|
||||
this.setState({
|
||||
contextOpen: !this.state.contextOpen
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Window click event listener.
|
||||
*
|
||||
* @param {Event} e - The click event.
|
||||
* @returns {void}
|
||||
*/
|
||||
_onWindowClickListener(e: any) {
|
||||
if (this.state.contextOpen && !findAncestorByClass(e.target, this.props.classes.footerMoreContainer)) {
|
||||
this.setState({
|
||||
contextOpen: false
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Maps (parts of) the redux state to the React {@code Component} props of
|
||||
* {@code ParticipantsPane}.
|
||||
*
|
||||
* @param {Object} state - The redux state.
|
||||
* @protected
|
||||
* @returns {Props}
|
||||
*/
|
||||
function _mapStateToProps(state: IState) {
|
||||
const isPaneOpen = getParticipantsPaneOpen(state);
|
||||
const { conference } = state['features/base/conference'];
|
||||
const _isBreakoutRoomsSupported = conference?.getBreakoutRooms()?.isSupported();
|
||||
|
||||
return {
|
||||
_isBreakoutRoomsSupported,
|
||||
_paneOpen: isPaneOpen,
|
||||
_showAddRoomButton: isAddBreakoutRoomButtonVisible(state),
|
||||
_showFooter: isLocalParticipantModerator(state),
|
||||
_showMuteAllButton: isMuteAllVisible(state),
|
||||
_showMoreActionsButton: isMoreActionsVisible(state)
|
||||
};
|
||||
}
|
||||
|
||||
export default translate(connect(_mapStateToProps)(withStyles(styles)(ParticipantsPane)));
|
||||
|
||||
export default ParticipantsPane;
|
||||
|
|
|
|||
Loading…
Reference in New Issue