help_user/src/my/MyFriend.tsx

import React from "react";
import {Button, Col, Container, FormControl, Image, ListGroup, Row,} from "react-bootstrap";
import {Chat, Friend, User} from "../entity";
import {Tooltip} from "@material-ui/core";
import moment from "moment";

/**
 * 聊天窗头像名字
 * @param props
 * @constructor
 */
function UserPart(props:Readonly<any>) {
    return (
        <Col xs={4}>
            <Image roundedCircle={true} src={props.headImg} className="chat-headImg"/>
            <span className="d-block text-center" style={{width:"100px"}}>{props.name}</span>
        </Col>
    )
}

/**
 * 聊天窗内容
 * @param props
 * @constructor
 */
function ContentPart(props:Readonly<any>) {
    return (
        <Col xs={7}>
            <h6 className="text-center">{moment(props.time).format("YYYY-MM-DD HH:mm:ss")}</h6>
            <p>{props.content}</p>
        </Col>
    )
}

/**
 * 一组信息
 * @param props
 * @constructor
 */
function GroupPart(props:Readonly<any>) {
    if(props.flag){
        return (
            <Row>
                <UserPart name={props.name} headImg={props.headImg}/>
                <ContentPart content={props.content}/>
            </Row>)
    }else{
        return (
            <Row>
                <ContentPart content={props.content}/>
                <UserPart name={props.name} headImg={props.headImg}/>
            </Row>)
    }
}

const maxLength=150
/**
 * 我的好友
 */
export class MyFriend extends React.Component<any,any>{


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

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

    componentDidMount() {
        this.loadMyFriend("")
    }

    /**
     * 查找用户
     * @param keyword
     */
    queryUser(keyword:string){
        this.setState({
            userList:[{
                //用户姓名
                name:"张三",
                //用户年龄
                age:Math.floor(Math.random()*100)+1,
                //用户电话
                mobile:15920722180,
                //发送时间
                time:new Date().getTime()
            },
            {
                //用户姓名
                name:"李四",
                //用户年龄
                age:Math.floor(Math.random()*100)+1,
                //用户电话
                mobile:15920722180,
                //发送时间
                time:new Date().getTime()
            },
            {
                //用户姓名
                name:"王五",
                //用户年龄
                age:Math.floor(Math.random()*100)+1,
                //用户电话
                mobile:15920722180,
                //发送时间
                time:new Date().getTime()
            }]
        })
    }

    //查找我的好友
    loadMyFriend(keyword:string){
        this.setState({
            friendList:[{
                name:"好友1",
                status:true
            },
            {
                name:"好友2",
                status:false
            },
            {
                name:"好友3",
                status:false
            }]
        })
    }

    //加载聊天记录
    loadMyChat(friend:Friend){
        this.setState({
            chatList:[{
                //发送人名称
                name:"张三",
                //发送人头像
                headImg:"logo512.png",
                //发送内容
                content:"发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容"
            },
            {
                //发送人名称
                name:"张三",
                //发送人头像
                headImg:"logo512.png",
                //发送内容
                content:"发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容"
            },
            {
                //发送人名称
                name:"abc",
                //发送人头像
                headImg:"logo512.png",
                //发送内容
                content:"发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容发送内容"
            }]
        })
    }

    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:Friend,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"/>
                                    </Tooltip>
                                </ListGroup.Item>)}
                        </ListGroup>

                    </Col>

                    <Col xs={8}>
                        <Container className="bg-light chat-history overflow-auto">
                            {this.state.chatList.map((chat:Chat,index:number)=>
                                <GroupPart key={"group"+index} name={chat.name} headImg={chat.headImg} content={chat.content} flag={this.props.user===chat.name}/>
                            )}
                        </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>
            </Container>
        );
    }
}