Commit 9737b100 by tungnq

TODO: Hỗ trợ render nhiều loại dữ liệu khác nhau trong FlatList kèm tab view

- Xử lý danh sách thông báo có chứa nhiều kiểu dữ liệu với các thuộc tính khác nhau
- Cho phép hiển thị cả hai kiểu dữ liệu trong cùng một FlatList
- Giữ nguyên chức năng tab view để chuyển đổi giữa các loại thông báo
parent 625f2bf5
...@@ -21,7 +21,14 @@ const NotificationView = props => { ...@@ -21,7 +21,14 @@ const NotificationView = props => {
searchText, searchText,
onSearchChange, onSearchChange,
} = props; } = props;
const getRenderItemFunction = () => {
switch (activeTab) {
case 'Tuition':
return renderNotificationItemTution;
default:
return renderNotificationItemView;
}
};
//TabView //TabView
const renderTabViewItem = ({item}) => { const renderTabViewItem = ({item}) => {
const isActivity = activeTab === item.key; const isActivity = activeTab === item.key;
...@@ -87,16 +94,14 @@ const NotificationView = props => { ...@@ -87,16 +94,14 @@ const NotificationView = props => {
//List Notification Tution //List Notification Tution
const renderNotificationItemTution = ({item}) => { const renderNotificationItemTution = ({item}) => {
return ( return (
activeTab === 'Tuition' ? (
<View style={styles.cardItem}> <View style={styles.cardItem}>
<Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">{item.title_notifi_tuition}</Text> <Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">{item.title_notifi_tuition}</Text>
<Text style={styles.text} numberOfLines={2} ellipsizeMode="tail">{item.date_create}</Text> <Text style={styles.text} numberOfLines={2} ellipsizeMode="tail">{item.date_create}</Text>
<View style={styles.boxTime}>
<Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">{item.time_send}</Text> <Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">{item.time_send}</Text>
</View> <Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">{item.style}</Text>
<Text style={styles.text} numberOfLines={1} ellipsizeMode="tail">{item.status}</Text>
</View> </View>
) : renderItemEmpty()
); );
}; };
...@@ -104,7 +109,7 @@ const NotificationView = props => { ...@@ -104,7 +109,7 @@ const NotificationView = props => {
return ( return (
<FlatList <FlatList
data={dataNotifi[activeTab] || []} data={dataNotifi[activeTab] || []}
renderItem={renderNotificationItemView || renderNotificationItemTution} renderItem={getRenderItemFunction()}
keyExtractor={(item, index) => `${activeTab}-${index}`} keyExtractor={(item, index) => `${activeTab}-${index}`}
showsVerticalScrollIndicator={false} showsVerticalScrollIndicator={false}
contentContainerStyle={styles.containerListNotification} contentContainerStyle={styles.containerListNotification}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment