frc-ui/es/chat/header/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 { Consumer } from '../common/Hoc';
let Header = class Header extends React.PureComponent {
    constructor(props) {
        super(props);
        this.onlineCount = () => {
            const { count } = this.state;
            const { prefix, locale } = this.props;
            return (React.createElement("div", { className: `${prefix}-header-count` },
                React.createElement("span", { style: { color: '#7B8082' } }, `${locale && locale.userCount} : `),
                React.createElement("span", { style: { color: '#F9C152' } }, count)));
        };
        this.state = {
            count: props.count || 0
        };
    }
    componentDidMount() {
        const { Socket, channel } = this.props;
        if (Socket) {
            Socket.on(`clients_count_${channel}`, (count) => {
                console.log('get you count ', count);
                if (typeof count === 'number')
                    this.setState({ count });
            });
        }
    }
    componentWillReceiveProps(nextProps) {
        if (nextProps.count !== this.props.count) {
            this.setState({ count: nextProps.count || 0 });
        }
    }
    render() {
        const { prefix } = this.props;
        return React.createElement("div", { className: `${prefix}-header` }, this.onlineCount());
    }
};
Header = __decorate([
    Consumer(['count'])
], Header);
export default Header;