add image component

This commit is contained in:
Pavel Prichodko 2023-01-16 13:11:08 +01:00
parent fcee55b65d
commit 3cdacb6e80
No known key found for this signature in database
GPG Key ID: 8E4C82D464215E83
3 changed files with 84 additions and 0 deletions

View File

@ -0,0 +1,33 @@
import React from 'react'
import { Stack } from '@tamagui/core'
import { Image } from './image'
import type { Meta, StoryObj } from '@storybook/react'
// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
const meta: Meta<typeof Image> = {
component: Image,
argTypes: {},
}
type Story = StoryObj<typeof Image>
// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
export const Default: Story = {
args: {
src: 'https://images.unsplash.com/photo-1673253082952-4ba1b404e5ee?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1160&q=80',
width: 500,
height: 500,
},
render: args => (
<Stack space spaceDirection="vertical">
<Image {...args} width={500} height={500} />
<Image {...args} width={500} height={350} />
<Image {...args} width={500} height={200} />
</Stack>
),
}
export default meta

View File

@ -0,0 +1,50 @@
import React, { forwardRef } from 'react'
import { isWeb, setupReactNative, styled } from '@tamagui/core'
import { Image as RNImage } from 'react-native'
import type { GetProps } from '@tamagui/core'
import type { Ref } from 'react'
// TODO: this was used in @tamagui/image package. Why?
// import { focusableInputHOC } from '@tamagui/focusable'
setupReactNative({
Image: RNImage,
})
const Base = styled(RNImage, {
name: 'Image',
position: 'relative',
source: { uri: '' },
zIndex: 1,
})
type InputProps = GetProps<typeof Image>
interface Props {
src: string
width: number
height: number
// onLoad?: InputProps['onLoad']
// onError?: InputProps['onError']
}
const Image = (props: Props, ref: Ref<HTMLImageElement>) => {
const { src } = props
const source =
typeof src === 'string'
? {
uri: src,
...(isWeb && { width: props.width, height: props.height }),
}
: src
return <Base source={source} ref={ref} />
}
// focusableInputHOC(Image)
const _Image = Base.extractable(forwardRef(Image))
export { _Image as Image }

View File

@ -0,0 +1 @@
export * from './image'