diff --git a/README.md b/README.md index bd45bd9..601fffb 100644 --- a/README.md +++ b/README.md @@ -63,6 +63,7 @@ TODO | categoryContainerColor | string | "#e3dbcd" | no | Change category container color | | onCategoryChangeFailed | function | warn(info) | no | Callback on category change failed (info: {index, highestMeasuredFrameIndex, averageItemLength}) | | translation | CategoryTranslation | en | no | Translation object *see translation section* | +| disabledCategory | CategoryTypes[] | [] | no | Hide categories by passing their slugs | ## Internationalization ### Pre-defined Due to the limited translation possibilities, we only provide a few pre-defined translations into the following languages: @@ -94,9 +95,4 @@ translation={{ ``` *If you have written a translation into your language, we strongly encourage you to create a Pull Request and add your language to the package, following the example of other langs.* ## License - **MIT** - -


-## TODO -categories => Specify displayed categories - + **[MIT](/LICENSE)** diff --git a/example/src/App.tsx b/example/src/App.tsx index f3b14b0..49a759c 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import { StyleSheet, Text, SafeAreaView, TouchableOpacity } from 'react-native'; -import EmojiPicker, { pl } from 'react-native-emoji-keyboard'; +import EmojiPicker from 'react-native-emoji-keyboard'; export default function App() { const [result, setResult] = React.useState(); @@ -26,7 +26,6 @@ export default function App() { onEmojiSelected={handlePick} open={isModalOpen} onClose={() => setIsModalOpen(false)} - translation={pl} /> {/* //////////////////////////////////////////// */} diff --git a/src/EmojiKeyboard.tsx b/src/EmojiKeyboard.tsx index 38bc13b..f287928 100644 --- a/src/EmojiKeyboard.tsx +++ b/src/EmojiKeyboard.tsx @@ -15,8 +15,12 @@ import emojisByGroup from './assets/emojis.json'; export const EmojiKeyboard = () => { const { width } = useWindowDimensions(); - const { activeCategoryIndex, containerStyles, onCategoryChangeFailed } = - React.useContext(KeyboardContext); + const { + activeCategoryIndex, + containerStyles, + onCategoryChangeFailed, + disabledCategory, + } = React.useContext(KeyboardContext); const flatListRef = React.useRef(null); @@ -45,7 +49,10 @@ export const EmojiKeyboard = () => { return ( { + const title = category.title as CategoryTypes; + return !disabledCategory.includes(title); + })} keyExtractor={(item: EmojisByCategory) => item.title} renderItem={renderItem} removeClippedSubviews={true} diff --git a/src/KeyboardContext.tsx b/src/KeyboardContext.tsx index 74ff48b..5177200 100644 --- a/src/KeyboardContext.tsx +++ b/src/KeyboardContext.tsx @@ -4,7 +4,7 @@ import { defaultKeyboardContext, defaultKeyboardValues, } from './KeyboardProvider'; -import type { CategoryTranslation, EmojiType } from './types'; +import type { CategoryTranslation, EmojiType, CategoryTypes } from './types'; export type KeyboardProps = { open: boolean; @@ -28,6 +28,7 @@ export type KeyboardProps = { averageItemLength: number; }) => void; translation?: CategoryTranslation; + disabledCategory?: CategoryTypes[]; }; export type ContextValues = { activeCategoryIndex: number; diff --git a/src/KeyboardProvider.tsx b/src/KeyboardProvider.tsx index e1e0d28..7464049 100644 --- a/src/KeyboardProvider.tsx +++ b/src/KeyboardProvider.tsx @@ -32,6 +32,7 @@ export const defaultKeyboardContext: Required = { console.warn(info); }, translation: en, + disabledCategory: [], }; export const defaultKeyboardValues: ContextValues = { diff --git a/src/components/Categories.tsx b/src/components/Categories.tsx index e6b2ec3..a7f8ed9 100644 --- a/src/components/Categories.tsx +++ b/src/components/Categories.tsx @@ -19,15 +19,18 @@ export const Categories = ({ flatListRef, scrollNav }: CategoriesProps) => { activeCategoryIndex, categoryContainerColor, onCategoryChangeFailed, + disabledCategory, } = React.useContext(KeyboardContext); const handleScrollToCategory = React.useCallback( (category: CategoryTypes) => { flatListRef?.current?.scrollToIndex({ - index: CATEGORIES.indexOf(category), + index: CATEGORIES.filter( + (name) => !disabledCategory.includes(name) + ).indexOf(category), }); }, - [flatListRef] + [disabledCategory, flatListRef] ); const rendarItem = React.useCallback( @@ -60,8 +63,15 @@ export const Categories = ({ flatListRef, scrollNav }: CategoriesProps) => { + {console.log( + CATEGORIES_NAVIGATION.filter( + ({ category }) => !disabledCategory.includes(category) + ) + )} !disabledCategory.includes(category) + )} keyExtractor={(item) => item.category} renderItem={rendarItem} ItemSeparatorComponent={() => } diff --git a/src/components/Knob.tsx b/src/components/Knob.tsx index 236b15c..3e7ceaf 100644 --- a/src/components/Knob.tsx +++ b/src/components/Knob.tsx @@ -62,10 +62,10 @@ export const Knob = ({ offsetY, height, onClose }: KnobProps) => { const styles = StyleSheet.create({ knob: { - height: 8, + height: 6, width: 50, backgroundColor: '#fff', - marginBottom: 10, + marginBottom: 6, alignSelf: 'center', borderRadius: 4, shadowColor: 'black',