add image component
This commit is contained in:
parent
fcee55b65d
commit
3cdacb6e80
|
@ -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
|
|
@ -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 }
|
|
@ -0,0 +1 @@
|
|||
export * from './image'
|
Loading…
Reference in New Issue