DingdongRider/notice/NoticeCom.tsx

import * as React from 'react';
import { Div, Button, Image, Text, Avatar } from 'react-native-magnus';

const logo = require('../assets/images/logo.png');
import { getChatTime } from '../utils/TimeUtils';

export default function NoticeCom({
  info = {
    receiveUserId: 0,
  },
  type,
  userId,
  onPress,
  toUserName = '',
}) {
  const {
    receiveUserId,
    isRead,
    content,
    receiveAvatar,
    sendAvatar,
    sendTime,
  } = info;
  const isReceive = type === 'email' || receiveUserId === userId;
  const active = !isRead && isReceive;
  const avatar = isReceive ? sendAvatar : receiveAvatar;
  return (
    <Button block bg="white" py={0} px={13} rounded="none" onPress={onPress}>
      <Div
        flex={1}
        row
        py={10}
        alignItems="center"
        borderBottomWidth={1}
        borderBottomColor="gray100"
      >
        <Div
          w={10}
          h={10}
          bg={active ? 'yellow500' : 'gray100'}
          rounded="circle"
        />

        {type !== 'user' ? (
          <Div w={33} h={33} bg="green300" rounded="sm" ml={10} />
        ) : (
          <Image
            w={33}
            h={33}
            source={avatar ? { uri: avatar } : logo}
            ml={10}
            rounded="circle"
          />
        )}

        <Div flex={1} justifyContent="space-between" ml={5}>
          <Div row>
            <Text fontSize="sm" flex={1}>
              {type === 'user' ? toUserName : info.title}
            </Text>
            <Text fontSize="xs" color="gray400">
              {getChatTime(sendTime)}
            </Text>
          </Div>
          <Text fontSize="xs" color="gray400" numberOfLines={1}>
            {content || ''}
          </Text>
        </Div>
      </Div>
    </Button>
  );
}