Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 | 1x 8x 8x 8x 8x 8x 1x 1x 8x 8x 8x 1x 3x 8x 5x 3x 1x 1x 5x 5x 8x 8x | import { cn } from '@sb/libs';
import TopStory from './TopStory.native';
import { FC, useEffect, useState } from 'react';
import { Warning } from '../../../atoms/Icons/index.native';
import { NativeTopStoriesProps } from '../TopStories.types';
import { TopStoriesBackground, TopStoriesPowder } from '@sb/assets';
import { useThemeColors } from '@sb/hooks/Utilities/useThemeColors';
import { Image, Text, useWindowDimensions, View } from 'react-native';
export const TopStories: FC<NativeTopStoriesProps> = ({
data,
className,
background,
onOddSelect,
errorMessage,
activateError = false,
enableAnimation = true,
activateLoading = false,
useFullDeviceWidth = true,
errorMessageColor = 'white',
}) => {
const { width } = useWindowDimensions();
const { themedColors } = useThemeColors();
const [isLoading, setIsLoading] = useState<boolean>(activateLoading);
useEffect(() => {
if (activateLoading) {
const timer = setTimeout(() => setIsLoading(false), 2000);
return () => clearTimeout(timer);
}
}, [activateLoading]);
const renderDefaultBackground = () => (
<View className="absolute left-0 top-0 z-[-1] h-full w-full">
<Image className="absolute h-full w-full" source={TopStoriesBackground} resizeMode="cover" />
<Image className="absolute h-full w-full" source={TopStoriesPowder} resizeMode="cover" />
</View>
);
const renderSkeleton = () => (
<View
accessibilityRole="combobox"
accessibilityLabel="Top Stories Skeleton Loader"
className="h-full w-full flex-1 animate-pulse justify-around py-2"
>
<View className="items-center gap-4">
<View style={{ backgroundColor: themedColors.colorPrimary }} className="h-4 w-32 rounded" />
<View
style={{ backgroundColor: themedColors.colorAccent }}
className="bg-accent h-7 w-72 rounded opacity-50"
/>
</View>
<View className="flex-row justify-center gap-2">
{Array.from({ length: 3 }).map((_, i) => (
<View
key={i}
className="h-12 w-[100px] rounded-sm"
style={{ backgroundColor: themedColors.colorTertiary }}
/>
))}
</View>
</View>
);
const renderError = () => {
function getErrorMessageColor(color: 'white' | 'red' | 'accent') {
switch (color) {
case 'white':
return themedColors.colorText_Main;
case 'red':
return themedColors.colorStatus_Error;
case 'accent':
return themedColors.colorAccent;
}
}
const iconColor =
errorMessageColor === 'white'
? themedColors.colorText_Main
: errorMessageColor === 'red'
? themedColors.colorStatus_Lost
: themedColors.colorAccent;
return (
<View
accessibilityRole="combobox"
className="flex-1 items-center justify-center px-4"
accessibilityLabel={`Top Story Error: ${errorMessage}`}
>
<View className="items-center gap-4">
<Warning size={25} color={iconColor} />
<Text
className="text-center text-base font-normal"
style={{ color: getErrorMessageColor(errorMessageColor) }}
>
{errorMessage ?? 'There was an error fetching live story data.'}
</Text>
</View>
</View>
);
};
return (
<View
style={{
width: useFullDeviceWidth ? width : 'auto',
}}
className={cn(
'flex flex-1 gap-3',
{
'!w-full': !useFullDeviceWidth,
},
className
)}
accessibilityLabel="Top Stories"
>
{data.map((datum, index) => (
<View key={index} className="rounded-xs relative min-w-full flex-1 overflow-hidden">
{background ?? renderDefaultBackground()}
{isLoading ? (
renderSkeleton()
) : activateError ? (
renderError()
) : (
<TopStory data={datum} onOddSelect={onOddSelect} enableAnimation={enableAnimation} />
)}
</View>
))}
</View>
);
};
export default TopStories;
|