From 36323b6546f4f7130b08470e17a5edeb10de6f8a Mon Sep 17 00:00:00 2001
From: Sophia Kuhlmann <sophiakuhl27@gmail.com>
Date: Thu, 3 Apr 2025 20:17:19 +0200
Subject: [PATCH] HOLI-11330 fix type errors
---
holi-bricks/components/image/Image.tsx | 2 +-
holi-bricks/components/image/Image.web.tsx | 20 ++++++++++++--------
holi-bricks/components/image/type.ts | 5 ++---
3 files changed, 15 insertions(+), 12 deletions(-)
diff --git a/holi-bricks/components/image/Image.tsx b/holi-bricks/components/image/Image.tsx
index f9b772fbb5..c36da20de0 100644
--- a/holi-bricks/components/image/Image.tsx
+++ b/holi-bricks/components/image/Image.tsx
@@ -35,7 +35,7 @@ export const Image: React.FC<ImageProps> = ({
}) => {
const [hasError, setHasError] = useState(false)
const transformedSource =
- typeof width === 'number' && typeof height === 'number' ? setScalingParams(source, width, height) : undefined // todo
+ typeof width === 'number' && typeof height === 'number' ? setScalingParams(source, width, height) : undefined
const isRemote = isRemoteSource(source)
const localSvg = typeof source === 'number' && isLocalSvg(source)
const { styles } = useStyles(stylesheet)
diff --git a/holi-bricks/components/image/Image.web.tsx b/holi-bricks/components/image/Image.web.tsx
index 9be9ad7440..2b476ec594 100644
--- a/holi-bricks/components/image/Image.web.tsx
+++ b/holi-bricks/components/image/Image.web.tsx
@@ -1,11 +1,11 @@
-import type { ImageProps } from 'holi-bricks/components/image'
-import type React from 'react'
-import { useState } from 'react'
-import NextImage from 'next/image'
import { accessibilityProps } from 'holi-bricks/accessibility'
+import type { ImageProps } from 'holi-bricks/components/image'
import { setScalingParams } from 'holi-bricks/components/image/helpers'
-import { createStyleSheet } from 'holi-bricks/utils'
import { useStyles } from 'holi-bricks/hooks'
+import { createStyleSheet } from 'holi-bricks/utils'
+import NextImage from 'next/image'
+import type React from 'react'
+import { useState } from 'react'
import { View } from 'react-native'
export const isRemoteSource = (source: string): source is string => {
@@ -27,7 +27,11 @@ export const Image: React.FC<ImageProps> = ({
}) => {
const [hasError, setHasError] = useState(false)
const isRemote = isRemoteSource(source as string)
- const transformedSource = (isRemote ? setScalingParams(source as string, width, height) : source) as string
+ const transformedSource = (
+ isRemote && typeof width === 'number' && typeof height === 'number'
+ ? setScalingParams(source as string, width, height)
+ : source
+ ) as string
const { styles } = useStyles(stylesheet)
return (
@@ -38,8 +42,8 @@ export const Image: React.FC<ImageProps> = ({
role="img"
aria-label={alt}
blurDataURL={isRemote ? blurhash : undefined}
- width={width}
- height={height}
+ width={width as number | undefined}
+ height={height as number | undefined}
style={{ objectFit: resizeMode }}
onError={() => {
setHasError(true)
diff --git a/holi-bricks/components/image/type.ts b/holi-bricks/components/image/type.ts
index 1ce12d5165..b75bf68756 100644
--- a/holi-bricks/components/image/type.ts
+++ b/holi-bricks/components/image/type.ts
@@ -1,13 +1,12 @@
import type { ImageContentFit } from 'expo-image'
import type { AccessibilityProps } from 'holi-bricks/accessibility'
-import type { DimensionValue } from 'react-native'
export type ImageSource = string | number
export interface ImageProps extends AccessibilityProps {
source: ImageSource
- width: DimensionValue
- height: DimensionValue
+ width: number | `${number}%`
+ height: number | `${number}%`
resizeMode?: ImageContentFit
onError?: () => void
onLoadEnd?: () => void
--
GitLab