67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
import { Image } from '@tarojs/components';
|
|
|
|
import classNames from 'classnames';
|
|
import { PropsWithChildren, useEffect, useState, useCallback } from 'react';
|
|
import { MaterialViewSource } from '@/constants/material';
|
|
|
|
import useUserInfo from '@/hooks/use-user-info';
|
|
import { IChatMessage } from '@/types/message';
|
|
import { getScrollItemId } from '@/utils/common';
|
|
import { navigateTo } from '@/utils/route';
|
|
import { PageUrl } from '@/constants/app';
|
|
|
|
import './index.less';
|
|
|
|
export interface IBaseMessageProps {
|
|
id: string;
|
|
message: IChatMessage;
|
|
}
|
|
|
|
export interface IUserMessageProps extends PropsWithChildren, IBaseMessageProps {
|
|
isRead?: boolean;
|
|
}
|
|
|
|
const PREFIX = 'base-message';
|
|
|
|
function BaseMessage(props: IUserMessageProps) {
|
|
const { id, message, isRead: isReadProps, children } = props;
|
|
const { userId } = useUserInfo();
|
|
const [isRead, setIsRead] = useState(message.isRead);
|
|
const isSender = message.senderUserId === userId;
|
|
|
|
// useEffect(() => {
|
|
// if (isSender) {
|
|
// return;
|
|
// }
|
|
// // 对方发的消息，拉取到消息后，后端会主动已读，这里延迟模拟下
|
|
// const timer = setTimeout(() => setIsRead(true), 1200);
|
|
// return () => clearTimeout(timer);
|
|
// }, [isSender]);
|
|
const handleClick = useCallback(
|
|
() => navigateTo(PageUrl.MaterialView, { resumeId: message.jobId, source: MaterialViewSource.Chat }),
|
|
[message.jobId]
|
|
);
|
|
useEffect(() => {
|
|
if (isRead) {
|
|
return;
|
|
}
|
|
isReadProps && setIsRead(true);
|
|
}, [isRead, isReadProps]);
|
|
|
|
return (
|
|
<div className={classNames(PREFIX, { 'is-sender': isSender })} id={getScrollItemId(id)}>
|
|
<Image
|
|
mode="aspectFit"
|
|
className={`${PREFIX}__avatar`}
|
|
src={message.senderAvatarUrl || require('@/statics/png/default_avatar.png')}
|
|
/>
|
|
<div className={`${PREFIX}__content-container`}>
|
|
{children}
|
|
<div className={classNames(`${PREFIX}__status`, { done: isRead })}>{isRead ? '已读' : '未读'}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default BaseMessage;
|