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';
/**
* 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-
* in numbers.

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

@ -11,7 +11,6 @@ import {
BEGIN_ADD_PEOPLE,
REMOVE_PENDING_INVITE_REQUESTS,
SET_CALLEE_INFO_VISIBLE,
SET_INVITE_DIALOG_VISIBLE,
UPDATE_DIAL_IN_NUMBERS_FAILED,
UPDATE_DIAL_IN_NUMBERS_SUCCESS
} 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}.
*
@ -255,7 +238,6 @@ export function addPendingInviteRequest(
};
}
/**
* Removes all pending invite requests.
*

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

@ -3,10 +3,11 @@
import type { Dispatch } from 'redux';
import { getFeatureFlag, INVITE_ENABLED } from '../base/flags';
import { setActiveModalId } from '../base/modal';
import { beginShareRoom } from '../share-room';
import { setAddPeopleDialogVisible } from './actions.any';
import { isAddPeopleEnabled, isDialOutEnabled } from './functions';
import { ADD_PEOPLE_DIALOG_VIEW_ID } from './constants';
export * from './actions.any';
@ -23,7 +24,7 @@ export function doInvitePeople() {
&& (isAddPeopleEnabled(state) || isDialOutEnabled(state));
if (addPeopleEnabled) {
return dispatch(setAddPeopleDialogVisible(true));
return dispatch(setActiveModalId(ADD_PEOPLE_DIALOG_VIEW_ID));
}
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 {
ActivityIndicator,
FlatList,
KeyboardAvoidingView,
Platform,
SafeAreaView,
TextInput,
@ -25,16 +24,15 @@ import {
IconSearch,
IconShare
} from '../../../../base/icons';
import { JitsiModal, setActiveModalId } from '../../../../base/modal';
import {
AvatarListItem,
HeaderWithNavigation,
SlidingView,
type Item
} from '../../../../base/react';
import { connect } from '../../../../base/redux';
import { beginShareRoom } from '../../../../share-room';
import { setAddPeopleDialogVisible } from '../../../actions.native';
import { ADD_PEOPLE_DIALOG_VIEW_ID } from '../../../constants';
import AbstractAddPeopleDialog, {
type Props as AbstractProps,
@ -131,11 +129,11 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
this._renderItem = this._renderItem.bind(this);
this._renderSeparator = this._renderSeparator.bind(this);
this._onClearField = this._onClearField.bind(this);
this._onCloseAddPeopleDialog = this._onCloseAddPeopleDialog.bind(this);
this._onInvite = this._onInvite.bind(this);
this._onPressItem = this._onPressItem.bind(this);
this._onShareMeeting = this._onShareMeeting.bind(this);
this._onTypeQuery = this._onTypeQuery.bind(this);
this._renderShareMeetingButton = this._renderShareMeetingButton.bind(this);
this._setFieldRef = this._setFieldRef.bind(this);
}
@ -159,8 +157,7 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
render() {
const {
_addPeopleEnabled,
_dialOutEnabled,
_headerStyles
_dialOutEnabled
} = this.props;
const { inviteItems, selectableItems } = this.state;
@ -173,72 +170,58 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
}
return (
<SlidingView
onHide = { this._onCloseAddPeopleDialog }
position = 'bottom'
show = { this.props._isVisible } >
<HeaderWithNavigation
forwardDisabled = { this._isAddDisabled() }
forwardLabelKey = 'inviteDialog.send'
headerLabelKey = 'inviteDialog.header'
onPressBack = { this._onCloseAddPeopleDialog }
onPressForward = { this._onInvite } />
<KeyboardAvoidingView
behavior = 'padding'
style = { styles.avoidingView }>
<SafeAreaView style = { styles.dialogWrapper }>
<View
style = { styles.searchFieldWrapper }>
<View style = { styles.searchIconWrapper }>
{ this.state.searchInprogress
? <ActivityIndicator
color = { DARK_GREY }
size = 'small' />
: <Icon
src = { IconSearch }
style = { styles.searchIcon } />}
</View>
<TextInput
autoCorrect = { false }
autoFocus = { false }
onBlur = { this._onFocused(false) }
onChangeText = { this._onTypeQuery }
onFocus = { this._onFocused(true) }
placeholder = {
this.props.t(`inviteDialog.${placeholderKey}`)
}
ref = { this._setFieldRef }
style = { styles.searchField }
value = { this.state.fieldValue } />
{ this._renderClearButton() }
</View>
{ Boolean(inviteItems.length) && <View style = { styles.invitedList }>
<FlatList
data = { inviteItems }
horizontal = { true }
keyExtractor = { this._keyExtractor }
keyboardShouldPersistTaps = 'always'
renderItem = { this._renderInvitedItem } />
</View> }
<View style = { styles.resultList }>
<FlatList
ItemSeparatorComponent = { this._renderSeparator }
data = { selectableItems }
extraData = { inviteItems }
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>
<JitsiModal
footerComponent = { this._renderShareMeetingButton }
headerProps = {{
forwardDisabled: this._isAddDisabled(),
forwardLabelKey: 'inviteDialog.send',
headerLabelKey: 'inviteDialog.header',
onPressForward: this._onInvite
}}
modalId = { ADD_PEOPLE_DIALOG_VIEW_ID }>
<View
style = { styles.searchFieldWrapper }>
<View style = { styles.searchIconWrapper }>
{ this.state.searchInprogress
? <ActivityIndicator
color = { DARK_GREY }
size = 'small' />
: <Icon
src = { IconSearch }
style = { styles.searchIcon } />}
</View>
<TextInput
autoCorrect = { false }
autoFocus = { false }
onBlur = { this._onFocused(false) }
onChangeText = { this._onTypeQuery }
onFocus = { this._onFocused(true) }
placeholder = {
this.props.t(`inviteDialog.${placeholderKey}`)
}
ref = { this._setFieldRef }
style = { styles.searchField }
value = { this.state.fieldValue } />
{ this._renderClearButton() }
</View>
{ Boolean(inviteItems.length) && <View style = { styles.invitedList }>
<FlatList
data = { inviteItems }
horizontal = { true }
keyExtractor = { this._keyExtractor }
keyboardShouldPersistTaps = 'always'
renderItem = { this._renderInvitedItem } />
</View> }
<View style = { styles.resultList }>
<FlatList
ItemSeparatorComponent = { this._renderSeparator }
data = { selectableItems }
extraData = { inviteItems }
keyExtractor = { this._keyExtractor }
keyboardShouldPersistTaps = 'always'
renderItem = { this._renderItem } />
</View>
</JitsiModal>
);
}
@ -311,23 +294,6 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
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;
/**
@ -360,7 +326,7 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
});
this._showFailedInviteAlert();
} 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.
*
@ -596,12 +564,19 @@ class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
const { _headerStyles } = this.props;
return (
<TouchableOpacity
onPress = { this._onShareMeeting }>
<Icon
src = { IconShare }
style = { [ _headerStyles.headerButtonText, styles.shareIcon ] } />
</TouchableOpacity>
<SafeAreaView
style = { [
styles.bottomBar,
_headerStyles.headerOverlay,
this.state.bottomPadding ? styles.extraBarPadding : null
] }>
<TouchableOpacity
onPress = { this._onShareMeeting }>
<Icon
src = { IconShare }
style = { [ _headerStyles.headerButtonText, styles.shareIcon ] } />
</TouchableOpacity>
</SafeAreaView>
);
}
@ -647,7 +622,7 @@ function _mapStateToProps(state: Object) {
return {
..._abstractMapStateToProps(state),
_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
import { BoxModel, ColorPalette } from '../../../../base/styles';
import { BoxModel } from '../../../../base/styles';
export const AVATAR_SIZE = 40;
export const DARK_GREY = 'rgb(28, 32, 37)';
@ -19,10 +19,6 @@ export default {
fontSize: 12
},
avoidingView: {
flex: 1
},
bottomBar: {
alignItems: 'center',
flexDirection: 'row',
@ -50,14 +46,6 @@ export default {
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).
*/

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.
*/
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
* is expired.

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

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