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

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

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

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

var _hooks = require("@/_hooks");

var _classnames = _interopRequireDefault(require("classnames"));

var _zReactUi = require("z-react-ui");

var _msgParsing = _interopRequireDefault(require("@/_utils/chat/msgParsing"));

// #----------- 上: ts类型定义 ----------- 分割线 ----------- 下: JS代码 -----------
var ChatItem = function ChatItem(_ref) {
  var _classNames;

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

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

  var getContent = (0, _react.useCallback)(function (msgContent) {
    var content = null;

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

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

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

var _default = ChatItem;
exports.default = _default;