From 0b3607917851a81dff834d3b1068402f83222013 Mon Sep 17 00:00:00 2001
From: Hubert Bieszczad <brentlokk@gmail.com>
Date: Fri, 20 Dec 2024 12:05:15 +0100
Subject: [PATCH] feat: imageBackground web

---
 src/components/native/ImageBackground.tsx     | 19 +++--
 .../createUnistylesImageBackground.native.tsx | 24 ------
 src/core/createUnistylesImageBackground.tsx   | 79 ++++++-------------
 3 files changed, 35 insertions(+), 87 deletions(-)
 delete mode 100644 src/core/createUnistylesImageBackground.native.tsx

diff --git a/src/components/native/ImageBackground.tsx b/src/components/native/ImageBackground.tsx
index e0a7681a..45228d3c 100644
--- a/src/components/native/ImageBackground.tsx
+++ b/src/components/native/ImageBackground.tsx
@@ -13,6 +13,7 @@ type Props = {
 
 export const ImageBackground = forwardRef<unknown, Props>((props, forwardedRef) => {
     let storedRef: NativeImageBackground | null = null
+    let storedImageRef: NativeImageBackground | null = null
     const styleClassNames = getClassName(props.style)
     const imageClassNames = getClassName(props.imageStyle)
 
@@ -26,15 +27,11 @@ export const ImageBackground = forwardRef<unknown, Props>((props, forwardedRef)
                 if (!ref) {
                     // @ts-expect-error hidden from TS
                     UnistylesShadowRegistry.remove(storedRef, styleClassNames?.hash)
-                    // @ts-expect-error hidden from TS
-                    UnistylesShadowRegistry.remove(storedRef, imageClassNames?.hash)
                 }
 
                 storedRef = ref
-                    // @ts-expect-error hidden from TS
-                    UnistylesShadowRegistry.add(ref, styleClassNames?.hash)
-                    // @ts-expect-error hidden from TS
-                    UnistylesShadowRegistry.add(ref, imageClassNames?.hash)
+                // @ts-expect-error hidden from TS
+                UnistylesShadowRegistry.add(ref, styleClassNames?.hash)
 
                 if (typeof forwardedRef === 'function') {
                     return forwardedRef(ref)
@@ -44,6 +41,16 @@ export const ImageBackground = forwardRef<unknown, Props>((props, forwardedRef)
                     forwardedRef.current = ref
                 }
             }}
+            imageRef={isServer() ? undefined : ref => {
+                if (!ref) {
+                    // @ts-expect-error hidden from TS
+                    UnistylesShadowRegistry.remove(storedImageRef, imageClassNames?.hash)
+                }
+
+                storedImageRef = ref
+                // @ts-expect-error hidden from TS
+                UnistylesShadowRegistry.add(ref, imageClassNames?.hash)
+            }}
         />
     )
 })
diff --git a/src/core/createUnistylesImageBackground.native.tsx b/src/core/createUnistylesImageBackground.native.tsx
deleted file mode 100644
index 1476688d..00000000
--- a/src/core/createUnistylesImageBackground.native.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react'
-import type { ImageBackground, ImageBackgroundProps } from 'react-native'
-import { UnistylesShadowRegistry } from '../specs'
-import { passForwardedRef } from './passForwardRef'
-
-export const createUnistylesImageBackground = (Component: typeof ImageBackground) => React.forwardRef<ImageBackground, ImageBackgroundProps>((props, forwardedRef) => (
-    <Component
-        {...props}
-        ref={ref => passForwardedRef(props, ref, forwardedRef)}
-        imageRef={ref => {
-            const style = Array.isArray(props.imageStyle)
-                ? props.imageStyle
-                : [props.imageStyle]
-
-            // @ts-expect-error web types are not compatible with RN styles
-            UnistylesShadowRegistry.add(ref, style)
-
-            return () => {
-                // @ts-expect-error hidden from TS
-                UnistylesShadowRegistry.remove(ref)
-            }
-        }}
-    />
-))
diff --git a/src/core/createUnistylesImageBackground.tsx b/src/core/createUnistylesImageBackground.tsx
index 3bb33038..1476688d 100644
--- a/src/core/createUnistylesImageBackground.tsx
+++ b/src/core/createUnistylesImageBackground.tsx
@@ -1,59 +1,24 @@
 import React from 'react'
-import { getClassName } from './getClassname'
-import type { UnistylesValues } from '../types'
-import { isServer } from '../web/utils'
-
-type ComponentProps = {
-    style?: UnistylesValues | Array<UnistylesValues>
-}
-
-export const createUnistylesImageBackground = (Component: any) => React.forwardRef<HTMLElement, ComponentProps>((props, forwardedRef) => {
-    let storedRef: HTMLElement | null = null
-    let storedImageRef: HTMLElement | null = null
-    const classNames = getClassName(props.style)
-    const imageClassNames = getClassName(props.style)
-
-    return (
-        <Component
-            {...props}
-            style={classNames}
-            imageStyle={imageClassNames}
-            imageRef={isServer() ? undefined : (ref: HTMLElement | null) => {
-                if (!ref) {
-                    // @ts-expect-error hidden from TS
-                    UnistylesShadowRegistry.remove(storedImageRef, imageClassNames?.hash)
-                }
-
-                storedImageRef = ref
-                // @ts-expect-error hidden from TS
-                UnistylesShadowRegistry.add(ref, imageClassNames?.hash)
-
-                if (typeof forwardedRef === 'function') {
-                    return forwardedRef(ref)
-                }
-
-                if (forwardedRef) {
-                    forwardedRef.current = ref
-                }
-            }}
-            ref={isServer() ? undefined : (ref: HTMLElement | null) => {
-                if (!ref) {
-                    // @ts-expect-error hidden from TS
-                    UnistylesShadowRegistry.remove(storedRef, classNames?.hash)
-                }
-
-                storedRef = ref
+import type { ImageBackground, ImageBackgroundProps } from 'react-native'
+import { UnistylesShadowRegistry } from '../specs'
+import { passForwardedRef } from './passForwardRef'
+
+export const createUnistylesImageBackground = (Component: typeof ImageBackground) => React.forwardRef<ImageBackground, ImageBackgroundProps>((props, forwardedRef) => (
+    <Component
+        {...props}
+        ref={ref => passForwardedRef(props, ref, forwardedRef)}
+        imageRef={ref => {
+            const style = Array.isArray(props.imageStyle)
+                ? props.imageStyle
+                : [props.imageStyle]
+
+            // @ts-expect-error web types are not compatible with RN styles
+            UnistylesShadowRegistry.add(ref, style)
+
+            return () => {
                 // @ts-expect-error hidden from TS
-                UnistylesShadowRegistry.add(ref, classNames?.hash)
-
-                if (typeof forwardedRef === 'function') {
-                    return forwardedRef(ref)
-                }
-
-                if (forwardedRef) {
-                    forwardedRef.current = ref
-                }
-            }}
-        />
-    )
-})
+                UnistylesShadowRegistry.remove(ref)
+            }
+        }}
+    />
+))