verdnatura-mirror
/
verdnatura-chat
forked from verdnatura-mirror/Rocket.Chat.ReactNative
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add ListEmptyComponent

This commit is contained in:
Danish Ahmed Mirza 2022-06-28 20:11:52 +05:30 committed by Danish
parent e44c3d1ffd
commit f9164cf0f1
3 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/containers/EmojiPicker/Footer.tsx
View File

@ -7,16 +7,18 @@ import { CustomIcon } from '../CustomIcon';
import styles from './styles';
import { IFooterProps } from './interfaces';
const BUTTON_HIT_SLOP = { top: 15, right: 15, bottom: 15, left: 15 };
const Footer = React.memo(({ onSearchPressed, onBackspacePressed }: IFooterProps) => {
const { colors } = useTheme();
return (
<View style={[styles.footerContainer, { backgroundColor: colors.bannerBackground }]}>
<BorderlessButton activeOpacity={0.7} onPress={onSearchPressed} style={styles.footerButtonsContainer}>
<CustomIcon color={colors.auxiliaryTintColor} size={24} name='search' />
<CustomIcon color={colors.auxiliaryTintColor} size={25} name='search' />
</BorderlessButton>
<TouchableOpacity activeOpacity={0.7} onPress={onBackspacePressed}>
<CustomIcon color={colors.auxiliaryTintColor} size={24} name='backspace' />
<TouchableOpacity activeOpacity={0.7} onPress={onBackspacePressed} hitSlop={BUTTON_HIT_SLOP}>
<CustomIcon color={colors.auxiliaryTintColor} size={25} name='backspace' />
</TouchableOpacity>
</View>
);

20
app/containers/MessageBox/EmojiSearchbar.tsx
View File

@ -12,6 +12,8 @@ import CustomEmoji from '../EmojiPicker/CustomEmoji';
import database from '../../lib/database';
import styles from './styles';
const BUTTON_HIT_SLOP = { top: 15, right: 15, bottom: 15, left: 15 };
interface IEmojiSearchbarProps {
openEmoji: () => void;
onChangeText: (value: string) => void;
@ -61,29 +63,31 @@ const EmojiSearchbar = React.forwardRef<TextInput, IEmojiSearchbarProps>(
const emojiSize = 30;
return (
<View style={[styles.emojiContainer]}>
<TouchableOpacity
activeOpacity={0.7}
// @ts-ignore
key={emoji && emoji.isCustom ? emoji.content : emoji}
onPress={() => onEmojiSelected(emoji)}>
<TouchableOpacity activeOpacity={0.7} onPress={() => onEmojiSelected(emoji)}>
{renderEmoji(emoji, emojiSize, baseUrl)}
</TouchableOpacity>
</View>
);
};
return (
<View style={{ borderTopWidth: 1, borderTopColor: colors.borderColor }}>
<View style={{ borderTopWidth: 1, borderTopColor: colors.borderColor, backgroundColor: colors.backgroundColor }}>
<FlatList
horizontal
data={searchText ? emojis : frequentlyUsed}
renderItem={({ item }) => renderItem(item)}
showsHorizontalScrollIndicator={false}
keyExtractor={item => item.name || item.content}
ListEmptyComponent={() => (
<View style={styles.listEmptyComponent}>
<Text style={{ color: colors.auxiliaryText }}>{I18n.t('No_results_found')}</Text>
</View>
)}
// @ts-ignore
keyExtractor={item => item.name || item}
contentContainerStyle={styles.emojiListContainer}
keyboardShouldPersistTaps='always'
/>
<View style={styles.emojiSearchbarContainer}>
<TouchableOpacity style={styles.openEmojiKeyboard} activeOpacity={0.7} onPress={openEmoji}>
<TouchableOpacity style={styles.openEmojiKeyboard} activeOpacity={0.7} onPress={openEmoji} hitSlop={BUTTON_HIT_SLOP}>
<CustomIcon name='chevron-left' size={30} color={colors.collapsibleChevron} />
</TouchableOpacity>
<View style={{ flex: 1 }}>

11
app/containers/MessageBox/styles.ts
View File

@ -163,15 +163,20 @@ export default StyleSheet.create({
color: '#ffffff'
},
emojiContainer: { justifyContent: 'center', marginHorizontal: 2 },
emojiListContainer: { height: 50, paddingHorizontal: 5, marginVertical: 5 },
emojiListContainer: { height: 50, paddingHorizontal: 5, marginVertical: 5, flexGrow: 1 },
emojiSearchbarContainer: {
flexDirection: 'row',
height: 50,
marginBottom: 10,
marginBottom: 15,
justifyContent: 'center',
alignItems: 'center'
},
openEmojiKeyboard: { marginHorizontal: 10, justifyContent: 'center' },
emojiSearchbar: { padding: 10, borderRadius: 5 },
textInputContainer: { justifyContent: 'center', marginBottom: 0, marginRight: 15 }
textInputContainer: { justifyContent: 'center', marginBottom: 0, marginRight: 15 },
listEmptyComponent: {
width: '100%',
alignItems: 'center',
justifyContent: 'center'
}
});