feat: improved reply and reaction features

Signed-off-by: Sakul <sakulbudhathoki977@gmail.com>
berty · Apr 6, 2021 · 0141b6a · 0141b6a
1 parent 3bf0df7
commit 0141b6a
Show file tree

Hide file tree

Showing 4 changed files with 69 additions and 82 deletions.
diff --git a/js/packages/components/chat/common.tsx b/js/packages/components/chat/common.tsx
@@ -387,7 +387,7 @@ export const ChatFooter: React.FC<{
 										<Text
 											numberOfLines={1}
 											style={{
-												width: 220,
+												width: aMaxWidth?.value,
 												color: activeReplyInte?.textColor,
 												fontSize: 12,
 												lineHeight: 17,

diff --git a/js/packages/components/chat/message/Popover.tsx b/js/packages/components/chat/message/Popover.tsx
@@ -14,57 +14,41 @@ const Popover: React.FC<{
 	return (
 		<View
 			style={{
-				padding: 20,
-				paddingBottom: 40,
-				height: 120,
+				backgroundColor: '#F7F8FF',
+				flexDirection: 'row',
+				paddingVertical: 5,
+				paddingHorizontal: 10,
+				alignItems: 'center',
+				justifyContent: 'center',
+				borderRadius: 100,
+				borderWidth: 2,
+				borderColor: '#EFF1FA',
 			}}
 		>
-			<View
-				style={{
-					backgroundColor: '#F7F8FF',
-					flexDirection: 'row',
-					paddingVertical: 5,
-					paddingHorizontal: 10,
-					alignItems: 'center',
-					justifyContent: 'center',
-					borderRadius: 100,
-					shadowColor: 'rgba(0,0,0,1)',
-					shadowOffset: {
-						width: 0,
-						height: 10,
-					},
-					shadowOpacity: 0.27,
-					shadowRadius: 10,
-					elevation: 6,
-					borderWidth: 2,
-					borderColor: '#EFF1FA',
-				}}
-			>
-				<Icon
-					name='undo'
-					fill='#D1D4DE'
-					style={{ marginHorizontal: 4 }}
-					height={30}
-					width={30}
-					onPress={onReply}
+			<Icon
+				name='undo'
+				fill='#D1D4DE'
+				style={{ marginHorizontal: 4 }}
+				height={30}
+				width={30}
+				onPress={onReply}
+			/>
+			{emojis.map((item) => (
+				<Emoji
+					key={item}
+					name={item}
+					style={{ marginHorizontal: 4, fontSize: 26 }}
+					onPress={() => onSelectEmoji(item)}
 				/>
-				{emojis.map((item) => (
-					<Emoji
-						key={item}
-						name={item}
-						style={{ marginHorizontal: 4, fontSize: 26 }}
-						onPress={() => onSelectEmoji(item)}
-					/>
-				))}
-				<Icon
-					name='more-horizontal'
-					fill='#D1D4DE'
-					style={{ marginHorizontal: 4 }}
-					height={40}
-					width={40}
-					onPress={onEmojiKeyboard}
-				/>
-			</View>
+			))}
+			<Icon
+				name='more-horizontal'
+				fill='#D1D4DE'
+				style={{ marginHorizontal: 4 }}
+				height={40}
+				width={40}
+				onPress={onEmojiKeyboard}
+			/>
 		</View>
 	)
 }

diff --git a/js/packages/components/chat/message/UserMessage.tsx b/js/packages/components/chat/message/UserMessage.tsx
@@ -4,7 +4,7 @@ import { SHA3 } from 'sha3'
 import palette from 'google-palette'
 import Color from 'color'
 import { Text, Icon } from '@ui-kitten/components'
-import Popover, { PopoverPlacement } from 'react-native-popover-view'
+import Popover from 'react-native-popover-view'
 import { PanGestureHandler, State } from 'react-native-gesture-handler'
 
 import beapi from '@berty-tech/api'
@@ -297,33 +297,47 @@ export const UserMessage: React.FC<{
 						<PanGestureHandler
 							enabled={!inte.isMine}
 							onGestureEvent={({ nativeEvent }) => {
-								if (nativeEvent.translationX > 0 && nativeEvent.translationX < 100) {
+								if (nativeEvent.translationX > 0 && nativeEvent.translationX < 120) {
 									Animated.timing(animatedValue, {
 										toValue: nativeEvent.translationX,
-										duration: 10,
+										duration: 1,
 										useNativeDriver: false,
 									}).start()
 								} else if (nativeEvent.translationX <= 0) {
 									Animated.timing(animatedValue, {
 										toValue: 0,
-										duration: 100,
+										duration: 50,
 										useNativeDriver: false,
 									}).start()
 								}
 							}}
 							onHandlerStateChange={(event) => {
 								if (event.nativeEvent.oldState === State.ACTIVE) {
-									if (event.nativeEvent.velocityX > 100 || event.nativeEvent.translationX > 40) {
+									if (event.nativeEvent.translationX > 120) {
+										setActiveReplyInte({
+											...inte,
+											backgroundColor: msgBackgroundColor,
+											textColor: msgTextColor,
+										})
 										Animated.timing(animatedValue, {
-											toValue: 100,
-											duration: 100,
+											toValue: 0,
+											duration: 50,
+											useNativeDriver: false,
+										}).start()
+									} else if (
+										event.nativeEvent.velocityX > 100 ||
+										event.nativeEvent.translationX > 40
+									) {
+										Animated.timing(animatedValue, {
+											toValue: 60,
+											duration: 50,
 
 											useNativeDriver: false,
 										}).start()
 									} else {
 										Animated.timing(animatedValue, {
 											toValue: 0,
-											duration: 100,
+											duration: 50,
 
 											useNativeDriver: false,
 										}).start()
@@ -335,25 +349,24 @@ export const UserMessage: React.FC<{
 								style={{
 									flexDirection: 'row',
 									alignItems: 'center',
-									marginLeft: animatedValue,
+									transform: [{ translateX: animatedValue }],
 								}}
 							>
 								<Animated.View
 									style={{
 										marginRight: 10,
 										opacity: animatedValue.interpolate({
-											inputRange: [0, 100],
+											inputRange: [0, 60],
 											outputRange: [0, 1],
 										}),
 										position: 'absolute',
-										bottom: 0,
 										left: -50,
 									}}
 								>
 									<Icon
 										name='undo'
-										height={40}
-										width={40}
+										height={30}
+										width={30}
 										fill='#D1D4DF'
 										onPress={() => {
 											setActiveReplyInte({
@@ -371,14 +384,11 @@ export const UserMessage: React.FC<{
 									/>
 								</Animated.View>
 								<Popover
-									placement={PopoverPlacement.BOTTOM}
 									isVisible={activePopoverCid === inte.cid}
 									popoverStyle={{
 										backgroundColor: 'transparent',
 										borderWidth: 0,
 										shadowColor: 'transparent',
-										marginTop: -30,
-										marginLeft: -20,
 									}}
 									backgroundStyle={{
 										backgroundColor: 'transparent',
@@ -394,17 +404,16 @@ export const UserMessage: React.FC<{
 											disabled={inte.isMine}
 											activeOpacity={0.9}
 											onPress={() => {
+												if (activePopoverCid === inte.cid) {
+													setActivePopoverCid(null)
+												} else if (animatedValue._value === 0) {
+													setActivePopoverCid(inte.cid)
+												}
 												Animated.timing(animatedValue, {
 													toValue: 0,
-													duration: 100,
+													duration: 50,
 													useNativeDriver: false,
-												}).start(() => {
-													if (activePopoverCid === inte.cid) {
-														setActivePopoverCid(null)
-													} else {
-														setActivePopoverCid(inte.cid)
-													}
-												})
+												}).start(() => {})
 											}}
 										>
 											<HyperlinkUserMessage

diff --git a/js/packages/components/chat/message/UserMessageComponents.tsx b/js/packages/components/chat/message/UserMessageComponents.tsx
@@ -80,7 +80,7 @@ export const HyperlinkUserMessage: React.FC<{
 					backgroundColor: msgBackgroundColor,
 				},
 				inte?.reactions?.length && {
-					marginBottom: 10,
+					marginBottom: 14,
 				},
 			]}
 		>
@@ -134,15 +134,9 @@ export const HyperlinkUserMessage: React.FC<{
 							paddingVertical: 2,
 							paddingHorizontal: 4,
 							position: 'absolute',
-							bottom: -10,
+							bottom: -14,
+							right: 10,
 						},
-						inte.isMine
-							? {
-									left: 10,
-							  }
-							: {
-									right: 10,
-							  },
 					]}
 				>
 					{inte.reactions.map(({ emoji }) => (