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

refactor: use better context

This commit is contained in:
Jakub Grzywacz 2021-07-08 10:32:16 +02:00
parent d9635bb135
commit e165a829b7
No known key found for this signature in database
GPG Key ID: 5BBB685871FF63C4
10 changed files with 188 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
src/EmojiKeyboard.tsx
View File

@ -4,36 +4,37 @@ import {
StyleSheet,
View,
FlatList,
ViewStyle,
useWindowDimensions,
Animated,
NativeSyntheticEvent,
NativeScrollEvent,
ViewToken,
} from 'react-native';
import { CATEGORIES, CategoryTypes, EmojiType } from './types';
import { CATEGORIES, CategoryTypes } from './types';
import { EmojiCategory } from './components/EmojiCategory';
import { KeyboardContext } from './KeyboardContext';
import { Categories } from './components/Categories';
type EmojiKeyboardProps = {
onEmojiSelected: (emoji: EmojiType) => void;
containerStyles?: ViewStyle;
numberOfColumns?: number;
emojiSize?: number;
};
export const EmojiKeyboard = ({
onEmojiSelected,
containerStyles,
numberOfColumns = 7,
emojiSize = 28,
}: EmojiKeyboardProps) => {
export const EmojiKeyboard = () => {
const { width } = useWindowDimensions();
const ctx = React.useContext(KeyboardContext);
const flatListRef = React.useRef<FlatList>(null);
const scrollX = React.useRef(new Animated.Value(0)).current;
const scrollNav = React.useRef(new Animated.Value(0)).current;
const onViewableItemsChanged = React.useRef(
({ viewableItems }: { viewableItems: Array<ViewToken> }) => {
if (viewableItems.length > 0 && viewableItems[0].index !== null) {
ctx?.setActiveCategoryIndex(viewableItems[0].index);
}
}
);
const viewabilityConfig = React.useRef({
viewAreaCoveragePercentThreshold: 60,
});
const getItemLayout = (
_: CategoryTypes[] | null | undefined,
index: number
@ -63,33 +64,28 @@ export const EmojiKeyboard = ({
useNativeDriver: false,
}
);
return (
<KeyboardContext.Provider
value={{
onEmojiSelected,
numberOfColumns,
emojiSize,
}}
>
<View style={[styles.container, containerStyles]}>
<FlatList
data={CATEGORIES}
keyExtractor={(item) => item}
renderItem={renderItem}
removeClippedSubviews={true}
ref={flatListRef}
onScrollToIndexFailed={() => {}}
horizontal
showsHorizontalScrollIndicator={false}
pagingEnabled
scrollEventThrottle={16}
decelerationRate="fast"
getItemLayout={getItemLayout}
onScroll={onScroll}
/>
<Categories flatListRef={flatListRef} scrollNav={scrollNav} />
</View>
</KeyboardContext.Provider>
<View style={[styles.container, ctx?.containerStyles]}>
<FlatList
data={CATEGORIES}
keyExtractor={(item) => item}
renderItem={renderItem}
removeClippedSubviews={true}
ref={flatListRef}
onScrollToIndexFailed={() => {}}
horizontal
showsHorizontalScrollIndicator={false}
pagingEnabled
scrollEventThrottle={16}
decelerationRate="fast"
getItemLayout={getItemLayout}
onScroll={onScroll}
onViewableItemsChanged={onViewableItemsChanged.current}
viewabilityConfig={viewabilityConfig.current}
/>
<Categories flatListRef={flatListRef} scrollNav={scrollNav} />
</View>
);
};

72
src/EmojiPicker.tsx
View File

@ -8,9 +8,11 @@ import {
TouchableOpacity,
View,
} from 'react-native';
import type { EmojiKeyboardProps } from './types';
import { EmojiKeyboard } from './EmojiKeyboard';
import { Knob } from './components/Knob';
import { KeyboardProvider } from './KeyboardProvider';
import type { KeyboardProps } from './KeyboardContext';
import type { EmojiType } from './types';
type EmojiPickerProps = {
isOpen: boolean;
@ -21,42 +23,48 @@ export const EmojiPicker = ({
onEmojiSelected,
isOpen,
onClose,
}: EmojiPickerProps & EmojiKeyboardProps) => {
...props
}: EmojiPickerProps & KeyboardProps) => {
const { height: screenHeight } = useWindowDimensions();
const offsetY = React.useRef(new Animated.Value(0)).current;
const height = React.useRef(new Animated.Value(screenHeight * 0.4)).current;
return (
<Modal visible={isOpen} animationType="slide" transparent={true}>
<TouchableOpacity
style={styles.modalContainer}
activeOpacity={1}
onPress={onClose}
>
<View style={[styles.modalContainer, styles.backdrop]}>
<SafeAreaView style={styles.modalContainer}>
<TouchableOpacity activeOpacity={1}>
<>
<Knob height={height} offsetY={offsetY} onClose={onClose} />
<Animated.View
style={{ height: Animated.subtract(height, offsetY) }}
>
<EmojiKeyboard
onEmojiSelected={(emoji) => {
height.setValue(screenHeight * 0.4);
offsetY.setValue(0);
onEmojiSelected(emoji);
onClose();
}}
containerStyles={styles.container}
/>
</Animated.View>
</>
</TouchableOpacity>
</SafeAreaView>
</View>
</TouchableOpacity>
</Modal>
<KeyboardProvider
onEmojiSelected={(emoji: EmojiType) => {
height.setValue(screenHeight * 0.4);
offsetY.setValue(0);
onEmojiSelected(emoji);
onClose();
}}
{...props}
>
<Modal visible={isOpen} animationType="slide" transparent={true}>
<TouchableOpacity
style={styles.modalContainer}
activeOpacity={1}
onPress={onClose}
>
<View style={[styles.modalContainer, styles.backdrop]}>
<SafeAreaView style={styles.modalContainer}>
<TouchableOpacity activeOpacity={1}>
<>
<Knob height={height} offsetY={offsetY} onClose={onClose} />
<Animated.View
style={[
{ height: Animated.subtract(height, offsetY) },
styles.container,
]}
>
<EmojiKeyboard />
</Animated.View>
</>
</TouchableOpacity>
</SafeAreaView>
</View>
</TouchableOpacity>
</Modal>
</KeyboardProvider>
);
};

18
src/KeyboardContext.tsx
View File

@ -1,10 +1,18 @@
import * as React from 'react';
import type { ViewStyle } from 'react-native';
import type { EmojiType } from './types';
export const defaultKeyboardContext = {
onEmojiSelected: (_emoji: EmojiType) => {},
numberOfColumns: 7,
emojiSize: 24,
export type KeyboardProps = {
onEmojiSelected: (emoji: EmojiType) => void;
numberOfColumns?: number;
emojiSize?: number;
containerStyles?: ViewStyle;
};
export type ContextValues = {
activeCategoryIndex: number;
setActiveCategoryIndex: (index: number) => void;
};
export const KeyboardContext = React.createContext(defaultKeyboardContext);
export const KeyboardContext = React.createContext<
(KeyboardProps & ContextValues) | null
>(null);

40
src/KeyboardProvider.tsx Normal file
View File

@ -0,0 +1,40 @@
import * as React from 'react';
import {
KeyboardProps,
ContextValues,
KeyboardContext,
} from './KeyboardContext';
import type { EmojiType } from './types';
type ProviderProps = KeyboardProps & {
children: React.ReactNode;
};
export const defaultKeyboardContext: KeyboardProps = {
onEmojiSelected: (_emoji: EmojiType) => {},
numberOfColumns: 7,
emojiSize: 24,
};
export const defaultKeyboardValues: Partial<ContextValues> = {
// activeCategoryIndex: 0,
};
export const KeyboardProvider: React.FC<ProviderProps> = React.memo((props) => {
const [activeCategoryIndex, setActiveCategoryIndex] = React.useState(0);
const value: KeyboardProps & ContextValues = {
...defaultKeyboardContext,
...defaultKeyboardValues,
...props,
activeCategoryIndex,
setActiveCategoryIndex,
};
return (
<KeyboardContext.Provider value={value}>
{props.children}
</KeyboardContext.Provider>
);
});
KeyboardProvider.displayName = 'KeyboardProvider';

6
src/components/Categories.tsx
View File

@ -1,5 +1,6 @@
import * as React from 'react';
import { View, Animated, StyleSheet, FlatList } from 'react-native';
import { KeyboardContext } from '../KeyboardContext';
import { CATEGORIES, CATEGORIES_NAVIGATION, CategoryTypes } from '../types';
import { CategoryItem } from './CategoryItem';
@ -9,6 +10,7 @@ type CategoriesProps = {
};
export const Categories = ({ flatListRef, scrollNav }: CategoriesProps) => {
const ctx = React.useContext(KeyboardContext);
const handleScrollToCategory = (category: CategoryTypes) => {
flatListRef?.current?.scrollToIndex({
index: CATEGORIES.indexOf(category),
@ -20,9 +22,10 @@ export const Categories = ({ flatListRef, scrollNav }: CategoriesProps) => {
<FlatList
data={CATEGORIES_NAVIGATION}
keyExtractor={(item) => item.category}
renderItem={({ item }) => (
renderItem={({ item, index }) => (
<CategoryItem
item={item}
index={index}
handleScrollToCategory={handleScrollToCategory}
/>
)}
@ -37,6 +40,7 @@ export const Categories = ({ flatListRef, scrollNav }: CategoriesProps) => {
/>
);
}}
extraData={ctx?.activeCategoryIndex}
/>
</View>
</View>

32
src/components/CategoryItem.tsx
View File

@ -1,22 +1,38 @@
import * as React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { View, StyleSheet, TouchableOpacity } from 'react-native';
import { KeyboardContext } from '../KeyboardContext';
import type { CategoryTypes } from '../types';
import { Icon } from './Icon';
type CategoryItemProps = {
item: any;
index: number;
handleScrollToCategory: (category: CategoryTypes) => void;
};
export const CategoryItem = ({
item,
index,
handleScrollToCategory,
}: CategoryItemProps) => (
<TouchableOpacity onPress={() => handleScrollToCategory(item.category)}>
<View style={styles.container}>
<Text style={styles.icon}>{item.icon}</Text>
</View>
</TouchableOpacity>
);
}: CategoryItemProps) => {
const ctx = React.useContext(KeyboardContext);
return (
<TouchableOpacity
onPress={() => {
handleScrollToCategory(item.category);
ctx?.setActiveCategoryIndex(index);
}}
>
<View style={styles.container}>
<Icon
iconName={item.icon}
isActive={ctx?.activeCategoryIndex === index}
/>
</View>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
container: {

8
src/components/EmojiCategory.tsx
View File

@ -16,7 +16,7 @@ export const EmojiCategory = ({ item }: { item: CategoryTypes }) => {
const { width } = useWindowDimensions();
const ctx = React.useContext(KeyboardContext);
const numberOfColumns = React.useRef<number>(
Math.floor(width / (ctx.emojiSize + 16))
Math.floor(width / (ctx?.emojiSize ? ctx?.emojiSize : 0 + 16))
);
const [data, setData] = React.useState<EmojiType[]>([]);
// console.log(width);
@ -31,8 +31,10 @@ export const EmojiCategory = ({ item }: { item: CategoryTypes }) => {
}, [item]);
const getItemLayout = (_: EmojiType[] | null | undefined, index: number) => ({
length: ctx.emojiSize,
offset: ctx.emojiSize * Math.ceil(index / ctx.numberOfColumns),
length: ctx?.emojiSize ? ctx?.emojiSize : 0,
offset:
(ctx?.emojiSize ? ctx?.emojiSize : 0) *
Math.ceil(index / (ctx?.numberOfColumns ? ctx?.numberOfColumns : 1)),
index,
});

4
src/components/SingleEmoji.tsx
View File

@ -7,11 +7,11 @@ export const SingleEmoji = ({ item }: { item: EmojiType }) => {
const ctx = React.useContext(KeyboardContext);
return (
<TouchableOpacity
onPress={() => ctx.onEmojiSelected(item)}
onPress={() => ctx?.onEmojiSelected(item)}
style={styles.container}
>
<View>
<Text style={{ fontSize: ctx.emojiSize }}>{item.emoji}</Text>
<Text style={{ fontSize: ctx?.emojiSize }}>{item.emoji}</Text>
</View>
</TouchableOpacity>
);

3
src/index.tsx
View File

@ -1,6 +1,7 @@
import { EmojiKeyboard } from './EmojiKeyboard';
import { EmojiPicker } from './EmojiPicker';
import { KeyboardProvider } from './KeyboardProvider';
export { EmojiKeyboard };
export { EmojiKeyboard, KeyboardProvider };
export default EmojiPicker;

37
src/types.ts
View File

@ -1,5 +1,3 @@
import type { ViewStyle } from 'react-native';
export type EmojiType = {
emoji: string;
emoji_version: string;
@ -38,20 +36,25 @@ type CategoryNavigationItem = {
};
export const CATEGORIES_NAVIGATION: CategoryNavigationItem[] = [
{ icon: '😀', category: 'Smileys & Emotion' },
{ icon: '👋', category: 'People & Body' },
{ icon: '🐵', category: 'Animals & Nature' },
{ icon: '🍇', category: 'Food & Drink' },
{ icon: '🌍', category: 'Travel & Places' },
{ icon: '🎃', category: 'Activities' },
{ icon: '👓', category: 'Objects' },
{ icon: '🏧', category: 'Symbols' },
{ icon: '🏁', category: 'Flags' },
{ icon: 'Smile', category: 'Smileys & Emotion' },
{ icon: 'Users', category: 'People & Body' },
{ icon: 'Trees', category: 'Animals & Nature' },
{ icon: 'Pizza', category: 'Food & Drink' },
{ icon: 'Plane', category: 'Travel & Places' },
{ icon: 'Football', category: 'Activities' },
{ icon: 'Lightbulb', category: 'Objects' },
{ icon: 'Ban', category: 'Symbols' },
{ icon: 'Flag', category: 'Flags' },
];
export type EmojiKeyboardProps = {
onEmojiSelected: (emoji: EmojiType) => void;
containerStyles?: ViewStyle;
numberOfColumns?: number;
emojiSize?: number;
};
// export const CATEGORIES_NAVIGATION: CategoryNavigationItem[] = [
// { icon: '😀', category: 'Smileys & Emotion' },
// { icon: '👋', category: 'People & Body' },
// { icon: '🐵', category: 'Animals & Nature' },
// { icon: '🍇', category: 'Food & Drink' },
// { icon: '🌍', category: 'Travel & Places' },
// { icon: '🎃', category: 'Activities' },
// { icon: '👓', category: 'Objects' },
// { icon: '🏧', category: 'Symbols' },
// { icon: '🏁', category: 'Flags' },
// ];