ChargEco/Strides-APP/app/pages/alert/ItemCampaign.js

/**
 * 活动渲染项目组件
 * @邠心vbe on 2023/10/25
 */
import React from 'react';
import { Image, Pressable, StyleSheet, View } from 'react-native';
import TextView from '../../components/TextView';
import utils from '../../utils/utils';

const getColorByType = (type) => {
  switch (type) {
    case "Ended":
      return {
        backgroundColor: "#E11919"
      }
    case "Upcoming":
      return {
        backgroundColor: "#FFAA2C"
      }
  }
}

export default ItemCampaign = ({item, index, separators, onPress}) => {
  return (
    <Pressable
      style={item.readStatus ? styles.notyItemView : styles.unotyItemView}
      onPress={onPress}
      android_ripple={ripple}>
      <View style={ui.center}>
        <Image
          source={{uri: utils.getImageUrl(item.articleImages[0].articleImagePath)}}
          resizeMode="cover"
          style={styles.articleImage}/>
        <View style={ui.flexc}>
          <MaterialCommunityIcons
            name="eye-check-outline"
            size={13}
            color={textPrimary}/>
          <TextView
            style={styles.textView}
            numberOfLines={1}>
            {item.articleViews}
          </TextView>
        </View>
      </View>
      <View style={styles.itemContent}>
        <View>
          <TextView 
            style={[styles.labelTypeText, getColorByType(item.campaignMark)]}
            numberOfLines={1}>
            {item.campaignMark}
          </TextView>
          <TextView
            style={styles.textTitle}
            numberOfLines={2}
            ellipsizeMode="tail">
            <TextView
              style={styles.hideText}
              numberOfLines={1}>
              {item.campaignMark}
            </TextView>
            {item.articleTitle}
          </TextView>
        </View>
        <TextView
          style={styles.textDate}
          numberOfLines={1}>
          <MaterialCommunityIcons
            name="calendar-clock"
            size={12}/>
          {" " + item.campaignDuration}
        </TextView>
        <TextView
          style={styles.textMessage}
          numberOfLines={4}>
          {item.articleContent}
        </TextView>
      </View>
    </Pressable>
  )
}

const styles = StyleSheet.create({
  notyItemView: {
    padding: 16,
    flexDirection: 'row'
  },
  unotyItemView: {
    padding: 16,
    flexDirection: 'row',
    backgroundColor: "#F0F0F0"
  },
  articleImage: {
    width: 85,
    height: 85,
    borderRadius: 6,
    marginRight: 16,
    marginBottom: 8
  },
  readIcon: {
    top: 2,
    left: -5,
    width: 7,
    height: 6,
    position: 'absolute'
  },
  itemContent: {
    flex: 1
  },
  textTitle: {
    color: textPrimary,
    fontSize: 15,
    lineHeight: 20,
    fontWeight: 'bold',
    paddingBottom: 4,
    alignItems: 'center',
    flexDirection: 'row'
  },
  labelTypeText: {
    color: textLight,
    height: 16,
    fontSize: 10,
    borderRadius: 4,
    marginTop: 2,
    ...$padding(0, 6),
    position: 'absolute',
    backgroundColor: "#1ABD00"
  },
  hideText: {
    height: 16,
    opacity: 0,
    fontSize: 10,
    ...$padding(2, 8),
  },
  textDate: {
    color: textSecondary,
    fontSize: 11,
    lineHeight: 12,
    fontWeight: 'bold',
    paddingBottom: 4,
    alignItems: 'center',
    flexDirection: 'row'
  },
  textView: {
    color: textPrimary,
    fontSize: 11,
    lineHeight: 12,
    paddingLeft: 4,
    paddingRight: 16
  },
  unread: {
    fontWeight: 'bold'
  },
  textMessage: {
    color: textPrimary,
    fontSize: 12,
    paddingTop: 2
  }
})