react-native-emoji-picker - npm Package Compare versions

Comparing version 0.2.1 to 0.2.2

index.js

 'use strict'
 import React, {
   PropTypes,
+  Component,
 } from 'react'
@@ -40,7 +41,6 @@
 
-
 const isAndroid = Platform.OS == 'android'
 const letterSpacing = 10
 const defaultEmojiSize = 30
-const categories = ['People', 'Nature', 'Foods', 'Activity', 'Places', 'Objects', 'Symbols', 'Flags']
+const padding = 5
 const filteredEmojis = emoji.filter(e => isAndroid ? !!e.google : !includes(blacklistedEmojis, e.short_name))
@@ -52,28 +52,37 @@ // sort emojis by 'sort_order' then group them into categories
 
+const CATEGORIES = ['People', 'Nature', 'Foods', 'Activity', 'Places', 'Objects', 'Symbols', 'Flags']
 
-const EmojiPicker = (props) => {
 
-  // instead listing emojis left-to-right we want to list them top-to-bottom.
-  // we split them in to rows by sequentially taking every Xth value, where X is the number of rows
-  function transposeEmojisVertically(emojis, rowCount = 7) {
-    let array = []
-    for (var i = 0; i < rowCount; i++) {
-      let row = []
-      for (var n = 0; n < emojis.length/rowCount; n++) {
-        let index = i + n * rowCount
-        if (index < emojis.length) {
-          row.push(emojis[index])
-        }
-      }
-      array.push(row)
+class EmojiPicker extends Component {
+  state = {
+    categories: CATEGORIES.slice(0, 1),
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this._timeout)
+  }
+
+  loadNextCategory() {
+    if (this.state.categories.length < CATEGORIES.length) {
+      this.setState({categories: CATEGORIES.slice(0, this.state.categories.length + 1)})
     }
-    return array
   }
 
-  function renderSectionForCategory(c) {
-    let emojis = transposeEmojisVertically(emojisByCategory[c])
+  renderCategory(category) {
     return (
-     <View key={c} style={styles.innerContainer}>
-        <Text style={[styles.headerText, props.headerStyle]}>{c}</Text>
-        {emojis.map(array => <Row {...props} array={array} key={array[0]} />)}
+      <EmojiCategory 
+        {...this.props}
+        key={category}
+        category={category}
+        finishedLoading={() => this._timeout = setTimeout(this.loadNextCategory.bind(this), 100)} />
+      )
+  }
+
+  render() {
+    return (
+      <View style={[styles.container, this.props.style]}>
+        <ScrollView horizontal={true}>
+          {this.state.categories.map(this.renderCategory.bind(this))}
+        </ScrollView>
+        {this.props.hideClearButton ? null : <ClearButon {...this.props} />}
       </View>
@@ -83,34 +92,39 @@ )
 
-  return (
-    <View style={props.style}>
-      <ScrollView horizontal={true}>
-        {categories.map(renderSectionForCategory)}
-      </ScrollView>
-      {props.hideClearButton ? null : <ClearButon {...props} />}
-    </View>
-  )
 }
 
-const Row = props => {
-  let size = props.emojiSize || defaultEmojiSize
+class EmojiCategory extends Component {
+  componentDidMount() {
+    this.props.finishedLoading()
+  }
 
-  function handlePress(event) {
-    let i = Math.floor(event.nativeEvent.locationX/(size + 5 + letterSpacing/2))
-    if (i < props.array.length) {
-      let emoji = props.array[i]
-      props.onEmojiSelected(emoji)  
+  render() {
+    let emojis = emojisByCategory[this.props.category]
+    let size = this.props.emojiSize || defaultEmojiSize
+    let style = {
+      fontSize: size-4,
+      color: 'black',
+      height: size+4,
+      width: size+4,
+      textAlign: 'center',
+      padding: padding,
     }
-  }
 
-  return (
-    <TouchableWithoutFeedback onPress={handlePress}>
-      <View>
-        <Text style={[styles.rowText, {fontSize: size}]} >
-          {props.array}
-        </Text>
+    return (
+     <View style={style.categoryOuter}>
+        <Text style={[styles.headerText, this.props.headerStyle]}>{this.props.category}</Text>
+        <View style={styles.categoryInner}>
+          {emojis.map(e => 
+            <Text style={style} 
+              key={e} 
+              onPress={() => this.props.onEmojiSelected(e)}>
+              {e}
+            </Text>
+          )}
+        </View>    
       </View>
-    </TouchableWithoutFeedback>
-  )
+    )
+  }
 }
 
+
 const ClearButon = props => {
@@ -137,6 +151,11 @@ return (
 let styles = StyleSheet.create({
+  container: {
+    padding: padding,
+  },
   clearButton: {
+    flex: 1,
     padding: 15,
     textAlign: 'center',
     color: 'black',
+    textAlignVertical: 'center',
   },
@@ -164,15 +183,16 @@ absolute: {
   },
-  innerContainer: {
+  categoryOuter: {
+    flex: -1,
+  },
+  categoryInner: {
+    flex: 1,
     flexWrap: 'wrap', 
     flexDirection: 'column',
   },
-  rowText: {
-    letterSpacing: letterSpacing,
-    paddingHorizontal: 5,
+  headerText: {
+    padding: padding,
     color: 'black',
+    justifyContent: 'center',
+    textAlignVertical: 'center',
   },
-  headerText: {
-    padding: 5,
-    color: 'black',
-  }
 })
@@ -179,0 +199,0 @@

package.json

 {
   "name": "react-native-emoji-picker",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "Simple emoji picker for react-native",
@@ -5,0 +5,0 @@ "main": "index.js",

No alert changes

Improved metrics

Total package byte prevSize

760724

0.02%

Lines of code

174

10.83%

No dependency changes