frc-ui/es/chat/content/index.js

React Web UI

var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import React from 'react';
import moment from 'moment';
import { Consumer } from '../common/Hoc';
import MessageTip from './MessageTip';
import Message from './Message';
import warning from '../images/warning.png';
// import LoadMore from './LoadMore';
import { debounce, uniqBy } from 'lodash';
let Content = class Content extends React.PureComponent {
    constructor(props) {
        super(props);
        this.total = 0;
        this.pageSize = 10;
        this.auto = true;
        this.startDate = moment()
            .subtract(15, 'd')
            .format('YYYY-MM-DD');
        this.chatMessageCurrent = [];
        this.setChatMessage = debounce((tmp) => {
            this.setState({ chatMessage: tmp });
        }, 500, {
            leading: true,
            maxWait: 1000,
            trailing: true
        });
        this.load = () => {
            const { channel, emit, showAllHistory } = this.props;
            if (!emit)
                return;
            const payload = {
                chatRoomCode: channel,
                startDate: this.startDate,
                startIndex: 0
            };
            if (!showAllHistory) {
                payload.pageSize = this.pageSize;
            }
            emit('chatMessage.history', payload);
        };
        this.scroll = () => {
            if (!this.body)
                return;
            const top = this.body.scrollTop + this.body.clientHeight;
            const auto = top > this.body.scrollHeight - 5 && top < this.body.scrollHeight + 5;
            if (auto)
                this.socketMessage = null;
            this.auto = auto;
        };
        this.saveRef = (name) => (ele) => {
            this[name] = ele;
        };
        this.renderBody = () => {
            const { chatMessage } = this.state;
            const tmp = uniqBy(chatMessage, 'id');
            tmp.forEach((element) => {
                if (element.time && typeof (element.time) === 'string') {
                    element.time = new Date(element.time).getTime();
                }
            });
            tmp.sort(function (a, b) {
                return a.time - b.time;
            });
            return tmp.map((m) => {
                return React.createElement(Message, { key: m.id, data: m });
            });
        };
        this.state = {
            chatMessage: []
        };
        if (props.historyStateDate) {
            this.startDate = props.historyStateDate;
        }
    }
    componentDidMount() {
        const { Socket, channel } = this.props;
        this.load();
        const that = this;
        if (Socket) {
            Socket.on(`${channel}_message`, (message) => {
                if (message) {
                    that.socketMessage = message;
                    that.chatMessageCurrent = [...(that.chatMessageCurrent || []), message];
                    that.chatMessageCurrent.sort(function (a, b) {
                        return a.time - b.time;
                    });
                    that.setChatMessage(that.chatMessageCurrent);
                }
            });
        }
    }
    componentWillReceiveProps(nextProps) {
        if (nextProps.historyMessage !== this.props.historyMessage) {
            if (nextProps.historyMessage.success) {
                const pageInfo = nextProps.historyMessage.pageInfo;
                this.total = (pageInfo || {}).totalSize || 0;
                const result = (nextProps.historyMessage.result || []).filter((h) => !(this.chatMessageCurrent || []).some((c) => c.id === h.id));
                this.chatMessageCurrent = [...(this.chatMessageCurrent || []), ...result];
                this.chatMessageCurrent.sort(function (a, b) {
                    return a.time - b.time;
                });
                this.setChatMessage(this.chatMessageCurrent);
            }
        }
    }
    componentDidUpdate() {
        if (this.auto && this.body)
            this.body.scrollTop = this.body.scrollHeight;
    }
    render() {
        // const {prefix, historyMessage, locale} = this.props;
        // const {chatMessage} = this.state;
        const { prefix, locale } = this.props;
        const cls = `${prefix}-content`;
        return (React.createElement("div", { className: cls },
            React.createElement("div", { className: `${cls}-list`, ref: this.saveRef('body'), onScroll: this.scroll },
                React.createElement("div", { style: {
                        textAlign: 'center',
                        lineHeight: '437px',
                        userSelect: 'none'
                    } },
                    React.createElement("span", { style: {
                            lineHeight: '16px',
                            color: '#8F9598',
                            fontSize: '12px'
                        } },
                        React.createElement("img", { style: {
                                verticalAlign: 'initial'
                            }, src: warning }),
                        " \u804A\u5929\u5BA4\u529F\u80FD\u5347\u7EA7\u4E2D\uFF0C\u656C\u8BF7\u671F\u5F85\uFF01"))),
            React.createElement(MessageTip, { prefix: cls, message: this.socketMessage, show: !this.auto, onClick: this.scroll, locale: locale })));
    }
};
Content = __decorate([
    Consumer(['historyMessage'])
], Content);
export default Content;