[IMPROVEMENT] Bigger emoji in emoji only messages (#793)
* issue #725: bigger emoji in emoji only message * issue-725/add storybook for Message/Emoji * issue-725: update storybook/Message jest snapshot * comment storybook import * allow spaces and line breaks in emoji only message * merge develop * revert unnecessary spacing
This commit is contained in:
IlarionHalushka
Diego Mello
parent
fc264f0601
commit
013c151c10
|
|
@ -2780,7 +2780,7 @@ exports[`Storyshots Message list 1`] = `
|
||||||
"backgroundColor": "transparent",
|
"backgroundColor": "transparent",
|
||||||
"color": "#2F343D",
|
"color": "#2F343D",
|
||||||
"fontFamily": "System",
|
"fontFamily": "System",
|
||||||
"fontSize": 16,
|
"fontSize": 46,
|
||||||
"fontWeight": "400",
|
"fontWeight": "400",
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -2796,6 +2796,210 @@ exports[`Storyshots Message list 1`] = `
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
<Text
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"fontSize": 20,
|
||||||
|
"fontWeight": "300",
|
||||||
|
"marginLeft": 10,
|
||||||
|
"marginTop": 30,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"marginBottom": 0,
|
||||||
|
"marginTop": 30,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Single Emoji
|
||||||
|
</Text>
|
||||||
|
<View
|
||||||
|
accessible={true}
|
||||||
|
isTVSelectable={true}
|
||||||
|
onResponderGrant={[Function]}
|
||||||
|
onResponderMove={[Function]}
|
||||||
|
onResponderRelease={[Function]}
|
||||||
|
onResponderTerminate={[Function]}
|
||||||
|
onResponderTerminationRequest={[Function]}
|
||||||
|
onStartShouldSetResponder={[Function]}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"opacity": 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"flexDirection": "column",
|
||||||
|
"paddingHorizontal": 14,
|
||||||
|
"paddingVertical": 4,
|
||||||
|
"width": "100%",
|
||||||
|
},
|
||||||
|
undefined,
|
||||||
|
undefined,
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"flexDirection": "row",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"borderRadius": 4,
|
||||||
|
"height": 36,
|
||||||
|
"width": 36,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"marginTop": 4,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"overflow": "hidden",
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"borderRadius": 4,
|
||||||
|
"height": 36,
|
||||||
|
"width": 36,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<FastImageView
|
||||||
|
resizeMode="cover"
|
||||||
|
source={
|
||||||
|
Object {
|
||||||
|
"priority": "high",
|
||||||
|
"uri": "https://open.rocket.chat/avatar/diego.mello?format=png&width=50&height=50&rc_token=79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz&rc_uid=y8bd77ptZswPj3EW8",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"bottom": 0,
|
||||||
|
"left": 0,
|
||||||
|
"position": "absolute",
|
||||||
|
"right": 0,
|
||||||
|
"top": 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"flex": 1,
|
||||||
|
"marginLeft": 46,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"marginLeft": 10,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"alignItems": "center",
|
||||||
|
"flex": 1,
|
||||||
|
"flexDirection": "row",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"alignItems": "center",
|
||||||
|
"flex": 1,
|
||||||
|
"flexDirection": "row",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
numberOfLines={1}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "transparent",
|
||||||
|
"color": "#2F343D",
|
||||||
|
"fontFamily": "System",
|
||||||
|
"fontSize": 16,
|
||||||
|
"fontWeight": "500",
|
||||||
|
"lineHeight": 22,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
diego.mello
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<Text
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "transparent",
|
||||||
|
"color": "#9ca2a8",
|
||||||
|
"fontFamily": "System",
|
||||||
|
"fontSize": 12,
|
||||||
|
"fontWeight": "300",
|
||||||
|
"lineHeight": 22,
|
||||||
|
"paddingLeft": 10,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
10:00 AM
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={Object {}}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
numberOfLines={0}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"alignItems": "flex-start",
|
||||||
|
"flexDirection": "row",
|
||||||
|
"flexWrap": "wrap",
|
||||||
|
"justifyContent": "flex-start",
|
||||||
|
"marginBottom": 0,
|
||||||
|
"marginTop": 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "transparent",
|
||||||
|
"color": "#2F343D",
|
||||||
|
"fontFamily": "System",
|
||||||
|
"fontSize": 46,
|
||||||
|
"fontWeight": "400",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Text>
|
||||||
|
👏
|
||||||
|
</Text>
|
||||||
|
</Text>
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
<Text
|
<Text
|
||||||
style={
|
style={
|
||||||
Array [
|
Array [
|
||||||
|
|
@ -2984,7 +3188,7 @@ exports[`Storyshots Message list 1`] = `
|
||||||
"backgroundColor": "transparent",
|
"backgroundColor": "transparent",
|
||||||
"color": "#2F343D",
|
"color": "#2F343D",
|
||||||
"fontFamily": "System",
|
"fontFamily": "System",
|
||||||
"fontSize": 16,
|
"fontSize": 46,
|
||||||
"fontWeight": "400",
|
"fontWeight": "400",
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -2997,8 +3201,8 @@ exports[`Storyshots Message list 1`] = `
|
||||||
}
|
}
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"height": 20,
|
"height": 50,
|
||||||
"width": 20,
|
"width": 50,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
@ -3013,8 +3217,8 @@ exports[`Storyshots Message list 1`] = `
|
||||||
}
|
}
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"height": 20,
|
"height": 50,
|
||||||
"width": 20,
|
"width": 50,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
|
@ -3027,6 +3231,654 @@ exports[`Storyshots Message list 1`] = `
|
||||||
"uri": "https://open.rocket.chat/emoji-custom/marioparty.gif",
|
"uri": "https://open.rocket.chat/emoji-custom/marioparty.gif",
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"height": 50,
|
||||||
|
"width": 50,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</Text>
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<Text
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"fontSize": 20,
|
||||||
|
"fontWeight": "300",
|
||||||
|
"marginLeft": 10,
|
||||||
|
"marginTop": 30,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"marginBottom": 0,
|
||||||
|
"marginTop": 30,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Single Custom Emojis
|
||||||
|
</Text>
|
||||||
|
<View
|
||||||
|
accessible={true}
|
||||||
|
isTVSelectable={true}
|
||||||
|
onResponderGrant={[Function]}
|
||||||
|
onResponderMove={[Function]}
|
||||||
|
onResponderRelease={[Function]}
|
||||||
|
onResponderTerminate={[Function]}
|
||||||
|
onResponderTerminationRequest={[Function]}
|
||||||
|
onStartShouldSetResponder={[Function]}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"opacity": 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"flexDirection": "column",
|
||||||
|
"paddingHorizontal": 14,
|
||||||
|
"paddingVertical": 4,
|
||||||
|
"width": "100%",
|
||||||
|
},
|
||||||
|
undefined,
|
||||||
|
undefined,
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"flexDirection": "row",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"borderRadius": 4,
|
||||||
|
"height": 36,
|
||||||
|
"width": 36,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"marginTop": 4,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"overflow": "hidden",
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"borderRadius": 4,
|
||||||
|
"height": 36,
|
||||||
|
"width": 36,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<FastImageView
|
||||||
|
resizeMode="cover"
|
||||||
|
source={
|
||||||
|
Object {
|
||||||
|
"priority": "high",
|
||||||
|
"uri": "https://open.rocket.chat/avatar/diego.mello?format=png&width=50&height=50&rc_token=79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz&rc_uid=y8bd77ptZswPj3EW8",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"bottom": 0,
|
||||||
|
"left": 0,
|
||||||
|
"position": "absolute",
|
||||||
|
"right": 0,
|
||||||
|
"top": 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"flex": 1,
|
||||||
|
"marginLeft": 46,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"marginLeft": 10,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"alignItems": "center",
|
||||||
|
"flex": 1,
|
||||||
|
"flexDirection": "row",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"alignItems": "center",
|
||||||
|
"flex": 1,
|
||||||
|
"flexDirection": "row",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
numberOfLines={1}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "transparent",
|
||||||
|
"color": "#2F343D",
|
||||||
|
"fontFamily": "System",
|
||||||
|
"fontSize": 16,
|
||||||
|
"fontWeight": "500",
|
||||||
|
"lineHeight": 22,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
diego.mello
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<Text
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "transparent",
|
||||||
|
"color": "#9ca2a8",
|
||||||
|
"fontFamily": "System",
|
||||||
|
"fontSize": 12,
|
||||||
|
"fontWeight": "300",
|
||||||
|
"lineHeight": 22,
|
||||||
|
"paddingLeft": 10,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
10:00 AM
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={Object {}}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
numberOfLines={0}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"alignItems": "flex-start",
|
||||||
|
"flexDirection": "row",
|
||||||
|
"flexWrap": "wrap",
|
||||||
|
"justifyContent": "flex-start",
|
||||||
|
"marginBottom": 0,
|
||||||
|
"marginTop": 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "transparent",
|
||||||
|
"color": "#2F343D",
|
||||||
|
"fontFamily": "System",
|
||||||
|
"fontSize": 46,
|
||||||
|
"fontWeight": "400",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Image
|
||||||
|
source={
|
||||||
|
Object {
|
||||||
|
"uri": "https://open.rocket.chat/emoji-custom/react_rocket.png",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"height": 50,
|
||||||
|
"width": 50,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</Text>
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<Text
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"fontSize": 20,
|
||||||
|
"fontWeight": "300",
|
||||||
|
"marginLeft": 10,
|
||||||
|
"marginTop": 30,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"marginBottom": 0,
|
||||||
|
"marginTop": 30,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Normal Emoji + Custom Emojis
|
||||||
|
</Text>
|
||||||
|
<View
|
||||||
|
accessible={true}
|
||||||
|
isTVSelectable={true}
|
||||||
|
onResponderGrant={[Function]}
|
||||||
|
onResponderMove={[Function]}
|
||||||
|
onResponderRelease={[Function]}
|
||||||
|
onResponderTerminate={[Function]}
|
||||||
|
onResponderTerminationRequest={[Function]}
|
||||||
|
onStartShouldSetResponder={[Function]}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"opacity": 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"flexDirection": "column",
|
||||||
|
"paddingHorizontal": 14,
|
||||||
|
"paddingVertical": 4,
|
||||||
|
"width": "100%",
|
||||||
|
},
|
||||||
|
undefined,
|
||||||
|
undefined,
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"flexDirection": "row",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"borderRadius": 4,
|
||||||
|
"height": 36,
|
||||||
|
"width": 36,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"marginTop": 4,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"overflow": "hidden",
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"borderRadius": 4,
|
||||||
|
"height": 36,
|
||||||
|
"width": 36,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<FastImageView
|
||||||
|
resizeMode="cover"
|
||||||
|
source={
|
||||||
|
Object {
|
||||||
|
"priority": "high",
|
||||||
|
"uri": "https://open.rocket.chat/avatar/diego.mello?format=png&width=50&height=50&rc_token=79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz&rc_uid=y8bd77ptZswPj3EW8",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"bottom": 0,
|
||||||
|
"left": 0,
|
||||||
|
"position": "absolute",
|
||||||
|
"right": 0,
|
||||||
|
"top": 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"flex": 1,
|
||||||
|
"marginLeft": 46,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"marginLeft": 10,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"alignItems": "center",
|
||||||
|
"flex": 1,
|
||||||
|
"flexDirection": "row",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"alignItems": "center",
|
||||||
|
"flex": 1,
|
||||||
|
"flexDirection": "row",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
numberOfLines={1}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "transparent",
|
||||||
|
"color": "#2F343D",
|
||||||
|
"fontFamily": "System",
|
||||||
|
"fontSize": 16,
|
||||||
|
"fontWeight": "500",
|
||||||
|
"lineHeight": 22,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
diego.mello
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<Text
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "transparent",
|
||||||
|
"color": "#9ca2a8",
|
||||||
|
"fontFamily": "System",
|
||||||
|
"fontSize": 12,
|
||||||
|
"fontWeight": "300",
|
||||||
|
"lineHeight": 22,
|
||||||
|
"paddingLeft": 10,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
10:00 AM
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={Object {}}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
numberOfLines={0}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"alignItems": "flex-start",
|
||||||
|
"flexDirection": "row",
|
||||||
|
"flexWrap": "wrap",
|
||||||
|
"justifyContent": "flex-start",
|
||||||
|
"marginBottom": 0,
|
||||||
|
"marginTop": 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "transparent",
|
||||||
|
"color": "#2F343D",
|
||||||
|
"fontFamily": "System",
|
||||||
|
"fontSize": 46,
|
||||||
|
"fontWeight": "400",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Text>
|
||||||
|
🤙
|
||||||
|
</Text>
|
||||||
|
<Image
|
||||||
|
source={
|
||||||
|
Object {
|
||||||
|
"uri": "https://open.rocket.chat/emoji-custom/react_rocket.png",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"height": 50,
|
||||||
|
"width": 50,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</Text>
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<Text
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"fontSize": 20,
|
||||||
|
"fontWeight": "300",
|
||||||
|
"marginLeft": 10,
|
||||||
|
"marginTop": 30,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"marginBottom": 0,
|
||||||
|
"marginTop": 30,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Four emoji
|
||||||
|
</Text>
|
||||||
|
<View
|
||||||
|
accessible={true}
|
||||||
|
isTVSelectable={true}
|
||||||
|
onResponderGrant={[Function]}
|
||||||
|
onResponderMove={[Function]}
|
||||||
|
onResponderRelease={[Function]}
|
||||||
|
onResponderTerminate={[Function]}
|
||||||
|
onResponderTerminationRequest={[Function]}
|
||||||
|
onStartShouldSetResponder={[Function]}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"opacity": 1,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"flexDirection": "column",
|
||||||
|
"paddingHorizontal": 14,
|
||||||
|
"paddingVertical": 4,
|
||||||
|
"width": "100%",
|
||||||
|
},
|
||||||
|
undefined,
|
||||||
|
undefined,
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"flexDirection": "row",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"borderRadius": 4,
|
||||||
|
"height": 36,
|
||||||
|
"width": 36,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"marginTop": 4,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"overflow": "hidden",
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"borderRadius": 4,
|
||||||
|
"height": 36,
|
||||||
|
"width": 36,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<FastImageView
|
||||||
|
resizeMode="cover"
|
||||||
|
source={
|
||||||
|
Object {
|
||||||
|
"priority": "high",
|
||||||
|
"uri": "https://open.rocket.chat/avatar/diego.mello?format=png&width=50&height=50&rc_token=79q6lH40W4ZRGLOshDiDiVlQaCc4f_lU9HNdHLAzuHz&rc_uid=y8bd77ptZswPj3EW8",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"bottom": 0,
|
||||||
|
"left": 0,
|
||||||
|
"position": "absolute",
|
||||||
|
"right": 0,
|
||||||
|
"top": 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Array [
|
||||||
|
Object {
|
||||||
|
"flex": 1,
|
||||||
|
"marginLeft": 46,
|
||||||
|
},
|
||||||
|
Object {
|
||||||
|
"marginLeft": 10,
|
||||||
|
},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"alignItems": "center",
|
||||||
|
"flex": 1,
|
||||||
|
"flexDirection": "row",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<View
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"alignItems": "center",
|
||||||
|
"flex": 1,
|
||||||
|
"flexDirection": "row",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
numberOfLines={1}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "transparent",
|
||||||
|
"color": "#2F343D",
|
||||||
|
"fontFamily": "System",
|
||||||
|
"fontSize": 16,
|
||||||
|
"fontWeight": "500",
|
||||||
|
"lineHeight": 22,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
diego.mello
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<Text
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "transparent",
|
||||||
|
"color": "#9ca2a8",
|
||||||
|
"fontFamily": "System",
|
||||||
|
"fontSize": 12,
|
||||||
|
"fontWeight": "300",
|
||||||
|
"lineHeight": 22,
|
||||||
|
"paddingLeft": 10,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
10:00 AM
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<View
|
||||||
|
style={Object {}}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
numberOfLines={0}
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"alignItems": "flex-start",
|
||||||
|
"flexDirection": "row",
|
||||||
|
"flexWrap": "wrap",
|
||||||
|
"justifyContent": "flex-start",
|
||||||
|
"marginBottom": 0,
|
||||||
|
"marginTop": 0,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Text
|
||||||
|
style={
|
||||||
|
Object {
|
||||||
|
"backgroundColor": "transparent",
|
||||||
|
"color": "#2F343D",
|
||||||
|
"fontFamily": "System",
|
||||||
|
"fontSize": 16,
|
||||||
|
"fontWeight": "400",
|
||||||
|
}
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Text>
|
||||||
|
🤙
|
||||||
|
</Text>
|
||||||
|
<Image
|
||||||
|
source={
|
||||||
|
Object {
|
||||||
|
"uri": "https://open.rocket.chat/emoji-custom/react_rocket.png",
|
||||||
|
}
|
||||||
|
}
|
||||||
style={
|
style={
|
||||||
Object {
|
Object {
|
||||||
"height": 20,
|
"height": 20,
|
||||||
|
|
@ -3034,6 +3886,9 @@ exports[`Storyshots Message list 1`] = `
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
<Text>
|
||||||
|
🤙🤙
|
||||||
|
</Text>
|
||||||
</Text>
|
</Text>
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
|
|
|
||||||
|
|
@ -20,6 +20,33 @@ const formatText = text => text.replace(
|
||||||
(match, url, title) => `[${ title }](${ url })`
|
(match, url, title) => `[${ title }](${ url })`
|
||||||
);
|
);
|
||||||
|
|
||||||
|
const emojiRanges = [
|
||||||
|
'\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff]', // unicode emoji from https://www.regextester.com/106421
|
||||||
|
':.{1,40}:', // custom emoji
|
||||||
|
' |\n' // allow spaces and line breaks
|
||||||
|
].join('|');
|
||||||
|
|
||||||
|
const removeAllEmoji = str => str.replace(new RegExp(emojiRanges, 'g'), '');
|
||||||
|
|
||||||
|
const isOnlyEmoji = str => !removeAllEmoji(str).length;
|
||||||
|
|
||||||
|
const removeOneEmoji = str => str.replace(new RegExp(emojiRanges), '');
|
||||||
|
|
||||||
|
const emojiCount = (str) => {
|
||||||
|
let oldLength = 0;
|
||||||
|
let counter = 0;
|
||||||
|
|
||||||
|
while (oldLength !== str.length) {
|
||||||
|
oldLength = str.length;
|
||||||
|
str = removeOneEmoji(str);
|
||||||
|
if (oldLength !== str.length) {
|
||||||
|
counter += 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return counter;
|
||||||
|
};
|
||||||
|
|
||||||
const Markdown = React.memo(({
|
const Markdown = React.memo(({
|
||||||
msg, style, rules, baseUrl, username, isEdited, numberOfLines, mentions, channels, getCustomEmoji, useMarkdown = true
|
msg, style, rules, baseUrl, username, isEdited, numberOfLines, mentions, channels, getCustomEmoji, useMarkdown = true
|
||||||
}) => {
|
}) => {
|
||||||
|
|
@ -30,6 +57,7 @@ const Markdown = React.memo(({
|
||||||
if (m) {
|
if (m) {
|
||||||
m = emojify(m, { output: 'unicode' });
|
m = emojify(m, { output: 'unicode' });
|
||||||
}
|
}
|
||||||
|
|
||||||
m = m.replace(/^\[([^\]]*)\]\(([^)]*)\)/, '').trim();
|
m = m.replace(/^\[([^\]]*)\]\(([^)]*)\)/, '').trim();
|
||||||
if (numberOfLines > 0) {
|
if (numberOfLines > 0) {
|
||||||
m = m.replace(/[\n]+/g, '\n').trim();
|
m = m.replace(/[\n]+/g, '\n').trim();
|
||||||
|
|
@ -39,6 +67,8 @@ const Markdown = React.memo(({
|
||||||
return <Text style={styles.text} numberOfLines={numberOfLines}>{m}</Text>;
|
return <Text style={styles.text} numberOfLines={numberOfLines}>{m}</Text>;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const isMessageContainsOnlyEmoji = isOnlyEmoji(m) && emojiCount(m) <= 3;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<MarkdownRenderer
|
<MarkdownRenderer
|
||||||
rules={{
|
rules={{
|
||||||
|
|
@ -87,7 +117,14 @@ const Markdown = React.memo(({
|
||||||
const { content } = node.children[0];
|
const { content } = node.children[0];
|
||||||
const emoji = getCustomEmoji && getCustomEmoji(content);
|
const emoji = getCustomEmoji && getCustomEmoji(content);
|
||||||
if (emoji) {
|
if (emoji) {
|
||||||
return <CustomEmoji key={node.key} baseUrl={baseUrl} style={styles.customEmoji} emoji={emoji} />;
|
return (
|
||||||
|
<CustomEmoji
|
||||||
|
key={node.key}
|
||||||
|
baseUrl={baseUrl}
|
||||||
|
style={isMessageContainsOnlyEmoji ? styles.customEmojiBig : styles.customEmoji}
|
||||||
|
emoji={emoji}
|
||||||
|
/>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
return <Text key={node.key}>:{content}:</Text>;
|
return <Text key={node.key}>:{content}:</Text>;
|
||||||
}
|
}
|
||||||
|
|
@ -102,7 +139,7 @@ const Markdown = React.memo(({
|
||||||
}}
|
}}
|
||||||
style={{
|
style={{
|
||||||
paragraph: styles.paragraph,
|
paragraph: styles.paragraph,
|
||||||
text: styles.text,
|
text: isMessageContainsOnlyEmoji ? styles.textBig : styles.text,
|
||||||
codeInline: styles.codeInline,
|
codeInline: styles.codeInline,
|
||||||
codeBlock: styles.codeBlock,
|
codeBlock: styles.codeBlock,
|
||||||
link: styles.link,
|
link: styles.link,
|
||||||
|
|
|
||||||
|
|
@ -39,6 +39,11 @@ export default StyleSheet.create({
|
||||||
...sharedStyles.textColorNormal,
|
...sharedStyles.textColorNormal,
|
||||||
...sharedStyles.textRegular
|
...sharedStyles.textRegular
|
||||||
},
|
},
|
||||||
|
textBig: {
|
||||||
|
fontSize: 46,
|
||||||
|
...sharedStyles.textColorNormal,
|
||||||
|
...sharedStyles.textRegular
|
||||||
|
},
|
||||||
textInfo: {
|
textInfo: {
|
||||||
fontStyle: 'italic',
|
fontStyle: 'italic',
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
|
|
@ -49,6 +54,10 @@ export default StyleSheet.create({
|
||||||
width: 20,
|
width: 20,
|
||||||
height: 20
|
height: 20
|
||||||
},
|
},
|
||||||
|
customEmojiBig: {
|
||||||
|
width: 50,
|
||||||
|
height: 50
|
||||||
|
},
|
||||||
temp: { opacity: 0.3 },
|
temp: { opacity: 0.3 },
|
||||||
marginTop: {
|
marginTop: {
|
||||||
marginTop: 6
|
marginTop: 6
|
||||||
|
|
|
||||||
|
|
@ -128,9 +128,21 @@ export default (
|
||||||
<Separator title='Emojis' />
|
<Separator title='Emojis' />
|
||||||
<Message msg='👊🤙👏' />
|
<Message msg='👊🤙👏' />
|
||||||
|
|
||||||
|
<Separator title='Single Emoji' />
|
||||||
|
<Message msg='👏' />
|
||||||
|
|
||||||
<Separator title='Custom Emojis' />
|
<Separator title='Custom Emojis' />
|
||||||
<Message msg=':react_rocket: :nyan_rocket: :marioparty:' />
|
<Message msg=':react_rocket: :nyan_rocket: :marioparty:' />
|
||||||
|
|
||||||
|
<Separator title='Single Custom Emojis' />
|
||||||
|
<Message msg=':react_rocket:' />
|
||||||
|
|
||||||
|
<Separator title='Normal Emoji + Custom Emojis' />
|
||||||
|
<Message msg='🤙:react_rocket:' />
|
||||||
|
|
||||||
|
<Separator title='Four emoji' />
|
||||||
|
<Message msg='🤙:react_rocket:🤙🤙' />
|
||||||
|
|
||||||
<Separator title='Time format' />
|
<Separator title='Time format' />
|
||||||
<Message msg='Testing' timeFormat='DD MMMM YYYY' />
|
<Message msg='Testing' timeFormat='DD MMMM YYYY' />
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue