diff --git a/babel.config.js b/babel.config.js
index f842b77..cf1f9fb 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,3 +1,3 @@
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
-};
+}
diff --git a/example/babel.config.js b/example/babel.config.js
index adea77b..15826b0 100644
--- a/example/babel.config.js
+++ b/example/babel.config.js
@@ -1,5 +1,5 @@
-const path = require('path');
-const pak = require('../package.json');
+const path = require('path')
+const pak = require('../package.json')
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
@@ -14,4 +14,4 @@ module.exports = {
},
],
],
-};
+}
diff --git a/example/index.tsx b/example/index.tsx
index 117ddca..5c5c0c5 100644
--- a/example/index.tsx
+++ b/example/index.tsx
@@ -1,5 +1,5 @@
-import { AppRegistry } from 'react-native';
-import App from './src/App';
-import { name as appName } from './app.json';
+import { AppRegistry } from 'react-native'
+import App from './src/App'
+import { name as appName } from './app.json'
-AppRegistry.registerComponent(appName, () => App);
+AppRegistry.registerComponent(appName, () => App)
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
index f0b82c9..d0040bb 100644
--- a/example/ios/Podfile.lock
+++ b/example/ios/Podfile.lock
@@ -494,8 +494,8 @@ SPEC CHECKSUMS:
Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
Flipper-RSocket: d9d9ade67cbecf6ac10730304bf5607266dd2541
FlipperKit: 57764956d2f0f972c1af5075a9c8f05ca5b12349
- Folly: b73c3869541e86821df3c387eb0af5f65addfab4
- glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3
+ Folly: aeb27d02cdff07ca01f8a8a5a6dd5bcaf6be6f70
+ glog: 2ad46e202fbaa5641fceb4b2af37dcd88fd8762d
libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
OpenSSL-Universal: 1aa4f6a6ee7256b83db99ec1ccdaa80d10f9af9b
RCTRequired: 082f10cd3f905d6c124597fd1c14f6f2655ff65e
diff --git a/example/metro.config.js b/example/metro.config.js
index d1f468a..f5c2a95 100644
--- a/example/metro.config.js
+++ b/example/metro.config.js
@@ -1,13 +1,13 @@
-const path = require('path');
-const blacklist = require('metro-config/src/defaults/blacklist');
-const escape = require('escape-string-regexp');
-const pak = require('../package.json');
+const path = require('path')
+const blacklist = require('metro-config/src/defaults/blacklist')
+const escape = require('escape-string-regexp')
+const pak = require('../package.json')
-const root = path.resolve(__dirname, '..');
+const root = path.resolve(__dirname, '..')
const modules = Object.keys({
...pak.peerDependencies,
-});
+})
module.exports = {
projectRoot: __dirname,
@@ -17,15 +17,12 @@ module.exports = {
// So we blacklist them at the root, and alias them to the versions in example's node_modules
resolver: {
blacklistRE: blacklist(
- modules.map(
- (m) =>
- new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`)
- )
+ modules.map((m) => new RegExp(`^${escape(path.join(root, 'node_modules', m))}\\/.*$`))
),
extraNodeModules: modules.reduce((acc, name) => {
- acc[name] = path.join(__dirname, 'node_modules', name);
- return acc;
+ acc[name] = path.join(__dirname, 'node_modules', name)
+ return acc
}, {}),
},
@@ -37,4 +34,4 @@ module.exports = {
},
}),
},
-};
+}
diff --git a/example/src/App.tsx b/example/src/App.tsx
index b9eef64..d039d2b 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -1,20 +1,20 @@
-import 'react-native-gesture-handler';
-import * as React from 'react';
-import { NavigationContainer } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
-import Examples from './Examples/Examples';
-import Basic from './Basic/Basic';
-import Dark from './Dark/Dark';
-import Translated from './Translated/Translated';
-import DisabledCategories from './DisabledCategories/DisabledCategories';
-import StaticModal from './StaticModal/StaticModal';
-import Static from './Static/Static';
-import EnableRecently from './EnableRecently/EnableRecently';
-import TopCategory from './TopCategory/TopCategory';
-import BottomCategory from './BottomCategory/BottomCategory';
-import SearchBar from './SearchBar/SearchBar';
+import 'react-native-gesture-handler'
+import * as React from 'react'
+import { NavigationContainer } from '@react-navigation/native'
+import { createStackNavigator } from '@react-navigation/stack'
+import Examples from './Examples/Examples'
+import Basic from './Basic/Basic'
+import Dark from './Dark/Dark'
+import Translated from './Translated/Translated'
+import DisabledCategories from './DisabledCategories/DisabledCategories'
+import StaticModal from './StaticModal/StaticModal'
+import Static from './Static/Static'
+import EnableRecently from './EnableRecently/EnableRecently'
+import TopCategory from './TopCategory/TopCategory'
+import BottomCategory from './BottomCategory/BottomCategory'
+import SearchBar from './SearchBar/SearchBar'
-const Stack = createStackNavigator();
+const Stack = createStackNavigator()
export default () => {
return (
@@ -27,13 +27,10 @@ export default () => {
-
+
- );
-};
+ )
+}
diff --git a/example/src/Basic/Basic.tsx b/example/src/Basic/Basic.tsx
index 3bfb3a6..97fe077 100644
--- a/example/src/Basic/Basic.tsx
+++ b/example/src/Basic/Basic.tsx
@@ -1,18 +1,18 @@
-import * as React from 'react';
-import { StyleSheet, Text, TouchableOpacity } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import EmojiPicker from 'rn-emoji-keyboard';
-import type { EmojiType } from 'src/types';
+import * as React from 'react'
+import { StyleSheet, Text, TouchableOpacity } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import EmojiPicker from 'rn-emoji-keyboard'
+import type { EmojiType } from 'src/types'
const Basic = () => {
- const [result, setResult] = React.useState();
- const [isModalOpen, setIsModalOpen] = React.useState(false);
+ const [result, setResult] = React.useState()
+ const [isModalOpen, setIsModalOpen] = React.useState(false)
const handlePick = (emoji: EmojiType) => {
- console.log(emoji);
- setResult(emoji.emoji);
- setIsModalOpen((prev) => !prev);
- };
+ console.log(emoji)
+ setResult(emoji.emoji)
+ setIsModalOpen((prev) => !prev)
+ }
return (
Result: {result}
@@ -26,8 +26,8 @@ const Basic = () => {
onClose={() => setIsModalOpen(false)}
/>
- );
-};
+ )
+}
const styles = StyleSheet.create({
container: {
@@ -38,6 +38,6 @@ const styles = StyleSheet.create({
margin: 64,
fontSize: 18,
},
-});
+})
-export default Basic;
+export default Basic
diff --git a/example/src/BottomCategory/BottomCategory.tsx b/example/src/BottomCategory/BottomCategory.tsx
index 6247895..54adb04 100644
--- a/example/src/BottomCategory/BottomCategory.tsx
+++ b/example/src/BottomCategory/BottomCategory.tsx
@@ -1,17 +1,17 @@
-import * as React from 'react';
-import { StyleSheet, Text, TouchableOpacity } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import EmojiPicker from 'rn-emoji-keyboard';
-import type { EmojiType } from 'src/types';
+import * as React from 'react'
+import { StyleSheet, Text, TouchableOpacity } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import EmojiPicker from 'rn-emoji-keyboard'
+import type { EmojiType } from 'src/types'
const BottomCategory = () => {
- const [result, setResult] = React.useState();
- const [isModalOpen, setIsModalOpen] = React.useState(false);
+ const [result, setResult] = React.useState()
+ const [isModalOpen, setIsModalOpen] = React.useState(false)
const handlePick = (emoji: EmojiType) => {
- setResult(emoji.emoji);
- setIsModalOpen((prev) => !prev);
- };
+ setResult(emoji.emoji)
+ setIsModalOpen((prev) => !prev)
+ }
return (
Result: {result}
@@ -26,8 +26,8 @@ const BottomCategory = () => {
categoryPosition="bottom"
/>
- );
-};
+ )
+}
const styles = StyleSheet.create({
container: {
@@ -38,6 +38,6 @@ const styles = StyleSheet.create({
margin: 64,
fontSize: 18,
},
-});
+})
-export default BottomCategory;
+export default BottomCategory
diff --git a/example/src/Dark/Dark.tsx b/example/src/Dark/Dark.tsx
index a122a81..2a4969b 100644
--- a/example/src/Dark/Dark.tsx
+++ b/example/src/Dark/Dark.tsx
@@ -1,18 +1,18 @@
-import * as React from 'react';
-import { StyleSheet, Text, TouchableOpacity } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import EmojiPicker from 'rn-emoji-keyboard';
-import type { EmojiType } from 'src/types';
+import * as React from 'react'
+import { StyleSheet, Text, TouchableOpacity } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import EmojiPicker from 'rn-emoji-keyboard'
+import type { EmojiType } from 'src/types'
const Dark = () => {
- const [result, setResult] = React.useState();
- const [isModalOpen, setIsModalOpen] = React.useState(false);
+ const [result, setResult] = React.useState()
+ const [isModalOpen, setIsModalOpen] = React.useState(false)
const handlePick = (emoji: EmojiType) => {
- console.log(emoji);
- setResult(emoji.emoji);
- setIsModalOpen((prev) => !prev);
- };
+ console.log(emoji)
+ setResult(emoji.emoji)
+ setIsModalOpen((prev) => !prev)
+ }
return (
Result: {result}
@@ -34,8 +34,8 @@ const Dark = () => {
headerStyles={styles.headerStyles}
/>
- );
-};
+ )
+}
const styles = StyleSheet.create({
container: {
@@ -58,6 +58,6 @@ const styles = StyleSheet.create({
color: '#fff',
fontSize: 16,
},
-});
+})
-export default Dark;
+export default Dark
diff --git a/example/src/DisabledCategories/DisabledCategories.tsx b/example/src/DisabledCategories/DisabledCategories.tsx
index 3d6f72d..6d3a794 100644
--- a/example/src/DisabledCategories/DisabledCategories.tsx
+++ b/example/src/DisabledCategories/DisabledCategories.tsx
@@ -1,18 +1,18 @@
-import * as React from 'react';
-import { StyleSheet, Text, TouchableOpacity } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import EmojiPicker from 'rn-emoji-keyboard';
-import type { EmojiType } from 'src/types';
+import * as React from 'react'
+import { StyleSheet, Text, TouchableOpacity } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import EmojiPicker from 'rn-emoji-keyboard'
+import type { EmojiType } from 'src/types'
const DisabledCategories = () => {
- const [result, setResult] = React.useState();
- const [isModalOpen, setIsModalOpen] = React.useState(false);
+ const [result, setResult] = React.useState()
+ const [isModalOpen, setIsModalOpen] = React.useState(false)
const handlePick = (emoji: EmojiType) => {
- console.log(emoji);
- setResult(emoji.emoji);
- setIsModalOpen((prev) => !prev);
- };
+ console.log(emoji)
+ setResult(emoji.emoji)
+ setIsModalOpen((prev) => !prev)
+ }
return (
Result: {result}
@@ -27,8 +27,8 @@ const DisabledCategories = () => {
disabledCategory={['activities', 'flags', 'objects', 'symbols']}
/>
- );
-};
+ )
+}
const styles = StyleSheet.create({
container: {
@@ -39,6 +39,6 @@ const styles = StyleSheet.create({
margin: 64,
fontSize: 18,
},
-});
+})
-export default DisabledCategories;
+export default DisabledCategories
diff --git a/example/src/EnableRecently/EnableRecently.tsx b/example/src/EnableRecently/EnableRecently.tsx
index 6ab7d68..7494898 100644
--- a/example/src/EnableRecently/EnableRecently.tsx
+++ b/example/src/EnableRecently/EnableRecently.tsx
@@ -1,18 +1,18 @@
-import * as React from 'react';
-import { StyleSheet, Text, TouchableOpacity } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import EmojiPicker from 'rn-emoji-keyboard';
-import type { EmojiType } from 'src/types';
+import * as React from 'react'
+import { StyleSheet, Text, TouchableOpacity } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import EmojiPicker from 'rn-emoji-keyboard'
+import type { EmojiType } from 'src/types'
const EnableRecently = () => {
- const [result, setResult] = React.useState();
- const [isModalOpen, setIsModalOpen] = React.useState(false);
+ const [result, setResult] = React.useState()
+ const [isModalOpen, setIsModalOpen] = React.useState(false)
const handlePick = (emoji: EmojiType) => {
- console.log(emoji);
- setResult(emoji.emoji);
- setIsModalOpen((prev) => !prev);
- };
+ console.log(emoji)
+ setResult(emoji.emoji)
+ setIsModalOpen((prev) => !prev)
+ }
return (
Result: {result}
@@ -27,8 +27,8 @@ const EnableRecently = () => {
enableRecentlyUsed
/>
- );
-};
+ )
+}
const styles = StyleSheet.create({
container: {
@@ -39,6 +39,6 @@ const styles = StyleSheet.create({
margin: 64,
fontSize: 18,
},
-});
+})
-export default EnableRecently;
+export default EnableRecently
diff --git a/example/src/Examples/Examples.tsx b/example/src/Examples/Examples.tsx
index 3f744b3..f07c0cd 100644
--- a/example/src/Examples/Examples.tsx
+++ b/example/src/Examples/Examples.tsx
@@ -1,23 +1,23 @@
-import * as React from 'react';
-import { View, Button } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import type { StackScreenProps } from '@react-navigation/stack';
+import * as React from 'react'
+import { View, Button } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import type { StackScreenProps } from '@react-navigation/stack'
type RootStackParamList = {
- Examples: undefined;
- Basic: undefined;
- Dark: undefined;
- Translated: undefined;
- DisabledCategories: undefined;
- StaticModal: undefined;
- Static: undefined;
- EnableRecently: undefined;
- TopCategory: undefined;
- BottomCategory: undefined;
- SearchBar: undefined;
-};
+ Examples: undefined
+ Basic: undefined
+ Dark: undefined
+ Translated: undefined
+ DisabledCategories: undefined
+ StaticModal: undefined
+ Static: undefined
+ EnableRecently: undefined
+ TopCategory: undefined
+ BottomCategory: undefined
+ SearchBar: undefined
+}
-type Props = StackScreenProps;
+type Props = StackScreenProps
const Examples = ({ navigation }: Props) => {
return (
@@ -25,10 +25,7 @@ const Examples = ({ navigation }: Props) => {
- );
-};
-export default Examples;
+ )
+}
+export default Examples
diff --git a/example/src/SearchBar/SearchBar.tsx b/example/src/SearchBar/SearchBar.tsx
index 0266bae..6c924a7 100644
--- a/example/src/SearchBar/SearchBar.tsx
+++ b/example/src/SearchBar/SearchBar.tsx
@@ -1,18 +1,18 @@
-import * as React from 'react';
-import { StyleSheet, Text, TouchableOpacity } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import EmojiPicker from 'rn-emoji-keyboard';
-import type { EmojiType } from 'src/types';
+import * as React from 'react'
+import { StyleSheet, Text, TouchableOpacity } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import EmojiPicker from 'rn-emoji-keyboard'
+import type { EmojiType } from 'src/types'
const SearchBar = () => {
- const [result, setResult] = React.useState();
- const [isModalOpen, setIsModalOpen] = React.useState(false);
+ const [result, setResult] = React.useState()
+ const [isModalOpen, setIsModalOpen] = React.useState(false)
const handlePick = (emoji: EmojiType) => {
- console.log(emoji);
- setResult(emoji.emoji);
- setIsModalOpen((prev) => !prev);
- };
+ console.log(emoji)
+ setResult(emoji.emoji)
+ setIsModalOpen((prev) => !prev)
+ }
return (
Result: {result}
@@ -27,8 +27,8 @@ const SearchBar = () => {
enableSearchBar
/>
- );
-};
+ )
+}
const styles = StyleSheet.create({
container: {
@@ -39,6 +39,6 @@ const styles = StyleSheet.create({
margin: 64,
fontSize: 18,
},
-});
+})
-export default SearchBar;
+export default SearchBar
diff --git a/example/src/Static/Static.tsx b/example/src/Static/Static.tsx
index a3e18e0..5d9860a 100644
--- a/example/src/Static/Static.tsx
+++ b/example/src/Static/Static.tsx
@@ -1,29 +1,26 @@
-import * as React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { EmojiKeyboard } from 'rn-emoji-keyboard';
-import type { EmojiType } from 'src/types';
+import * as React from 'react'
+import { StyleSheet, Text, View } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import { EmojiKeyboard } from 'rn-emoji-keyboard'
+import type { EmojiType } from 'src/types'
const Static = () => {
- const [result, setResult] = React.useState();
+ const [result, setResult] = React.useState()
const handlePick = (emoji: EmojiType) => {
- setResult(emoji.emoji);
- };
+ setResult(emoji.emoji)
+ }
return (
Result: {result}
-
+
- );
-};
+ )
+}
const styles = StyleSheet.create({
container: {
@@ -37,6 +34,6 @@ const styles = StyleSheet.create({
keyboardContainer: {
borderRadius: 0,
},
-});
+})
-export default Static;
+export default Static
diff --git a/example/src/StaticModal/StaticModal.tsx b/example/src/StaticModal/StaticModal.tsx
index e1d3476..00bd52c 100644
--- a/example/src/StaticModal/StaticModal.tsx
+++ b/example/src/StaticModal/StaticModal.tsx
@@ -1,18 +1,18 @@
-import * as React from 'react';
-import { StyleSheet, Text, TouchableOpacity } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import EmojiPicker from 'rn-emoji-keyboard';
-import type { EmojiType } from 'src/types';
+import * as React from 'react'
+import { StyleSheet, Text, TouchableOpacity } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import EmojiPicker from 'rn-emoji-keyboard'
+import type { EmojiType } from 'src/types'
const StaticModal = () => {
- const [result, setResult] = React.useState();
- const [isModalOpen, setIsModalOpen] = React.useState(false);
+ const [result, setResult] = React.useState()
+ const [isModalOpen, setIsModalOpen] = React.useState(false)
const handlePick = (emoji: EmojiType) => {
- console.log(emoji);
- setResult(emoji.emoji);
- setIsModalOpen((prev) => !prev);
- };
+ console.log(emoji)
+ setResult(emoji.emoji)
+ setIsModalOpen((prev) => !prev)
+ }
return (
Result: {result}
@@ -28,8 +28,8 @@ const StaticModal = () => {
defaultHeight="65%"
/>
- );
-};
+ )
+}
const styles = StyleSheet.create({
container: {
@@ -40,6 +40,6 @@ const styles = StyleSheet.create({
margin: 64,
fontSize: 18,
},
-});
+})
-export default StaticModal;
+export default StaticModal
diff --git a/example/src/TopCategory/TopCategory.tsx b/example/src/TopCategory/TopCategory.tsx
index e9799c3..c087d5e 100644
--- a/example/src/TopCategory/TopCategory.tsx
+++ b/example/src/TopCategory/TopCategory.tsx
@@ -1,17 +1,17 @@
-import * as React from 'react';
-import { StyleSheet, Text, TouchableOpacity } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import EmojiPicker from 'rn-emoji-keyboard';
-import type { EmojiType } from 'src/types';
+import * as React from 'react'
+import { StyleSheet, Text, TouchableOpacity } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import EmojiPicker from 'rn-emoji-keyboard'
+import type { EmojiType } from 'src/types'
const TopCategory = () => {
- const [result, setResult] = React.useState();
- const [isModalOpen, setIsModalOpen] = React.useState(false);
+ const [result, setResult] = React.useState()
+ const [isModalOpen, setIsModalOpen] = React.useState(false)
const handlePick = (emoji: EmojiType) => {
- setResult(emoji.emoji);
- setIsModalOpen((prev) => !prev);
- };
+ setResult(emoji.emoji)
+ setIsModalOpen((prev) => !prev)
+ }
return (
Result: {result}
@@ -26,8 +26,8 @@ const TopCategory = () => {
categoryPosition="top"
/>
- );
-};
+ )
+}
const styles = StyleSheet.create({
container: {
@@ -38,6 +38,6 @@ const styles = StyleSheet.create({
margin: 64,
fontSize: 18,
},
-});
+})
-export default TopCategory;
+export default TopCategory
diff --git a/example/src/Translated/Translated.tsx b/example/src/Translated/Translated.tsx
index 4f7dd4a..1cd575d 100644
--- a/example/src/Translated/Translated.tsx
+++ b/example/src/Translated/Translated.tsx
@@ -1,18 +1,18 @@
-import * as React from 'react';
-import { StyleSheet, Text, TouchableOpacity } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import EmojiPicker, { pl } from 'rn-emoji-keyboard';
-import type { EmojiType } from 'src/types';
+import * as React from 'react'
+import { StyleSheet, Text, TouchableOpacity } from 'react-native'
+import { SafeAreaView } from 'react-native-safe-area-context'
+import EmojiPicker, { pl } from 'rn-emoji-keyboard'
+import type { EmojiType } from 'src/types'
const Translated = () => {
- const [result, setResult] = React.useState();
- const [isModalOpen, setIsModalOpen] = React.useState(false);
+ const [result, setResult] = React.useState()
+ const [isModalOpen, setIsModalOpen] = React.useState(false)
const handlePick = (emoji: EmojiType) => {
- console.log(emoji);
- setResult(emoji.emoji);
- setIsModalOpen((prev) => !prev);
- };
+ console.log(emoji)
+ setResult(emoji.emoji)
+ setIsModalOpen((prev) => !prev)
+ }
return (
Emotka: {result}
@@ -27,8 +27,8 @@ const Translated = () => {
translation={pl}
/>
- );
-};
+ )
+}
const styles = StyleSheet.create({
container: {
@@ -39,6 +39,6 @@ const styles = StyleSheet.create({
margin: 64,
fontSize: 18,
},
-});
+})
-export default Translated;
+export default Translated
diff --git a/package.json b/package.json
index 46d3162..64c7b40 100644
--- a/package.json
+++ b/package.json
@@ -52,6 +52,7 @@
"@commitlint/config-conventional": "^11.0.0",
"@react-native-community/eslint-config": "^2.0.0",
"@release-it/conventional-changelog": "^2.0.0",
+ "@twgdev/prettier-config": "^1.0.2",
"@types/jest": "^26.0.0",
"@types/react": "^16.9.19",
"@types/react-native": "0.62.13",
@@ -116,31 +117,13 @@
"extends": [
"@react-native-community",
"prettier"
- ],
- "rules": {
- "prettier/prettier": [
- "error",
- {
- "quoteProps": "consistent",
- "singleQuote": true,
- "tabWidth": 2,
- "trailingComma": "es5",
- "useTabs": false
- }
- ]
- }
+ ]
},
"eslintIgnore": [
"node_modules/",
"lib/"
],
- "prettier": {
- "quoteProps": "consistent",
- "singleQuote": true,
- "tabWidth": 2,
- "trailingComma": "es5",
- "useTabs": false
- },
+ "prettier": "@twgdev/prettier-config",
"react-native-builder-bob": {
"source": "src",
"output": "lib",
diff --git a/scripts/bootstrap.js b/scripts/bootstrap.js
index 6ba193d..940b424 100644
--- a/scripts/bootstrap.js
+++ b/scripts/bootstrap.js
@@ -1,24 +1,24 @@
-const path = require('path');
-const child_process = require('child_process');
+const path = require('path')
+const child_process = require('child_process')
-const root = path.resolve(__dirname, '..');
-const args = process.argv.slice(2);
+const root = path.resolve(__dirname, '..')
+const args = process.argv.slice(2)
const options = {
cwd: process.cwd(),
env: process.env,
stdio: 'inherit',
encoding: 'utf-8',
-};
+}
-let result;
+let result
if (process.cwd() !== root || args.length) {
// We're not in the root of the project, or additional arguments were passed
// In this case, forward the command to `yarn`
- result = child_process.spawnSync('yarn', args, options);
+ result = child_process.spawnSync('yarn', args, options)
} else {
// If `yarn` is run without arguments, perform bootstrap
- result = child_process.spawnSync('yarn', ['bootstrap'], options);
+ result = child_process.spawnSync('yarn', ['bootstrap'], options)
}
-process.exitCode = result.status;
+process.exitCode = result.status
diff --git a/scripts/generateIcons.js b/scripts/generateIcons.js
index c557359..55b5363 100644
--- a/scripts/generateIcons.js
+++ b/scripts/generateIcons.js
@@ -1,24 +1,20 @@
-const json = require('unicode-emoji-json/data-by-group.json');
-const fs = require('fs');
+const json = require('unicode-emoji-json/data-by-group.json')
+const fs = require('fs')
-const newArray = [];
+const newArray = []
for (const [key, value] of Object.entries(json)) {
const newData = value.map((emoji) => ({
emoji: emoji.emoji,
name: emoji.name,
v: emoji.unicode_version,
- }));
+ }))
newArray.push({
title: key.replace(' & ', '_').replace(' ', '_').toLocaleLowerCase(),
data: newData,
- });
+ })
}
-fs.writeFile(
- './src/assets/emojis.json',
- JSON.stringify(newArray),
- function (err) {
- if (err) return console.log(err);
- console.log('emojis.json successfully saved to assets folder');
- }
-);
+fs.writeFile('./src/assets/emojis.json', JSON.stringify(newArray), function (err) {
+ if (err) return console.log(err)
+ console.log('emojis.json successfully saved to assets folder')
+})
diff --git a/src/EmojiKeyboard.tsx b/src/EmojiKeyboard.tsx
index 2faedb7..227e104 100644
--- a/src/EmojiKeyboard.tsx
+++ b/src/EmojiKeyboard.tsx
@@ -1,19 +1,16 @@
-import * as React from 'react';
-import { EmojiStaticKeyboard } from './components/EmojiStaticKeyboard';
-import { KeyboardProvider } from './contexts/KeyboardProvider';
-import type {
- KeyboardProps,
- OnEmojiSelected,
-} from './contexts/KeyboardContext';
+import * as React from 'react'
+import { EmojiStaticKeyboard } from './components/EmojiStaticKeyboard'
+import { KeyboardProvider } from './contexts/KeyboardProvider'
+import type { KeyboardProps, OnEmojiSelected } from './contexts/KeyboardContext'
type EmojiKeyboardProps = {
- onEmojiSelected: OnEmojiSelected;
-} & Partial;
+ onEmojiSelected: OnEmojiSelected
+} & Partial
export const EmojiKeyboard = (props: EmojiKeyboardProps) => {
return (
- );
-};
+ )
+}
diff --git a/src/EmojiPicker.tsx b/src/EmojiPicker.tsx
index ebe5e99..ec07fea 100644
--- a/src/EmojiPicker.tsx
+++ b/src/EmojiPicker.tsx
@@ -1,15 +1,12 @@
-import * as React from 'react';
-import { Animated, useWindowDimensions } from 'react-native';
-import { EmojiStaticKeyboard } from './components/EmojiStaticKeyboard';
-import { Knob } from './components/Knob';
-import {
- defaultKeyboardContext,
- KeyboardProvider,
-} from './contexts/KeyboardProvider';
-import type { KeyboardProps } from './contexts/KeyboardContext';
-import type { EmojiType } from './types';
-import { ModalWithBackdrop } from './components/ModalWithBackdrop';
-import { getHeight } from './utils';
+import * as React from 'react'
+import { Animated, useWindowDimensions } from 'react-native'
+import { EmojiStaticKeyboard } from './components/EmojiStaticKeyboard'
+import { Knob } from './components/Knob'
+import { defaultKeyboardContext, KeyboardProvider } from './contexts/KeyboardProvider'
+import type { KeyboardProps } from './contexts/KeyboardContext'
+import type { EmojiType } from './types'
+import { ModalWithBackdrop } from './components/ModalWithBackdrop'
+import { getHeight } from './utils'
export const EmojiPicker = ({
onEmojiSelected,
@@ -19,55 +16,49 @@ export const EmojiPicker = ({
defaultHeight = defaultKeyboardContext.defaultHeight,
...props
}: KeyboardProps) => {
- const { height: screenHeight } = useWindowDimensions();
- const offsetY = React.useRef(new Animated.Value(0)).current;
- const height = React.useRef(
- new Animated.Value(getHeight(defaultHeight, screenHeight))
- ).current;
- const translateY = React.useRef(new Animated.Value(0)).current;
+ const { height: screenHeight } = useWindowDimensions()
+ const offsetY = React.useRef(new Animated.Value(0)).current
+ const height = React.useRef(new Animated.Value(getHeight(defaultHeight, screenHeight))).current
+ const translateY = React.useRef(new Animated.Value(0)).current
React.useEffect(() => {
Animated.timing(translateY, {
toValue: open ? 0 : screenHeight,
useNativeDriver: true,
duration: 500,
- }).start();
- }, [open, screenHeight, translateY]);
+ }).start()
+ }, [open, screenHeight, translateY])
const close = () => {
- height.setValue(getHeight(defaultHeight, screenHeight));
- offsetY.setValue(0);
- onClose();
- };
+ height.setValue(getHeight(defaultHeight, screenHeight))
+ offsetY.setValue(0)
+ onClose()
+ }
return (
{
- onEmojiSelected(emoji);
- close();
+ onEmojiSelected(emoji)
+ close()
}}
open={open}
onClose={close}
expandable={expandable}
defaultHeight={defaultHeight}
- {...props}
- >
+ {...props}>
<>
- {expandable && (
-
- )}
+ {expandable && }
+ ]}>
- );
-};
+ )
+}
diff --git a/src/assets/Ban.tsx b/src/assets/Ban.tsx
index eb33902..29621e0 100644
--- a/src/assets/Ban.tsx
+++ b/src/assets/Ban.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import Svg, { FillProps, Path } from 'react-native-svg';
+import * as React from 'react'
+import Svg, { FillProps, Path } from 'react-native-svg'
export default ({ fill }: FillProps) => (
-);
+)
diff --git a/src/assets/Clock.tsx b/src/assets/Clock.tsx
index 1532feb..c3d67fa 100644
--- a/src/assets/Clock.tsx
+++ b/src/assets/Clock.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import Svg, { FillProps, Path } from 'react-native-svg';
+import * as React from 'react'
+import Svg, { FillProps, Path } from 'react-native-svg'
export default ({ fill }: FillProps) => (
-);
+)
diff --git a/src/assets/Close.tsx b/src/assets/Close.tsx
index 9cf89b0..cd61530 100644
--- a/src/assets/Close.tsx
+++ b/src/assets/Close.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import Svg, { FillProps, Path } from 'react-native-svg';
+import * as React from 'react'
+import Svg, { FillProps, Path } from 'react-native-svg'
export default ({ fill }: FillProps) => (
-);
+)
diff --git a/src/assets/Flag.tsx b/src/assets/Flag.tsx
index 54d5a67..30f0642 100644
--- a/src/assets/Flag.tsx
+++ b/src/assets/Flag.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import Svg, { FillProps, Path } from 'react-native-svg';
+import * as React from 'react'
+import Svg, { FillProps, Path } from 'react-native-svg'
export default ({ fill }: FillProps) => (
-);
+)
diff --git a/src/assets/Football.tsx b/src/assets/Football.tsx
index 8c60977..2b1f910 100644
--- a/src/assets/Football.tsx
+++ b/src/assets/Football.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import Svg, { FillProps, Path } from 'react-native-svg';
+import * as React from 'react'
+import Svg, { FillProps, Path } from 'react-native-svg'
export default ({ fill }: FillProps) => (
-);
+)
diff --git a/src/assets/Lightbulb.tsx b/src/assets/Lightbulb.tsx
index ba91c79..a7af132 100644
--- a/src/assets/Lightbulb.tsx
+++ b/src/assets/Lightbulb.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import Svg, { FillProps, Path } from 'react-native-svg';
+import * as React from 'react'
+import Svg, { FillProps, Path } from 'react-native-svg'
export default ({ fill }: FillProps) => (
-);
+)
diff --git a/src/assets/Pizza.tsx b/src/assets/Pizza.tsx
index 34b6611..329d675 100644
--- a/src/assets/Pizza.tsx
+++ b/src/assets/Pizza.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import Svg, { FillProps, Path } from 'react-native-svg';
+import * as React from 'react'
+import Svg, { FillProps, Path } from 'react-native-svg'
export default ({ fill }: FillProps) => (
-);
+)
diff --git a/src/assets/Plane.tsx b/src/assets/Plane.tsx
index b732f02..893714b 100644
--- a/src/assets/Plane.tsx
+++ b/src/assets/Plane.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import Svg, { FillProps, Path } from 'react-native-svg';
+import * as React from 'react'
+import Svg, { FillProps, Path } from 'react-native-svg'
export default ({ fill }: FillProps) => (
-);
+)
diff --git a/src/assets/Search.tsx b/src/assets/Search.tsx
index b420114..9b53d74 100644
--- a/src/assets/Search.tsx
+++ b/src/assets/Search.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import Svg, { FillProps, Path } from 'react-native-svg';
+import * as React from 'react'
+import Svg, { FillProps, Path } from 'react-native-svg'
export default ({ fill }: FillProps) => (
-);
+)
diff --git a/src/assets/Smile.tsx b/src/assets/Smile.tsx
index fb161e8..f88fece 100644
--- a/src/assets/Smile.tsx
+++ b/src/assets/Smile.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import Svg, { FillProps, Path } from 'react-native-svg';
+import * as React from 'react'
+import Svg, { FillProps, Path } from 'react-native-svg'
export default ({ fill }: FillProps) => (
-);
+)
diff --git a/src/assets/Trees.tsx b/src/assets/Trees.tsx
index 39e028f..18778c6 100644
--- a/src/assets/Trees.tsx
+++ b/src/assets/Trees.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import Svg, { FillProps, Path } from 'react-native-svg';
+import * as React from 'react'
+import Svg, { FillProps, Path } from 'react-native-svg'
export default ({ fill }: FillProps) => (
-);
+)
diff --git a/src/assets/Users.tsx b/src/assets/Users.tsx
index a7cfa56..f9ddb87 100644
--- a/src/assets/Users.tsx
+++ b/src/assets/Users.tsx
@@ -1,5 +1,5 @@
-import * as React from 'react';
-import Svg, { FillProps, Path } from 'react-native-svg';
+import * as React from 'react'
+import Svg, { FillProps, Path } from 'react-native-svg'
export default ({ fill }: FillProps) => (
-);
+)
diff --git a/src/components/Categories.tsx b/src/components/Categories.tsx
index c22bb3e..5a3d1bc 100644
--- a/src/components/Categories.tsx
+++ b/src/components/Categories.tsx
@@ -1,20 +1,16 @@
-import * as React from 'react';
-import { Animated, FlatList, StyleSheet, View, ViewStyle } from 'react-native';
-import { useKeyboardStore } from '../store/useKeyboardStore';
-import { defaultKeyboardContext } from '../contexts/KeyboardProvider';
-import { KeyboardContext } from '../contexts/KeyboardContext';
-import {
- CATEGORIES_NAVIGATION,
- CategoryNavigationItem,
- CategoryTypes,
-} from '../types';
-import { CategoryItem } from './CategoryItem';
-import { exhaustiveTypeCheck, getCategoryIndex } from '../utils';
+import * as React from 'react'
+import { Animated, FlatList, StyleSheet, View, ViewStyle } from 'react-native'
+import { useKeyboardStore } from '../store/useKeyboardStore'
+import { defaultKeyboardContext } from '../contexts/KeyboardProvider'
+import { KeyboardContext } from '../contexts/KeyboardContext'
+import { CATEGORIES_NAVIGATION, CategoryNavigationItem, CategoryTypes } from '../types'
+import { CategoryItem } from './CategoryItem'
+import { exhaustiveTypeCheck, getCategoryIndex } from '../utils'
type CategoriesProps = {
- flatListRef: React.RefObject;
- scrollNav: Animated.Value;
-};
+ flatListRef: React.RefObject
+ scrollNav: Animated.Value
+}
export const Categories = ({ flatListRef, scrollNav }: CategoriesProps) => {
const {
@@ -26,27 +22,21 @@ export const Categories = ({ flatListRef, scrollNav }: CategoriesProps) => {
enableRecentlyUsed,
categoryPosition,
searchPhrase,
- } = React.useContext(KeyboardContext);
- const { keyboardState } = useKeyboardStore();
+ } = React.useContext(KeyboardContext)
+ const { keyboardState } = useKeyboardStore()
const handleScrollToCategory = React.useCallback(
(category: CategoryTypes) => {
- flatListRef?.current?.scrollToIndex(
- getCategoryIndex(disabledCategory, category)
- );
+ flatListRef?.current?.scrollToIndex(getCategoryIndex(disabledCategory, category))
},
[disabledCategory, flatListRef]
- );
+ )
const renderItem = React.useCallback(
({ item, index }: { item: CategoryNavigationItem; index: number }) => (
-
+
),
[handleScrollToCategory]
- );
+ )
const activeIndicator = React.useCallback(
() => (
@@ -63,51 +53,45 @@ export const Categories = ({ flatListRef, scrollNav }: CategoriesProps) => {
/>
),
[activeCategoryContainerColor, scrollNav]
- );
+ )
const getStylesBasedOnPosition = () => {
- const style: ViewStyle[] = [styles.navigation];
+ const style: ViewStyle[] = [styles.navigation]
switch (categoryPosition) {
case 'floating':
- style.push(styles.navigationFloating);
- break;
+ style.push(styles.navigationFloating)
+ break
case 'top':
- style.push(styles.navigationTop);
- break;
+ style.push(styles.navigationTop)
+ break
case 'bottom':
- style.push(styles.navigationBottom);
- break;
+ style.push(styles.navigationBottom)
+ break
default:
- exhaustiveTypeCheck(categoryPosition);
- break;
+ exhaustiveTypeCheck(categoryPosition)
+ break
}
if (
- categoryContainerColor !==
- defaultKeyboardContext.categoryContainerColor ||
+ categoryContainerColor !== defaultKeyboardContext.categoryContainerColor ||
categoryPosition === 'floating'
)
style.push({
backgroundColor: categoryContainerColor,
- });
- return style;
- };
+ })
+ return style
+ }
const renderData = React.useMemo(() => {
const isRecentlyUsedHidden = (category: CategoryTypes) =>
category === 'recently_used' &&
- (keyboardState.recentlyUsed.length === 0 || !enableRecentlyUsed);
+ (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,
- ]);
+ if (searchPhrase === '' && category === 'search') return false
+ if (isRecentlyUsedHidden(category)) return false
+ return !disabledCategory.includes(category)
+ })
+ }, [disabledCategory, enableRecentlyUsed, keyboardState.recentlyUsed.length, searchPhrase])
return (
@@ -126,8 +110,8 @@ export const Categories = ({ flatListRef, scrollNav }: CategoriesProps) => {
/>
- );
-};
+ )
+}
const styles = StyleSheet.create({
floating: {
@@ -175,4 +159,4 @@ const styles = StyleSheet.create({
width: 28,
height: 28,
},
-});
+})
diff --git a/src/components/CategoryItem.tsx b/src/components/CategoryItem.tsx
index 8f1c39a..bd809b0 100644
--- a/src/components/CategoryItem.tsx
+++ b/src/components/CategoryItem.tsx
@@ -1,31 +1,23 @@
-import * as React from 'react';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { KeyboardContext } from '../contexts/KeyboardContext';
-import type { CategoryNavigationItem, CategoryTypes } from '../types';
-import { Icon } from './Icon';
+import * as React from 'react'
+import { View, StyleSheet, TouchableOpacity } from 'react-native'
+import { KeyboardContext } from '../contexts/KeyboardContext'
+import type { CategoryNavigationItem, CategoryTypes } from '../types'
+import { Icon } from './Icon'
type CategoryItemProps = {
- item: CategoryNavigationItem;
- index: number;
- handleScrollToCategory: (category: CategoryTypes) => void;
-};
+ item: CategoryNavigationItem
+ index: number
+ handleScrollToCategory: (category: CategoryTypes) => void
+}
-export const CategoryItem = ({
- item,
- index,
- handleScrollToCategory,
-}: CategoryItemProps) => {
- const {
- activeCategoryIndex,
- categoryColor,
- activeCategoryColor,
- setActiveCategoryIndex,
- } = React.useContext(KeyboardContext);
+export const CategoryItem = ({ item, index, handleScrollToCategory }: CategoryItemProps) => {
+ const { activeCategoryIndex, categoryColor, activeCategoryColor, setActiveCategoryIndex } =
+ React.useContext(KeyboardContext)
const handleSelect = () => {
- handleScrollToCategory(item.category);
- setActiveCategoryIndex(index);
- };
+ handleScrollToCategory(item.category)
+ setActiveCategoryIndex(index)
+ }
return (
@@ -38,8 +30,8 @@ export const CategoryItem = ({
/>
- );
-};
+ )
+}
const styles = StyleSheet.create({
container: {
@@ -51,4 +43,4 @@ const styles = StyleSheet.create({
borderRadius: 6,
},
icon: { textAlign: 'center' },
-});
+})
diff --git a/src/components/EmojiCategory.tsx b/src/components/EmojiCategory.tsx
index 77e88f5..570a19f 100644
--- a/src/components/EmojiCategory.tsx
+++ b/src/components/EmojiCategory.tsx
@@ -1,24 +1,20 @@
-import * as React from 'react';
+import * as React from 'react'
-import { StyleSheet, View, Text, FlatList } from 'react-native';
-import type { EmojisByCategory, EmojiType, JsonEmoji } from '../types';
-import { SingleEmoji } from './SingleEmoji';
-import { KeyboardContext } from '../contexts/KeyboardContext';
-import { useKeyboardStore } from '../store/useKeyboardStore';
-import { parseEmoji } from '../utils';
+import { StyleSheet, View, Text, FlatList } from 'react-native'
+import type { EmojisByCategory, EmojiType, JsonEmoji } from '../types'
+import { SingleEmoji } from './SingleEmoji'
+import { KeyboardContext } from '../contexts/KeyboardContext'
+import { useKeyboardStore } from '../store/useKeyboardStore'
+import { parseEmoji } from '../utils'
const emptyEmoji = {
emoji: '',
name: 'blank emoji',
slug: 'blank_emoji',
unicode_version: '0',
-};
+}
-export const EmojiCategory = ({
- item: { title, data },
-}: {
- item: EmojisByCategory;
-}) => {
+export const EmojiCategory = ({ item: { title, data } }: { item: EmojisByCategory }) => {
const {
onEmojiSelected,
emojiSize,
@@ -28,55 +24,47 @@ export const EmojiCategory = ({
headerStyles,
translation,
categoryPosition,
- } = React.useContext(KeyboardContext);
+ } = React.useContext(KeyboardContext)
- const { setKeyboardState } = useKeyboardStore();
+ const { setKeyboardState } = useKeyboardStore()
- const [empty, setEmpty] = React.useState([]);
+ const [empty, setEmpty] = React.useState([])
React.useEffect(() => {
if (data.length % numberOfColumns) {
- const fillWithEmpty = new Array(
- numberOfColumns - (data.length % numberOfColumns)
- ).fill(emptyEmoji);
- setEmpty(fillWithEmpty);
+ const fillWithEmpty = new Array(numberOfColumns - (data.length % numberOfColumns)).fill(
+ emptyEmoji
+ )
+ setEmpty(fillWithEmpty)
}
- }, [numberOfColumns, data]);
+ }, [numberOfColumns, data])
const getItemLayout = (_: EmojiType[] | null | undefined, index: number) => ({
length: emojiSize ? emojiSize : 0,
offset: emojiSize * Math.ceil(index / numberOfColumns),
index,
- });
+ })
const handleEmojiPress = React.useCallback(
(emoji: JsonEmoji) => {
- if (emoji.name === 'blank emoji') return;
- const parsedEmoji = parseEmoji(emoji);
- onEmojiSelected(parsedEmoji);
- setKeyboardState({ type: 'RECENT_EMOJI_ADD', payload: emoji });
+ if (emoji.name === 'blank emoji') return
+ const parsedEmoji = parseEmoji(emoji)
+ onEmojiSelected(parsedEmoji)
+ setKeyboardState({ type: 'RECENT_EMOJI_ADD', payload: emoji })
},
[onEmojiSelected, setKeyboardState]
- );
+ )
const renderItem = React.useCallback(
(props) => (
- handleEmojiPress(props.item)}
- emojiSize={emojiSize}
- />
+ handleEmojiPress(props.item)} emojiSize={emojiSize} />
),
[emojiSize, handleEmojiPress]
- );
+ )
return (
- {!hideHeader && (
-
- {translation[title]}
-
- )}
+ {!hideHeader && {translation[title]}}
emoji.name}
@@ -85,19 +73,13 @@ export const EmojiCategory = ({
removeClippedSubviews={true}
getItemLayout={getItemLayout}
ListFooterComponent={() => (
-
+
)}
windowSize={20}
/>
- );
-};
+ )
+}
const styles = StyleSheet.create({
container: {
@@ -113,4 +95,4 @@ const styles = StyleSheet.create({
},
footer: { height: 8 },
footerFloating: { height: 70 },
-});
+})
diff --git a/src/components/EmojiStaticKeyboard.tsx b/src/components/EmojiStaticKeyboard.tsx
index aed7dfc..f6078cd 100644
--- a/src/components/EmojiStaticKeyboard.tsx
+++ b/src/components/EmojiStaticKeyboard.tsx
@@ -1,24 +1,18 @@
-import * as React from 'react';
+import * as React from 'react'
-import {
- StyleSheet,
- View,
- FlatList,
- useWindowDimensions,
- Animated,
-} from 'react-native';
-import type { CategoryTypes, EmojisByCategory } from '../types';
-import { EmojiCategory } from './EmojiCategory';
-import { KeyboardContext } from '../contexts/KeyboardContext';
-import { Categories } from './Categories';
-import emojisByGroup from '../assets/emojis.json';
-import { SearchBar } from './SearchBar';
-import { useKeyboardStore } from '../store/useKeyboardStore';
+import { StyleSheet, View, FlatList, useWindowDimensions, Animated } from 'react-native'
+import type { CategoryTypes, EmojisByCategory } from '../types'
+import { EmojiCategory } from './EmojiCategory'
+import { KeyboardContext } from '../contexts/KeyboardContext'
+import { Categories } from './Categories'
+import emojisByGroup from '../assets/emojis.json'
+import { SearchBar } from './SearchBar'
+import { useKeyboardStore } from '../store/useKeyboardStore'
-const CATEGORY_ELEMENT_WIDTH = 37;
+const CATEGORY_ELEMENT_WIDTH = 37
export const EmojiStaticKeyboard = () => {
- const { width } = useWindowDimensions();
+ const { width } = useWindowDimensions()
const {
activeCategoryIndex,
containerStyles,
@@ -29,41 +23,35 @@ export const EmojiStaticKeyboard = () => {
searchPhrase,
setActiveCategoryIndex,
enableRecentlyUsed,
- } = React.useContext(KeyboardContext);
- const { keyboardState } = useKeyboardStore();
- const flatListRef = React.useRef(null);
- const scrollNav = React.useRef(new Animated.Value(0)).current;
+ } = React.useContext(KeyboardContext)
+ const { keyboardState } = useKeyboardStore()
+ const flatListRef = React.useRef(null)
+ const scrollNav = React.useRef(new Animated.Value(0)).current
- const getItemLayout = (
- _: CategoryTypes[] | null | undefined,
- index: number
- ) => ({
+ const getItemLayout = (_: CategoryTypes[] | null | undefined, index: number) => ({
length: width,
offset: width * index,
index,
- });
+ })
- const renderItem = React.useCallback(
- (props) => ,
- []
- );
+ const renderItem = React.useCallback((props) => , [])
React.useEffect(() => {
Animated.spring(scrollNav, {
toValue: activeCategoryIndex * CATEGORY_ELEMENT_WIDTH,
useNativeDriver: true,
- }).start();
- }, [activeCategoryIndex, scrollNav]);
+ }).start()
+ }, [activeCategoryIndex, scrollNav])
const renderList = React.useMemo(() => {
const data = emojisByGroup.filter((category) => {
- const title = category.title as CategoryTypes;
- return !disabledCategory.includes(title);
- });
+ const title = category.title as CategoryTypes
+ return !disabledCategory.includes(title)
+ })
if (keyboardState.recentlyUsed.length && enableRecentlyUsed) {
data.push({
title: 'recently_used',
data: keyboardState.recentlyUsed,
- });
+ })
}
data.push({
title: 'search',
@@ -71,24 +59,19 @@ export const EmojiStaticKeyboard = () => {
.map((group) => group.data)
.flat()
.filter((emoji) => {
- if (searchPhrase && searchPhrase.length < 2) return false;
- return emoji.name.toLowerCase().includes(searchPhrase.toLowerCase());
+ if (searchPhrase && searchPhrase.length < 2) return false
+ return emoji.name.toLowerCase().includes(searchPhrase.toLowerCase())
}),
- });
- return data;
- }, [
- disabledCategory,
- enableRecentlyUsed,
- keyboardState.recentlyUsed,
- searchPhrase,
- ]);
+ })
+ return data
+ }, [disabledCategory, enableRecentlyUsed, keyboardState.recentlyUsed, searchPhrase])
React.useEffect(() => {
if (searchPhrase !== '') {
- flatListRef.current?.scrollToEnd();
- setActiveCategoryIndex(renderList.length - 1);
+ flatListRef.current?.scrollToEnd()
+ setActiveCategoryIndex(renderList.length - 1)
}
- }, [renderList, searchPhrase, setActiveCategoryIndex]);
+ }, [renderList, searchPhrase, setActiveCategoryIndex])
return (
{
styles.containerShadow,
categoryPosition === 'top' && styles.containerReverse,
containerStyles,
- ]}
- >
+ ]}>
{enableSearchBar && }
{
/>
- );
-};
+ )
+}
const styles = StyleSheet.create({
container: {
@@ -137,4 +119,4 @@ const styles = StyleSheet.create({
shadowRadius: 5,
elevation: 10,
},
-});
+})
diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx
index fbee30a..841da1a 100644
--- a/src/components/Icon.tsx
+++ b/src/components/Icon.tsx
@@ -1,18 +1,18 @@
-import * as React from 'react';
-import Flag from '../assets/Flag';
-import Football from '../assets/Football';
-import Lightbulb from '../assets/Lightbulb';
-import Pizza from '../assets/Pizza';
-import Plane from '../assets/Plane';
-import Smile from '../assets/Smile';
-import Trees from '../assets/Trees';
-import Ban from '../assets/Ban';
-import Users from '../assets/Users';
-import Search from '../assets/Search';
-import Close from '../assets/Close';
-import Clock from '../assets/Clock';
-import type { IconNames } from '../types';
-import { exhaustiveTypeCheck } from '../utils';
+import * as React from 'react'
+import Flag from '../assets/Flag'
+import Football from '../assets/Football'
+import Lightbulb from '../assets/Lightbulb'
+import Pizza from '../assets/Pizza'
+import Plane from '../assets/Plane'
+import Smile from '../assets/Smile'
+import Trees from '../assets/Trees'
+import Ban from '../assets/Ban'
+import Users from '../assets/Users'
+import Search from '../assets/Search'
+import Close from '../assets/Close'
+import Clock from '../assets/Clock'
+import type { IconNames } from '../types'
+import { exhaustiveTypeCheck } from '../utils'
export const Icon = ({
iconName,
@@ -20,39 +20,39 @@ export const Icon = ({
normalColor,
activeColor,
}: {
- iconName: IconNames | 'Close';
- isActive: boolean;
- normalColor: string;
- activeColor: string;
+ iconName: IconNames | 'Close'
+ isActive: boolean
+ normalColor: string
+ activeColor: string
}) => {
- const color = isActive ? activeColor : normalColor;
+ const color = isActive ? activeColor : normalColor
switch (iconName) {
case 'Smile':
- return ;
+ return
case 'Trees':
- return ;
+ return
case 'Pizza':
- return ;
+ return
case 'Plane':
- return ;
+ return
case 'Football':
- return ;
+ return
case 'Lightbulb':
- return ;
+ return
case 'Flag':
- return ;
+ return
case 'Ban':
- return ;
+ return
case 'Users':
- return ;
+ return
case 'Search':
- return ;
+ return
case 'Close':
- return ;
+ return
case 'Clock':
- return ;
+ return
default:
- exhaustiveTypeCheck(iconName);
- return null;
+ exhaustiveTypeCheck(iconName)
+ return null
}
-};
+}
diff --git a/src/components/Knob.tsx b/src/components/Knob.tsx
index 73174d4..cf12fd3 100644
--- a/src/components/Knob.tsx
+++ b/src/components/Knob.tsx
@@ -1,24 +1,17 @@
-import * as React from 'react';
-import {
- Animated,
- useWindowDimensions,
- StyleSheet,
- View,
- PanResponder,
-} from 'react-native';
-import { getHeight } from '../utils';
-import { KeyboardContext } from '../contexts/KeyboardContext';
+import * as React from 'react'
+import { Animated, useWindowDimensions, StyleSheet, View, PanResponder } from 'react-native'
+import { getHeight } from '../utils'
+import { KeyboardContext } from '../contexts/KeyboardContext'
type KnobProps = {
- offsetY: Animated.Value;
- height: Animated.Value;
- onClose: () => void;
-};
+ offsetY: Animated.Value
+ height: Animated.Value
+ onClose: () => void
+}
export const Knob = ({ offsetY, height, onClose }: KnobProps) => {
- const { height: screenHeight } = useWindowDimensions();
- const { expandedHeight, defaultHeight, knobStyles } =
- React.useContext(KeyboardContext);
+ const { height: screenHeight } = useWindowDimensions()
+ const { expandedHeight, defaultHeight, knobStyles } = React.useContext(KeyboardContext)
const panResponder = React.useRef(
PanResponder.create({
@@ -34,28 +27,28 @@ export const Knob = ({ offsetY, height, onClose }: KnobProps) => {
Animated.spring(offsetY, {
useNativeDriver: false,
toValue: 0,
- }).start();
+ }).start()
if (gestureState.dy < -50) {
Animated.spring(height, {
useNativeDriver: false,
toValue: getHeight(expandedHeight, screenHeight),
- }).start();
+ }).start()
} else if (gestureState.dy > 150) {
- height.setValue(getHeight(defaultHeight, screenHeight));
- offsetY.setValue(0);
- onClose();
+ height.setValue(getHeight(defaultHeight, screenHeight))
+ offsetY.setValue(0)
+ onClose()
} else {
Animated.spring(height, {
useNativeDriver: false,
toValue: getHeight(defaultHeight, screenHeight),
- }).start();
+ }).start()
}
},
onShouldBlockNativeResponder: () => {
- return true;
+ return true
},
})
- ).current;
+ ).current
return (
@@ -63,8 +56,8 @@ export const Knob = ({ offsetY, height, onClose }: KnobProps) => {
- );
-};
+ )
+}
const styles = StyleSheet.create({
panContainer: {
@@ -86,4 +79,4 @@ const styles = StyleSheet.create({
shadowOffset: { width: 0, height: 0 },
shadowRadius: 5,
},
-});
+})
diff --git a/src/components/ModalWithBackdrop.tsx b/src/components/ModalWithBackdrop.tsx
index f820a74..d0c09ed 100644
--- a/src/components/ModalWithBackdrop.tsx
+++ b/src/components/ModalWithBackdrop.tsx
@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from 'react'
import {
SafeAreaView,
Modal,
@@ -7,58 +7,47 @@ import {
StyleSheet,
TouchableOpacity,
View,
-} from 'react-native';
-import { KeyboardContext } from '../contexts/KeyboardContext';
-import { useTimeout } from '../hooks/useTimeout';
+} from 'react-native'
+import { KeyboardContext } from '../contexts/KeyboardContext'
+import { useTimeout } from '../hooks/useTimeout'
type ModalWithBackdropProps = {
- isOpen: boolean;
- backdropPress: () => void;
- children: React.ReactNode;
-};
+ isOpen: boolean
+ backdropPress: () => void
+ children: React.ReactNode
+}
-export const ModalWithBackdrop = ({
- isOpen,
- backdropPress,
- children,
-}: ModalWithBackdropProps) => {
- const { height: screenHeight } = useWindowDimensions();
- const translateY = React.useRef(new Animated.Value(screenHeight)).current;
- const { backdropColor } = React.useContext(KeyboardContext);
- const handleTimeout = useTimeout();
+export const ModalWithBackdrop = ({ isOpen, backdropPress, children }: ModalWithBackdropProps) => {
+ const { height: screenHeight } = useWindowDimensions()
+ const translateY = React.useRef(new Animated.Value(screenHeight)).current
+ const { backdropColor } = React.useContext(KeyboardContext)
+ const handleTimeout = useTimeout()
React.useEffect(() => {
Animated.spring(translateY, {
toValue: isOpen ? 0 : screenHeight,
useNativeDriver: true,
- }).start();
- }, [isOpen, screenHeight, translateY]);
+ }).start()
+ }, [isOpen, screenHeight, translateY])
const handleClose = () => {
Animated.spring(translateY, {
toValue: screenHeight,
useNativeDriver: true,
- }).start();
- handleTimeout(() => backdropPress(), 200);
- };
+ }).start()
+ handleTimeout(() => backdropPress(), 200)
+ }
return (
-
-
+
+
+ }}>
{children}
@@ -66,8 +55,8 @@ export const ModalWithBackdrop = ({
- );
-};
+ )
+}
const styles = StyleSheet.create({
modalContainer: { flex: 1, justifyContent: 'flex-end' },
@@ -80,4 +69,4 @@ const styles = StyleSheet.create({
shadowRadius: 5,
elevation: 10,
},
-});
+})
diff --git a/src/components/SearchBar.tsx b/src/components/SearchBar.tsx
index 0870fea..bd40c84 100644
--- a/src/components/SearchBar.tsx
+++ b/src/components/SearchBar.tsx
@@ -1,17 +1,11 @@
-import * as React from 'react';
-import {
- View,
- StyleSheet,
- TextInput,
- TouchableOpacity,
- FlatList,
-} from 'react-native';
-import { KeyboardContext } from '../contexts/KeyboardContext';
-import { Icon } from './Icon';
+import * as React from 'react'
+import { View, StyleSheet, TextInput, TouchableOpacity, FlatList } from 'react-native'
+import { KeyboardContext } from '../contexts/KeyboardContext'
+import { Icon } from './Icon'
type SearchBarProps = {
- flatListRef: React.RefObject;
-};
+ flatListRef: React.RefObject
+}
export const SearchBar = ({ flatListRef }: SearchBarProps) => {
const {
@@ -23,18 +17,18 @@ export const SearchBar = ({ flatListRef }: SearchBarProps) => {
searchBarStyles,
searchBarTextStyles,
searchBarPlaceholderColor,
- } = React.useContext(KeyboardContext);
- const inputRef = React.useRef(null);
+ } = React.useContext(KeyboardContext)
+ const inputRef = React.useRef(null)
const handleSearch = (text: string) => {
- setSearchPhrase(text);
- };
+ setSearchPhrase(text)
+ }
const clearPhrase = () => {
- setSearchPhrase('');
- inputRef.current?.blur();
- setActiveCategoryIndex(0);
- flatListRef?.current?.scrollToIndex({ index: 0, animated: true });
- };
+ setSearchPhrase('')
+ inputRef.current?.blur()
+ setActiveCategoryIndex(0)
+ flatListRef?.current?.scrollToIndex({ index: 0, animated: true })
+ }
return (
@@ -57,8 +51,8 @@ export const SearchBar = ({ flatListRef }: SearchBarProps) => {
)}
- );
-};
+ )
+}
const styles = StyleSheet.create({
container: {
@@ -78,4 +72,4 @@ const styles = StyleSheet.create({
button: {
marginRight: 8,
},
-});
+})
diff --git a/src/components/SingleEmoji.tsx b/src/components/SingleEmoji.tsx
index acffa58..f3d8704 100644
--- a/src/components/SingleEmoji.tsx
+++ b/src/components/SingleEmoji.tsx
@@ -1,28 +1,28 @@
-import * as React from 'react';
-import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
-import type { JsonEmoji } from '../types';
+import * as React from 'react'
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'
+import type { JsonEmoji } from '../types'
export class SingleEmoji extends React.Component<{
- item: JsonEmoji;
- onPress: () => void;
- emojiSize: number;
+ item: JsonEmoji
+ onPress: () => void
+ emojiSize: number
}> {
shouldComponentUpdate() {
- return false;
+ return false
}
render() {
- const { item, emojiSize, onPress } = this.props;
+ const { item, emojiSize, onPress } = this.props
return (
{item.emoji}
- );
+ )
}
}
const styles = StyleSheet.create({
container: { flex: 1, padding: 8 },
iconContainer: { justifyContent: 'center', alignItems: 'center' },
-});
+})
diff --git a/src/contexts/KeyboardContext.tsx b/src/contexts/KeyboardContext.tsx
index f8923f6..ef4574e 100644
--- a/src/contexts/KeyboardContext.tsx
+++ b/src/contexts/KeyboardContext.tsx
@@ -1,62 +1,52 @@
-import * as React from 'react';
-import type { TextStyle, ViewStyle } from 'react-native';
-import {
- defaultKeyboardContext,
- defaultKeyboardValues,
-} from './KeyboardProvider';
-import type {
- CategoryTranslation,
- EmojiType,
- CategoryTypes,
- CategoryPosition,
-} from '../types';
+import * as React from 'react'
+import type { TextStyle, ViewStyle } from 'react-native'
+import { defaultKeyboardContext, defaultKeyboardValues } from './KeyboardProvider'
+import type { CategoryTranslation, EmojiType, CategoryTypes, CategoryPosition } from '../types'
-export type OnEmojiSelected = (emoji: EmojiType) => void;
+export type OnEmojiSelected = (emoji: EmojiType) => void
export type KeyboardProps = {
- open: boolean;
- onClose: () => void;
- onEmojiSelected: OnEmojiSelected;
- emojiSize?: number;
- containerStyles?: ViewStyle;
- knobStyles?: ViewStyle;
- headerStyles?: TextStyle;
- expandable?: boolean;
- hideHeader?: boolean;
- defaultHeight?: number | string;
- expandedHeight?: number | string;
- backdropColor?: string;
- categoryColor?: string;
- activeCategoryColor?: string;
- categoryContainerColor?: string;
- activeCategoryContainerColor?: string;
+ open: boolean
+ onClose: () => void
+ onEmojiSelected: OnEmojiSelected
+ emojiSize?: number
+ containerStyles?: ViewStyle
+ knobStyles?: ViewStyle
+ headerStyles?: TextStyle
+ expandable?: boolean
+ hideHeader?: boolean
+ defaultHeight?: number | string
+ expandedHeight?: number | string
+ backdropColor?: string
+ categoryColor?: string
+ activeCategoryColor?: string
+ categoryContainerColor?: string
+ activeCategoryContainerColor?: string
onCategoryChangeFailed?: (info: {
- index: number;
- highestMeasuredFrameIndex: number;
- averageItemLength: number;
- }) => void;
- translation?: CategoryTranslation;
- disabledCategory?: CategoryTypes[];
- enableRecentlyUsed?: boolean;
- categoryPosition?: CategoryPosition;
- enableSearchBar?: boolean;
- closeSearchColor?: string;
- searchBarStyles?: ViewStyle;
- searchBarTextStyles?: TextStyle;
- searchBarPlaceholderColor?: string;
-};
+ index: number
+ highestMeasuredFrameIndex: number
+ averageItemLength: number
+ }) => void
+ translation?: CategoryTranslation
+ disabledCategory?: CategoryTypes[]
+ enableRecentlyUsed?: boolean
+ categoryPosition?: CategoryPosition
+ enableSearchBar?: boolean
+ closeSearchColor?: string
+ searchBarStyles?: ViewStyle
+ searchBarTextStyles?: TextStyle
+ searchBarPlaceholderColor?: string
+}
export type ContextValues = {
- activeCategoryIndex: number;
- setActiveCategoryIndex: (index: number) => void;
- numberOfColumns: number;
- width: number;
- searchPhrase: string;
- setSearchPhrase: (phrase: string) => void;
-};
+ activeCategoryIndex: number
+ setActiveCategoryIndex: (index: number) => void
+ numberOfColumns: number
+ width: number
+ searchPhrase: string
+ setSearchPhrase: (phrase: string) => void
+}
-export const KeyboardContext = React.createContext<
- Required & ContextValues
->({
+export const KeyboardContext = React.createContext & ContextValues>({
...defaultKeyboardContext,
...defaultKeyboardValues,
-});
+})
diff --git a/src/contexts/KeyboardProvider.tsx b/src/contexts/KeyboardProvider.tsx
index f80ef3d..9a0b74b 100644
--- a/src/contexts/KeyboardProvider.tsx
+++ b/src/contexts/KeyboardProvider.tsx
@@ -1,18 +1,13 @@
-import * as React from 'react';
-import { useWindowDimensions } from 'react-native';
-import {
- KeyboardProps,
- ContextValues,
- KeyboardContext,
- OnEmojiSelected,
-} from './KeyboardContext';
-import en from '../translation/en';
-import type { EmojiType } from '../types';
+import * as React from 'react'
+import { useWindowDimensions } from 'react-native'
+import { KeyboardProps, ContextValues, KeyboardContext, OnEmojiSelected } from './KeyboardContext'
+import en from '../translation/en'
+import type { EmojiType } from '../types'
type ProviderProps = Partial & {
- children: React.ReactNode;
- onEmojiSelected: OnEmojiSelected;
-};
+ children: React.ReactNode
+ onEmojiSelected: OnEmojiSelected
+}
export const defaultKeyboardContext: Required = {
open: false,
@@ -32,7 +27,7 @@ export const defaultKeyboardContext: Required = {
categoryContainerColor: '#e3dbcd',
activeCategoryContainerColor: '#ffffff',
onCategoryChangeFailed: (info) => {
- console.warn(info);
+ console.warn(info)
},
translation: en,
disabledCategory: [],
@@ -43,7 +38,7 @@ export const defaultKeyboardContext: Required = {
searchBarStyles: {},
searchBarTextStyles: {},
searchBarPlaceholderColor: '#00000055',
-};
+}
export const defaultKeyboardValues: ContextValues = {
activeCategoryIndex: 0,
@@ -52,25 +47,19 @@ export const defaultKeyboardValues: ContextValues = {
width: 0,
searchPhrase: '',
setSearchPhrase: (_phrase: string) => {},
-};
+}
export const KeyboardProvider: React.FC = React.memo((props) => {
- const { width } = useWindowDimensions();
- const [activeCategoryIndex, setActiveCategoryIndex] = React.useState(0);
- const [searchPhrase, setSearchPhrase] = React.useState('');
+ const { width } = useWindowDimensions()
+ const [activeCategoryIndex, setActiveCategoryIndex] = React.useState(0)
+ const [searchPhrase, setSearchPhrase] = React.useState('')
const numberOfColumns = React.useRef(
- Math.floor(
- width /
- ((props.emojiSize
- ? props.emojiSize
- : defaultKeyboardContext.emojiSize) *
- 2)
- )
- );
+ Math.floor(width / ((props.emojiSize ? props.emojiSize : defaultKeyboardContext.emojiSize) * 2))
+ )
React.useEffect(() => {
- if (props.open) setActiveCategoryIndex(0);
- setSearchPhrase('');
- }, [props.open]);
+ if (props.open) setActiveCategoryIndex(0)
+ setSearchPhrase('')
+ }, [props.open])
const value: Required & ContextValues = {
...defaultKeyboardContext,
@@ -82,12 +71,8 @@ export const KeyboardProvider: React.FC = React.memo((props) => {
width,
searchPhrase,
setSearchPhrase,
- };
- return (
-
- {props.children}
-
- );
-});
+ }
+ return {props.children}
+})
-KeyboardProvider.displayName = 'KeyboardProvider';
+KeyboardProvider.displayName = 'KeyboardProvider'
diff --git a/src/hooks/useTimeout.ts b/src/hooks/useTimeout.ts
index 7c330c9..1220cce 100644
--- a/src/hooks/useTimeout.ts
+++ b/src/hooks/useTimeout.ts
@@ -1,19 +1,17 @@
-import { MutableRefObject, useCallback, useEffect, useRef } from 'react';
+import { MutableRefObject, useCallback, useEffect, useRef } from 'react'
export const useTimeout = () => {
- const timeoutRef = useRef(null) as MutableRefObject | null>;
+ const timeoutRef = useRef(null) as MutableRefObject | null>
useEffect(() => {
return () => {
if (timeoutRef.current) {
- clearTimeout(timeoutRef.current);
+ clearTimeout(timeoutRef.current)
}
- };
- }, []);
+ }
+ }, [])
return useCallback((callback: () => void, time: number) => {
- timeoutRef.current = setTimeout(callback, time);
- }, []);
-};
+ timeoutRef.current = setTimeout(callback, time)
+ }, [])
+}
diff --git a/src/index.tsx b/src/index.tsx
index 0802c3f..bc7c76b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,9 +1,9 @@
-import { EmojiPicker } from './EmojiPicker';
-import { EmojiKeyboard } from './EmojiKeyboard';
-import en from './translation/en';
-import pl from './translation/pl';
+import { EmojiPicker } from './EmojiPicker'
+import { EmojiKeyboard } from './EmojiKeyboard'
+import en from './translation/en'
+import pl from './translation/pl'
-export { EmojiKeyboard };
-export { en, pl };
+export { EmojiKeyboard }
+export { en, pl }
-export default EmojiPicker;
+export default EmojiPicker
diff --git a/src/store/reducers/RecentEmojiReducer.ts b/src/store/reducers/RecentEmojiReducer.ts
index 7b0581e..0e2d8d5 100644
--- a/src/store/reducers/RecentEmojiReducer.ts
+++ b/src/store/reducers/RecentEmojiReducer.ts
@@ -1,13 +1,13 @@
-import type { JsonEmoji } from 'src/types';
+import type { JsonEmoji } from 'src/types'
export type RecentEmojiState = {
- recentlyUsed: JsonEmoji[];
-};
+ recentlyUsed: JsonEmoji[]
+}
export type RecentEmojiAction =
| { type: 'RECENT_EMOJI_ADD'; payload: JsonEmoji }
| { type: 'RECENT_EMOJI_REMOVE'; payload: JsonEmoji }
- | { type: 'RECENT_EMOJI_CLEAR' };
+ | { type: 'RECENT_EMOJI_CLEAR' }
export default function recentEmojiReducer(
state: RecentEmojiState,
@@ -18,18 +18,18 @@ export default function recentEmojiReducer(
return {
...state,
recentlyUsed: [action.payload, ...filterEmoji(state, action.payload)],
- };
+ }
case 'RECENT_EMOJI_REMOVE':
return {
...state,
recentlyUsed: filterEmoji(state, action.payload),
- };
+ }
case 'RECENT_EMOJI_CLEAR':
- return { ...state, recentlyUsed: [] };
+ return { ...state, recentlyUsed: [] }
default:
- return state;
+ return state
}
}
const filterEmoji = (state: RecentEmojiState, emoji: JsonEmoji) =>
- state.recentlyUsed.filter((usedEmoji) => usedEmoji.emoji !== emoji.emoji);
+ state.recentlyUsed.filter((usedEmoji) => usedEmoji.emoji !== emoji.emoji)
diff --git a/src/store/reducers/index.ts b/src/store/reducers/index.ts
index ff13245..c3e7340 100644
--- a/src/store/reducers/index.ts
+++ b/src/store/reducers/index.ts
@@ -1,11 +1,8 @@
-import recentEmojiReducer, {
- RecentEmojiAction,
- RecentEmojiState,
-} from './RecentEmojiReducer';
+import recentEmojiReducer, { RecentEmojiAction, RecentEmojiState } from './RecentEmojiReducer'
// TODO:
// - combine Keyboard reducers in future
-export type KeyboardState = RecentEmojiState;
-export type KeyboardAction = RecentEmojiAction;
-export default recentEmojiReducer;
+export type KeyboardState = RecentEmojiState
+export type KeyboardAction = RecentEmojiAction
+export default recentEmojiReducer
diff --git a/src/store/useKeyboardStore.ts b/src/store/useKeyboardStore.ts
index 0d03a3d..67f03d4 100644
--- a/src/store/useKeyboardStore.ts
+++ b/src/store/useKeyboardStore.ts
@@ -1,29 +1,29 @@
-import { useEffect, useState } from 'react';
-import type { KeyboardAction, KeyboardState } from './reducers';
-import keyboardReducer from './reducers';
+import { useEffect, useState } from 'react'
+import type { KeyboardAction, KeyboardState } from './reducers'
+import keyboardReducer from './reducers'
let globalKeyboardState: KeyboardState = {
recentlyUsed: [],
-};
+}
-type KeyboardStateSetter = () => any;
-const keyboardStateListeners = new Set();
+type KeyboardStateSetter = () => any
+const keyboardStateListeners = new Set()
const setKeyboardState = (action: KeyboardAction) => {
- globalKeyboardState = keyboardReducer(globalKeyboardState, action);
- keyboardStateListeners.forEach((listener) => listener());
-};
+ globalKeyboardState = keyboardReducer(globalKeyboardState, action)
+ keyboardStateListeners.forEach((listener) => listener())
+}
export const useKeyboardStore = () => {
- const [keyboardState, setState] = useState(globalKeyboardState);
+ const [keyboardState, setState] = useState(globalKeyboardState)
useEffect(() => {
- const listener = () => setState(globalKeyboardState);
- keyboardStateListeners.add(listener);
+ const listener = () => setState(globalKeyboardState)
+ keyboardStateListeners.add(listener)
return () => {
- keyboardStateListeners.delete(listener);
- };
- }, [keyboardState]);
+ keyboardStateListeners.delete(listener)
+ }
+ }, [keyboardState])
- return { keyboardState, setKeyboardState };
-};
+ return { keyboardState, setKeyboardState }
+}
diff --git a/src/translation/en.ts b/src/translation/en.ts
index aca3b7e..df050c6 100644
--- a/src/translation/en.ts
+++ b/src/translation/en.ts
@@ -1,4 +1,4 @@
-import type { CategoryTranslation } from '../types';
+import type { CategoryTranslation } from '../types'
export const en: CategoryTranslation = {
recently_used: 'Recently used',
@@ -12,5 +12,5 @@ export const en: CategoryTranslation = {
symbols: 'Symbols',
flags: 'Flags',
search: 'Search',
-};
-export default en;
+}
+export default en
diff --git a/src/translation/pl.ts b/src/translation/pl.ts
index 6e35f37..2752efa 100644
--- a/src/translation/pl.ts
+++ b/src/translation/pl.ts
@@ -1,4 +1,4 @@
-import type { CategoryTranslation } from '../types';
+import type { CategoryTranslation } from '../types'
const pl: CategoryTranslation = {
recently_used: 'Ostatnio używane',
@@ -12,5 +12,5 @@ const pl: CategoryTranslation = {
symbols: 'Symbole',
flags: 'Flagi',
search: 'Szukaj',
-};
-export default pl;
+}
+export default pl
diff --git a/src/types.ts b/src/types.ts
index a31abb4..2920cd5 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -10,39 +10,39 @@ export const CATEGORIES_NAVIGATION = [
{ icon: 'Flag', category: 'flags' },
{ icon: 'Clock', category: 'recently_used' },
{ icon: 'Search', category: 'search' },
-] as const;
+] as const
-export type IconNames = typeof CATEGORIES_NAVIGATION[number]['icon'];
-export type CategoryTypes = typeof CATEGORIES_NAVIGATION[number]['category'];
+export type IconNames = typeof CATEGORIES_NAVIGATION[number]['icon']
+export type CategoryTypes = typeof CATEGORIES_NAVIGATION[number]['category']
export const CATEGORIES: readonly CategoryTypes[] = CATEGORIES_NAVIGATION.map(
({ category }) => category
-);
+)
export type JsonEmoji = {
- emoji: string;
- name: string;
- v: string;
-};
+ emoji: string
+ name: string
+ v: string
+}
export type EmojiType = {
- emoji: string;
- name: string;
- slug: string;
- unicode_version: string;
-};
+ emoji: string
+ name: string
+ slug: string
+ unicode_version: string
+}
-export type CategoryPosition = 'floating' | 'top' | 'bottom';
+export type CategoryPosition = 'floating' | 'top' | 'bottom'
export type CategoryNavigationItem = {
- icon: IconNames;
- category: CategoryTypes;
-};
+ icon: IconNames
+ category: CategoryTypes
+}
export type CategoryTranslation = {
- [key in CategoryTypes]: string;
-};
+ [key in CategoryTypes]: string
+}
export type EmojisByCategory = {
- title: CategoryTypes;
- data: EmojiType[];
-};
+ title: CategoryTypes
+ data: EmojiType[]
+}
diff --git a/src/utils.ts b/src/utils.ts
index f73da48..cc7df04 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,29 +1,22 @@
-import { CATEGORIES, CategoryTypes, JsonEmoji } from './types';
+import { CATEGORIES, CategoryTypes, JsonEmoji } from './types'
export const getHeight = (value: string | number, screenHeight: number) =>
- typeof value === 'number'
- ? value
- : (screenHeight / 100) * parseInt(value.replace('%', ''), 10);
+ typeof value === 'number' ? value : (screenHeight / 100) * parseInt(value.replace('%', ''), 10)
export const exhaustiveTypeCheck = (arg: never, strict = true) => {
- console.log(`unhandled union case for : ${arg}`);
+ console.log(`unhandled union case for : ${arg}`)
if (strict) {
- throw new Error(`unhandled union case for : ${arg}`);
+ throw new Error(`unhandled union case for : ${arg}`)
}
-};
+}
export const parseEmoji = (emoji: JsonEmoji) => ({
name: emoji.name,
emoji: emoji.emoji,
unicode_version: emoji.v,
slug: emoji.name.replace(' ', '_'),
-});
+})
-export const getCategoryIndex = (
- disabledCategory: CategoryTypes[],
- category: CategoryTypes
-) => ({
- index: CATEGORIES.filter((name) => !disabledCategory.includes(name)).indexOf(
- category
- ),
-});
+export const getCategoryIndex = (disabledCategory: CategoryTypes[], category: CategoryTypes) => ({
+ index: CATEGORIES.filter((name) => !disabledCategory.includes(name)).indexOf(category),
+})
diff --git a/tsconfig.build.json b/tsconfig.build.json
index 999d3f3..01a6612 100644
--- a/tsconfig.build.json
+++ b/tsconfig.build.json
@@ -1,5 +1,4 @@
-
{
"extends": "./tsconfig",
"exclude": ["example"]
-}
+}
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 3c1348a..c78afaf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1837,6 +1837,11 @@
resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
+"@twgdev/prettier-config@^1.0.2":
+ version "1.0.2"
+ resolved "https://registry.yarnpkg.com/@twgdev/prettier-config/-/prettier-config-1.0.2.tgz#5a313df4341efb2221b5e7b4c52153e86861b1dc"
+ integrity sha512-79UJ8Cp+dIoE8V5g8y2SDvshhGQsGaDkTdY3YVbbMzTUW/Bdv/0AOFASNNGKXy7pfkcukeUD27cgRECAU4Swyg==
+
"@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
version "7.1.14"
resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.14.tgz#faaeefc4185ec71c389f4501ee5ec84b170cc402"