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

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.styles = exports.renderStyle = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireDefault(require("react"));

var _Avatar = _interopRequireDefault(require("../Avatar"));

var _Bubble = _interopRequireDefault(require("../Bubble"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _withStyles = _interopRequireDefault(require("../styles/withStyles"));

/*
 * To set styles used for render in App.
 */
var renderStyle = {
  display: 'flex',
  flexDirection: 'column',
  width: '100%'
};
exports.renderStyle = renderStyle;

var styles = function styles(theme) {
  return {};
};

exports.styles = styles;

var Chat =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(Chat, _React$Component);

  function Chat(props) {
    var _this;

    (0, _classCallCheck2.default)(this, Chat);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Chat).call(this, props));
    _this.state = {
      ancestor: 'ancestor'
    };
    return _this;
  }

  (0, _createClass2.default)(Chat, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.setState({
        ancestor: document.getElementsByName('ancestor')
      });
    }
  }, {
    key: "render",
    value: function render() {
      // const { index, isLeft, triSize, bgColor, avatar, classes } = this.props;
      var _this$props = this.props,
          isLeft = _this$props.isLeft,
          avatar = _this$props.avatar,
          bubbleProps = _this$props.bubbleProps;
      return isLeft ? // left dialog chart
      _react.default.createElement("div", {
        style: {
          display: 'flex',
          justifyContent: 'flex-start',
          marginBottom: 20
        }
      }, _react.default.createElement("div", {
        name: "ancestor"
      }, avatar, _react.default.createElement(_Bubble.default, (0, _extends2.default)({}, bubbleProps, {
        style: {
          marginLeft: 10
        },
        direction: "left",
        floated: "false",
        ancestor: this.state.ancestor
      }), this.props.children))) : // right dialog chart
      _react.default.createElement("div", {
        style: {
          display: 'flex',
          justifyContent: 'flex-end',
          marginBottom: 20
        }
      }, _react.default.createElement("div", {
        name: "ancestor"
      }, avatar, _react.default.createElement(_Bubble.default, (0, _extends2.default)({}, bubbleProps, {
        style: {
          marginRight: 10
        },
        direction: "right",
        floated: "false",
        ancestor: this.state.ancestor
      }), this.props.children)));
    }
  }]);
  return Chat;
}(_react.default.Component);

Chat.propTypes = {
  /**
   * the avatar of the chat component.
   */
  avatar: _propTypes.default.instanceOf(_Avatar.default).isRequired,

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

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

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

  /**
   * the font size of the content.
   */
  triSize: _propTypes.default.number
};

var _default = (0, _withStyles.default)(styles, {
  name: 'RMChat'
})(Chat);

exports.default = _default;