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

Remove wrong use of memo and some requested changes

This commit is contained in:
Danish Ahmed Mirza 2022-07-20 17:59:18 +05:30 committed by Danish
parent 64afe08fe6
commit 10f074eb02
8 changed files with 178 additions and 168 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,5 @@
import React from 'react'; import React from 'react';
import { View, Pressable } from 'react-native'; import { View, Pressable } from 'react-native';
import { BorderlessButton } from 'react-native-gesture-handler';
import { useTheme } from '../../theme'; import { useTheme } from '../../theme';
import { CustomIcon } from '../CustomIcon'; import { CustomIcon } from '../CustomIcon';
@ -9,19 +8,22 @@ import { IFooterProps } from './interfaces';
const BUTTON_HIT_SLOP = { top: 15, right: 15, bottom: 15, left: 15 }; const BUTTON_HIT_SLOP = { top: 15, right: 15, bottom: 15, left: 15 };
const Footer = React.memo(({ onSearchPressed, onBackspacePressed }: IFooterProps) => { const Footer = ({ onSearchPressed, onBackspacePressed }: IFooterProps): React.ReactElement => {
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}> <Pressable
onPress={onSearchPressed}
hitSlop={BUTTON_HIT_SLOP}
style={({ pressed }) => [[styles.footerButtonsContainer, { opacity: pressed ? 0.7 : 1 }]]}>
<CustomIcon color={colors.auxiliaryTintColor} size={24} name='search' /> <CustomIcon color={colors.auxiliaryTintColor} size={24} name='search' />
</BorderlessButton> </Pressable>
<Pressable onPress={onBackspacePressed} hitSlop={BUTTON_HIT_SLOP} style={({ pressed }) => [{ opacity: pressed ? 0.7 : 1 }]}> <Pressable onPress={onBackspacePressed} hitSlop={BUTTON_HIT_SLOP} style={({ pressed }) => [{ opacity: pressed ? 0.7 : 1 }]}>
<CustomIcon color={colors.auxiliaryTintColor} size={24} name='backspace' /> <CustomIcon color={colors.auxiliaryTintColor} size={24} name='backspace' />
</Pressable> </Pressable>
</View> </View>
); );
}); };
export default Footer; export default Footer;

2
app/containers/EmojiPicker/TabBar.tsx
View File

@ -24,7 +24,7 @@ const TabBar = ({ activeTab, tabs, goToPage }: ITabBarProps): React.ReactElement
backgroundColor: isIOS && pressed ? colors.bannerBackground : 'transparent' backgroundColor: isIOS && pressed ? colors.bannerBackground : 'transparent'
} }
]}> ]}>
<CustomIcon name={tab} size={24} color={colors.titleText} /> <CustomIcon name={tab} size={24} color={activeTab === i ? colors.tintColor : colors.auxiliaryTintColor} />
<View style={activeTab === i ? [styles.activeTabLine, { backgroundColor: colors.tintColor }] : styles.tabLine} /> <View style={activeTab === i ? [styles.activeTabLine, { backgroundColor: colors.tintColor }] : styles.tabLine} />
</Pressable> </Pressable>
))} ))}

264
app/containers/EmojiPicker/index.tsx
View File

@ -19,7 +19,7 @@ import { IEmoji, ICustomEmojis, TFrequentlyUsedEmojiModel } from '../../definiti
import { useAppSelector } from '../../lib/hooks'; import { useAppSelector } from '../../lib/hooks';
import { IEmojiPickerProps, EventTypes } from './interfaces'; import { IEmojiPickerProps, EventTypes } from './interfaces';
const useFrequentlyUsedEmoji = () => { export const useFrequentlyUsedEmoji = () => {
const [frequentlyUsed, setFrequentlyUsed] = useState<IEmoji[]>([]); const [frequentlyUsed, setFrequentlyUsed] = useState<IEmoji[]>([]);
const [loaded, setLoaded] = useState(false); const [loaded, setLoaded] = useState(false);
const getFrequentlyUsedEmojis = async () => { const getFrequentlyUsedEmojis = async () => {
@ -41,146 +41,150 @@ const useFrequentlyUsedEmoji = () => {
return { frequentlyUsed, loaded }; return { frequentlyUsed, loaded };
}; };
const EmojiPicker = React.memo( const EmojiPicker = ({
({ onItemClicked, tabEmojiStyle, isEmojiKeyboard = false, searching = false, searchedEmojis = [] }: IEmojiPickerProps) => { onItemClicked,
const [width, setWidth] = useState(null); tabEmojiStyle,
const { colors } = useTheme(); isEmojiKeyboard = false,
const { frequentlyUsed, loaded } = useFrequentlyUsedEmoji(); searching = false,
searchedEmojis = []
}: IEmojiPickerProps): React.ReactElement | null => {
const [width, setWidth] = useState(null);
const { colors } = useTheme();
const { frequentlyUsed, loaded } = useFrequentlyUsedEmoji();
const baseUrl = useAppSelector(state => state.server?.server); const baseUrl = useAppSelector(state => state.server?.server);
const allCustomEmojis: ICustomEmojis = useAppSelector(state => state.customEmojis); const allCustomEmojis: ICustomEmojis = useAppSelector(state => state.customEmojis);
const customEmojis = useMemo( const customEmojis = useMemo(
() => () =>
Object.keys(allCustomEmojis) Object.keys(allCustomEmojis)
.filter(item => item === allCustomEmojis[item].name) .filter(item => item === allCustomEmojis[item].name)
.map(item => ({ .map(item => ({
content: allCustomEmojis[item].name, content: allCustomEmojis[item].name,
extension: allCustomEmojis[item].extension, extension: allCustomEmojis[item].extension,
isCustom: true isCustom: true
})), })),
[allCustomEmojis] [allCustomEmojis]
); );
const handleEmojiSelect = (emoji: IEmoji) => { const handleEmojiSelect = (emoji: IEmoji) => {
try { try {
if (emoji.isCustom) { if (emoji.isCustom) {
_addFrequentlyUsed({ _addFrequentlyUsed({
content: emoji.content, content: emoji.content,
extension: emoji.extension, extension: emoji.extension,
isCustom: true isCustom: true
}); });
onItemClicked(EventTypes.EMOJI_PRESSED, `:${emoji.content}:`); onItemClicked(EventTypes.EMOJI_PRESSED, `:${emoji.content}:`);
} else {
const content = emoji;
_addFrequentlyUsed({ content, isCustom: false });
const shortname = `:${emoji}:`;
onItemClicked(EventTypes.EMOJI_PRESSED, shortnameToUnicode(shortname), shortname);
}
} catch (e) {
log(e);
}
};
const _addFrequentlyUsed = protectedFunction(async (emoji: IEmoji) => {
const db = database.active;
const freqEmojiCollection = db.get('frequently_used_emojis');
let freqEmojiRecord: TFrequentlyUsedEmojiModel;
try {
freqEmojiRecord = await freqEmojiCollection.find(emoji.content);
} catch (error) {
// Do nothing
}
await db.write(async () => {
if (freqEmojiRecord) {
await freqEmojiRecord.update(f => {
if (f.count) {
f.count += 1;
}
});
} else {
await freqEmojiCollection.create(f => {
f._raw = sanitizedRaw({ id: emoji.content }, freqEmojiCollection.schema);
Object.assign(f, emoji);
f.count = 1;
});
}
});
});
const onLayout = ({
nativeEvent: {
layout: { width }
}
}: any) => setWidth(width);
const renderCategory = (category: keyof typeof emojisByCategory, i: number, label: string, tabsCount: number) => {
let emojis = [];
if (i === 0) {
emojis = frequentlyUsed;
} else if (i === 1) {
emojis = customEmojis;
} else { } else {
emojis = emojisByCategory[category]; const content = emoji;
_addFrequentlyUsed({ content, isCustom: false });
const shortname = `:${emoji}:`;
onItemClicked(EventTypes.EMOJI_PRESSED, shortnameToUnicode(shortname), shortname);
} }
return ( } catch (e) {
log(e);
}
};
const _addFrequentlyUsed = protectedFunction(async (emoji: IEmoji) => {
const db = database.active;
const freqEmojiCollection = db.get('frequently_used_emojis');
let freqEmojiRecord: TFrequentlyUsedEmojiModel;
try {
freqEmojiRecord = await freqEmojiCollection.find(emoji.content);
} catch (error) {
// Do nothing
}
await db.write(async () => {
if (freqEmojiRecord) {
await freqEmojiRecord.update(f => {
if (f.count) {
f.count += 1;
}
});
} else {
await freqEmojiCollection.create(f => {
f._raw = sanitizedRaw({ id: emoji.content }, freqEmojiCollection.schema);
Object.assign(f, emoji);
f.count = 1;
});
}
});
});
const onLayout = ({
nativeEvent: {
layout: { width }
}
}: any) => setWidth(width);
const renderCategory = (category: keyof typeof emojisByCategory, i: number, label: string, tabsCount: number) => {
let emojis = [];
if (i === 0) {
emojis = frequentlyUsed;
} else if (i === 1) {
emojis = customEmojis;
} else {
emojis = emojisByCategory[category];
}
return (
<EmojiCategory
emojis={emojis as IEmoji[]}
onEmojiSelected={(emoji: IEmoji) => handleEmojiSelect(emoji)}
style={styles.categoryContainer}
width={width}
baseUrl={baseUrl}
tabLabel={label}
tabsCount={tabsCount}
isBottomSheet={!isEmojiKeyboard}
/>
);
};
if (!loaded) {
return null;
}
const tabsCount = frequentlyUsed.length === 0 ? categories.tabs.length - 1 : categories.tabs.length;
return (
<View onLayout={onLayout} style={{ flex: 1 }}>
{searching ? (
<EmojiCategory <EmojiCategory
emojis={emojis as IEmoji[]} emojis={searchedEmojis as IEmoji[]}
onEmojiSelected={(emoji: IEmoji) => handleEmojiSelect(emoji)} onEmojiSelected={(emoji: IEmoji) => handleEmojiSelect(emoji)}
style={styles.categoryContainer} style={styles.categoryContainer}
width={width} width={width}
baseUrl={baseUrl} baseUrl={baseUrl}
tabLabel={label} tabLabel={'searching'}
tabsCount={tabsCount} tabsCount={tabsCount}
isBottomSheet={!isEmojiKeyboard} isBottomSheet={!isEmojiKeyboard}
/> />
); ) : (
}; <ScrollableTabView
renderTabBar={() => <TabBar tabEmojiStyle={tabEmojiStyle} />}
if (!loaded) { contentProps={{
return null; keyboardShouldPersistTaps: 'always',
} keyboardDismissMode: 'none'
}}
const tabsCount = frequentlyUsed.length === 0 ? categories.tabs.length - 1 : categories.tabs.length; style={{ backgroundColor: colors.focusedBackground }}
>
return ( {categories.tabs.map((tab: any, i) =>
<View onLayout={onLayout} style={{ flex: 1 }}> i === 0 && frequentlyUsed.length === 0
{searching ? ( ? null // when no frequentlyUsed don't show the tab
<EmojiCategory : renderCategory(tab.category, i, tab.tabLabel, tabsCount)
emojis={searchedEmojis as IEmoji[]} )}
onEmojiSelected={(emoji: IEmoji) => handleEmojiSelect(emoji)} </ScrollableTabView>
style={styles.categoryContainer} )}
width={width} {isEmojiKeyboard && (
baseUrl={baseUrl} <Footer
tabLabel={'searching'} onSearchPressed={() => onItemClicked(EventTypes.SEARCH_PRESSED)}
tabsCount={tabsCount} onBackspacePressed={() => onItemClicked(EventTypes.BACKSPACE_PRESSED)}
isBottomSheet={!isEmojiKeyboard} />
/> )}
) : ( </View>
<ScrollableTabView );
renderTabBar={() => <TabBar tabEmojiStyle={tabEmojiStyle} />} };
contentProps={{
keyboardShouldPersistTaps: 'always',
keyboardDismissMode: 'none'
}}
style={{ backgroundColor: colors.focusedBackground }}
>
{categories.tabs.map((tab: any, i) =>
i === 0 && frequentlyUsed.length === 0
? null // when no frequentlyUsed don't show the tab
: renderCategory(tab.category, i, tab.tabLabel, tabsCount)
)}
</ScrollableTabView>
)}
{isEmojiKeyboard && (
<Footer
onSearchPressed={() => onItemClicked(EventTypes.SEARCH_PRESSED)}
onBackspacePressed={() => onItemClicked(EventTypes.BACKSPACE_PRESSED)}
/>
)}
</View>
);
}
);
export default EmojiPicker; export default EmojiPicker;

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

@ -13,6 +13,7 @@ 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 }; const BUTTON_HIT_SLOP = { top: 15, right: 15, bottom: 15, left: 15 };
const EMOJI_SIZE = 30;
interface IEmojiSearchbarProps { interface IEmojiSearchbarProps {
openEmoji: () => void; openEmoji: () => void;
@ -22,12 +23,17 @@ interface IEmojiSearchbarProps {
baseUrl: string; baseUrl: string;
} }
const renderEmoji = (emoji: IEmoji, size: number, baseUrl: string) => { const Emoji = React.memo(({ emoji, baseUrl }: { emoji: IEmoji; baseUrl: string }) => {
const { colors } = useTheme();
if (emoji?.name) { if (emoji?.name) {
return <CustomEmoji style={{ height: size, width: size, margin: 4 }} emoji={emoji} baseUrl={baseUrl} />; return <CustomEmoji style={{ height: EMOJI_SIZE, width: EMOJI_SIZE, margin: 4 }} emoji={emoji} baseUrl={baseUrl} />;
} }
return <Text style={[styles.searchedEmoji, { fontSize: size }]}>{shortnameToUnicode(`:${emoji}:`)}</Text>; return (
}; <Text style={[styles.searchedEmoji, { fontSize: EMOJI_SIZE, color: colors.backdropColor }]}>
{shortnameToUnicode(`:${emoji}:`)}
</Text>
);
});
const EmojiSearchbar = React.forwardRef<TextInput, IEmojiSearchbarProps>( const EmojiSearchbar = React.forwardRef<TextInput, IEmojiSearchbarProps>(
({ openEmoji, onChangeText, emojis, onEmojiSelected, baseUrl }, ref) => { ({ openEmoji, onChangeText, emojis, onEmojiSelected, baseUrl }, ref) => {
@ -59,14 +65,13 @@ const EmojiSearchbar = React.forwardRef<TextInput, IEmojiSearchbarProps>(
if (!text) getFrequentlyUsedEmojis(); if (!text) getFrequentlyUsedEmojis();
}; };
const renderItem = (emoji: IEmoji) => { const renderItem = (emoji: IEmoji) => (
const emojiSize = 30; <View style={[styles.emojiContainer]}>
return ( <Pressable onPress={() => onEmojiSelected(emoji)}>
<View style={[styles.emojiContainer]}> <Emoji emoji={emoji} baseUrl={baseUrl} />
<Pressable onPress={() => onEmojiSelected(emoji)}>{renderEmoji(emoji, emojiSize, baseUrl)}</Pressable> </Pressable>
</View> </View>
); );
};
return ( return (
<View style={{ borderTopWidth: 1, borderTopColor: colors.borderColor, backgroundColor: colors.backgroundColor }}> <View style={{ borderTopWidth: 1, borderTopColor: colors.borderColor, backgroundColor: colors.backgroundColor }}>
<FlatList <FlatList

5
app/containers/MessageBox/index.tsx
View File

@ -166,7 +166,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
private typingTimeout: any; private typingTimeout: any;
private emojiSearchbarRef: any; private emojiSearchbarRef: React.RefObject<RNTextInput>;
static defaultProps = { static defaultProps = {
message: { message: {
@ -627,7 +627,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
case EventTypes.SEARCH_PRESSED: case EventTypes.SEARCH_PRESSED:
this.setState({ showEmojiKeyboard: false, showEmojiSearchbar: true }); this.setState({ showEmojiKeyboard: false, showEmojiSearchbar: true });
setTimeout(() => { setTimeout(() => {
this.emojiSearchbarRef.current.focus(); this.emojiSearchbarRef.current?.focus();
}, 400); }, 400);
break; break;
default: default:
@ -930,6 +930,7 @@ class MessageBox extends Component<IMessageBoxProps, IMessageBoxState> {
openEmoji = () => { openEmoji = () => {
logEvent(events.ROOM_OPEN_EMOJI); logEvent(events.ROOM_OPEN_EMOJI);
this.setState({ showEmojiKeyboard: true, showEmojiSearchbar: false }); this.setState({ showEmojiKeyboard: true, showEmojiSearchbar: false });
this.stopTrackingMention();
}; };
recordingCallback = (recording: any) => { recordingCallback = (recording: any) => {

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

@ -159,8 +159,7 @@ export default StyleSheet.create({
...sharedStyles.textRegular ...sharedStyles.textRegular
}, },
searchedEmoji: { searchedEmoji: {
backgroundColor: 'transparent', backgroundColor: 'transparent'
color: '#ffffff'
}, },
emojiContainer: { justifyContent: 'center', marginHorizontal: 2 }, emojiContainer: { justifyContent: 'center', marginHorizontal: 2 },
emojiListContainer: { height: 50, paddingHorizontal: 5, marginVertical: 5, flexGrow: 1 }, emojiListContainer: { height: 50, paddingHorizontal: 5, marginVertical: 5, flexGrow: 1 },
@ -172,7 +171,7 @@ export default StyleSheet.create({
alignItems: 'center' alignItems: 'center'
}, },
openEmojiKeyboard: { marginHorizontal: 10, justifyContent: 'center' }, openEmojiKeyboard: { marginHorizontal: 10, justifyContent: 'center' },
emojiSearchbar: { padding: 10, borderRadius: 5 }, emojiSearchbar: { paddingHorizontal: 20, borderRadius: 2, fontSize: 16 },
textInputContainer: { justifyContent: 'center', marginBottom: 0, marginRight: 15 }, textInputContainer: { justifyContent: 'center', marginBottom: 0, marginRight: 15 },
listEmptyComponent: { listEmptyComponent: {
width: '100%', width: '100%',

2
app/views/RoomView/ReactionPicker.tsx
View File

@ -73,7 +73,7 @@ const ReactionPicker = React.memo(({ onEmojiSelected, message, reactionClose }:
}; };
return ( return (
<View style={[styles.reactionPickerContainer]} testID='reaction-picker'> <View style={styles.reactionPickerContainer} testID='reaction-picker'>
<View style={styles.searchbarContainer}> <View style={styles.searchbarContainer}>
<FormTextInput <FormTextInput
autoCapitalize='none' autoCapitalize='none'

27
app/views/RoomView/index.tsx
View File

@ -831,20 +831,19 @@ class RoomView extends React.Component<IRoomViewProps, IRoomViewState> {
showReactionPicker = () => { showReactionPicker = () => {
const { showActionSheet, width, height } = this.props; const { showActionSheet, width, height } = this.props;
const { reacting, selectedMessage } = this.state; const { reacting, selectedMessage } = this.state;
showActionSheet && showActionSheet({
showActionSheet({ children: (
children: ( <ReactionPicker
<ReactionPicker show={reacting}
show={reacting} message={selectedMessage}
message={selectedMessage} onEmojiSelected={this.onReactionPress}
onEmojiSelected={this.onReactionPress} reactionClose={this.onReactionClose}
reactionClose={this.onReactionClose} width={width}
width={width} height={height}
height={height} />
/> ),
), snaps: [400, '100%']
snaps: [400, '100%'] });
});
}; };
onReactionInit = (message: TAnyMessageModel) => { onReactionInit = (message: TAnyMessageModel) => {