diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-04-16 16:08:49 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-04-16 16:41:30 +0200 |
| commit | 5a6e4eea16047083e2de0e91a1b3ed9be8d6eb68 (patch) | |
| tree | ea0c5390aca73907aade5321f30cb7bf8d3ab1cb /src/components/organisms/widgets/image-widget.tsx | |
| parent | daffe6e8b9e2021ffb9d006482143bc4db985f02 (diff) | |
refactor: support React 18
I replaced the deprecated VFC type with FC type and made all children
explicits.
Formatjs is still not compatible with React 18 so I need to skip type
checking when comitting. There are some type errors because of
IntlProvider in Storybook stories.
Diffstat (limited to 'src/components/organisms/widgets/image-widget.tsx')
| -rw-r--r-- | src/components/organisms/widgets/image-widget.tsx | 34 |
1 files changed, 11 insertions, 23 deletions
diff --git a/src/components/organisms/widgets/image-widget.tsx b/src/components/organisms/widgets/image-widget.tsx index 928d5ea..ba04c6a 100644 --- a/src/components/organisms/widgets/image-widget.tsx +++ b/src/components/organisms/widgets/image-widget.tsx @@ -1,28 +1,16 @@ -import ResponsiveImage from '@components/molecules/images/responsive-image'; +import ResponsiveImage, { + type ResponsiveImageProps, +} from '@components/molecules/images/responsive-image'; import Widget, { type WidgetProps } from '@components/molecules/layout/widget'; -import { VFC } from 'react'; +import { FC } from 'react'; import styles from './image-widget.module.scss'; export type Alignment = 'left' | 'center' | 'right'; -export type Image = { - /** - * An alternative text for the image. - */ - alt: string; - /** - * The image height. - */ - height: number; - /** - * The image source. - */ - src: string; - /** - * The image width. - */ - width: number; -}; +export type Image = Pick< + ResponsiveImageProps, + 'alt' | 'height' | 'src' | 'width' +>; export type ImageWidgetProps = Pick< WidgetProps, @@ -35,7 +23,7 @@ export type ImageWidgetProps = Pick< /** * Add a caption to the image. */ - description?: string; + description?: ResponsiveImageProps['caption']; /** * An object describing the image. */ @@ -43,7 +31,7 @@ export type ImageWidgetProps = Pick< /** * Add a link to the image. */ - url?: string; + url?: ResponsiveImageProps['target']; }; /** @@ -51,7 +39,7 @@ export type ImageWidgetProps = Pick< * * Renders a widget that print an image and an optional text. */ -const ImageWidget: VFC<ImageWidgetProps> = ({ +const ImageWidget: FC<ImageWidgetProps> = ({ alignment = 'left', description, img, |
