status-im
/
rn-emoji-keyboard
mirror of https://github.com/status-im/rn-emoji-keyboard.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: typo and render data

This commit is contained in:
Jakub Grzywacz 2021-07-30 13:43:51 +02:00
parent 55ae233a94
commit 69e05326ce
No known key found for this signature in database
GPG Key ID: 5BBB685871FF63C4
1 changed files with 19 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/Categories.tsx
View File

@ -39,7 +39,7 @@ export const Categories = ({ flatListRef, scrollNav }: CategoriesProps) => {
[disabledCategory, flatListRef]
);
const rendarItem = React.useCallback(
const renderItem = React.useCallback(
({ item, index }: { item: CategoryNavigationItem; index: number }) => (
<CategoryItem
item={item}
@ -66,9 +66,6 @@ export const Categories = ({ flatListRef, scrollNav }: CategoriesProps) => {
),
[activeCategoryContainerColor, scrollNav]
);
const isRecentlyUsedHidden = (category: CategoryTypes) =>
category === 'recently_used' &&
(keyboardState.recentlyUsed.length === 0 || !enableRecentlyUsed);
const getStylesBasedOnPosition = () => {
const style: ViewStyle[] = [styles.navigation];
@ -96,17 +93,29 @@ export const Categories = ({ flatListRef, scrollNav }: CategoriesProps) => {
return style;
};
const renderData = React.useMemo(() => {
const isRecentlyUsedHidden = (category: CategoryTypes) =>
category === 'recently_used' &&
(keyboardState.recentlyUsed.length === 0 || !enableRecentlyUsed);
return CATEGORIES_NAVIGATION.filter(({ category }) => {
if (searchPhrase === '' && category === 'search') return false;
if (isRecentlyUsedHidden(category)) return false;
return !disabledCategory.includes(category);
});
}, [
disabledCategory,
enableRecentlyUsed,
keyboardState.recentlyUsed.length,
searchPhrase,
]);
return (
<View style={[categoryPosition === 'floating' && styles.floating]}>
<View style={getStylesBasedOnPosition()}>
<FlatList
data={CATEGORIES_NAVIGATION.filter(({ category }) => {
if (searchPhrase === '' && category === 'search') return false;
if (isRecentlyUsedHidden(category)) return false;
return !disabledCategory.includes(category);
})}
data={renderData}
keyExtractor={(item) => item.category}
renderItem={rendarItem}
renderItem={renderItem}
ItemSeparatorComponent={() => <View style={styles.separator} />}
showsHorizontalScrollIndicator={false}
horizontal={true}