jiti-meet/react/features/invite/components/add-people-dialog/native/AddPeopleDialog.js

575 lines
17 KiB
JavaScript
Raw Normal View History

2019-02-26 10:41:57 +00:00
// @flow
import _ from 'lodash';
import React from 'react';
import {
ActivityIndicator,
FlatList,
KeyboardAvoidingView,
Platform,
2019-02-26 10:41:57 +00:00
SafeAreaView,
TextInput,
TouchableOpacity,
View
} from 'react-native';
import { AlertDialog, openDialog } from '../../../../base/dialog';
2019-02-26 10:41:57 +00:00
import { translate } from '../../../../base/i18n';
2019-08-30 16:39:06 +00:00
import { Icon, IconCancelSelection, IconCheck, IconClose, IconPhone, IconSearch } from '../../../../base/icons';
2019-02-26 10:41:57 +00:00
import {
AvatarListItem,
2019-05-07 14:46:52 +00:00
HeaderWithNavigation,
SlidingView,
2019-02-26 10:41:57 +00:00
type Item
} from '../../../../base/react';
2019-03-21 16:38:29 +00:00
import { connect } from '../../../../base/redux';
2019-02-26 10:41:57 +00:00
import { setAddPeopleDialogVisible } from '../../../actions';
import AbstractAddPeopleDialog, {
type Props as AbstractProps,
type State as AbstractState,
_mapStateToProps as _abstractMapStateToProps
} from '../AbstractAddPeopleDialog';
import styles, {
AVATAR_SIZE,
DARK_GREY
} from './styles';
type Props = AbstractProps & {
/**
* True if the invite dialog should be open, false otherwise.
*/
_isVisible: boolean,
/**
* Function used to translate i18n labels.
*/
t: Function
};
type State = AbstractState & {
/**
* State variable to keep track of the search field value.
*/
fieldValue: string,
2019-02-26 10:41:57 +00:00
/**
* True if a search is in progress, false otherwise.
*/
searchInprogress: boolean,
/**
* An array of items that are selectable on this dialog. This is usually
* populated by an async search.
*/
selectableItems: Array<Object>
};
/**
* Implements a special dialog to invite people from a directory service.
*/
class AddPeopleDialog extends AbstractAddPeopleDialog<Props, State> {
/**
* Default state object to reset the state to when needed.
*/
defaultState = {
addToCallError: false,
addToCallInProgress: false,
fieldValue: '',
2019-02-26 10:41:57 +00:00
inviteItems: [],
searchInprogress: false,
selectableItems: []
};
/**
* Ref of the search field.
*/
inputFieldRef: ?TextInput;
/**
* TimeoutID to delay the search for the time the user is probably typing.
*/
searchTimeout: TimeoutID;
/**
* Contrustor of the component.
*
* @inheritdoc
*/
constructor(props: Props) {
super(props);
this.state = this.defaultState;
this._keyExtractor = this._keyExtractor.bind(this);
2019-08-28 10:25:51 +00:00
this._renderInvitedItem = this._renderInvitedItem.bind(this);
2019-02-26 10:41:57 +00:00
this._renderItem = this._renderItem.bind(this);
this._renderSeparator = this._renderSeparator.bind(this);
this._onClearField = this._onClearField.bind(this);
2019-02-26 10:41:57 +00:00
this._onCloseAddPeopleDialog = this._onCloseAddPeopleDialog.bind(this);
this._onInvite = this._onInvite.bind(this);
this._onPressItem = this._onPressItem.bind(this);
this._onTypeQuery = this._onTypeQuery.bind(this);
this._setFieldRef = this._setFieldRef.bind(this);
}
/**
* Implements {@code Component#componentDidUpdate}.
*
* @inheritdoc
*/
componentDidUpdate(prevProps) {
if (prevProps._isVisible !== this.props._isVisible) {
// Clear state
this._clearState();
}
}
/**
* Implements {@code Component#render}.
*
* @inheritdoc
*/
render() {
const {
_addPeopleEnabled,
_dialOutEnabled
} = this.props;
2019-08-28 10:25:51 +00:00
const { inviteItems, selectableItems } = this.state;
2019-02-26 10:41:57 +00:00
let placeholderKey = 'searchPlaceholder';
if (!_addPeopleEnabled) {
placeholderKey = 'searchCallOnlyPlaceholder';
} else if (!_dialOutEnabled) {
placeholderKey = 'searchPeopleOnlyPlaceholder';
}
return (
<SlidingView
2019-07-11 11:32:17 +00:00
onHide = { this._onCloseAddPeopleDialog }
position = 'bottom'
show = { this.props._isVisible } >
2019-05-07 14:46:52 +00:00
<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
2019-08-30 16:39:06 +00:00
src = { IconSearch }
style = { styles.searchIcon } />}
</View>
<TextInput
autoCorrect = { false }
autoFocus = { true }
clearButtonMode = 'always' // iOS only
onChangeText = { this._onTypeQuery }
placeholder = {
this.props.t(`inviteDialog.${placeholderKey}`)
}
ref = { this._setFieldRef }
style = { styles.searchField }
value = { this.state.fieldValue } />
{ this._renderAndroidClearButton() }
2019-02-26 10:41:57 +00:00
</View>
2019-08-28 10:25:51 +00:00
{ 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>
</KeyboardAvoidingView>
</SlidingView>
2019-02-26 10:41:57 +00:00
);
}
/**
* Clears the dialog content.
*
* @returns {void}
*/
_clearState() {
this.setState(this.defaultState);
}
2019-08-28 10:25:51 +00:00
/**
* Returns an object capable of being rendered by an {@code AvatarListItem}.
*
* @param {Object} flatListItem - An item of the data array of the {@code FlatList}.
* @returns {?Object}
*/
_getRenderableItem(flatListItem) {
const { item } = flatListItem;
switch (item.type) {
case 'phone':
return {
2019-08-30 16:39:06 +00:00
avatar: IconPhone,
2019-08-28 10:25:51 +00:00
key: item.number,
title: item.number
};
case 'user':
return {
avatar: item.avatar,
key: item.id || item.user_id,
title: item.name
};
default:
return null;
}
}
2019-02-26 10:41:57 +00:00
_invite: Array<Object> => Promise<Array<Object>>
_isAddDisabled: () => boolean;
_keyExtractor: Object => string
/**
* Key extractor for the flatlist.
*
* @param {Object} item - The flatlist item that we need the key to be
* generated for.
* @returns {string}
*/
_keyExtractor(item) {
return item.type === 'user' ? item.id || item.user_id : item.number;
2019-02-26 10:41:57 +00:00
}
_onClearField: () => void
/**
* Callback to clear the text field.
*
* @returns {void}
*/
_onClearField() {
this.setState({
fieldValue: ''
});
// Clear search results
this._onTypeQuery('');
}
2019-07-11 11:32:17 +00:00
_onCloseAddPeopleDialog: () => boolean
2019-02-26 10:41:57 +00:00
/**
* Closes the dialog.
*
2019-07-11 11:32:17 +00:00
* @returns {boolean}
2019-02-26 10:41:57 +00:00
*/
_onCloseAddPeopleDialog() {
2019-07-11 11:32:17 +00:00
if (this.props._isVisible) {
this.props.dispatch(setAddPeopleDialogVisible(false));
return true;
}
return false;
2019-02-26 10:41:57 +00:00
}
_onInvite: () => void
/**
* Invites the selected entries.
*
* @returns {void}
*/
_onInvite() {
this._invite(this.state.inviteItems)
.then(invitesLeftToSend => {
if (invitesLeftToSend.length) {
this.setState({
inviteItems: invitesLeftToSend
});
this._showFailedInviteAlert();
} else {
this._onCloseAddPeopleDialog();
}
});
}
_onPressItem: Item => Function
/**
* Function to preapre a callback for the onPress event of the touchable.
*
* @param {Item} item - The item on which onPress was invoked.
* @returns {Function}
*/
_onPressItem(item) {
return () => {
const { inviteItems } = this.state;
const finderKey = item.type === 'phone' ? 'number' : 'user_id';
if (inviteItems.find(
_.matchesProperty(finderKey, item[finderKey]))) {
// Item is already selected, need to unselect it.
this.setState({
inviteItems: inviteItems.filter(
element => item[finderKey] !== element[finderKey])
});
} else {
// Item is not selected yet, need to add to the list.
2019-08-28 10:25:51 +00:00
const items: Array<Object> = inviteItems.concat(item);
2019-03-19 15:42:25 +00:00
2019-02-26 10:41:57 +00:00
this.setState({
2019-06-05 12:29:10 +00:00
inviteItems: _.sortBy(items, [ 'name', 'number' ])
2019-02-26 10:41:57 +00:00
});
}
};
}
_onTypeQuery: string => void
/**
* Handles the typing event of the text field on the dialog and performs the
* search.
*
* @param {string} query - The query that is typed in the field.
* @returns {void}
*/
_onTypeQuery(query) {
this.setState({
fieldValue: query
});
2019-02-26 10:41:57 +00:00
clearTimeout(this.searchTimeout);
this.searchTimeout = setTimeout(() => {
this.setState({
searchInprogress: true
}, () => {
this._performSearch(query);
});
}, 500);
}
/**
* Performs the actual search.
*
* @param {string} query - The query to search for.
* @returns {void}
*/
_performSearch(query) {
this._query(query).then(results => {
this.setState({
2019-08-28 10:25:51 +00:00
selectableItems: _.sortBy(results, [ 'name', 'number' ])
2019-02-26 10:41:57 +00:00
});
})
.finally(() => {
this.setState({
searchInprogress: false
}, () => {
this.inputFieldRef && this.inputFieldRef.focus();
});
});
}
_query: (string) => Promise<Array<Object>>;
/**
* Renders a button to clear the text field on Android.
*
* NOTE: For the best platform experience we use the native solution on iOS.
*
* @returns {React#Element<*>}
*/
_renderAndroidClearButton() {
if (Platform.OS !== 'android' || !this.state.fieldValue.length) {
return null;
}
return (
<TouchableOpacity
onPress = { this._onClearField }
style = { styles.clearButton }>
<View style = { styles.clearIconContainer }>
<Icon
2019-08-30 16:39:06 +00:00
src = { IconClose }
style = { styles.clearIcon } />
</View>
</TouchableOpacity>
);
}
2019-09-25 13:01:17 +00:00
_renderInvitedItem: Object => React$Element<any> | null
2019-08-28 10:25:51 +00:00
/**
* Renders a single item in the invited {@code FlatList}.
*
* @param {Object} flatListItem - An item of the data array of the
* {@code FlatList}.
* @param {number} index - The index of the currently rendered item.
2019-09-25 13:01:17 +00:00
* @returns {?React$Element<any>}
2019-08-28 10:25:51 +00:00
*/
2019-09-25 13:01:17 +00:00
_renderInvitedItem(flatListItem, index): React$Element<any> | null {
2019-08-28 10:25:51 +00:00
const { item } = flatListItem;
const renderableItem = this._getRenderableItem(flatListItem);
return (
<TouchableOpacity onPress = { this._onPressItem(item) } >
<View
pointerEvents = 'box-only'
style = { styles.itemWrapper }>
<AvatarListItem
avatarOnly = { true }
avatarSize = { AVATAR_SIZE }
avatarStatus = { item.status }
2019-08-28 10:25:51 +00:00
avatarStyle = { styles.avatar }
avatarTextStyle = { styles.avatarText }
item = { renderableItem }
key = { index }
linesStyle = { styles.itemLinesStyle }
titleStyle = { styles.itemText } />
<Icon
2019-08-30 16:39:06 +00:00
src = { IconCancelSelection }
2019-08-28 10:25:51 +00:00
style = { styles.unselectIcon } />
</View>
</TouchableOpacity>
);
}
2019-09-25 13:01:17 +00:00
_renderItem: Object => React$Element<any> | null
2019-08-28 10:25:51 +00:00
2019-02-26 10:41:57 +00:00
/**
2019-08-28 10:25:51 +00:00
* Renders a single item in the search result {@code FlatList}.
2019-02-26 10:41:57 +00:00
*
* @param {Object} flatListItem - An item of the data array of the
* {@code FlatList}.
* @param {number} index - The index of the currently rendered item.
* @returns {?React$Element<*>}
*/
2019-09-25 13:01:17 +00:00
_renderItem(flatListItem, index): React$Element<any> | null {
2019-02-26 10:41:57 +00:00
const { item } = flatListItem;
const { inviteItems } = this.state;
let selected = false;
2019-08-28 10:25:51 +00:00
const renderableItem = this._getRenderableItem(flatListItem);
if (!renderableItem) {
return null;
}
2019-02-26 10:41:57 +00:00
switch (item.type) {
case 'phone':
2019-08-28 10:25:51 +00:00
selected = inviteItems.find(_.matchesProperty('number', item.number));
2019-02-26 10:41:57 +00:00
break;
case 'user':
2019-08-28 10:25:51 +00:00
selected = item.id
? inviteItems.find(_.matchesProperty('id', item.id))
: inviteItems.find(_.matchesProperty('user_id', item.user_id));
2019-02-26 10:41:57 +00:00
break;
default:
return null;
}
return (
<TouchableOpacity onPress = { this._onPressItem(item) } >
<View
pointerEvents = 'box-only'
style = { styles.itemWrapper }>
<AvatarListItem
avatarSize = { AVATAR_SIZE }
avatarStatus = { item.status }
2019-02-26 10:41:57 +00:00
avatarStyle = { styles.avatar }
avatarTextStyle = { styles.avatarText }
item = { renderableItem }
key = { index }
linesStyle = { styles.itemLinesStyle }
titleStyle = { styles.itemText } />
2019-08-28 10:25:51 +00:00
{ selected && <Icon
2019-08-30 16:39:06 +00:00
src = { IconCheck }
2019-08-28 10:25:51 +00:00
style = { styles.selectedIcon } /> }
2019-02-26 10:41:57 +00:00
</View>
</TouchableOpacity>
);
}
2019-03-19 15:42:25 +00:00
_renderSeparator: () => React$Element<*> | null
2019-02-26 10:41:57 +00:00
/**
* Renders the item separator.
*
* @returns {?React$Element<*>}
*/
_renderSeparator() {
return (
<View style = { styles.separator } />
);
}
_setFieldRef: ?TextInput => void
/**
* Sets a reference to the input field for later use.
*
* @param {?TextInput} input - The reference to the input field.
* @returns {void}
*/
_setFieldRef(input) {
this.inputFieldRef = input;
}
/**
* Shows an alert telling the user that some invitees were failed to be
* invited.
*
* NOTE: We're using an Alert here because we're on a modal and it makes
* using our dialogs a tad more difficult.
*
* @returns {void}
*/
_showFailedInviteAlert() {
this.props.dispatch(openDialog(AlertDialog, {
contentKey: {
key: 'inviteDialog.alertText'
}
}));
2019-02-26 10:41:57 +00:00
}
}
/**
* Maps part of the Redux state to the props of this component.
*
* @param {Object} state - The Redux state.
* @returns {{
* _isVisible: boolean
* }}
*/
function _mapStateToProps(state: Object) {
return {
..._abstractMapStateToProps(state),
_isVisible: state['features/invite'].inviteDialogVisible
};
}
export default translate(connect(_mapStateToProps)(AddPeopleDialog));