react-chat-elements-npvn/src/ChatList/ChatList.js

Reactjs chat components

import React, { Component } from 'react';
import './ChatList.css';

import ChatItem from '../ChatItem/ChatItem';

const classNames = require('classnames');

export class ChatList extends Component {

    onClick(item, i, e) {
        if (this.props.onClick instanceof Function)
            this.props.onClick(item, i, e);
    }

    onContextMenu(item, i, e) {
        e.preventDefault();
        if (this.props.onContextMenu instanceof Function)
            this.props.onContextMenu(item, i, e);
    }

    onAvatarError(item, i, e) {
        if (this.props.onAvatarError instanceof Function)
            this.props.onAvatarError(item, i, e);
    }

    render() {
        return (
            <div
                ref={this.props.cmpRef}
                className={classNames('rce-container-clist', this.props.className)}>
                {
                    this.props.dataSource.map((x, i) => (
                        <ChatItem
                            id={x.id || i}
                            key={i}
                            lazyLoadingImage={this.props.lazyLoadingImage}
                            {...x}
                            onAvatarError={(e) => this.onAvatarError(x, i, e)}
                            onContextMenu={(e) => this.onContextMenu(x, i, e)}
                            onClick={(e) => this.onClick(x, i, e)}
                            onClickMute={(e) => this.props.onClickMute(x, i, e)}
                            onClickVideoCall={(e) => this.props.onClickVideoCall(x, i, e)}/>
                    ))
                }
            </div>
        );
    }
}

ChatList.defaultProps = {
    dataSource: [],
    onClick: null,
    lazyLoadingImage: undefined,
    mute: null,
    onClickMute: null,
    onClickVideoCall: null,
};

export default ChatList;