From 8e63d8b92a6c0ae13a7127d10b1a39c3eaee4a28 Mon Sep 17 00:00:00 2001
From: scerelli <hi@stefanocerelli.com>
Date: Tue, 25 Mar 2025 11:40:27 +0100
Subject: [PATCH] fix(bricks): circular dependency in image component
---
holi-bricks/components/image/Image.tsx | 6 +-----
holi-bricks/components/image/Image.web.tsx | 6 +-----
holi-bricks/components/image/helpers.ts | 9 ++++++++-
3 files changed, 10 insertions(+), 11 deletions(-)
diff --git a/holi-bricks/components/image/Image.tsx b/holi-bricks/components/image/Image.tsx
index 1e912184d2..4165ca9050 100644
--- a/holi-bricks/components/image/Image.tsx
+++ b/holi-bricks/components/image/Image.tsx
@@ -5,7 +5,7 @@ import { Image as ExpoImage } from 'expo-image'
//import { WithLocalSvg } from 'react-native-svg/css'
import { accessibilityProps } from 'holi-bricks/accessibility'
import type { ImageProps } from 'holi-bricks/components/image/type'
-import { setScalingParams } from 'holi-bricks/components/image/helpers'
+import { isRemoteSource, setScalingParams } from 'holi-bricks/components/image/helpers'
const isLocalSvg = (source: number) => {
try {
@@ -18,10 +18,6 @@ const isLocalSvg = (source: number) => {
}
}
-export const isRemoteSource = (source: string | number): source is string => {
- return typeof source === 'string'
-}
-
export const Image: React.FC<ImageProps> = ({
source,
width,
diff --git a/holi-bricks/components/image/Image.web.tsx b/holi-bricks/components/image/Image.web.tsx
index fc0b18b1e8..09ab4f5d44 100644
--- a/holi-bricks/components/image/Image.web.tsx
+++ b/holi-bricks/components/image/Image.web.tsx
@@ -3,11 +3,7 @@ import type React from 'react'
import { useState } from 'react'
import NextImage from 'next/image'
import { accessibilityProps } from 'holi-bricks/accessibility'
-import { setScalingParams } from 'holi-bricks/components/image/helpers'
-
-export const isRemoteSource = (source: string): source is string => {
- return /^(https?:)?\/\//i.test(source)
-}
+import { isRemoteSource, setScalingParams } from 'holi-bricks/components/image/helpers'
export const Image: React.FC<ImageProps> = ({
source,
diff --git a/holi-bricks/components/image/helpers.ts b/holi-bricks/components/image/helpers.ts
index e8b7d7228e..94258225bd 100644
--- a/holi-bricks/components/image/helpers.ts
+++ b/holi-bricks/components/image/helpers.ts
@@ -2,12 +2,19 @@
import { PixelRatio, Platform } from 'react-native'
import { isProduction } from '@holi/core/helpers/environment'
import { isSSR } from '@holi/core/helpers/isSSR'
-import { isRemoteSource } from 'holi-bricks/components/image/Image'
// meant for dev: you see the dimension that would be loaded as a black image
// useful when determining whether the correct srcSet is loaded
const debugMode = false
+export const isRemoteSource = (source: string | number): source is string => {
+ if (Platform.OS === 'web') {
+ return /^(https?:)?\/\//i.test(source as string)
+ }
+
+ return typeof source === 'string'
+}
+
/** @description It handles the correct pixel density for native host platforms.
* It returns the same input value for the web. Different sizes in the web can
* also be regulated by the `srcSet` attribute. */
--
GitLab