help_user/src/my/MyFriend.tsx

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;
    //查看用户ID
    userId:string|null;
}
>{


    constructor(props: Readonly<any>) {
        super(props);

        this.state={
            //好友列表
            friendList:[],
            //查找好友关键字
            queryFriend:"",
            //用户列表
            userList:[],
            //聊天记录
            chatList:[],
            //当前选中好友
            friendIndex:null,
            //发送内容
            sendContent:'',
            userId:null
        }
    }

    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({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 isOwn={false} isMyFriend={false} isAdd={true} userId={this.state.userId?this.state.userId:""}/>}
                          open={this.state.userId!==null} onClose={()=>this.setState({userId:null})}/>
            </Container>
        );
    }
}