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

Reactjs chat components

import React, { Component } from 'react';
import './Popup.css';
import { MdClose } from 'react-icons/lib/md';
import Button from '../Button/Button';

const classNames = require('classnames');

export class Popup extends Component {
    render() {
        if (this.props.show === true)
        return (
            <div
                className={classNames(
                    "rce-popup-wrapper",
                    this.props.type,
                    this.props.className
                )}
            >
                <div className="rce-popup">
                    {
                        <div className="rce-popup-header">
                            {this.props.renderHeader()}
                            {
                                this.props.headerButtons.map((x, i) => (
                                    <Button key={i} {...x} icon={x.icon || {
                                        component: <MdClose />,
                                        size: 18
                                    }}/>
                                ))
                            }
                        </div>
                    }
                    <div
                        className="rce-popup-content"
                        style={{ color: this.props.color }}
                    >
                        {this.props.renderContent
                            ? this.props.renderContent()
                            : this.props.text}
                    </div>
                    <div className="rce-popup-footer">
                        {this.props.renderFooter
                            ? this.props.renderFooter()
                            : this.props.footerButtons.map((x, i) => (
                                  <Button key={i} {...x} />
                              ))}
                    </div>
                </div>
            </div>
        );
        return null;
    }
}

Popup.defaultProps = {
    show: false,
    header: null,
    text: null,
    headerButtons: [],
    footerButtons: [],
    renderHeader: null,
    renderContent: null,
    renderFooter: null,
    color: '#333',
};

export default Popup;