@6thquake/react-material/es/Chat/Chat.js

React components that implement Google's Material Design.

import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import Avatar from '../Avatar';
import Bubble from '../Bubble';
import PropTypes from 'prop-types';
import withStyles from '../styles/withStyles';
/*
 * To set styles used for render in App.
 */

export const renderStyle = {
  display: 'flex',
  flexDirection: 'column',
  width: '100%'
};
export const styles = theme => ({});

class Chat extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      ancestor: 'ancestor'
    };
  }

  componentDidMount() {
    this.setState({
      ancestor: document.getElementsByName('ancestor')
    });
  }

  render() {
    // const { index, isLeft, triSize, bgColor, avatar, classes } = this.props;
    const {
      isLeft,
      avatar,
      bubbleProps
    } = this.props;
    return isLeft ? // left dialog chart
    React.createElement("div", {
      style: {
        display: 'flex',
        justifyContent: 'flex-start',
        marginBottom: 20
      }
    }, React.createElement("div", {
      name: "ancestor"
    }, avatar, React.createElement(Bubble, _extends({}, bubbleProps, {
      style: {
        marginLeft: 10
      },
      direction: "left",
      floated: "false",
      ancestor: this.state.ancestor
    }), this.props.children))) : // right dialog chart
    React.createElement("div", {
      style: {
        display: 'flex',
        justifyContent: 'flex-end',
        marginBottom: 20
      }
    }, React.createElement("div", {
      name: "ancestor"
    }, avatar, React.createElement(Bubble, _extends({}, bubbleProps, {
      style: {
        marginRight: 10
      },
      direction: "right",
      floated: "false",
      ancestor: this.state.ancestor
    }), this.props.children)));
  }

}

process.env.NODE_ENV !== "production" ? Chat.propTypes = {
  /**
   * the avatar of the chat component.
   */
  avatar: PropTypes.instanceOf(Avatar).isRequired,

  /**
   * the background color of the chat bubble.
   */
  bgColor: PropTypes.string,

  /**
   * the content of the chat component.
   */
  content: PropTypes.string.isRequired,

  /**
   * specifies that the chat component should be placed along the left or right side of its container.
   */
  isLeft: PropTypes.bool.isRequired,

  /**
   * the font size of the content.
   */
  triSize: PropTypes.number
} : void 0;
export default withStyles(styles, {
  name: 'RMChat'
})(Chat);