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

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

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

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

@ -163,15 +163,20 @@ export default StyleSheet.create({
color: '#ffffff' color: '#ffffff'
}, },
emojiContainer: { justifyContent: 'center', marginHorizontal: 2 }, emojiContainer: { justifyContent: 'center', marginHorizontal: 2 },
emojiListContainer: { height: 50, paddingHorizontal: 5, marginVertical: 5 }, emojiListContainer: { height: 50, paddingHorizontal: 5, marginVertical: 5, flexGrow: 1 },
emojiSearchbarContainer: { emojiSearchbarContainer: {
flexDirection: 'row', flexDirection: 'row',
height: 50, height: 50,
marginBottom: 10, marginBottom: 15,
justifyContent: 'center', justifyContent: 'center',
alignItems: 'center' alignItems: 'center'
}, },
openEmojiKeyboard: { marginHorizontal: 10, justifyContent: 'center' }, openEmojiKeyboard: { marginHorizontal: 10, justifyContent: 'center' },
emojiSearchbar: { padding: 10, borderRadius: 5 }, 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'
}
}); });