improve Image props and fix border radius on safari
This commit is contained in:
parent
a243fbcbad
commit
15e44e70fe
|
@ -5,6 +5,7 @@ import { Image as RNImage } from 'react-native'
|
||||||
|
|
||||||
import type { GetProps } from '@tamagui/core'
|
import type { GetProps } from '@tamagui/core'
|
||||||
import type { Ref } from 'react'
|
import type { Ref } from 'react'
|
||||||
|
import type { ImagePropsBase as RNImageProps } from 'react-native'
|
||||||
|
|
||||||
// TODO: this was used in @tamagui/image package. Why?
|
// TODO: this was used in @tamagui/image package. Why?
|
||||||
// import { focusableInputHOC } from '@tamagui/focusable'
|
// import { focusableInputHOC } from '@tamagui/focusable'
|
||||||
|
@ -20,23 +21,30 @@ const Base = styled(RNImage, {
|
||||||
source: {
|
source: {
|
||||||
uri: '',
|
uri: '',
|
||||||
},
|
},
|
||||||
|
|
||||||
|
variants: {
|
||||||
|
radius: {
|
||||||
|
12: {
|
||||||
|
borderRadius: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
type InputProps = GetProps<typeof Image>
|
type ImageProps = GetProps<typeof Base>
|
||||||
|
|
||||||
// type W = InputProps['width']
|
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
src: string
|
src: string
|
||||||
width: number | 'full'
|
width: number | 'full'
|
||||||
height?: number
|
height?: number
|
||||||
aspectRatio?: number
|
aspectRatio?: ImageProps['aspectRatio']
|
||||||
// onLoad?: InputProps['onLoad']
|
radius?: ImageProps['radius']
|
||||||
// onError?: InputProps['onError']
|
onLoad?: RNImageProps['onLoad']
|
||||||
|
onError?: RNImageProps['onError']
|
||||||
}
|
}
|
||||||
|
|
||||||
const Image = (props: Props, ref: Ref<HTMLImageElement>) => {
|
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 width = props.width === 'full' ? '100%' : props.width
|
||||||
const height = aspectRatio ? undefined : props.height
|
const height = aspectRatio ? undefined : props.height
|
||||||
|
@ -53,9 +61,8 @@ const Image = (props: Props, ref: Ref<HTMLImageElement>) => {
|
||||||
source={source}
|
source={source}
|
||||||
width={width}
|
width={width}
|
||||||
height={height}
|
height={height}
|
||||||
style={{
|
radius={radius}
|
||||||
aspectRatio,
|
aspectRatio={aspectRatio}
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -36,7 +36,11 @@ const ChatMessage = (props: Props) => {
|
||||||
>
|
>
|
||||||
{hovered && (
|
{hovered && (
|
||||||
<Unspaced>
|
<Unspaced>
|
||||||
<Actions onClick={() => {}} />
|
<Actions
|
||||||
|
onClick={() => {
|
||||||
|
console.log('clicked')
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</Unspaced>
|
</Unspaced>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
@ -63,14 +67,12 @@ const ChatMessage = (props: Props) => {
|
||||||
{images?.map(image => (
|
{images?.map(image => (
|
||||||
<Stack
|
<Stack
|
||||||
key={image.url}
|
key={image.url}
|
||||||
borderRadius={12}
|
|
||||||
overflow="hidden"
|
|
||||||
marginTop={8}
|
marginTop={8}
|
||||||
$gtMd={{
|
$gtMd={{
|
||||||
maxWidth: 320,
|
maxWidth: 320,
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Image src={image.url} width="full" height={320} />
|
<Image src={image.url} width="full" height={320} radius={12} />
|
||||||
</Stack>
|
</Stack>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue