50 lines
1.7 KiB
JavaScript
50 lines
1.7 KiB
JavaScript
import React, { useContext } from 'react';
|
|||
import { View, Text, ActivityIndicator, TouchableOpacity } from 'react-native';
|
|||
import PropTypes from 'prop-types';
|
|||
|
|||
import { MENTIONS_TRACKING_TYPE_CANNED } from '../constants';
|
|||
import styles from '../styles';
|
|||
import sharedStyles from '../../../views/Styles';
|
|||
import I18n from '../../../i18n';
|
|||
import { themes } from '../../../constants/colors';
|
|||
import { CustomIcon } from '../../../lib/Icons';
|
|||
import MessageboxContext from '../Context';
|
|||
|
|||
const MentionHeaderList = ({ trackingType, hasMentions, theme, loading }) => {
|
|||
const context = useContext(MessageboxContext);
|
|||
const { onPressNoMatchCanned } = context;
|
|||
|
|||
if (trackingType === MENTIONS_TRACKING_TYPE_CANNED) {
|
|||
if (loading) {
|
|||
return (
|
|||
<View style={styles.wrapMentionHeaderListRow}>
|
|||
<ActivityIndicator style={styles.loadingPaddingHeader} size='small' />
|
|||
<Text style={[styles.mentionHeaderList, { color: themes[theme].auxiliaryText }]}>{I18n.t('Searching')}</Text>
|
|||
</View>
|
|||
);
|
|||
}
|
|||
|
|||
if (!hasMentions) {
|
|||
return (
|
|||
<TouchableOpacity style={[styles.wrapMentionHeaderListRow, styles.mentionNoMatchHeader]} onPress={onPressNoMatchCanned}>
|
|||
<Text style={[styles.mentionHeaderListNoMatchFound, { color: themes[theme].auxiliaryText }]}>
|
|||
{I18n.t('No_match_found')} <Text style={sharedStyles.textSemibold}>{I18n.t('Check_canned_responses')}</Text>
|
|||
</Text>
|
|||
<CustomIcon name='chevron-right' size={24} color={themes[theme].auxiliaryText} />
|
|||
</TouchableOpacity>
|
|||
);
|
|||
}
|
|||
}
|
|||
|
|||
return null;
|
|||
};
|
|||
|
|||
MentionHeaderList.propTypes = {
|
|||
trackingType: PropTypes.string,
|
|||
hasMentions: PropTypes.bool,
|
|||
theme: PropTypes.string,
|
|||
loading: PropTypes.bool
|
|||
};
|
|||
|
|||
export default MentionHeaderList;
|