You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
186 lines
7.6 KiB
186 lines
7.6 KiB
import React from "react";
|
|
import {Button, Col, Container, FormControl, Image, ListGroup, Row,} from "react-bootstrap";
|
|
import {Chat, User} from "../entity";
|
|
import {Tooltip} from "@material-ui/core";
|
|
import moment from "moment";
|
|
import {MyInfo} from "./MyInfo";
|
|
import {MyDialog} from "../ui/MyDialog";
|
|
import {userObj} from "../ui/TestData";
|
|
|
|
|
|
const maxLength=150
|
|
/**
|
|
* 我的好友
|
|
*/
|
|
export class MyFriend extends React.Component<{ user:string },
|
|
{
|
|
//好友列表
|
|
friendList:Array<User>;
|
|
//查找好友关键字
|
|
queryFriend:string;
|
|
//用户列表
|
|
userList:Array<User>;
|
|
//聊天记录
|
|
chatList:Array<Chat>;
|
|
//当前选中好友
|
|
friendIndex:number|null;
|
|
//发送内容
|
|
sendContent:String;
|
|
//查看用户信息
|
|
openUserInfo:boolean;
|
|
//查看用户ID
|
|
userId?:string;
|
|
}
|
|
>{
|
|
|
|
|
|
constructor(props: Readonly<any>) {
|
|
super(props);
|
|
|
|
this.state={
|
|
//好友列表
|
|
friendList:[],
|
|
//查找好友关键字
|
|
queryFriend:"",
|
|
//用户列表
|
|
userList:[],
|
|
//聊天记录
|
|
chatList:[],
|
|
//当前选中好友
|
|
friendIndex:null,
|
|
//发送内容
|
|
sendContent:'',
|
|
//查看用户信息
|
|
openUserInfo:false
|
|
}
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.loadMyFriend("")
|
|
}
|
|
|
|
/**
|
|
* 查找用户
|
|
* @param keyword
|
|
*/
|
|
queryUser(keyword:string){
|
|
this.setState({
|
|
userList:[userObj,userObj,userObj]
|
|
})
|
|
}
|
|
|
|
//查找我的好友
|
|
loadMyFriend(keyword:string){
|
|
this.setState({
|
|
friendList:[userObj,userObj,userObj]
|
|
})
|
|
}
|
|
|
|
//加载聊天记录
|
|
loadMyChat(user:User){
|
|
|
|
this.setState({
|
|
chatList:[userObj,userObj,userObj,userObj]
|
|
})
|
|
}
|
|
|
|
render() {
|
|
|
|
return (
|
|
<Container>
|
|
<Row>
|
|
<Col xs={4}>
|
|
<ListGroup className="overflow-auto bg-light friend-list">
|
|
<ListGroup.Item variant="primary">我的好友</ListGroup.Item>
|
|
<ListGroup.Item>
|
|
<FormControl placeholder="查找好友" onChange={(e)=>this.loadMyFriend(e.target.value)}/>
|
|
</ListGroup.Item>
|
|
{this.state.friendList.map((friend:User,index:number)=>
|
|
<Tooltip key={"tooltip"+index} title={"点击查看和"+friend.name+"的聊天记录"} placement={"right"}>
|
|
<ListGroup.Item onClick={()=>
|
|
{
|
|
this.setState({
|
|
friendIndex:index
|
|
})
|
|
this.loadMyChat(friend)
|
|
}} className={index===this.state.friendIndex?"text-success":"text-dark"}
|
|
style={{cursor:"pointer"}} variant={friend.status?"info":"secondary"}>{friend.name}
|
|
</ListGroup.Item>
|
|
</Tooltip>)}
|
|
</ListGroup>
|
|
|
|
<ListGroup className="overflow-auto bg-light friend-list">
|
|
<ListGroup.Item variant="primary">添加好友</ListGroup.Item>
|
|
<ListGroup.Item>
|
|
<FormControl placeholder="查找用户" onChange={(e)=>this.queryUser(e.target.value)}/>
|
|
</ListGroup.Item>
|
|
|
|
{this.state.userList.map((user:User,index:number)=>
|
|
<ListGroup.Item key={"list"+index} className="d-flex justify-content-between" variant="info">
|
|
<span>{user.name}</span>
|
|
<Tooltip title="查看用户信息" placement="right">
|
|
<img src="user.svg" alt="查看用户信息" className="userIcon" onClick={()=>this.setState({openUserInfo:true,userId:user.userId})}/>
|
|
</Tooltip>
|
|
</ListGroup.Item>)}
|
|
</ListGroup>
|
|
|
|
</Col>
|
|
|
|
<Col xs={8}>
|
|
<Container className="bg-light chat-history overflow-auto">
|
|
{this.state.chatList.map((chat:Chat,index:number)=>
|
|
this.props.user===chat.userId?
|
|
<Row>
|
|
<Col xs={4}>
|
|
<Image roundedCircle={true} src={chat.headImg} className="chat-headImg"/>
|
|
<span className="d-block text-center user-name">{chat.name}</span>
|
|
</Col>
|
|
<Col xs={7}>
|
|
<h6 className="text-center">{moment(chat.time).format("YYYY-MM-DD HH:mm:ss")}</h6>
|
|
<p>{chat.content}</p>
|
|
</Col>
|
|
</Row>:
|
|
<Row>
|
|
<Col xs={7}>
|
|
<h6 className="text-center">{moment(chat.time).format("YYYY-MM-DD HH:mm:ss")}</h6>
|
|
<p>{chat.content}</p>
|
|
</Col>
|
|
<Col xs={4}>
|
|
<Image roundedCircle={true} src={chat.headImg} className="chat-headImg"/>
|
|
<span className="d-block text-center user-name">{chat.name}</span>
|
|
</Col>
|
|
</Row>
|
|
)}
|
|
</Container>
|
|
<Container className={"bg-white chat-send p-3 border-info border "+(this.state.friendIndex!==-1?"":"d-none")}>
|
|
<Row>
|
|
<Col xs={12} className="chat-send-content" contentEditable={true} onKeyPress={(e:any)=>{
|
|
if(e.target.innerText.length>=maxLength){
|
|
e.preventDefault()
|
|
}
|
|
}} onKeyUp={(e:any)=>
|
|
{
|
|
this.setState({sendContent:e.target.innerText})
|
|
}}>
|
|
|
|
</Col>
|
|
</Row>
|
|
<Row>
|
|
<Col xs={8}>
|
|
<p className="text-info align-middle">{"您还可以输入"+(maxLength-this.state.sendContent.length)+"个字符"}</p>
|
|
</Col>
|
|
<Col className="text-right">
|
|
<Button variant={"info"}>发送</Button>
|
|
</Col>
|
|
</Row>
|
|
</Container>
|
|
</Col>
|
|
</Row>
|
|
|
|
<MyDialog titleId="view-user" menuName="用户信息"
|
|
content={<MyInfo ownUserId={this.props.user} isOwn={false} isMyFriend={false} isAdd={true} userId={this.state.userId}/>}
|
|
open={this.state.openUserInfo} onClose={()=>this.setState({openUserInfo:false})}/>
|
|
</Container>
|
|
);
|
|
}
|
|
}
|
|
|