feat: pressable avatar images

Signed-off-by: Sakul <sakulbudhathoki977@gmail.com>
berty · Apr 20, 2021 · 536fb77 · 536fb77
1 parent 10c050a
commit 536fb77
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 42 deletions.
diff --git a/js/packages/components/AttachmentImage.tsx b/js/packages/components/AttachmentImage.tsx
@@ -2,12 +2,13 @@ import React, { useState, useEffect } from 'react'
 import { Image, ImageProps, ActivityIndicator, View, TouchableOpacity } from 'react-native'
 
 import { useMsgrContext } from '@berty-tech/store/hooks'
-import { navigate } from '@berty-tech/navigation'
+import { useNavigation } from '@berty-tech/navigation'
 import { getSource } from './utils'
 
 const AttachmentImage: React.FC<
-	{ cid: string; notPressable?: boolean } & Omit<ImageProps, 'source'>
+	{ cid: string; pressable?: boolean } & Omit<ImageProps, 'source'>
 > = (props) => {
+	const { navigate } = useNavigation()
 	const { protocolClient, medias } = useMsgrContext()
 	const [source, setSource] = useState('')
 	const { cid, ...imageProps } = props
@@ -38,10 +39,14 @@ const AttachmentImage: React.FC<
 		)
 	}
 
-	return props.notPressable ? (
+	return !props.pressable ? (
 		<Image source={{ uri: source }} {...imageProps} />
 	) : (
-		<TouchableOpacity onPress={() => navigate('Image', { cid })}>
+		<TouchableOpacity
+			onPress={() => {
+				navigate.modals.imageView({ images: [{ uri: source }], previewOnly: true })
+			}}
+		>
 			<Image source={{ uri: source }} {...imageProps} />
 		</TouchableOpacity>
 	)

diff --git a/js/packages/components/avatars.tsx b/js/packages/components/avatars.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import { Image, View, ViewStyle, Text } from 'react-native'
+import { Image, View, ViewStyle, Text, TouchableOpacity } from 'react-native'
 import palette from 'google-palette'
 import { SHA3 } from 'sha3'
 import { Buffer } from 'buffer'
@@ -14,6 +14,7 @@ import {
 	Maybe,
 	useMsgrContext,
 } from '@berty-tech/store/hooks'
+import { useNavigation } from '@berty-tech/navigation'
 import beapi from '@berty-tech/api'
 import PinkBotAvatar from '@berty-tech/assets/berty_bot_pink_bg.png'
 import GreenDevAvatar from '@berty-tech/assets/berty_dev_green_bg.png'
@@ -38,7 +39,8 @@ export const GenericAvatar: React.FC<{
 	style?: AvatarStyle
 	isEditable?: boolean
 	nameSeed: Maybe<string>
-}> = ({ cid, size, colorSeed, style, isEditable = false, nameSeed }) => {
+	pressable?: boolean
+}> = ({ cid, size, colorSeed, style, isEditable = false, nameSeed, pressable }) => {
 	const [{ border, background, color }] = useStyles()
 	const padding = Math.round(size / 14)
 	let innerSize = Math.round(size - 2 * padding)
@@ -52,7 +54,7 @@ export const GenericAvatar: React.FC<{
 				<AttachmentImage
 					cid={cid}
 					style={{ width: innerSize, height: innerSize, borderRadius: innerSize / 2 }}
-					notPressable
+					pressable={pressable}
 				/>
 				{isEditable ? (
 					<View
@@ -132,15 +134,22 @@ export const HardcodedAvatar: React.FC<{
 	size: number
 	style?: AvatarStyle
 	name: HardcodedAvatarKey
-}> = ({ size, style, name }) => {
+	pressable?: boolean
+}> = ({ size, style, name, pressable }) => {
+	const { navigate } = useNavigation()
 	const [{ border }] = useStyles()
 	let avatar = hardcodedAvatars[name]
 	if (!avatar) {
 		avatar = Logo
 	}
 
 	return (
-		<View
+		<TouchableOpacity
+			activeOpacity={0.9}
+			disabled={!pressable}
+			onPress={() => {
+				navigate.modals.imageView({ images: [avatar], previewOnly: true })
+			}}
 			style={[{ borderRadius: size / 2, backgroundColor: 'white' }, border.shadow.medium, style]}
 		>
 			<Image
@@ -151,7 +160,7 @@ export const HardcodedAvatar: React.FC<{
 					borderRadius: size / 2,
 				}}
 			/>
-		</View>
+		</TouchableOpacity>
 	)
 }
 
@@ -207,14 +216,22 @@ export const ContactAvatar: React.FC<{
 	size: number
 	style?: AvatarStyle
 	fallbackNameSeed?: Maybe<string>
-}> = ({ publicKey, size, style, fallbackNameSeed }) => {
+	pressable?: boolean
+}> = ({ publicKey, size, style, fallbackNameSeed, pressable }) => {
 	const contact = useContact(publicKey)
 	const ctx = useMsgrContext()
 	const suggestion = Object.values(ctx.persistentOptions?.suggestions).find(
 		(v) => v.pk === publicKey,
 	)
 	if (suggestion) {
-		return <HardcodedAvatar size={size} style={style} name={suggestion.icon as any} />
+		return (
+			<HardcodedAvatar
+				size={size}
+				style={style}
+				name={suggestion.icon as any}
+				pressable={pressable}
+			/>
+		)
 	}
 	return (
 		<GenericAvatar
@@ -223,6 +240,7 @@ export const ContactAvatar: React.FC<{
 			size={size}
 			colorSeed={publicKey}
 			style={style}
+			pressable={pressable}
 		/>
 	)
 }

diff --git a/js/packages/components/chat/OneToOneSettings.tsx b/js/packages/components/chat/OneToOneSettings.tsx
@@ -34,7 +34,7 @@ const OneToOneHeader: React.FC<{ contact: any }> = ({ contact }) => {
 
 	return (
 		<View style={[_styles.headerAvatar, { alignItems: 'center' }]}>
-			<ContactAvatar size={100 * scaleSize} publicKey={contact.publicKey} />
+			<ContactAvatar size={100 * scaleSize} publicKey={contact.publicKey} pressable />
 			<Text
 				numberOfLines={1}
 				style={[text.size.scale(18), text.color.white, text.align.center, padding.top.small]}

diff --git a/js/packages/components/modals/ImageView.tsx b/js/packages/components/modals/ImageView.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 import { useStyles } from '@berty-tech/styles'
-import { View, Modal, TouchableOpacity } from 'react-native'
+import { View, Modal, TouchableOpacity, Image } from 'react-native'
 import { Text, Icon } from '@ui-kitten/components'
 import { useTranslation } from 'react-i18next'
 import CameraRoll from '@react-native-community/cameraroll'
@@ -16,11 +16,12 @@ export const ImageView: React.FC<{
 	route: {
 		params: {
 			images: beapi.messenger.IMedia[]
+			previewOnly?: boolean
 		}
 	}
 }> = ({
 	route: {
-		params: { images },
+		params: { images, previewOnly = false },
 	},
 }) => {
 	const [{ color, border, padding }] = useStyles()
@@ -80,7 +81,9 @@ export const ImageView: React.FC<{
 	return (
 		<Modal transparent>
 			<ImageViewer
-				imageUrls={images.map(({ uri }) => ({ url: uri }))}
+				imageUrls={images.map((image) => ({
+					url: image.uri || Image.resolveAssetSource(image).uri,
+				}))}
 				index={0}
 				onClick={() => {
 					setModalVisibility((prev) => !prev)
@@ -89,6 +92,7 @@ export const ImageView: React.FC<{
 					index && setCurrentIndex(index)
 				}}
 				renderFooter={() => <></>}
+				renderIndicator={previewOnly ? () => <></> : undefined}
 				enablePreload
 				enableSwipeDown
 				onSwipeDown={goBack}
@@ -117,31 +121,33 @@ export const ImageView: React.FC<{
 							flex: 1,
 						}}
 					/>
-					<View
-						style={[
-							{
-								position: 'absolute',
-								left: 0,
-								bottom: 0,
-								right: 0,
-								backgroundColor: color.white,
-							},
-							padding.medium,
-							border.radius.top.large,
-						]}
-					>
-						{MENU_LIST.map((item) => (
-							<TouchableOpacity key={item.title} onPress={item.onPress} style={[padding.medium]}>
-								<Text
-									style={{
-										textAlign: 'center',
-									}}
-								>
-									{item.title}
-								</Text>
-							</TouchableOpacity>
-						))}
-					</View>
+					{!previewOnly && (
+						<View
+							style={[
+								{
+									position: 'absolute',
+									left: 0,
+									bottom: 0,
+									right: 0,
+									backgroundColor: color.white,
+								},
+								padding.medium,
+								border.radius.top.large,
+							]}
+						>
+							{MENU_LIST.map((item) => (
+								<TouchableOpacity key={item.title} onPress={item.onPress} style={[padding.medium]}>
+									<Text
+										style={{
+											textAlign: 'center',
+										}}
+									>
+										{item.title}
+									</Text>
+								</TouchableOpacity>
+							))}
+						</View>
+					)}
 				</Modal>
 			)}
 			{!!message && (

diff --git a/js/packages/navigation/types.ts b/js/packages/navigation/types.ts
@@ -54,7 +54,10 @@ export namespace ScreenProps {
 	}
 	export namespace Modals {
 		export type ManageDeepLink = RouteProps<{ type: 'qr' | 'link'; value: string }>
-		export type ImageView = RouteProps<{ images: beapi.messenger.IMedia[] }>
+		export type ImageView = RouteProps<{
+			images: beapi.messenger.IMedia[]
+			previewOnly?: boolean
+		}>
 	}
 }