diff --git a/holi-apps/events/components/EventCard.tsx b/holi-apps/events/components/EventCard.tsx
index 7c6f0b563c8f260fe0863abf01885fa2b125b5f2..da25a91d116d18ae3ff8f8f57b37f4ce74339f48 100644
--- a/holi-apps/events/components/EventCard.tsx
+++ b/holi-apps/events/components/EventCard.tsx
@@ -8,6 +8,9 @@ import { CompactCard } from 'holi-bricks/components/card/CompactCard'
import { HoliLinkTracked } from '@holi/core/components/Trackable'
import { useFormattedEventDates } from '@holi-apps/events/helpers/useFormattedEventDates'
import { TrackingEvent } from '@holi/core/tracking'
+import { View } from 'react-native'
+import { useStyles } from 'holi-bricks/hooks'
+import { createStyleSheet } from 'holi-bricks/utils'
export interface EventProps {
event: HoliEvent
@@ -16,6 +19,7 @@ export interface EventProps {
const EventCard = ({ event, maxCardWidth: cardWidth }: EventProps) => {
const { t } = useTranslation()
+ const { styles } = useStyles(stylesheet)
const formattedDates = useFormattedEventDates(event.startDate, event.endDate)
@@ -44,8 +48,20 @@ const EventCard = ({ event, maxCardWidth: cardWidth }: EventProps) => {
{...(event.startDate && { chips: [ChipComponent] })}
maxWidth={cardWidth}
/>
+ <View style={styles.overlay} />
</HoliLinkTracked>
)
}
export default EventCard
+
+const stylesheet = createStyleSheet({
+ overlay: {
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ width: '100%',
+ height: '100%',
+ backgroundColor: 'rgba(255, 255, 255, 0.2)',
+ },
+})
diff --git a/holi-apps/events/helpers/useEventListData.ts b/holi-apps/events/helpers/useEventListData.ts
index 4bc74e1d3c14786aaf750ff9e3d75ae0b1ee32cb..a83a47adeaff62c4180d7c59c1def700b3b44500 100644
--- a/holi-apps/events/helpers/useEventListData.ts
+++ b/holi-apps/events/helpers/useEventListData.ts
@@ -48,5 +48,5 @@ export const useEventListData = (limit: number, localOnly: boolean) => {
}
}, [isLoadingMore, fetchMore, events?.length])
- return { events, canLoadMore, fetchMoreEvents }
+ return { events, canLoadMore, fetchMoreEvents, totalResults }
}
diff --git a/holi-apps/events/screens/EventList.tsx b/holi-apps/events/screens/EventList.tsx
index d63c65c3dfc02be563a2523f982b17f3e34a1ac9..7434d89d42ab502fcd408677c59dd496587a38ea 100644
--- a/holi-apps/events/screens/EventList.tsx
+++ b/holi-apps/events/screens/EventList.tsx
@@ -32,7 +32,10 @@ export const EventList = () => {
const [fetchLocalOnlyEvents, setFetchLocalOnlyEvents] = useState(false)
const [isFiltering, setIsFiltering] = useState(false)
- const { events, canLoadMore, fetchMoreEvents } = useEventListData(PAGE_SIZE_EXTERNAL_DATA, fetchLocalOnlyEvents)
+ const { events, canLoadMore, fetchMoreEvents, totalResults } = useEventListData(
+ PAGE_SIZE_EXTERNAL_DATA,
+ fetchLocalOnlyEvents
+ )
const partner = EVENTS_SOURCE_MAPPING
@@ -99,7 +102,7 @@ export const EventList = () => {
</HoliButton>
<Text size="lg" color="support">
- {events.length} {t('act.events.opportunities')}
+ {totalResults} {t('act.events.opportunities')}
</Text>
{/* info modal */}
diff --git a/holi-bricks/components/card/CompactCard.tsx b/holi-bricks/components/card/CompactCard.tsx
index 937ed178bbe88d85742c4a7f4652eae74bbe2fe3..b280f48548a7abb3fbd9eb7c471701cb973ccca4 100644
--- a/holi-bricks/components/card/CompactCard.tsx
+++ b/holi-bricks/components/card/CompactCard.tsx
@@ -69,7 +69,6 @@ export const CompactCard = ({
width={90}
alt={t('act.events.thumbnail.label')}
onError={handleImageError}
- whiteOverlay
/>
</View>
diff --git a/holi-bricks/components/image/Image.tsx b/holi-bricks/components/image/Image.tsx
index 4b9420e0b0a4dab5a4d201b7639ea4be4aa6a4e0..4165ca905010f3b4132470ba33ece69ead6b93a0 100644
--- a/holi-bricks/components/image/Image.tsx
+++ b/holi-bricks/components/image/Image.tsx
@@ -1,12 +1,10 @@
import type React from 'react'
import { useState } from 'react'
-import { Image as RNImage, View } from 'react-native'
+import { Image as RNImage } from 'react-native'
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 { createStyleSheet } from 'holi-bricks/utils'
-import { useStyles } from 'holi-bricks/hooks'
import { isRemoteSource, setScalingParams } from 'holi-bricks/components/image/helpers'
const isLocalSvg = (source: number) => {
@@ -30,14 +28,12 @@ export const Image: React.FC<ImageProps> = ({
fallbackSource,
blurhash,
alt,
- whiteOverlay: overlay,
...otherProps
}) => {
const [hasError, setHasError] = useState(false)
const transformedSource = setScalingParams(source, width, height)
const isRemote = isRemoteSource(source)
const localSvg = typeof source === 'number' && isLocalSvg(source)
- const { styles } = useStyles(stylesheet)
if (!source) return null
@@ -59,39 +55,25 @@ export const Image: React.FC<ImageProps> = ({
}
return (
- <>
- <ExpoImage
- source={hasError && fallbackSource ? fallbackSource : transformedSource}
- alt={alt}
- role="img"
- accessibilityLabel={alt}
- accessibilityRole={otherProps?.['aria-hidden'] === true ? 'none' : 'image'}
- accessible={otherProps?.['aria-hidden'] === true}
- placeholder={isRemote ? blurhash : undefined}
- style={[{ width, height }]}
- contentFit={resizeMode}
- onError={() => {
- setHasError(true)
- // eslint-disable-next-line no-console
- console.warn(`[Image] Failed to load image: ${source}`)
- if (onError) onError()
- }}
- aria-label={alt}
- onLoadEnd={onLoadEnd}
- {...accessibilityProps(otherProps)}
- />
- {overlay && <View style={styles.overlay} />}
- </>
+ <ExpoImage
+ source={hasError && fallbackSource ? fallbackSource : transformedSource}
+ alt={alt}
+ role="img"
+ accessibilityLabel={alt}
+ accessibilityRole={otherProps?.['aria-hidden'] === true ? 'none' : 'image'}
+ accessible={otherProps?.['aria-hidden'] === true}
+ placeholder={isRemote ? blurhash : undefined}
+ style={[{ width, height }]}
+ contentFit={resizeMode}
+ onError={() => {
+ setHasError(true)
+ // eslint-disable-next-line no-console
+ console.warn(`[Image] Failed to load image: ${source}`)
+ if (onError) onError()
+ }}
+ aria-label={alt}
+ onLoadEnd={onLoadEnd}
+ {...accessibilityProps(otherProps)}
+ />
)
}
-
-const stylesheet = createStyleSheet({
- overlay: {
- position: 'absolute',
- top: 0,
- left: 0,
- width: '100%',
- height: '100%',
- backgroundColor: 'rgba(255, 255, 255, 0.2)',
- },
-})
diff --git a/holi-bricks/components/image/Image.web.tsx b/holi-bricks/components/image/Image.web.tsx
index 9be9ad7440da35b4616b50783a59e8c9a183454d..fc0b18b1e814ddedc4d05f7c9d2f0cff7baf4714 100644
--- a/holi-bricks/components/image/Image.web.tsx
+++ b/holi-bricks/components/image/Image.web.tsx
@@ -4,9 +4,6 @@ import { useState } from 'react'
import NextImage from 'next/image'
import { accessibilityProps } from 'holi-bricks/accessibility'
import { setScalingParams } from 'holi-bricks/components/image/helpers'
-import { createStyleSheet } from 'holi-bricks/utils'
-import { useStyles } from 'holi-bricks/hooks'
-import { View } from 'react-native'
export const isRemoteSource = (source: string): source is string => {
return /^(https?:)?\/\//i.test(source)
@@ -22,46 +19,30 @@ export const Image: React.FC<ImageProps> = ({
onLoadEnd,
fallbackSource,
blurhash,
- whiteOverlay: overlay,
...otherProps
}) => {
const [hasError, setHasError] = useState(false)
const isRemote = isRemoteSource(source as string)
const transformedSource = (isRemote ? setScalingParams(source as string, width, height) : source) as string
- const { styles } = useStyles(stylesheet)
return (
- <>
- <NextImage
- src={hasError && fallbackSource ? (fallbackSource as string) : transformedSource}
- alt={alt}
- role="img"
- aria-label={alt}
- blurDataURL={isRemote ? blurhash : undefined}
- width={width}
- height={height}
- style={{ objectFit: resizeMode }}
- onError={() => {
- setHasError(true)
- // eslint-disable-next-line no-console
- console.warn(`[Image] Failed to load image: ${transformedSource}`)
- if (onError) onError()
- }}
- onLoad={onLoadEnd}
- {...accessibilityProps(otherProps)}
- />
- {overlay && <View style={styles.overlay} />}
- </>
+ <NextImage
+ src={hasError && fallbackSource ? (fallbackSource as string) : transformedSource}
+ alt={alt}
+ role="img"
+ aria-label={alt}
+ blurDataURL={isRemote ? blurhash : undefined}
+ width={width}
+ height={height}
+ style={{ objectFit: resizeMode }}
+ onError={() => {
+ setHasError(true)
+ // eslint-disable-next-line no-console
+ console.warn(`[Image] Failed to load image: ${transformedSource}`)
+ if (onError) onError()
+ }}
+ onLoad={onLoadEnd}
+ {...accessibilityProps(otherProps)}
+ />
)
}
-
-const stylesheet = createStyleSheet({
- overlay: {
- position: 'absolute',
- top: 0,
- left: 0,
- width: '100%',
- height: '100%',
- backgroundColor: 'rgba(255, 255, 255, 0.2)',
- },
-})
diff --git a/holi-bricks/components/image/type.ts b/holi-bricks/components/image/type.ts
index 861a3196961b7568e74efae6da917596121f5019..322c58b0c680dccedd0932e749cede7250284b7b 100644
--- a/holi-bricks/components/image/type.ts
+++ b/holi-bricks/components/image/type.ts
@@ -13,5 +13,4 @@ export interface ImageProps extends AccessibilityProps {
fallbackSource?: string | number
blurhash?: string
alt: string
- whiteOverlay?: boolean
}