import React from 'react' ; import { useSelector } from 'react-redux' ; import Time from '@fiora/utils/time' ; import { isMobile } from '@fiora/utils/ua' ; import Avatar from '../../components/Avatar' ; import { State } from '../../state/reducer' ; import useAction from '../../hooks/useAction' ; import Style from './Linkman.less' ; import useAero from '../../hooks/useAero' ; import { useStore } from '../../hooks/useStore' ; import { updateHistory } from '../../service' ; interface LinkmanProps { id : string ; name : string ; avatar : string ; /** 消息预览 */ preview : string ; unread : number ; time : Date ; } function Linkman ( props ) { const { id , name , avatar , preview , unread , time } = props ; const action = useAction ( ) ; const focus = useSelector ( ( state ) => state . focus ) ; const aero = useAero ( ) ; const { linkmans } = useStore ( ) ; function formatTime ( ) { const nowTime = new Date ( ) ; if ( Time . isToday ( nowTime , time ) ) { return Time . getHourMinute ( time ) ; } if ( Time . isYesterday ( nowTime , time ) ) { return '昨天' ; } return Time . getMonthDate ( time ) ; } async function handleClick ( ) { const nextFocusLinkman = linkmans [ id ] ; if ( nextFocusLinkman ) { const messageKeys = Object . keys ( nextFocusLinkman . messages ) ; if ( messageKeys . length > 0 ) { const lastMessageId = nextFocusLinkman . messages [ messageKeys [ messageKeys . length - 1 ] ] . _id ; updateHistory ( nextFocusLinkman . _id , lastMessageId ) ; } } action . setFocus ( id ) ; if ( isMobile ) { action . setStatus ( 'functionBarAndLinkmanListVisible' , false ) ; } } return ( < div className = { `${ Style . linkman } ${ id === focus ? Style . focus : '' }` } onClick = { handleClick } role = "button" { ... aero } > < Avatar src = { avatar } size = { 48 } / > < div className = { Style . container } > < div className = { `${ Style . rowContainer } ${ Style . nameTimeBlock }` } > < p className = { Style . name } > { name } < /p> < p className = { Style . time } > { formatTime ( ) } < /p> < /div> < div className = { `${ Style . rowContainer } ${ Style . previewUnreadBlock }` } > < p className = { Style . preview } dangerouslySetInnerHTML = { { __html : preview } } /> { unread > 0 && ( < div className = { Style . unread } > < span > { unread > 99 ? '99+' : unread } < /span> < /div>)} < /div> < /div> < /div>); } export default Linkman ;