Skip to content

Commit 03013a0

Browse files
pederjohnsenpederjohnsen
authored
Merge pull request #219 from tunoltd/more_customisation
Add `skinEmojiSize` prop and base search/skin icons sizes off `fontSize` prop
2 parents ac8af85 + b3e256d commit 03013a0

File tree

8 files changed

+85
-98
lines changed

8 files changed

+85
-98
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -141,6 +141,7 @@ import { Picker } from 'emoji-mart-native'
141141
| **skin** | | | Forces skin color: `1, 2, 3, 4, 5, 6` |
142142
| **defaultSkin** | | `1` | Default skin color: `1, 2, 3, 4, 5, 6` |
143143
| **skinEmoji** | | | The emoji used to pick a skin tone. Uses an emoji-less skin tone picker by default |
144+
| **skinEmojiSize** | | `28` | The skin emoji width and height |
144145
| **style** | | | Inline styles applied to the root element. Useful for positioning |
145146
| **notFoundEmoji** | | `sleuth_or_spy` | The emoji shown when there are no search results |
146147
| **notFound** | | | [Not Found](#not-found) |

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "emoji-mart-native",
3-
"version": "0.6.3-beta",
3+
"version": "0.6.4-beta",
44
"description": "Customizable Slack-like emoji picker for React Native",
55
"main": "dist/index.js",
66
"repository": {

‎src/components/picker/nimble-picker.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -487,6 +487,7 @@ export default class NimblePicker extends React.PureComponent {
487487
notFound,
488488
notFoundEmoji,
489489
skinEmoji,
490+
skinEmojiSize,
490491
fontSize,
491492
} = this.props
492493

@@ -528,6 +529,7 @@ export default class NimblePicker extends React.PureComponent {
528529
skin,
529530
onChange: this.handleSkinChange,
530531
skinEmoji: skinEmoji,
532+
skinEmojiSize: skinEmojiSize,
531533
}}
532534
emojiProps={{
533535
native,

‎src/components/search.js

Lines changed: 33 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const styles = StyleSheet.create({
2626
paddingRight: 10,
2727
paddingTop: 2,
2828
paddingBottom: 2,
29-
height: 52,
29+
minHeight: 52,
3030
flexDirection: 'row',
3131
justifyContent: 'center',
3232
alignItems: 'center',
@@ -49,18 +49,10 @@ const styles = StyleSheet.create({
4949
searchInputDark: {
5050
color: '#bebebe',
5151
},
52-
closeButtonContainer: {
53-
width: 44,
54-
height: 44,
55-
flexDirection: 'row',
56-
alignItems: 'center',
57-
justifyContent: 'center',
58-
},
5952
closeButton: {
60-
width: 28,
61-
height: 28,
62-
margin: 10,
6353
borderRadius: 500,
54+
margin: 10,
55+
padding: 2,
6456
},
6557
closeButtonIcon: {
6658
marginTop: 2,
@@ -151,6 +143,7 @@ export default class Search extends React.PureComponent {
151143
theme,
152144
fontSize,
153145
} = this.props
146+
const iconSize = Math.round(fontSize * 1.6)
154147
const {searchTerm} = this.state
155148

156149
let background
@@ -178,20 +171,21 @@ export default class Search extends React.PureComponent {
178171
]}
179172
>
180173
{showCloseButton ? (
181-
<View style={styles.closeButtonContainer}>
182-
<Touchable
183-
onPress={onPressClose}
184-
background={Platform.OS === 'android' ? background : null}
185-
style={[styles.closeButton]}
186-
>
187-
<Image
188-
style={styles.closeButtonIcon}
189-
source={
190-
theme === 'light' ? arrowBackIconLight : arrowBackIconDark
191-
}
192-
/>
193-
</Touchable>
194-
</View>
174+
<Touchable
175+
onPress={onPressClose}
176+
background={Platform.OS === 'android' ? background : null}
177+
style={[styles.closeButton]}
178+
>
179+
<Image
180+
style={[
181+
styles.closeButtonIcon,
182+
{width: iconSize, height: iconSize},
183+
]}
184+
source={
185+
theme === 'light' ? arrowBackIconLight : arrowBackIconDark
186+
}
187+
/>
188+
</Touchable>
195189
) : null}
196190
<TextInput
197191
style={[
@@ -210,18 +204,19 @@ export default class Search extends React.PureComponent {
210204
underlineColorAndroid="transparent"
211205
/>
212206
{searchTerm.length > 0 ? (
213-
<View style={styles.closeButtonContainer}>
214-
<Touchable
215-
onPress={this.pressCancel}
216-
background={Platform.OS === 'android' ? background : null}
217-
style={[styles.closeButton]}
218-
>
219-
<Image
220-
style={styles.closeButtonIcon}
221-
source={theme === 'light' ? clearIconLight : clearIconDark}
222-
/>
223-
</Touchable>
224-
</View>
207+
<Touchable
208+
onPress={this.pressCancel}
209+
background={Platform.OS === 'android' ? background : null}
210+
style={[styles.closeButton]}
211+
>
212+
<Image
213+
style={[
214+
styles.closeButtonIcon,
215+
{width: iconSize, height: iconSize},
216+
]}
217+
source={theme === 'light' ? clearIconLight : clearIconDark}
218+
/>
219+
</Touchable>
225220
) : null}
226221
{showSkinTones && (
227222
<View>
@@ -232,7 +227,7 @@ export default class Search extends React.PureComponent {
232227
{...skinsProps}
233228
/>
234229
) : (
235-
<Skins theme={theme} {...skinsProps} />
230+
<Skins theme={theme} iconSize={iconSize} {...skinsProps} />
236231
)}
237232
</View>
238233
)}

‎src/components/skins-emoji.js

Lines changed: 15 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -13,19 +13,10 @@ const styles = StyleSheet.create({
1313
justifyContent: 'center',
1414
},
1515
skinSwatch: {
16-
width: 0,
17-
height: 0,
18-
overflow: 'hidden',
19-
},
20-
skinSwatchShown: {
21-
width: 32,
22-
height: 28,
2316
paddingLeft: 2,
2417
paddingRight: 2,
2518
},
2619
skin: {
27-
width: 28,
28-
height: 28,
2920
flexDirection: 'row',
3021
alignItems: 'center',
3122
justifyContent: 'center',
@@ -55,35 +46,28 @@ export default class SkinsEmoji extends React.PureComponent {
5546
}
5647

5748
render() {
58-
const {skin, emojiProps, data, skinEmoji} = this.props
49+
const {skin, emojiProps, data, skinEmoji, skinEmojiSize} = this.props
5950
const {opened} = this.state
6051

6152
const skinToneNodes = []
6253

6354
for (let skinTone = 1; skinTone <= 6; skinTone++) {
6455
const selected = skinTone === skin
6556

66-
skinToneNodes.push(
67-
<View
68-
key={`skin-tone-${skinTone}`}
69-
style={[
70-
styles.skinSwatch,
71-
selected || opened ? styles.skinSwatchShown : null,
72-
]}
73-
>
74-
{selected || opened ? (
75-
<View style={styles.skin}>
76-
<NimbleEmoji
77-
emoji={skinEmoji}
78-
data={data}
79-
onPress={this.handlePress.bind(this, skinTone)}
80-
{...emojiProps}
81-
skin={skinTone}
82-
/>
83-
</View>
84-
) : null}
85-
</View>,
86-
)
57+
if (selected || opened) {
58+
skinToneNodes.push(
59+
<View key={`skin-tone-${skinTone}`} style={[styles.skinSwatch]}>
60+
<NimbleEmoji
61+
emoji={skinEmoji}
62+
data={data}
63+
onPress={this.handlePress.bind(this, skinTone)}
64+
{...emojiProps}
65+
size={skinEmojiSize}
66+
skin={skinTone}
67+
/>
68+
</View>,
69+
)
70+
}
8771
}
8872

8973
return <View style={styles.skinSwatches}>{skinToneNodes}</View>

‎src/components/skins.js

Lines changed: 31 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -19,28 +19,15 @@ const styles = StyleSheet.create({
1919
borderColor: '#3f3f3f',
2020
},
2121
skinSwatch: {
22-
width: 0,
23-
height: 0,
24-
overflow: 'hidden',
25-
},
26-
skinSwatchShown: {
27-
width: 20,
28-
height: 16,
2922
paddingLeft: 2,
3023
paddingRight: 2,
3124
},
3225
skin: {
33-
width: 16,
34-
height: 16,
35-
borderRadius: 32,
3626
flexDirection: 'row',
3727
alignItems: 'center',
3828
justifyContent: 'center',
3929
},
4030
skinSelected: {
41-
width: 6,
42-
height: 6,
43-
borderRadius: 12,
4431
backgroundColor: 'rgba(255, 255, 255, 0.75)',
4532
},
4633
skinTone1: {
@@ -86,36 +73,52 @@ export default class Skins extends React.PureComponent {
8673
}
8774

8875
render() {
89-
const {skin, theme} = this.props
76+
const {skin, theme, iconSize} = this.props
9077
const {opened} = this.state
9178

9279
const skinToneNodes = []
9380

81+
const skinSize = Math.round(iconSize * 0.6666666666666666)
82+
const skinSelectedSize = skinSize / 2
83+
9484
for (let skinTone = 1; skinTone <= 6; skinTone++) {
9585
const selected = skinTone === skin
9686

97-
skinToneNodes.push(
98-
<View
99-
key={`skin-tone-${skinTone}`}
100-
style={[
101-
styles.skinSwatch,
102-
selected || opened ? styles.skinSwatchShown : null,
103-
]}
104-
>
105-
{selected || opened ? (
87+
if (selected || opened) {
88+
skinToneNodes.push(
89+
<View key={`skin-tone-${skinTone}`} style={[styles.skinSwatch]}>
10690
<TouchableWithoutFeedback
10791
onPress={this.handlePress.bind(this, skinTone)}
10892
style={[styles.skin, styles[`skinTone${skinTone}`]]}
10993
>
110-
<View style={[styles.skin, styles[`skinTone${skinTone}`]]}>
94+
<View
95+
style={[
96+
styles.skin,
97+
{
98+
width: skinSize,
99+
height: skinSize,
100+
borderRadius: skinSize / 2,
101+
},
102+
styles[`skinTone${skinTone}`],
103+
]}
104+
>
111105
{selected && opened ? (
112-
<View style={styles.skinSelected} />
106+
<View
107+
style={[
108+
styles.skinSelected,
109+
{
110+
width: skinSelectedSize,
111+
height: skinSelectedSize,
112+
borderRadius: skinSelectedSize / 2,
113+
},
114+
]}
115+
/>
113116
) : null}
114117
</View>
115118
</TouchableWithoutFeedback>
116-
) : null}
117-
</View>,
118-
)
119+
</View>,
120+
)
121+
}
119122
}
120123

121124
return (

‎src/utils/shared-default-props.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,7 @@ const PickerDefaultProps = {
5353
enableFrequentEmojiSort: false,
5454
custom: [],
5555
skinEmoji: '',
56+
skinEmojiSize: 28,
5657
notFound: () => {},
5758
notFoundEmoji: 'sleuth_or_spy',
5859
categoryEmojis: {},

‎src/utils/shared-props.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ const PickerPropTypes = {
7878
}),
7979
),
8080
skinEmoji: PropTypes.string,
81+
skinEmojiSize: PropTypes.number,
8182
notFound: PropTypes.func,
8283
notFoundEmoji: PropTypes.string,
8384
categoryEmojis: PropTypes.objectOf(PropTypes.string),

0 commit comments

Comments
 (0)