frc-ui
Version:
React Web UI
163 lines (162 loc) • 7.82 kB
JavaScript
var __decorate = (this && this.__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 === "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;
};
import React from 'react';
import ReactDOM from 'react-dom';
import classNames from 'classnames';
import { Consumer } from '../common/Hoc';
import { ChatPermissionEnum, MessageType } from '../interfaces';
import Inset from '../common/ChatInsetContent';
import { showDateOrTime } from '../common';
import { isExistedListContainer, createListContainer, getPosElement, listContainer } from '../common/dom';
const TEXT_ALL_COUNT = 100;
let Message = class Message extends React.PureComponent {
constructor() {
super(...arguments);
this.hasImage = false;
this.showAll = false;
this.images = [];
this.onGag = (code) => (event) => {
event.stopPropagation();
const { emit, data, channel } = this.props;
this.showListContainer(false);
if (emit) {
emit(`chatGag.${code}`, { userId: data.userId, chatRoomCode: channel });
}
};
this.appendContent = (props = this.props) => {
const { emit, track, user, channel, data, locale } = props;
if (!this.container)
return;
this.container.innerHTML = '';
let textCount = 0;
const message = data.message || [];
for (let i = 0; i < message.length; i++) {
let d = message[i];
let callback;
if (d.type === MessageType.IMAGE) {
this.hasImage = true;
this.images.push(d.content);
callback = () => {
this.setState({ imageShow: true }, () => track && track('聊天室.预览图片'));
};
}
else if (d.type === MessageType.GIF && data.userId !== (user || {}).userId) {
callback = function (url) {
emit && emit('emoji.collect', { url, code: channel });
};
}
else if (d.type === MessageType.TEXT && !this.showAll) {
let length = d.content.length || 0;
if (textCount + length > TEXT_ALL_COUNT) {
d = Object.assign({}, d);
d.content = d.content.substring(0, TEXT_ALL_COUNT - textCount) + '...';
}
textCount += length;
}
else if (d.type === MessageType.CUSTOM_PC) {
const pcData = d.content || {};
const pcHasAuth = props.pcHasAuth || [];
const pcApplyAuth = props.pcApplyAuth || [];
const isHas = (pcHasAuth || []).some((p) => p.permissionTypeEnum === 'p_bjzd' && (p.underwriterIds || []).some((u) => u === pcData.underwriterId));
const isApply = (pcApplyAuth || []).some((p) => p.permissionTypeEnum === 'p_bjzd' && (p.underwriterIds || []).some((u) => u === pcData.underwriterId));
d.isHas = isHas;
if (!isHas) {
if (!isApply) {
d.isApply = false;
callback = function () {
emit && emit('pc.auth', { underwriterId: pcData.underwriterId, permissionType: 'p_bjzd' });
};
}
else {
d.isApply = true;
}
}
}
Inset(d, this.container, callback);
if (!this.showAll) {
if (textCount > TEXT_ALL_COUNT) {
callback = () => {
this.showAll = true;
this.appendContent();
};
Inset({ type: MessageType.SHOW_ALL, content: locale && locale.showMore }, this.container, callback);
break;
}
}
}
};
this.showListContainer = (showTabFlag) => {
const { prefix, locale } = this.props;
const options = [
{ code: 'gag', name: locale && locale.gagMenuText },
{ code: 'ungag', name: locale && locale.unGagMenuText }
];
let container = React.createElement("div", { className: 'hidden' });
if (!isExistedListContainer()) {
createListContainer();
}
if (showTabFlag) {
let ops = options.map((d) => {
return (React.createElement("li", { key: d.code, onMouseDown: this.onGag(d.code) }, d.name));
});
const parentRect = getPosElement(this.nameEle);
const style = {};
style.left = parentRect.left;
style.top = parentRect.bottom + 2;
style.width = 100;
container = (React.createElement("div", { className: `${prefix}-send-btn-wrap`, style: style },
React.createElement("ul", { className: `${prefix}-send-btn-list` }, ops)));
}
ReactDOM.render(container, listContainer);
};
this.handleClickTitle = (event) => {
event.stopPropagation();
const { callUser, data, track, permission } = this.props;
if (event.nativeEvent.ctrlKey) {
if (data && data.userId && (permission || []).some((p) => p === ChatPermissionEnum.CHAT_GAG)) {
this.showListContainer(true);
}
}
else {
callUser && callUser(data.userId);
track && track('打开QM');
}
};
this.handleBlur = () => {
this.showListContainer(false);
};
this.renderTitle = () => {
const { data, prefix } = this.props;
return (React.createElement("span", { ref: this.saveRef('nameEle'), onClick: this.handleClickTitle, tabIndex: -1, onBlur: this.handleBlur },
data.logUrl && React.createElement("img", { src: data.logUrl, className: `${prefix}-message-log` }),
data.showName || '',
" :"));
};
this.saveRef = (name) => (ele) => {
this[name] = ele;
};
}
componentDidMount() {
this.appendContent();
}
render() {
const { prefix, data, user } = this.props;
const pre = `${prefix}-message`;
const className = classNames(pre, { [`${pre}-auth`]: data && user && (data || {}).userId === (user || {}).userId });
const aProps = { name: data.id };
return (React.createElement("div", { className: className },
React.createElement("div", { className: `${pre}-title` },
this.renderTitle(),
React.createElement("span", { className: `${pre}-time` }, showDateOrTime(data.time))),
React.createElement("div", { ref: this.saveRef('container'), className: `${pre}-content` }),
React.createElement("a", Object.assign({}, aProps))));
}
};
Message = __decorate([
Consumer(['permission'])
], Message);
export default Message;