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

ai-boss 业务 ui 组件库

"use strict";

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

var React = _interopRequireWildcard(require("react"));

var _debounce = require("../_util/debounce");

var _config = require("../style/config");

require("./style/content.css");

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

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;
}

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', (0, _debounce.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 = (0, _config.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"
    }))))))));
  }

}

var _default = Content;
exports.default = _default;