@naarni/design-system
Version:
Naarni React Native Design System for EV Fleet Apps
52 lines (51 loc) • 2.46 kB
JavaScript
import React from 'react';
import { View, FlatList, Image, TouchableOpacity, Dimensions, } from 'react-native';
import { useGridListStyles } from './styles';
import { Text } from '../Text/Text';
const { width: screenWidth } = Dimensions.get('window');
// Simple Grid Item Component
const GridItem = ({ item, onPress, columnWidth, spacing }) => {
const styles = useGridListStyles();
const handlePress = () => {
onPress(item);
};
return (<TouchableOpacity style={[
styles.gridItem,
{
width: columnWidth - spacing,
marginBottom: spacing,
marginHorizontal: spacing / 2,
}
]} onPress={handlePress} activeOpacity={0.7}>
{item.image && (<Image source={item.image} style={[
styles.itemImage,
{
width: columnWidth - spacing,
height: columnWidth - spacing,
}
]} resizeMode="cover"/>)}
{(item.text || item.subText) && (<View style={styles.textContainer}>
{item.text && (<Text style={styles.itemText} numberOfLines={2}>
{item.text}
</Text>)}
{item.subText && (<Text style={styles.itemSubText} numberOfLines={1}>
{item.subText}
</Text>)}
</View>)}
</TouchableOpacity>);
};
const GridList = ({ data, onItemPress, numColumns = 2, spacing = 16, contentContainerStyle, style, showsVerticalScrollIndicator = false, ...flatListProps }) => {
const styles = useGridListStyles();
// Calculate column width
const columnWidth = (screenWidth - spacing * (numColumns + 1)) / numColumns;
// Render item function
const renderItem = ({ item, index }) => {
return (<GridItem item={item} onPress={onItemPress} columnWidth={columnWidth} spacing={spacing}/>);
};
// Key extractor
const keyExtractor = (item, index) => {
return item.id?.toString() || `grid-item-${index}`;
};
return (<FlatList data={data} renderItem={renderItem} keyExtractor={keyExtractor} numColumns={numColumns} columnWrapperStyle={styles.row} contentContainerStyle={[styles.contentContainer, contentContainerStyle]} style={[styles.container, style]} showsVerticalScrollIndicator={showsVerticalScrollIndicator} removeClippedSubviews={true} maxToRenderPerBatch={10} windowSize={10} initialNumToRender={6} {...flatListProps}/>);
};
export { GridList };