Skip to content

Commit

Permalink
feat: imageBackground web
Browse files Browse the repository at this point in the history
  • Loading branch information
Brentlok committed Dec 20, 2024
1 parent 415cb5d commit 0b36079
Show file tree
Hide file tree
Showing 3 changed files with 35 additions and 87 deletions.
19 changes: 13 additions & 6 deletions src/components/native/ImageBackground.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -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)
Expand All @@ -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)
}}
/>
)
})
24 changes: 0 additions & 24 deletions src/core/createUnistylesImageBackground.native.tsx

This file was deleted.

79 changes: 22 additions & 57 deletions src/core/createUnistylesImageBackground.tsx
Original file line number Diff line number Diff line change
@@ -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)
}
}}
/>
))

0 comments on commit 0b36079

Please sign in to comment.