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

/**
 * 通知消息渲染项目组件
 * @邠心vbe on 2023/08/17
 */
import React from 'react';
import { Pressable, StyleSheet, View } from 'react-native';
import TextView from '../../components/TextView';

const IconType = ({type, style, size=32, color=colorAccent}) => {
  switch (type) {
    case "Applications":
      return (
        <MaterialIcons
          name="admin-panel-settings"
          size={size}
          style={style}
          color={color}
        />
      )
    case "Admin":
      return (
        <MaterialCommunityIcons
          name="message-draw"
          size={size}
          style={style}
          color={color}
        />
      )
    case "Charging":
      return (
        <MaterialIcons
          name="offline-bolt"
          size={size}
          style={style}
          color={color}
        />
      )
    case "Wallet":
      return (
        <MaterialCommunityIcons
          name="cash-multiple"
          size={size}
          style={style}
          color={color}
        />
      )
    case "Announcement":
      return (
        <MaterialCommunityIcons
          name="message-alert"
          size={size}
          style={style}
          color={color}
        />
      )
    case "Review":
      return (
        <MaterialCommunityIcons
          name="message-draw"
          size={size}
          style={style}
          color={color}
        />
      )
    case "Promotion":
      return (
        <MaterialCommunityIcons
          name="bullhorn-variant"
          size={size}
          style={style}
          color={color}
        />
      )
    default:
      return (
        <MaterialCommunityIcons
          name="message-alert"
          size={size}
          style={style}
          color={color}
        />
      )
  }
}

export default ItemAlert = ({item, index, separators, onPress, onLongPress}) => {
  const getDotColor = () => {
    if (item.readStatus) {
      if (item?.notificationTitle.indexOf("Low") >= 0/* || item.notificationType == "Announcement"*/) {
        return "#F09327";
      } else {
        return colorAccent;
      }
    } else {
      return "#FF3B30";
    }
  }
  return (
    <Pressable
      style={item.readStatus ? styles.notyItemView : styles.unotyItemView}
      onPress={onPress}
      android_ripple={ripple}
      onLongPress={onLongPress}>
      <IconType
        style={styles.iconType}
        type={item.notificationType}
        color={getDotColor()}
      />
      <View style={styles.itemContent}>
        <TextView
          style={styles.textTitle}
          numberOfLines={1}
          ellipsizeMode="tail">
          {item.notificationTitle}
        </TextView>
        <TextView
          style={styles.textDate}
          numberOfLines={1}>
          <MaterialCommunityIcons
            name="clock-time-four-outline"
            size={10}
            style={styles.textDate}/>
          {" " + item.createTime}
        </TextView>
        <TextView
          style={styles.textMessage}
          numberOfLines={2}>
          {item.notificationText}
        </TextView>
      </View>
    </Pressable>
  )
}

const styles = StyleSheet.create({
  notyItemView: {
    padding: 16,
    flexDirection: 'row'
  },
  unotyItemView: {
    padding: 16,
    flexDirection: 'row',
    backgroundColor: "#F0F0F0"
  },
  iconType: {
    marginRight: 12
  },
  readIcon: {
    top: 2,
    left: -5,
    width: 7,
    height: 6,
    position: 'absolute'
  },
  itemContent: {
    flex: 1
  },
  textTitle: {
    flex: 1,
    color: textPrimary,
    fontSize: 15,
    fontWeight: 'bold',
    paddingBottom: 4
  },
  textDate: {
    color: textSecondary,
    fontSize: 10,
    lineHeight: 10,
    paddingBottom: 4
  },
  unread: {
    fontWeight: 'bold'
  },
  textMessage: {
    color: textPrimary,
    fontSize: 12
  }
})