Merge pull request #219 from tunoltd/more_customisation

Add `skinEmojiSize` prop and base search/skin icons sizes off `fontSize` prop
tunoltd · Jan 10, 2022 · 03013a0 · 03013a0
2 parents ac8af85 + b3e256d
commit 03013a0
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 98 deletions.
diff --git a/README.md b/README.md
@@ -141,6 +141,7 @@ import { Picker } from 'emoji-mart-native'
 | **skin** | | | Forces skin color: `1, 2, 3, 4, 5, 6` |
 | **defaultSkin** | | `1` | Default skin color: `1, 2, 3, 4, 5, 6` |
 | **skinEmoji** | | | The emoji used to pick a skin tone. Uses an emoji-less skin tone picker by default |
+| **skinEmojiSize** | | `28` | The skin emoji width and height |
 | **style** | | | Inline styles applied to the root element. Useful for positioning |
 | **notFoundEmoji** | | `sleuth_or_spy` | The emoji shown when there are no search results |
 | **notFound** | | | [Not Found](#not-found) |

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "emoji-mart-native",
-  "version": "0.6.3-beta",
+  "version": "0.6.4-beta",
   "description": "Customizable Slack-like emoji picker for React Native",
   "main": "dist/index.js",
   "repository": {

diff --git a/src/components/picker/nimble-picker.js b/src/components/picker/nimble-picker.js
@@ -487,6 +487,7 @@ export default class NimblePicker extends React.PureComponent {
       notFound,
       notFoundEmoji,
       skinEmoji,
+      skinEmojiSize,
       fontSize,
     } = this.props
 
@@ -528,6 +529,7 @@ export default class NimblePicker extends React.PureComponent {
             skin,
             onChange: this.handleSkinChange,
             skinEmoji: skinEmoji,
+            skinEmojiSize: skinEmojiSize,
           }}
           emojiProps={{
             native,

diff --git a/src/components/search.js b/src/components/search.js
@@ -26,7 +26,7 @@ const styles = StyleSheet.create({
     paddingRight: 10,
     paddingTop: 2,
     paddingBottom: 2,
-    height: 52,
+    minHeight: 52,
     flexDirection: 'row',
     justifyContent: 'center',
     alignItems: 'center',
@@ -49,18 +49,10 @@ const styles = StyleSheet.create({
   searchInputDark: {
     color: '#bebebe',
   },
-  closeButtonContainer: {
-    width: 44,
-    height: 44,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
   closeButton: {
-    width: 28,
-    height: 28,
-    margin: 10,
     borderRadius: 500,
+    margin: 10,
+    padding: 2,
   },
   closeButtonIcon: {
     marginTop: 2,
@@ -151,6 +143,7 @@ export default class Search extends React.PureComponent {
       theme,
       fontSize,
     } = this.props
+    const iconSize = Math.round(fontSize * 1.6)
     const {searchTerm} = this.state
 
     let background
@@ -178,20 +171,21 @@ export default class Search extends React.PureComponent {
         ]}
       >
         {showCloseButton ? (
-          <View style={styles.closeButtonContainer}>
-            <Touchable
-              onPress={onPressClose}
-              background={Platform.OS === 'android' ? background : null}
-              style={[styles.closeButton]}
-            >
-              <Image
-                style={styles.closeButtonIcon}
-                source={
-                  theme === 'light' ? arrowBackIconLight : arrowBackIconDark
-                }
-              />
-            </Touchable>
-          </View>
+          <Touchable
+            onPress={onPressClose}
+            background={Platform.OS === 'android' ? background : null}
+            style={[styles.closeButton]}
+          >
+            <Image
+              style={[
+                styles.closeButtonIcon,
+                {width: iconSize, height: iconSize},
+              ]}
+              source={
+                theme === 'light' ? arrowBackIconLight : arrowBackIconDark
+              }
+            />
+          </Touchable>
         ) : null}
         <TextInput
           style={[
@@ -210,18 +204,19 @@ export default class Search extends React.PureComponent {
           underlineColorAndroid="transparent"
         />
         {searchTerm.length > 0 ? (
-          <View style={styles.closeButtonContainer}>
-            <Touchable
-              onPress={this.pressCancel}
-              background={Platform.OS === 'android' ? background : null}
-              style={[styles.closeButton]}
-            >
-              <Image
-                style={styles.closeButtonIcon}
-                source={theme === 'light' ? clearIconLight : clearIconDark}
-              />
-            </Touchable>
-          </View>
+          <Touchable
+            onPress={this.pressCancel}
+            background={Platform.OS === 'android' ? background : null}
+            style={[styles.closeButton]}
+          >
+            <Image
+              style={[
+                styles.closeButtonIcon,
+                {width: iconSize, height: iconSize},
+              ]}
+              source={theme === 'light' ? clearIconLight : clearIconDark}
+            />
+          </Touchable>
         ) : null}
         {showSkinTones && (
           <View>
@@ -232,7 +227,7 @@ export default class Search extends React.PureComponent {
                 {...skinsProps}
               />
             ) : (
-              <Skins theme={theme} {...skinsProps} />
+              <Skins theme={theme} iconSize={iconSize} {...skinsProps} />
             )}
           </View>
         )}

diff --git a/src/components/skins-emoji.js b/src/components/skins-emoji.js
@@ -13,19 +13,10 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
   },
   skinSwatch: {
-    width: 0,
-    height: 0,
-    overflow: 'hidden',
-  },
-  skinSwatchShown: {
-    width: 32,
-    height: 28,
     paddingLeft: 2,
     paddingRight: 2,
   },
   skin: {
-    width: 28,
-    height: 28,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
@@ -55,35 +46,28 @@ export default class SkinsEmoji extends React.PureComponent {
   }
 
   render() {
-    const {skin, emojiProps, data, skinEmoji} = this.props
+    const {skin, emojiProps, data, skinEmoji, skinEmojiSize} = this.props
     const {opened} = this.state
 
     const skinToneNodes = []
 
     for (let skinTone = 1; skinTone <= 6; skinTone++) {
       const selected = skinTone === skin
 
-      skinToneNodes.push(
-        <View
-          key={`skin-tone-${skinTone}`}
-          style={[
-            styles.skinSwatch,
-            selected || opened ? styles.skinSwatchShown : null,
-          ]}
-        >
-          {selected || opened ? (
-            <View style={styles.skin}>
-              <NimbleEmoji
-                emoji={skinEmoji}
-                data={data}
-                onPress={this.handlePress.bind(this, skinTone)}
-                {...emojiProps}
-                skin={skinTone}
-              />
-            </View>
-          ) : null}
-        </View>,
-      )
+      if (selected || opened) {
+        skinToneNodes.push(
+          <View key={`skin-tone-${skinTone}`} style={[styles.skinSwatch]}>
+            <NimbleEmoji
+              emoji={skinEmoji}
+              data={data}
+              onPress={this.handlePress.bind(this, skinTone)}
+              {...emojiProps}
+              size={skinEmojiSize}
+              skin={skinTone}
+            />
+          </View>,
+        )
+      }
     }
 
     return <View style={styles.skinSwatches}>{skinToneNodes}</View>

diff --git a/src/components/skins.js b/src/components/skins.js
@@ -19,28 +19,15 @@ const styles = StyleSheet.create({
     borderColor: '#3f3f3f',
   },
   skinSwatch: {
-    width: 0,
-    height: 0,
-    overflow: 'hidden',
-  },
-  skinSwatchShown: {
-    width: 20,
-    height: 16,
     paddingLeft: 2,
     paddingRight: 2,
   },
   skin: {
-    width: 16,
-    height: 16,
-    borderRadius: 32,
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'center',
   },
   skinSelected: {
-    width: 6,
-    height: 6,
-    borderRadius: 12,
     backgroundColor: 'rgba(255, 255, 255, 0.75)',
   },
   skinTone1: {
@@ -86,36 +73,52 @@ export default class Skins extends React.PureComponent {
   }
 
   render() {
-    const {skin, theme} = this.props
+    const {skin, theme, iconSize} = this.props
     const {opened} = this.state
 
     const skinToneNodes = []
 
+    const skinSize = Math.round(iconSize * 0.6666666666666666)
+    const skinSelectedSize = skinSize / 2
+
     for (let skinTone = 1; skinTone <= 6; skinTone++) {
       const selected = skinTone === skin
 
-      skinToneNodes.push(
-        <View
-          key={`skin-tone-${skinTone}`}
-          style={[
-            styles.skinSwatch,
-            selected || opened ? styles.skinSwatchShown : null,
-          ]}
-        >
-          {selected || opened ? (
+      if (selected || opened) {
+        skinToneNodes.push(
+          <View key={`skin-tone-${skinTone}`} style={[styles.skinSwatch]}>
             <TouchableWithoutFeedback
               onPress={this.handlePress.bind(this, skinTone)}
               style={[styles.skin, styles[`skinTone${skinTone}`]]}
             >
-              <View style={[styles.skin, styles[`skinTone${skinTone}`]]}>
+              <View
+                style={[
+                  styles.skin,
+                  {
+                    width: skinSize,
+                    height: skinSize,
+                    borderRadius: skinSize / 2,
+                  },
+                  styles[`skinTone${skinTone}`],
+                ]}
+              >
                 {selected && opened ? (
-                  <View style={styles.skinSelected} />
+                  <View
+                    style={[
+                      styles.skinSelected,
+                      {
+                        width: skinSelectedSize,
+                        height: skinSelectedSize,
+                        borderRadius: skinSelectedSize / 2,
+                      },
+                    ]}
+                  />
                 ) : null}
               </View>
             </TouchableWithoutFeedback>
-          ) : null}
-        </View>,
-      )
+          </View>,
+        )
+      }
     }
 
     return (

diff --git a/src/utils/shared-default-props.js b/src/utils/shared-default-props.js
@@ -53,6 +53,7 @@ const PickerDefaultProps = {
   enableFrequentEmojiSort: false,
   custom: [],
   skinEmoji: '',
+  skinEmojiSize: 28,
   notFound: () => {},
   notFoundEmoji: 'sleuth_or_spy',
   categoryEmojis: {},

diff --git a/src/utils/shared-props.js b/src/utils/shared-props.js
@@ -78,6 +78,7 @@ const PickerPropTypes = {
     }),
   ),
   skinEmoji: PropTypes.string,
+  skinEmojiSize: PropTypes.number,
   notFound: PropTypes.func,
   notFoundEmoji: PropTypes.string,
   categoryEmojis: PropTypes.objectOf(PropTypes.string),