[NEW] Canned responses #3355

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

diegolmello merged 53 commits into develop from new.canned-responses

Sep 22, 2021

__tests__/__snapshots__/Storyshots.test.js.snap

Large diffs are not rendered by default.

app/constants/settings.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -202,5 +202,8 @@ export default { @@
     	},
     	Jitsi_Enable_Channels: {
     		type: 'valuesAsBoolean'
+    	},
+    	Canned_Responses_Enable: {
+    		type: 'valueAsBoolean'
     	}
     };

app/containers/MessageBox/Mentions/MentionHeaderList.js

-Original file line number
+Diff line change
@@ -0,0 +1,49 @@
+    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;

app/containers/MessageBox/Mentions/MentionItem.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -6,7 +6,7 @@ import Avatar from '../../Avatar';
  
    import MessageboxContext from '../Context';

    import FixedMentionItem from './FixedMentionItem';

    import MentionEmoji from './MentionEmoji';

    import { MENTIONS_TRACKING_TYPE_COMMANDS, MENTIONS_TRACKING_TYPE_EMOJIS } from '../constants';

    import { MENTIONS_TRACKING_TYPE_EMOJIS, MENTIONS_TRACKING_TYPE_COMMANDS, MENTIONS_TRACKING_TYPE_CANNED } from '../constants';

    import { themes } from '../../../constants/colors';

    import { IEmoji } from '../../EmojiPicker/interfaces';

    @@ -17,6 +17,8 @@ interface IMessageBoxMentionItem {
  
    		username: string;

    		t: string;

    		id: string;

    		shortcut: string;

    		text: string;

    	} & IEmoji;

    	trackingType: string;

    	theme: string;

    @@ -32,6 +34,8 @@ const MentionItem = ({ item, trackingType, theme }: IMessageBoxMentionItem) => {
  
    				return `mention-item-${item.name || item}`;

    			case MENTIONS_TRACKING_TYPE_COMMANDS:

    				return `mention-item-${item.command || item}`;

    			case MENTIONS_TRACKING_TYPE_CANNED:

    				return `mention-item-${item.shortcut || item}`;

    			default:

    				return `mention-item-${item.username || item.name || item}`;

    		}

    @@ -68,6 +72,17 @@ const MentionItem = ({ item, trackingType, theme }: IMessageBoxMentionItem) => {
  
    		);

    	}

    	if (trackingType === MENTIONS_TRACKING_TYPE_CANNED) {

    		content = (

    			<>

    				<Text style={[styles.cannedItem, { color: themes[theme].titleText }]}>!{item.shortcut}</Text>

    				<Text numberOfLines={1} style={[styles.cannedMentionText, { color: themes[theme].auxiliaryTintColor }]}>

    					{item.text}

    				</Text>

    			</>

    		);

    	}

    	return (

    		<TouchableOpacity

    			style={[

app/containers/MessageBox/Mentions/index.tsx

            
                      Original file line number
                      Diff line number
                      Diff line change
                  
    @@ -2,35 +2,43 @@ import React from 'react';
  
    import { FlatList, View } from 'react-native';

    import { dequal } from 'dequal';

    import MentionHeaderList from './MentionHeaderList';

    import styles from '../styles';

    import MentionItem from './MentionItem';

    import { themes } from '../../../constants/colors';

    interface IMessageBoxMentions {

    	mentions: [];

    	mentions: any[];

    	trackingType: string;

    	theme: string;

    	loading: boolean;

    }

    const Mentions = React.memo(

    	({ mentions, trackingType, theme }: IMessageBoxMentions) => {

    	({ mentions, trackingType, theme, loading }: IMessageBoxMentions) => {

    		if (!trackingType) {

    			return null;

    		}

    		return (

    			<View testID='messagebox-container'>

    				<FlatList

    					style={[styles.mentionList, { backgroundColor: themes[theme].auxiliaryBackground }]}

    					ListHeaderComponent={() => (

    						<MentionHeaderList trackingType={trackingType} hasMentions={mentions.length > 0} theme={theme} loading={loading} />

    					)}

    					data={mentions}

    					extraData={mentions}

    					renderItem={({ item }) => <MentionItem item={item} trackingType={trackingType} theme={theme} />}

    					keyExtractor={(item: any) => item.rid || item.name || item.command || item}

    					keyExtractor={item => item.rid || item.name || item.command || item.shortcut || item}

    					keyboardShouldPersistTaps='always'

    				/>

    			</View>

    		);

    	},

    	(prevProps, nextProps) => {

    		if (prevProps.loading !== nextProps.loading) {

    			return false;

    		}

    		if (prevProps.theme !== nextProps.theme) {

    			return false;

    		}

app/containers/MessageBox/constants.ts

-Original file line number
+Diff line change
@@ Expand Up / @@ -2,4 +2,5 @@ export const MENTIONS_TRACKING_TYPE_USERS = '@'; @@
     export const MENTIONS_TRACKING_TYPE_EMOJIS = ':';
     export const MENTIONS_TRACKING_TYPE_COMMANDS = '/';
     export const MENTIONS_TRACKING_TYPE_ROOMS = '#';
+    export const MENTIONS_TRACKING_TYPE_CANNED = '!';
     export const MENTIONS_COUNT_TO_DISPLAY = 4;

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[NEW] Canned responses #3355

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!