Add Image component support (#57)

packages/fastui/src/components/image.tsx

@@ -0,0 +1,43 @@
+import { FC } from 'react'
+
+import { ClassName, useClassName } from '../hooks/className'
+import { useFireEvent, AnyEvent } from '../events'
+
+export interface ImageProps {
+  type: 'Image'
+  src: string
+  alt?: string
+  width?: number | string
+  height?: number | string
+  referrerPolicy?:
+    | 'no-referrer'
+    | 'no-referrer-when-downgrade'
+    | 'origin'
+    | 'origin-when-cross-origin'
+    | 'same-origin'
+    | 'strict-origin'
+    | 'strict-origin-when-cross-origin'
+    | 'unsafe-url'
+  loading?: 'eager' | 'lazy'
+  onClick?: AnyEvent
+  className?: ClassName
+}
+
+export const ImageComp: FC<ImageProps> = (props) => {
+  const { src, alt, width, height, referrerPolicy, loading, onClick } = props
+
+  const { fireEvent } = useFireEvent()
+
+  return (
+    <img
+      className={useClassName(props)}
+      src={src}
+      alt={alt}
+      width={width}
+      height={height}
+      referrerPolicy={referrerPolicy}
+      loading={loading}
+      onClick={() => fireEvent(onClick)}
+    />
+  )
+}

packages/fastui/src/components/index.tsx

@@ -38,6 +38,7 @@ import {
 } from './display'
 import { JsonComp, JsonProps } from './Json'
 import { ServerLoadComp, ServerLoadProps } from './ServerLoad'
+import { ImageComp, ImageProps } from './image'
 import { IframeComp, IframeProps } from './Iframe'
 
 export type {
@@ -64,6 +65,7 @@ export type {
   DisplayPrimitiveProps,
   JsonProps,
   ServerLoadProps,
+  ImageProps,
   IframeProps,
 }
 
@@ -93,6 +95,7 @@ export type FastProps =
   | AllDisplayProps
   | JsonProps
   | ServerLoadProps
+  | ImageProps
   | IframeProps
 
 export type FastClassNameProps = Exclude<FastProps, TextProps | AllDisplayProps | ServerLoadProps | PageTitleProps>
@@ -172,6 +175,8 @@ export const AnyComp: FC<FastProps> = (props) => {
         return <JsonComp {...props} />
       case 'ServerLoad':
         return <ServerLoadComp {...props} />
+      case 'Image':
+        return <ImageComp {...props} />
       case 'Iframe':
         return <IframeComp {...props} />
       default:

python/demo/components_list.py

@@ -168,6 +168,22 @@ class Delivery(BaseModel):
             ],
             class_name='border-top mt-3 pt-1',
         ),
+        c.Div(
+            components=[
+                c.Heading(text='Image', level=2),
+                c.Paragraph(text='An image component.'),
+                c.Image(
+                    src='https://avatars.githubusercontent.com/u/110818415',
+                    alt='Pydantic Logo',
+                    width=200,
+                    height=200,
+                    loading='lazy',
+                    referrerpolicy='no-referrer',
+                    class_name='border rounded',
+                ),
+            ],
+            class_name='border-top mt-3 pt-1',
+        ),
         title='Components',
     )
 

python/fastui/components/__init__.py

@@ -47,6 +47,7 @@
     'Table',
     'Display',
     'Details',
+    'Image',
 )
 
 
@@ -170,6 +171,27 @@ class ServerLoad(pydantic.BaseModel, extra='forbid'):
     type: typing.Literal['ServerLoad'] = 'ServerLoad'
 
 
+class Image(pydantic.BaseModel, extra='forbid'):
+    src: str
+    alt: str | None = None
+    width: int | float | str | None = None
+    height: int | float | str | None = None
+    referrerpolicy: typing.Literal[
+        'no-referrer',
+        'no-referrer-when-downgrade',
+        'origin',
+        'origin-when-cross-origin',
+        'same-origin',
+        'strict-origin',
+        'strict-origin-when-cross-origin',
+        'unsafe-url',
+    ] | None = None
+    loading: typing.Literal['eager', 'lazy'] | None = None
+    on_click: events.AnyEvent | None = pydantic.Field(default=None, serialization_alias='onClick')
+    class_name: _class_name.ClassName = None
+    type: typing.Literal['Image'] = 'Image'
+
+
 class Iframe(pydantic.BaseModel, extra='forbid'):
     src: pydantic.HttpUrl
     title: str | None = None
@@ -199,6 +221,7 @@ class Iframe(pydantic.BaseModel, extra='forbid'):
     | Details
     | Form
     | ModelForm
+    | Image
     | Iframe
     | FormField,
     pydantic.Field(discriminator='type'),