@forchange/aui/es/chat/content.js

ai-boss 业务 ui 组件库

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import * as React from 'react';
import { debounce } from '../_util/debounce';
import { getPrefixCls } from '../style/config';
import "./style/content.css";

class Content extends React.Component {
  constructor(props) {
    super(props);

    _defineProperty(this, "scrollToBottom", () => {
      if (this.state.chatContentRef.current) {
        const {
          scrollHeight,
          clientHeight
        } = this.state.chatContentRef.current;
        this.state.chatContentRef.current.scrollTop = scrollHeight - clientHeight;
      }
    });

    _defineProperty(this, "onScrollToTOP", node => {
      node.addEventListener('scroll', debounce(() => {
        if (node.scrollTop <= 0) {
          if (this.props.handleScrollToTop) {
            this.props.handleScrollToTop();
          }
        }
      }, 200));
    });

    _defineProperty(this, "onImageLoaded", () => {
      this.scrollToBottom();
    });

    _defineProperty(this, "onImageErrored", () => {
      this.scrollToBottom();
    });

    this.state = {
      chatContentRef: React.createRef(),
      className: 'chat-component-content'
    };
  }

  componentDidMount() {
    this.onScrollToTOP(this.state.chatContentRef.current);
    this.scrollToBottom();
  }

  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (this.props.messageList.length !== prevProps.messageList.length) {
      return true;
    }

    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot) {
      this.scrollToBottom();
    }
  } // 默认滚动到底部


  render() {
    const {
      messageList
    } = this.props;
    const className = getPrefixCls(this.state.className);
    return React.createElement("section", {
      ref: this.state.chatContentRef,
      className: `${className}`
    }, React.createElement("div", {
      className: `${className}-container`
    }, messageList.map((item, index) => React.createElement(React.Fragment, {
      key: index
    }, item.type === 'friend' && React.createElement("div", {
      className: `${className}-container-left`
    }, React.createElement("div", {
      className: `${className}-container-left-info`
    }, React.createElement("p", {
      className: "user-info"
    }, React.createElement("span", {
      className: "name"
    }, item.user.nickname), React.createElement("span", {
      className: "time"
    }, item.time)), React.createElement("div", {
      className: "text-message"
    }, React.createElement("p", {
      className: "avatar"
    }, React.createElement("img", {
      src: item.user.avatar,
      alt: "\u56FE\u7247\u52A0\u8F7D\u5931\u8D25"
    })), item.content.type === 'text' && React.createElement("p", {
      className: "info-text"
    }, React.createElement("span", null, item.content.value)), item.content.type === 'image' && React.createElement(React.Fragment, null, React.createElement("div", {
      className: "message-img"
    }, React.createElement("img", {
      onLoad: this.onImageLoaded,
      onError: this.onImageErrored,
      src: item.content.value,
      alt: "\u56FE\u7247\u52A0\u8F7D\u5931\u8D25"
    })))))), item.type === 'self' && React.createElement("div", {
      className: `${className}-container-right`
    }, React.createElement("p", {
      className: "message-extra"
    }, React.createElement("span", {
      className: "name"
    }, item.user.nickname), React.createElement("span", {
      className: "time"
    }, item.time)), React.createElement("div", {
      className: "message-info"
    }, item.content.type === 'text' && React.createElement("div", {
      className: "info-text"
    }, React.createElement("span", null, item.content.value)), item.content.type === 'image' && React.createElement(React.Fragment, null, item.content.status === 'fail' && React.createElement("div", {
      className: "status"
    }, React.createElement("span", null, "!")), React.createElement("div", {
      className: "message-img"
    }, React.createElement("img", {
      onLoad: this.onImageLoaded,
      onError: this.onImageErrored,
      src: item.content.value,
      alt: "\u6682\u65E0\u56FE\u7247"
    }))), React.createElement("div", {
      className: "info-img"
    }, React.createElement("img", {
      src: item.user.avatar,
      alt: "\u6682\u65E0\u5934\u50CF"
    }))))))));
  }

}

export default Content;