haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ref: AddPeopleDialog to JitsiModal

This commit is contained in:
Bettenbuk Zoltan 2020-04-06 17:26:20 +02:00 committed by Zoltan Bettenbuk
parent 0c2e13a453
commit 0f4369a9a9
7 changed files with 84 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
react/features/invite/actionTypes.js
View File

@ -41,17 +41,6 @@ export const REMOVE_PENDING_INVITE_REQUESTS
*/ */
export const SET_CALLEE_INFO_VISIBLE = 'SET_CALLEE_INFO_VISIBLE'; export const SET_CALLEE_INFO_VISIBLE = 'SET_CALLEE_INFO_VISIBLE';
/**
* The type of redux action which sets the invite dialog visible or invisible.
*
* {
* type: SET_INVITE_DIALOG_VISIBLE,
* visible: boolean
* }
*/
export const SET_INVITE_DIALOG_VISIBLE = 'SET_INVITE_DIALOG_VISIBLE';
/** /**
* The type of the action which signals an error occurred while requesting dial- * The type of the action which signals an error occurred while requesting dial-
* in numbers. * in numbers.

18
react/features/invite/actions.any.js
View File

@ -11,7 +11,6 @@ import {
BEGIN_ADD_PEOPLE, BEGIN_ADD_PEOPLE,
REMOVE_PENDING_INVITE_REQUESTS, REMOVE_PENDING_INVITE_REQUESTS,
SET_CALLEE_INFO_VISIBLE, SET_CALLEE_INFO_VISIBLE,
SET_INVITE_DIALOG_VISIBLE,
UPDATE_DIAL_IN_NUMBERS_FAILED, UPDATE_DIAL_IN_NUMBERS_FAILED,
UPDATE_DIAL_IN_NUMBERS_SUCCESS UPDATE_DIAL_IN_NUMBERS_SUCCESS
} from './actionTypes'; } from './actionTypes';
@ -199,22 +198,6 @@ export function updateDialInNumbers() {
}; };
} }
/**
* Sets the visibility of the invite dialog.
*
* @param {boolean} visible - The visibility to set.
* @returns {{
* type: SET_INVITE_DIALOG_VISIBLE,
* visible: boolean
* }}
*/
export function setAddPeopleDialogVisible(visible: boolean) {
return {
type: SET_INVITE_DIALOG_VISIBLE,
visible
};
}
/** /**
* Sets the visibility of {@code CalleeInfo}. * Sets the visibility of {@code CalleeInfo}.
* *
@ -255,7 +238,6 @@ export function addPendingInviteRequest(
}; };
} }
/** /**
* Removes all pending invite requests. * Removes all pending invite requests.
* *

5
react/features/invite/actions.native.js
View File

@ -3,10 +3,11 @@
import type { Dispatch } from 'redux'; import type { Dispatch } from 'redux';
import { getFeatureFlag, INVITE_ENABLED } from '../base/flags'; import { getFeatureFlag, INVITE_ENABLED } from '../base/flags';
import { setActiveModalId } from '../base/modal';
import { beginShareRoom } from '../share-room'; import { beginShareRoom } from '../share-room';
import { setAddPeopleDialogVisible } from './actions.any';
import { isAddPeopleEnabled, isDialOutEnabled } from './functions'; import { isAddPeopleEnabled, isDialOutEnabled } from './functions';
import { ADD_PEOPLE_DIALOG_VIEW_ID } from './constants';
export * from './actions.any'; export * from './actions.any';
@ -23,7 +24,7 @@ export function doInvitePeople() {
&& (isAddPeopleEnabled(state) || isDialOutEnabled(state)); && (isAddPeopleEnabled(state) || isDialOutEnabled(state));
if (addPeopleEnabled) { if (addPeopleEnabled) {
return dispatch(setAddPeopleDialogVisible(true)); return dispatch(setActiveModalId(ADD_PEOPLE_DIALOG_VIEW_ID));
} }
return dispatch(beginShareRoom()); return dispatch(beginShareRoom());

171
react/features/invite/components/add-people-dialog/native/AddPeopleDialog.js
View File

@ -5,7 +5,6 @@ import React from 'react';
import { import {
ActivityIndicator, ActivityIndicator,
FlatList, FlatList,
KeyboardAvoidingView,
Platform, Platform,
SafeAreaView, SafeAreaView,
TextInput, TextInput,
@ -25,16 +24,15 @@ import {
IconSearch, IconSearch,
IconShare IconShare
} from '../../../../base/icons'; } from '../../../../base/icons';
import { JitsiModal, setActiveModalId } from '../../../../base/modal';
import { import {
AvatarListItem, AvatarListItem,
HeaderWithNavigation,
SlidingView,
type Item type Item
} from '../../../../base/react'; } from '../../../../base/react';
import { connect } from '../../../../base/redux'; import { connect } from '../../../../base/redux';
import { beginShareRoom } from '../../../../share-room'; import { beginShareRoom } from '../../../../share-room';
import { setAddPeopleDialogVisible } from '../../../actions.native'; import { ADD_PEOPLE_DIALOG_VIEW_ID } from '../../../constants';
import AbstractAddPeopleDialog, { import AbstractAddPeopleDialog, {
type Props as AbstractProps, type Props as AbstractProps,
@ -131,11 +129,11 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
this._renderItem = this._renderItem.bind(this); this._renderItem = this._renderItem.bind(this);
this._renderSeparator = this._renderSeparator.bind(this); this._renderSeparator = this._renderSeparator.bind(this);
this._onClearField = this._onClearField.bind(this); this._onClearField = this._onClearField.bind(this);
this._onCloseAddPeopleDialog = this._onCloseAddPeopleDialog.bind(this);
this._onInvite = this._onInvite.bind(this); this._onInvite = this._onInvite.bind(this);
this._onPressItem = this._onPressItem.bind(this); this._onPressItem = this._onPressItem.bind(this);
this._onShareMeeting = this._onShareMeeting.bind(this); this._onShareMeeting = this._onShareMeeting.bind(this);
this._onTypeQuery = this._onTypeQuery.bind(this); this._onTypeQuery = this._onTypeQuery.bind(this);
this._renderShareMeetingButton = this._renderShareMeetingButton.bind(this);
this._setFieldRef = this._setFieldRef.bind(this); this._setFieldRef = this._setFieldRef.bind(this);
} }
@ -159,8 +157,7 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
render() { render() {
const { const {
_addPeopleEnabled, _addPeopleEnabled,
_dialOutEnabled, _dialOutEnabled
_headerStyles
} = this.props; } = this.props;
const { inviteItems, selectableItems } = this.state; const { inviteItems, selectableItems } = this.state;
@ -173,72 +170,58 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
} }
return ( return (
<SlidingView <JitsiModal
onHide = { this._onCloseAddPeopleDialog } footerComponent = { this._renderShareMeetingButton }
position = 'bottom' headerProps = {{
show = { this.props._isVisible } > forwardDisabled: this._isAddDisabled(),
<HeaderWithNavigation forwardLabelKey: 'inviteDialog.send',
forwardDisabled = { this._isAddDisabled() } headerLabelKey: 'inviteDialog.header',
forwardLabelKey = 'inviteDialog.send' onPressForward: this._onInvite
headerLabelKey = 'inviteDialog.header' }}
onPressBack = { this._onCloseAddPeopleDialog } modalId = { ADD_PEOPLE_DIALOG_VIEW_ID }>
onPressForward = { this._onInvite } /> <View
<KeyboardAvoidingView style = { styles.searchFieldWrapper }>
behavior = 'padding' <View style = { styles.searchIconWrapper }>
style = { styles.avoidingView }> { this.state.searchInprogress
<SafeAreaView style = { styles.dialogWrapper }> ? <ActivityIndicator
<View color = { DARK_GREY }
style = { styles.searchFieldWrapper }> size = 'small' />
<View style = { styles.searchIconWrapper }> : <Icon
{ this.state.searchInprogress src = { IconSearch }
? <ActivityIndicator style = { styles.searchIcon } />}
color = { DARK_GREY } </View>
size = 'small' /> <TextInput
: <Icon autoCorrect = { false }
src = { IconSearch } autoFocus = { false }
style = { styles.searchIcon } />} onBlur = { this._onFocused(false) }
</View> onChangeText = { this._onTypeQuery }
<TextInput onFocus = { this._onFocused(true) }
autoCorrect = { false } placeholder = {
autoFocus = { false } this.props.t(`inviteDialog.${placeholderKey}`)
onBlur = { this._onFocused(false) } }
onChangeText = { this._onTypeQuery } ref = { this._setFieldRef }
onFocus = { this._onFocused(true) } style = { styles.searchField }
placeholder = { value = { this.state.fieldValue } />
this.props.t(`inviteDialog.${placeholderKey}`) { this._renderClearButton() }
} </View>
ref = { this._setFieldRef } { Boolean(inviteItems.length) && <View style = { styles.invitedList }>
style = { styles.searchField } <FlatList
value = { this.state.fieldValue } /> data = { inviteItems }
{ this._renderClearButton() } horizontal = { true }
</View> keyExtractor = { this._keyExtractor }
{ Boolean(inviteItems.length) && <View style = { styles.invitedList }> keyboardShouldPersistTaps = 'always'
<FlatList renderItem = { this._renderInvitedItem } />
data = { inviteItems } </View> }
horizontal = { true } <View style = { styles.resultList }>
keyExtractor = { this._keyExtractor } <FlatList
keyboardShouldPersistTaps = 'always' ItemSeparatorComponent = { this._renderSeparator }
renderItem = { this._renderInvitedItem } /> data = { selectableItems }
</View> } extraData = { inviteItems }
<View style = { styles.resultList }> keyExtractor = { this._keyExtractor }
<FlatList keyboardShouldPersistTaps = 'always'
ItemSeparatorComponent = { this._renderSeparator } renderItem = { this._renderItem } />
data = { selectableItems } </View>
extraData = { inviteItems } </JitsiModal>
keyExtractor = { this._keyExtractor }
keyboardShouldPersistTaps = 'always'
renderItem = { this._renderItem } />
</View>
</SafeAreaView>
<SafeAreaView
style = { [
styles.bottomBar,
_headerStyles.headerOverlay,
this.state.bottomPadding ? styles.extraBarPadding : null ] }>
{ this._renderShareMeetingButton() }
</SafeAreaView>
</KeyboardAvoidingView>
</SlidingView>
); );
} }
@ -311,23 +294,6 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
this._onTypeQuery(''); this._onTypeQuery('');
} }
_onCloseAddPeopleDialog: () => boolean
/**
* Closes the dialog.
*
* @returns {boolean}
*/
_onCloseAddPeopleDialog() {
if (this.props._isVisible) {
this.props.dispatch(setAddPeopleDialogVisible(false));
return true;
}
return false;
}
_onFocused: boolean => Function; _onFocused: boolean => Function;
/** /**
@ -360,7 +326,7 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
}); });
this._showFailedInviteAlert(); this._showFailedInviteAlert();
} else { } else {
this._onCloseAddPeopleDialog(); this.props.dispatch(setActiveModalId());
} }
}); });
} }
@ -587,6 +553,8 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
); );
} }
_renderShareMeetingButton: () => React$Element<any>;
/** /**
* Renders a button to share the meeting info. * Renders a button to share the meeting info.
* *
@ -596,12 +564,19 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
const { _headerStyles } = this.props; const { _headerStyles } = this.props;
return ( return (
<TouchableOpacity <SafeAreaView
onPress = { this._onShareMeeting }> style = { [
<Icon styles.bottomBar,
src = { IconShare } _headerStyles.headerOverlay,
style = { [ _headerStyles.headerButtonText, styles.shareIcon ] } /> this.state.bottomPadding ? styles.extraBarPadding : null
</TouchableOpacity> ] }>
<TouchableOpacity
onPress = { this._onShareMeeting }>
<Icon
src = { IconShare }
style = { [ _headerStyles.headerButtonText, styles.shareIcon ] } />
</TouchableOpacity>
</SafeAreaView>
); );
} }
@ -647,7 +622,7 @@ function _mapStateToProps(state: Object) {
return { return {
..._abstractMapStateToProps(state), ..._abstractMapStateToProps(state),
_headerStyles: ColorSchemeRegistry.get(state, 'Header'), _headerStyles: ColorSchemeRegistry.get(state, 'Header'),
_isVisible: state['features/invite'].inviteDialogVisible _isVisible: state['features/base/modal'].activeModalId === ADD_PEOPLE_DIALOG_VIEW_ID
}; };
} }

14
react/features/invite/components/add-people-dialog/native/styles.js
View File

@ -1,6 +1,6 @@
// @flow // @flow
import { BoxModel, ColorPalette } from '../../../../base/styles'; import { BoxModel } from '../../../../base/styles';
export const AVATAR_SIZE = 40; export const AVATAR_SIZE = 40;
export const DARK_GREY = 'rgb(28, 32, 37)'; export const DARK_GREY = 'rgb(28, 32, 37)';
@ -19,10 +19,6 @@ export default {
fontSize: 12 fontSize: 12
}, },
avoidingView: {
flex: 1
},
bottomBar: { bottomBar: {
alignItems: 'center', alignItems: 'center',
flexDirection: 'row', flexDirection: 'row',
@ -50,14 +46,6 @@ export default {
width: 24 width: 24
}, },
dialogWrapper: {
alignItems: 'stretch',
backgroundColor: ColorPalette.white,
flex: 1,
flexDirection: 'column',
justifyContent: 'flex-start'
},
/** /**
* A special padding to avoid issues on some devices (such as Android devices with custom suggestions bar). * A special padding to avoid issues on some devices (such as Android devices with custom suggestions bar).
*/ */

7
react/features/invite/constants.js
View File

@ -1,8 +1,15 @@
// @flow
/**
* Modal ID for the AddPeopleDialog modal.
*/
export const ADD_PEOPLE_DIALOG_VIEW_ID = 'ADD_PEOPLE_DIALOG_VIEW_ID';
/** /**
* Modal ID for the DialInSummary modal. * Modal ID for the DialInSummary modal.
*/ */
export const DIAL_IN_SUMMARY_VIEW_ID = 'DIAL_IN_SUMMARY_VIEW_ID'; export const DIAL_IN_SUMMARY_VIEW_ID = 'DIAL_IN_SUMMARY_VIEW_ID';
/** /**
* The identifier of the sound to be played when the status of an outgoing call * The identifier of the sound to be played when the status of an outgoing call
* is expired. * is expired.

9
react/features/invite/reducer.js
View File

@ -6,7 +6,6 @@ import {
ADD_PENDING_INVITE_REQUEST, ADD_PENDING_INVITE_REQUEST,
REMOVE_PENDING_INVITE_REQUESTS, REMOVE_PENDING_INVITE_REQUESTS,
SET_CALLEE_INFO_VISIBLE, SET_CALLEE_INFO_VISIBLE,
SET_INVITE_DIALOG_VISIBLE,
UPDATE_DIAL_IN_NUMBERS_FAILED, UPDATE_DIAL_IN_NUMBERS_FAILED,
UPDATE_DIAL_IN_NUMBERS_SUCCESS UPDATE_DIAL_IN_NUMBERS_SUCCESS
} from './actionTypes'; } from './actionTypes';
@ -20,7 +19,6 @@ const DEFAULT_STATE = {
* @type {boolean|undefined} * @type {boolean|undefined}
*/ */
calleeInfoVisible: false, calleeInfoVisible: false,
inviteDialogVisible: false,
numbersEnabled: true, numbersEnabled: true,
pendingInviteRequests: [] pendingInviteRequests: []
}; };
@ -49,13 +47,6 @@ ReducerRegistry.register('features/invite', (state = DEFAULT_STATE, action) => {
initialCalleeInfo: action.initialCalleeInfo initialCalleeInfo: action.initialCalleeInfo
}; };
case SET_INVITE_DIALOG_VISIBLE:
return {
...state,
inviteDialogVisible: action.visible
};
case UPDATE_DIAL_IN_NUMBERS_FAILED: case UPDATE_DIAL_IN_NUMBERS_FAILED:
return { return {
...state, ...state,