frc-ui/lib/chat/content/index.js

React Web UI

"use strict";

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

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

var _moment = _interopRequireDefault(require("moment"));

var _Hoc = require("../common/Hoc");

var _MessageTip = _interopRequireDefault(require("./MessageTip"));

var _Message = _interopRequireDefault(require("./Message"));

var _warning = _interopRequireDefault(require("../images/warning.png"));

var _lodash = require("lodash");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }

function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }

function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }

function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }

function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }

function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }

function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }

function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }

function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }

function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }

function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }

var __decorate = void 0 && (void 0).__decorate || function (decorators, target, key, desc) {
  var c = arguments.length,
      r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
      d;
  if ((typeof Reflect === "undefined" ? "undefined" : _typeof(Reflect)) === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) {
    if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  }
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};

var Content = /*#__PURE__*/function (_React$PureComponent) {
  _inherits(Content, _React$PureComponent);

  var _super = _createSuper(Content);

  function Content(props) {
    var _this;

    _classCallCheck(this, Content);

    _this = _super.call(this, props);
    _this.total = 0;
    _this.pageSize = 10;
    _this.auto = true;
    _this.startDate = (0, _moment["default"])().subtract(15, 'd').format('YYYY-MM-DD');
    _this.chatMessageCurrent = [];
    _this.setChatMessage = (0, _lodash.debounce)(function (tmp) {
      _this.setState({
        chatMessage: tmp
      });
    }, 500, {
      leading: true,
      maxWait: 1000,
      trailing: true
    });

    _this.load = function () {
      var _this$props = _this.props,
          channel = _this$props.channel,
          emit = _this$props.emit,
          showAllHistory = _this$props.showAllHistory;
      if (!emit) return;
      var payload = {
        chatRoomCode: channel,
        startDate: _this.startDate,
        startIndex: 0
      };

      if (!showAllHistory) {
        payload.pageSize = _this.pageSize;
      }

      emit('chatMessage.history', payload);
    };

    _this.scroll = function () {
      if (!_this.body) return;
      var top = _this.body.scrollTop + _this.body.clientHeight;
      var auto = top > _this.body.scrollHeight - 5 && top < _this.body.scrollHeight + 5;
      if (auto) _this.socketMessage = null;
      _this.auto = auto;
    };

    _this.saveRef = function (name) {
      return function (ele) {
        _this[name] = ele;
      };
    };

    _this.renderBody = function () {
      var chatMessage = _this.state.chatMessage;
      var tmp = (0, _lodash.uniqBy)(chatMessage, 'id');
      tmp.forEach(function (element) {
        if (element.time && typeof element.time === 'string') {
          element.time = new Date(element.time).getTime();
        }
      });
      tmp.sort(function (a, b) {
        return a.time - b.time;
      });
      return tmp.map(function (m) {
        return /*#__PURE__*/_react["default"].createElement(_Message["default"], {
          key: m.id,
          data: m
        });
      });
    };

    _this.state = {
      chatMessage: []
    };

    if (props.historyStateDate) {
      _this.startDate = props.historyStateDate;
    }

    return _this;
  }

  _createClass(Content, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      var _this$props2 = this.props,
          Socket = _this$props2.Socket,
          channel = _this$props2.channel;
      this.load();
      var that = this;

      if (Socket) {
        Socket.on("".concat(channel, "_message"), function (message) {
          if (message) {
            that.socketMessage = message;
            that.chatMessageCurrent = [].concat(_toConsumableArray(that.chatMessageCurrent || []), [message]);
            that.chatMessageCurrent.sort(function (a, b) {
              return a.time - b.time;
            });
            that.setChatMessage(that.chatMessageCurrent);
          }
        });
      }
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      var _this2 = this;

      if (nextProps.historyMessage !== this.props.historyMessage) {
        if (nextProps.historyMessage.success) {
          var pageInfo = nextProps.historyMessage.pageInfo;
          this.total = (pageInfo || {}).totalSize || 0;
          var result = (nextProps.historyMessage.result || []).filter(function (h) {
            return !(_this2.chatMessageCurrent || []).some(function (c) {
              return c.id === h.id;
            });
          });
          this.chatMessageCurrent = [].concat(_toConsumableArray(this.chatMessageCurrent || []), _toConsumableArray(result));
          this.chatMessageCurrent.sort(function (a, b) {
            return a.time - b.time;
          });
          this.setChatMessage(this.chatMessageCurrent);
        }
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      if (this.auto && this.body) this.body.scrollTop = this.body.scrollHeight;
    }
  }, {
    key: "render",
    value: function render() {
      // const {prefix, historyMessage, locale} = this.props;
      // const {chatMessage} = this.state;
      var _this$props3 = this.props,
          prefix = _this$props3.prefix,
          locale = _this$props3.locale;
      var cls = "".concat(prefix, "-content");
      return /*#__PURE__*/_react["default"].createElement("div", {
        className: cls
      }, /*#__PURE__*/_react["default"].createElement("div", {
        className: "".concat(cls, "-list"),
        ref: this.saveRef('body'),
        onScroll: this.scroll
      }, /*#__PURE__*/_react["default"].createElement("div", {
        style: {
          textAlign: 'center',
          lineHeight: '437px',
          userSelect: 'none'
        }
      }, /*#__PURE__*/_react["default"].createElement("span", {
        style: {
          lineHeight: '16px',
          color: '#8F9598',
          fontSize: '12px'
        }
      }, /*#__PURE__*/_react["default"].createElement("img", {
        style: {
          verticalAlign: 'initial'
        },
        src: _warning["default"]
      }), " \u804A\u5929\u5BA4\u529F\u80FD\u5347\u7EA7\u4E2D\uFF0C\u656C\u8BF7\u671F\u5F85\uFF01"))), /*#__PURE__*/_react["default"].createElement(_MessageTip["default"], {
        prefix: cls,
        message: this.socketMessage,
        show: !this.auto,
        onClick: this.scroll,
        locale: locale
      }));
    }
  }]);

  return Content;
}(_react["default"].PureComponent);

Content = __decorate([(0, _Hoc.Consumer)(['historyMessage'])], Content);
var _default = Content;
exports["default"] = _default;