z-react-ui/es/chat-list/ChatItem.js

z-react-ui，是一款基于 Dumi，由 React + TypeScript 开发的组件库 🎉。

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import React, { useCallback, useMemo } from 'react';
import { usePrefixCls } from '@/_hooks';
import classNames from 'classnames';
import { EnlargeImg } from 'z-react-ui';
import msgParsing from '@/_utils/chat/msgParsing'; // #----------- 上: ts类型定义 ----------- 分割线 ----------- 下: JS代码 -----------

var ChatItem = function ChatItem(_ref) {
  var _classNames;

  var layout = _ref.layout,
      chatItem = _ref.chatItem,
      contentType = _ref.contentType;
  var prefixCls = usePrefixCls('chat-item');

  var _useMemo = useMemo(function () {
    return {
      isLeftLayout: layout === 'left',
      isRightLayout: layout === 'right',
      isCenterLayout: layout === 'center'
    };
  }, [layout]),
      isLeftLayout = _useMemo.isLeftLayout,
      isRightLayout = _useMemo.isRightLayout,
      isCenterLayout = _useMemo.isCenterLayout;

  var getContent = useCallback(function (msgContent) {
    var content = null;

    switch (contentType) {
      case 'img':
        content = /*#__PURE__*/React.createElement(EnlargeImg, {
          src: msgContent
        });
        break;

      case 'text':
        content = /*#__PURE__*/React.createElement("div", {
          dangerouslySetInnerHTML: {
            __html: msgParsing(msgContent)
          }
        });
        break;
    }

    return content;
  }, [contentType]);
  return /*#__PURE__*/React.createElement("div", {
    className: classNames(prefixCls, (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-left"), layout === 'left'), _defineProperty(_classNames, "".concat(prefixCls, "-right"), layout === 'right'), _defineProperty(_classNames, "".concat(prefixCls, "-center"), layout === 'center'), _classNames))
  }, isLeftLayout ? /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-avatar")
  }, /*#__PURE__*/React.createElement("img", {
    src: chatItem.avatarSrc,
    alt: "\u5934\u50CF"
  })) : null, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-contentbox")
  }, chatItem.userName ? /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-userName")
  }, chatItem.userName) : null, /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-content")
  }, getContent(chatItem.msgContent))), isRightLayout ? /*#__PURE__*/React.createElement("div", {
    className: "".concat(prefixCls, "-avatar")
  }, /*#__PURE__*/React.createElement("img", {
    src: chatItem.avatarSrc,
    alt: "\u5934\u50CF"
  })) : null);
};

export default ChatItem;