From 15e44e70fec74f0e5e57339c30f6421a0319c24f Mon Sep 17 00:00:00 2001
From: Pavel Prichodko <14926950+prichodko@users.noreply.github.com>
Date: Mon, 23 Jan 2023 14:45:18 +0100
Subject: [PATCH] improve Image props and fix border radius on safari

---
 packages/components/src/image/image.tsx       | 27 ++++++++++++-------
 .../components/src/messages/chat-message.tsx  | 10 ++++---
 2 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/packages/components/src/image/image.tsx b/packages/components/src/image/image.tsx
index 30280d32..b7df4bf9 100644
--- a/packages/components/src/image/image.tsx
+++ b/packages/components/src/image/image.tsx
@@ -5,6 +5,7 @@ import { Image as RNImage } from 'react-native'
 
 import type { GetProps } from '@tamagui/core'
 import type { Ref } from 'react'
+import type { ImagePropsBase as RNImageProps } from 'react-native'
 
 // TODO: this was used in @tamagui/image package. Why?
 // import { focusableInputHOC } from '@tamagui/focusable'
@@ -20,23 +21,30 @@ const Base = styled(RNImage, {
   source: {
     uri: '',
   },
+
+  variants: {
+    radius: {
+      12: {
+        borderRadius: 12,
+      },
+    },
+  },
 })
 
-type InputProps = GetProps<typeof Image>
-
-// type W = InputProps['width']
+type ImageProps = GetProps<typeof Base>
 
 interface Props {
   src: string
   width: number | 'full'
   height?: number
-  aspectRatio?: number
-  // onLoad?: InputProps['onLoad']
-  // onError?: InputProps['onError']
+  aspectRatio?: ImageProps['aspectRatio']
+  radius?: ImageProps['radius']
+  onLoad?: RNImageProps['onLoad']
+  onError?: RNImageProps['onError']
 }
 
 const Image = (props: Props, ref: Ref<HTMLImageElement>) => {
-  const { src, aspectRatio, ...rest } = props
+  const { src, aspectRatio, radius, ...rest } = props
 
   const width = props.width === 'full' ? '100%' : props.width
   const height = aspectRatio ? undefined : props.height
@@ -53,9 +61,8 @@ const Image = (props: Props, ref: Ref<HTMLImageElement>) => {
       source={source}
       width={width}
       height={height}
-      style={{
-        aspectRatio,
-      }}
+      radius={radius}
+      aspectRatio={aspectRatio}
     />
   )
 }
diff --git a/packages/components/src/messages/chat-message.tsx b/packages/components/src/messages/chat-message.tsx
index 6a63b7f5..ab5cf4d4 100644
--- a/packages/components/src/messages/chat-message.tsx
+++ b/packages/components/src/messages/chat-message.tsx
@@ -36,7 +36,11 @@ const ChatMessage = (props: Props) => {
     >
       {hovered && (
         <Unspaced>
-          <Actions onClick={() => {}} />
+          <Actions
+            onClick={() => {
+              console.log('clicked')
+            }}
+          />
         </Unspaced>
       )}
 
@@ -63,14 +67,12 @@ const ChatMessage = (props: Props) => {
         {images?.map(image => (
           <Stack
             key={image.url}
-            borderRadius={12}
-            overflow="hidden"
             marginTop={8}
             $gtMd={{
               maxWidth: 320,
             }}
           >
-            <Image src={image.url} width="full" height={320} />
+            <Image src={image.url} width="full" height={320} radius={12} />
           </Stack>
         ))}