feat(native-participants-pane) open/close pane native actions
This commit is contained in:
parent
65fbc6f256
commit
400f47963d
|
@ -1,7 +1,33 @@
|
||||||
import { openDialog } from '../base/dialog';
|
import { openDialog } from '../base/dialog';
|
||||||
|
|
||||||
|
import { PARTICIPANTS_PANE_CLOSE, PARTICIPANTS_PANE_OPEN } from './actionTypes';
|
||||||
import { ContextMenuLobbyParticipantReject, ContextMenuMeetingParticipantDetails } from './components/native';
|
import { ContextMenuLobbyParticipantReject, ContextMenuMeetingParticipantDetails } from './components/native';
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Action to open the participants pane.
|
||||||
|
*
|
||||||
|
* @returns {Object}
|
||||||
|
*/
|
||||||
|
export function open() {
|
||||||
|
console.log(2);
|
||||||
|
|
||||||
|
return {
|
||||||
|
type: PARTICIPANTS_PANE_OPEN
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Action to close the participants pane.
|
||||||
|
*
|
||||||
|
* @returns {Object}
|
||||||
|
*/
|
||||||
|
export function close() {
|
||||||
|
return {
|
||||||
|
type: PARTICIPANTS_PANE_CLOSE
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Displays the context menu for the selected lobby participant.
|
* Displays the context menu for the selected lobby participant.
|
||||||
*
|
*
|
||||||
|
|
|
@ -4,26 +4,37 @@ import React, { useCallback } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { ScrollView, View } from 'react-native';
|
import { ScrollView, View } from 'react-native';
|
||||||
import { Button } from 'react-native-paper';
|
import { Button } from 'react-native-paper';
|
||||||
import { useDispatch, useSelector } from 'react-redux';
|
import { useDispatch, useSelector, connect } from 'react-redux';
|
||||||
|
|
||||||
import { hideDialog, openDialog } from '../../../base/dialog';
|
import { hideDialog, openDialog } from '../../../base/dialog';
|
||||||
import { Icon, IconClose, IconHorizontalPoints } from '../../../base/icons';
|
import { Icon, IconClose, IconHorizontalPoints } from '../../../base/icons';
|
||||||
import { JitsiModal } from '../../../base/modal';
|
import { JitsiModal } from '../../../base/modal';
|
||||||
import { isLocalParticipantModerator } from '../../../base/participants';
|
import {
|
||||||
|
isLocalParticipantModerator
|
||||||
|
} from '../../../base/participants';
|
||||||
import MuteEveryoneDialog
|
import MuteEveryoneDialog
|
||||||
from '../../../video-menu/components/native/MuteEveryoneDialog';
|
from '../../../video-menu/components/native/MuteEveryoneDialog';
|
||||||
|
import { PARTICIPANTS_PANE_ID } from '../../constants';
|
||||||
|
|
||||||
import { ContextMenuMore } from './ContextMenuMore';
|
import { ContextMenuMore } from './ContextMenuMore';
|
||||||
import { LobbyParticipantList } from './LobbyParticipantList';
|
import { LobbyParticipantList } from './LobbyParticipantList';
|
||||||
import { MeetingParticipantList } from './MeetingParticipantList';
|
import { MeetingParticipantList } from './MeetingParticipantList';
|
||||||
import styles from './styles';
|
import styles from './styles';
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Is the participants pane open
|
||||||
|
*/
|
||||||
|
_isOpen: boolean
|
||||||
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Participant pane.
|
* Participant pane.
|
||||||
*
|
*
|
||||||
* @returns {React$Element<any>}
|
* @returns {React$Element<any>}
|
||||||
*/
|
*/
|
||||||
function ParticipantsPane() {
|
function ParticipantsPane({ _isOpen: paneOpen }: Props) {
|
||||||
const dispatch = useDispatch();
|
const dispatch = useDispatch();
|
||||||
const openMoreMenu = useCallback(() => dispatch(openDialog(ContextMenuMore)), [ dispatch ]);
|
const openMoreMenu = useCallback(() => dispatch(openDialog(ContextMenuMore)), [ dispatch ]);
|
||||||
const closePane = useCallback(() => dispatch(hideDialog()), [ dispatch ]);
|
const closePane = useCallback(() => dispatch(hideDialog()), [ dispatch ]);
|
||||||
|
@ -33,8 +44,10 @@ function ParticipantsPane() {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<JitsiModal
|
paneOpen
|
||||||
|
&& <JitsiModal
|
||||||
hideHeaderWithNavigation = { true }
|
hideHeaderWithNavigation = { true }
|
||||||
|
modalId = { PARTICIPANTS_PANE_ID }
|
||||||
style = { styles.participantsPane }>
|
style = { styles.participantsPane }>
|
||||||
<View style = { styles.header }>
|
<View style = { styles.header }>
|
||||||
<Button
|
<Button
|
||||||
|
@ -80,5 +93,23 @@ function ParticipantsPane() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Maps (parts of) the redux state to {@link ParticipantsPane} React {@code Component}
|
||||||
|
* props.
|
||||||
|
*
|
||||||
|
* @param {Object} state - The redux store/state.
|
||||||
|
* @private
|
||||||
|
* @returns {{
|
||||||
|
* _isOpen: boolean,
|
||||||
|
* }}
|
||||||
|
*/
|
||||||
|
function _mapStateToProps(state: Object) {
|
||||||
|
const { isOpen } = state['features/participants-pane'];
|
||||||
|
|
||||||
export default ParticipantsPane;
|
return {
|
||||||
|
_isOpen: isOpen
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default connect(_mapStateToProps)(ParticipantsPane);
|
||||||
|
|
|
@ -2,13 +2,11 @@
|
||||||
|
|
||||||
import type { Dispatch } from 'redux';
|
import type { Dispatch } from 'redux';
|
||||||
|
|
||||||
import { openDialog } from '../../../base/dialog';
|
|
||||||
import { translate } from '../../../base/i18n';
|
import { translate } from '../../../base/i18n';
|
||||||
import { IconParticipants } from '../../../base/icons';
|
import { IconParticipants } from '../../../base/icons';
|
||||||
import { connect } from '../../../base/redux';
|
import { connect } from '../../../base/redux';
|
||||||
import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
|
import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
|
||||||
|
import { open } from '../../actions.native';
|
||||||
import { ParticipantsPane } from './';
|
|
||||||
|
|
||||||
type Props = AbstractButtonProps & {
|
type Props = AbstractButtonProps & {
|
||||||
|
|
||||||
|
@ -34,7 +32,7 @@ class ParticipantsPaneButton extends AbstractButton<Props, *> {
|
||||||
* @returns {void}
|
* @returns {void}
|
||||||
*/
|
*/
|
||||||
_handleClick() {
|
_handleClick() {
|
||||||
this.props.dispatch(openDialog(ParticipantsPane));
|
this.props.dispatch(open());
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,7 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
|
export const PARTICIPANTS_PANE_ID = 'participantsPane';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Reducer key for the feature.
|
* Reducer key for the feature.
|
||||||
*/
|
*/
|
||||||
|
|
Loading…
Reference in New Issue