<commit_before>// @flow

import _ from 'lodash';
import React from 'react';
import {
    ActivityIndicator,
    Alert,
    FlatList,
    SafeAreaView,
    TextInput,
    TouchableOpacity,
    View
} from 'react-native';

import { Icon } from '../../../../base/font-icons';
import { translate } from '../../../../base/i18n';
import {
    AvatarListItem,
    HeaderWithNavigation,
    Modal,
    type Item
} from '../../../../base/react';
import { connect } from '../../../../base/redux';

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 & {

    /**
     * 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,
        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);
        this._renderItem = this._renderItem.bind(this);
        this._renderSeparator = this._renderSeparator.bind(this);
        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;
        const { inviteItems } = this.state;

        let placeholderKey = 'searchPlaceholder';

        if (!_addPeopleEnabled) {
            placeholderKey = 'searchCallOnlyPlaceholder';
        } else if (!_dialOutEnabled) {
            placeholderKey = 'searchPeopleOnlyPlaceholder';
        }

        return (
            <Modal
                onRequestClose = { this._onCloseAddPeopleDialog }
                visible = { this.props._isVisible }>
                <HeaderWithNavigation
                    forwardDisabled = { this._isAddDisabled() }
                    forwardLabelKey = 'inviteDialog.send'
                    headerLabelKey = 'inviteDialog.header'
                    onPressBack = { this._onCloseAddPeopleDialog }
                    onPressForward = { this._onInvite } />
                <SafeAreaView style = { styles.dialogWrapper }>
                    <View
                        style = { styles.searchFieldWrapper }>
                        <View style = { styles.searchIconWrapper }>
                            { this.state.searchInprogress
                                ? <ActivityIndicator
                                    color = { DARK_GREY }
                                    size = 'small' />
                                : <Icon
                                    name = { 'search' }
                                    style = { styles.searchIcon } />}
                        </View>
                        <TextInput
                            autoCorrect = { false }
                            onChangeText = { this._onTypeQuery }
                            placeholder = {
                                this.props.t(`inviteDialog.${placeholderKey}`)
                            }
                            ref = { this._setFieldRef }
                            style = { styles.searchField } />
                    </View>
                    <FlatList
                        ItemSeparatorComponent = { this._renderSeparator }
                        data = { this.state.selectableItems }
                        extraData = { inviteItems }
                        keyExtractor = { this._keyExtractor }
                        renderItem = { this._renderItem }
                        style = { styles.resultList } />
                </SafeAreaView>
            </Modal>
        );
    }

    /**
     * Clears the dialog content.
     *
     * @returns {void}
     */
    _clearState() {
        this.setState(this.defaultState);
    }

    _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.<commit_msg>fix: invite list needs double tap to select<commit_after>// @flow

import _ from 'lodash';
import React from 'react';
import {
    ActivityIndicator,
    Alert,
    FlatList,
    SafeAreaView,
    TextInput,
    TouchableOpacity,
    View
} from 'react-native';

import { Icon } from '../../../../base/font-icons';
import { translate } from '../../../../base/i18n';
import {
    AvatarListItem,
    HeaderWithNavigation,
    Modal,
    type Item
} from '../../../../base/react';
import { connect } from '../../../../base/redux';

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 & {

    /**
     * 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,
        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);
        this._renderItem = this._renderItem.bind(this);
        this._renderSeparator = this._renderSeparator.bind(this);
        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;
        const { inviteItems } = this.state;

        let placeholderKey = 'searchPlaceholder';

        if (!_addPeopleEnabled) {
            placeholderKey = 'searchCallOnlyPlaceholder';
        } else if (!_dialOutEnabled) {
            placeholderKey = 'searchPeopleOnlyPlaceholder';
        }

        return (
            <Modal
                onRequestClose = { this._onCloseAddPeopleDialog }
                visible = { this.props._isVisible }>
                <HeaderWithNavigation
                    forwardDisabled = { this._isAddDisabled() }
                    forwardLabelKey = 'inviteDialog.send'
                    headerLabelKey = 'inviteDialog.header'
                    onPressBack = { this._onCloseAddPeopleDialog }
                    onPressForward = { this._onInvite } />
                <SafeAreaView style = { styles.dialogWrapper }>
                    <View
                        style = { styles.searchFieldWrapper }>
                        <View style = { styles.searchIconWrapper }>
                            { this.state.searchInprogress
                                ? <ActivityIndicator
                                    color = { DARK_GREY }
                                    size = 'small' />
                                : <Icon
                                    name = { 'search' }
                                    style = { styles.searchIcon } />}
                        </View>
                        <TextInput
                            autoCorrect = { false }
                            onChangeText = { this._onTypeQuery }
                            placeholder = {
                                this.props.t(`inviteDialog.${placeholderKey}`)
                            }
                            ref = { this._setFieldRef }
                            style = { styles.searchField } />
                    </View>
                    <FlatList
                        ItemSeparatorComponent = { this._renderSeparator }
                        data = { this.state.selectableItems }
                        extraData = { inviteItems }
                        keyExtractor = { this._keyExtractor }
                        keyboardShouldPersistTaps = 'always'
                        renderItem = { this._renderItem }
                        style = { styles.resultList } />
                </SafeAreaView>
            </Modal>
        );
    }

    /**
     * Clears the dialog content.
     *
     * @returns {void}
     */
    _clearState() {
        this.setState(this.defaultState);
    }

    _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.
{'fraction_non_alphanumeric': 0.10258569864398215, 'fraction_numerical': 0.000673797692242904, 'mean_word_length': 1.5183457051961824, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 45, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 18, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1221840', 'n_tokens_mistral': 3113, 'n_tokens_neox': 3018, 'n_words': 688}