more work on supporting message previews
This commit is contained in:
@@ -81,6 +81,9 @@ export const MAX_ONLINE_IN_TOPIC = 4;
|
||||
// Maximum length of user name, topic title, and private comment.
|
||||
export const MAX_TITLE_LENGTH = 60;
|
||||
|
||||
// Length of message previews in chat list, in characters.
|
||||
export const MESSAGE_PREVIEW_LENGTH = 80;
|
||||
|
||||
// Link for "Contact Us".
|
||||
export const LINK_CONTACT_US = 'email:info@tinode.co';
|
||||
|
||||
|
||||
@@ -159,11 +159,7 @@ class MessagesView extends React.Component {
|
||||
|
||||
// Don't request the tags. They are useless unless the user
|
||||
// is the owner and is editing the topic.
|
||||
let getQuery = topic.startMetaQuery().withLaterDesc();
|
||||
if (this.state.isSharer || (newTopic && !topic.isChannel())) {
|
||||
// Request subscriptions only if one of S,O,A is given or it's a new non-channel topic.
|
||||
getQuery = getQuery.withLaterSub();
|
||||
}
|
||||
let getQuery = topic.startMetaQuery().withLaterDesc().withLaterSub();
|
||||
if (this.state.isReader || newTopic) {
|
||||
// Reading is either permitted or we don't know because it's a new topic. Ask for messages.
|
||||
getQuery = getQuery.withLaterData(MESSAGES_PAGE);
|
||||
|
||||
@@ -11,10 +11,7 @@ import ContactAction from './contact-action.jsx';
|
||||
|
||||
import { makeImageUrl } from '../lib/blob-helpers.js';
|
||||
|
||||
const junk = {
|
||||
"ent":[{"data":{"mime":"image/jpeg","name":"hello.jpg","val":"<38992, bytes: ...>","width":100, "height":80},"tp":"EX"}],
|
||||
"fmt":[{"at":-1, "key":0}]
|
||||
};
|
||||
import { MESSAGE_PREVIEW_LENGTH } from '../config.js';
|
||||
|
||||
const messages = defineMessages({
|
||||
badge_you: {
|
||||
@@ -76,15 +73,22 @@ class ContactList extends React.Component {
|
||||
badges.push({name: formatMessage(messages.badge_owner), color: 'blue'});
|
||||
}
|
||||
}
|
||||
// const comment = React.createElement(React.Fragment, null, Drafty.format(junk, draftyFormatter, this));
|
||||
|
||||
const comment = Array.isArray(c.private) ?
|
||||
c.private.join(',') : (c.private ? c.private.comment : null);
|
||||
|
||||
let preview;
|
||||
if (!this.props.showMode) {
|
||||
const content = (c.latestMessage() || { content: '' }).content;
|
||||
preview = typeof content == 'string' ?
|
||||
content.substr(0, MESSAGE_PREVIEW_LENGTH) :
|
||||
Drafty.preview(content, MESSAGE_PREVIEW_LENGTH);
|
||||
}
|
||||
contactNodes.push(
|
||||
<Contact
|
||||
title={c.public ? c.public.fn : null}
|
||||
avatar={makeImageUrl(c.public ? c.public.photo : null)}
|
||||
comment={comment}
|
||||
preview={preview}
|
||||
unread={this.props.showUnread ? c.unread : 0}
|
||||
now={c.online && this.props.connected}
|
||||
acs={c.acs}
|
||||
@@ -125,52 +129,4 @@ class ContactList extends React.Component {
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Converts Drafty elements into a one-line preview.
|
||||
function draftyFormatter(style, data, values, key) {
|
||||
let el = Drafty.tagName(style);
|
||||
const attr = { key: key };
|
||||
if (el) {
|
||||
switch (style) {
|
||||
case 'HL':
|
||||
// Make highlight less prominent in preview.
|
||||
attr.className = 'highlight preview';
|
||||
break;
|
||||
case 'LN':
|
||||
// Disable links in previews.
|
||||
el = 'span';
|
||||
break;
|
||||
case 'IM':
|
||||
// Replace image with '[icon] Image'.
|
||||
el = React.Fragment;
|
||||
values = [<i className="material-icons">photo</i>, 'Picture'];
|
||||
break;
|
||||
case 'BN':
|
||||
el = 'span';
|
||||
attr.className = 'flat-button faux';
|
||||
break;
|
||||
case 'FM':
|
||||
el = React.Fragment;
|
||||
values = [<i className="material-icons">dashboard</i>, 'Form:'];
|
||||
break;
|
||||
case 'RW':
|
||||
el = React.Fragment;
|
||||
break;
|
||||
case 'EX':
|
||||
el = React.Fragment;
|
||||
values = [<i className="material-icons">attachment</i>, 'Attachment'];
|
||||
break;
|
||||
default:
|
||||
if (el == '_UNKN') {
|
||||
el = React.Fragment;
|
||||
values = [<i className="material-icons">extension</i>];
|
||||
}
|
||||
break;
|
||||
}
|
||||
return React.createElement(el, attr, values);
|
||||
} else {
|
||||
return values;
|
||||
}
|
||||
};
|
||||
|
||||
export default injectIntl(ContactList);
|
||||
|
||||
+57
-2
@@ -6,6 +6,8 @@ import LetterTile from './letter-tile.jsx';
|
||||
import ContactBadges from './contact-badges.jsx';
|
||||
import UnreadBadge from './unread-badge.jsx';
|
||||
|
||||
import { Drafty } from 'tinode-sdk';
|
||||
|
||||
export default class Contact extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
@@ -35,7 +37,7 @@ export default class Contact extends React.Component {
|
||||
title = <i><FormattedMessage id="unnamed_topic" /></i>;
|
||||
} else if (title.length > 30) {
|
||||
// FIXME: this is probably wrong for RTL languages.
|
||||
title = title.substring(0, 28) + '...';
|
||||
title = title.substring(0, 28) + '…';
|
||||
}
|
||||
const online = this.props.now ? 'online' : 'offline';
|
||||
const avatar = this.props.avatar ? this.props.avatar : true;
|
||||
@@ -53,6 +55,11 @@ export default class Contact extends React.Component {
|
||||
}
|
||||
}
|
||||
|
||||
const subtitle = this.props.preview ?
|
||||
(typeof this.props.preview == 'string' ? this.props.preview :
|
||||
React.createElement(React.Fragment, null, Drafty.format(this.props.preview, draftyFormatter, this))) :
|
||||
this.props.comment;
|
||||
|
||||
return (
|
||||
<li className={!this.props.showCheckmark && this.props.selected ? "selected" : null}
|
||||
onClick={this.handleClick}>
|
||||
@@ -71,7 +78,7 @@ export default class Contact extends React.Component {
|
||||
{this.props.isChannel ? <img src="/img/channel.png" className="channel" alt="channel" /> : null}
|
||||
<UnreadBadge count={this.props.unread} /><ContactBadges badges={icon_badges} />
|
||||
</div>
|
||||
{this.props.comment ? <div className="contact-comment">{this.props.comment}</div> : null}
|
||||
{subtitle ? <div className="contact-comment">{subtitle}</div> : null}
|
||||
<span><ContactBadges badges={badges} /></span>
|
||||
</div>
|
||||
{this.props.showContextMenu ?
|
||||
@@ -84,3 +91,51 @@ export default class Contact extends React.Component {
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Converts Drafty object into a one-line preview.
|
||||
function draftyFormatter(style, data, values, key) {
|
||||
let el = Drafty.tagName(style);
|
||||
const attr = { key: key };
|
||||
if (el) {
|
||||
switch (style) {
|
||||
case 'HL':
|
||||
// Make highlight less prominent in preview.
|
||||
attr.className = 'highlight preview';
|
||||
break;
|
||||
case 'LN':
|
||||
// Disable links in previews.
|
||||
el = 'span';
|
||||
break;
|
||||
case 'IM':
|
||||
// Replace image with '[icon] Image'.
|
||||
el = React.Fragment;
|
||||
values = [<i className="material-icons">photo</i>, 'Picture'];
|
||||
break;
|
||||
case 'BN':
|
||||
el = 'span';
|
||||
attr.className = 'flat-button faux';
|
||||
break;
|
||||
case 'FM':
|
||||
el = React.Fragment;
|
||||
values = [<i className="material-icons">dashboard</i>, 'Form:'];
|
||||
break;
|
||||
case 'RW':
|
||||
el = React.Fragment;
|
||||
break;
|
||||
case 'EX':
|
||||
el = React.Fragment;
|
||||
values = [<i className="material-icons">attachment</i>, 'Attachment'];
|
||||
break;
|
||||
default:
|
||||
if (el == '_UNKN') {
|
||||
el = React.Fragment;
|
||||
values = [<i className="material-icons">extension</i>];
|
||||
}
|
||||
break;
|
||||
}
|
||||
return React.createElement(el, attr, values);
|
||||
} else {
|
||||
return values;
|
||||
}
|
||||
};
|
||||
|
||||
+150
-154
@@ -36,6 +36,7 @@ __webpack_require__.r(__webpack_exports__);
|
||||
/* harmony export */ "IMAGE_PREVIEW_DIM": function() { return /* binding */ IMAGE_PREVIEW_DIM; },
|
||||
/* harmony export */ "MAX_ONLINE_IN_TOPIC": function() { return /* binding */ MAX_ONLINE_IN_TOPIC; },
|
||||
/* harmony export */ "MAX_TITLE_LENGTH": function() { return /* binding */ MAX_TITLE_LENGTH; },
|
||||
/* harmony export */ "MESSAGE_PREVIEW_LENGTH": function() { return /* binding */ MESSAGE_PREVIEW_LENGTH; },
|
||||
/* harmony export */ "LINK_CONTACT_US": function() { return /* binding */ LINK_CONTACT_US; },
|
||||
/* harmony export */ "LINK_PRIVACY_POLICY": function() { return /* binding */ LINK_PRIVACY_POLICY; },
|
||||
/* harmony export */ "LINK_TERMS_OF_SERVICE": function() { return /* binding */ LINK_TERMS_OF_SERVICE; }
|
||||
@@ -71,6 +72,7 @@ const MAX_IMAGE_DIM = 1024;
|
||||
const IMAGE_PREVIEW_DIM = 64;
|
||||
const MAX_ONLINE_IN_TOPIC = 4;
|
||||
const MAX_TITLE_LENGTH = 60;
|
||||
const MESSAGE_PREVIEW_LENGTH = 80;
|
||||
const LINK_CONTACT_US = 'email:info@tinode.co';
|
||||
const LINK_PRIVACY_POLICY = 'https://tinode.co/privacy.html';
|
||||
const LINK_TERMS_OF_SERVICE = 'https://tinode.co/terms.html';
|
||||
@@ -2936,11 +2938,7 @@ class MessagesView extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compone
|
||||
|
||||
if (topic && !topic.isSubscribed() && this.props.ready && (this.state.topic != prevState.topic || !prevProps.ready)) {
|
||||
const newTopic = this.props.newTopicParams && this.props.newTopicParams._topicName == this.props.topic;
|
||||
let getQuery = topic.startMetaQuery().withLaterDesc();
|
||||
|
||||
if (this.state.isSharer || newTopic && !topic.isChannel()) {
|
||||
getQuery = getQuery.withLaterSub();
|
||||
}
|
||||
let getQuery = topic.startMetaQuery().withLaterDesc().withLaterSub();
|
||||
|
||||
if (this.state.isReader || newTopic) {
|
||||
getQuery = getQuery.withLaterData(_config_js__WEBPACK_IMPORTED_MODULE_13__.MESSAGES_PAGE);
|
||||
@@ -5201,8 +5199,6 @@ class TinodeWeb extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component)
|
||||
}
|
||||
|
||||
handleTopicSelected(topicName) {
|
||||
console.log("handleTopicSelected", topicName);
|
||||
|
||||
if (this.state.newTopicParams && this.state.newTopicParams._topicName != topicName) {
|
||||
this.setState({
|
||||
newTopicParams: null
|
||||
@@ -7166,6 +7162,8 @@ __webpack_require__.r(__webpack_exports__);
|
||||
/* harmony import */ var _contact_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./contact.jsx */ "./src/widgets/contact.jsx");
|
||||
/* harmony import */ var _contact_action_jsx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./contact-action.jsx */ "./src/widgets/contact-action.jsx");
|
||||
/* harmony import */ var _lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../lib/blob-helpers.js */ "./src/lib/blob-helpers.js");
|
||||
/* harmony import */ var _config_js__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../config.js */ "./src/config.js");
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -7173,22 +7171,6 @@ __webpack_require__.r(__webpack_exports__);
|
||||
|
||||
|
||||
|
||||
const junk = {
|
||||
"ent": [{
|
||||
"data": {
|
||||
"mime": "image/jpeg",
|
||||
"name": "hello.jpg",
|
||||
"val": "<38992, bytes: ...>",
|
||||
"width": 100,
|
||||
"height": 80
|
||||
},
|
||||
"tp": "EX"
|
||||
}],
|
||||
"fmt": [{
|
||||
"at": -1,
|
||||
"key": 0
|
||||
}]
|
||||
};
|
||||
const messages = (0,react_intl__WEBPACK_IMPORTED_MODULE_1__.defineMessages)({
|
||||
badge_you: {
|
||||
id: 'badge_you',
|
||||
@@ -7261,10 +7243,20 @@ class ContactList extends (react__WEBPACK_IMPORTED_MODULE_0___default().Componen
|
||||
}
|
||||
|
||||
const comment = Array.isArray(c.private) ? c.private.join(',') : c.private ? c.private.comment : null;
|
||||
let preview;
|
||||
|
||||
if (!this.props.showMode) {
|
||||
const content = (c.latestMessage() || {
|
||||
content: ''
|
||||
}).content;
|
||||
preview = typeof content == 'string' ? content.substr(0, _config_js__WEBPACK_IMPORTED_MODULE_6__.MESSAGE_PREVIEW_LENGTH) : tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.preview(content, _config_js__WEBPACK_IMPORTED_MODULE_6__.MESSAGE_PREVIEW_LENGTH);
|
||||
}
|
||||
|
||||
contactNodes.push(react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_contact_jsx__WEBPACK_IMPORTED_MODULE_3__.default, {
|
||||
title: c.public ? c.public.fn : null,
|
||||
avatar: (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_5__.makeImageUrl)(c.public ? c.public.photo : null),
|
||||
comment: comment,
|
||||
preview: preview,
|
||||
unread: this.props.showUnread ? c.unread : 0,
|
||||
now: c.online && this.props.connected,
|
||||
acs: c.acs,
|
||||
@@ -7299,10 +7291,144 @@ class ContactList extends (react__WEBPACK_IMPORTED_MODULE_0___default().Componen
|
||||
|
||||
}
|
||||
|
||||
;
|
||||
/* harmony default export */ __webpack_exports__["default"] = ((0,react_intl__WEBPACK_IMPORTED_MODULE_1__.injectIntl)(ContactList));
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/widgets/contact.jsx":
|
||||
/*!*********************************!*\
|
||||
!*** ./src/widgets/contact.jsx ***!
|
||||
\*********************************/
|
||||
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
||||
/* harmony export */ "default": function() { return /* binding */ Contact; }
|
||||
/* harmony export */ });
|
||||
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
|
||||
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
|
||||
/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-intl */ "react-intl");
|
||||
/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_1__);
|
||||
/* harmony import */ var _letter_tile_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./letter-tile.jsx */ "./src/widgets/letter-tile.jsx");
|
||||
/* harmony import */ var _contact_badges_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./contact-badges.jsx */ "./src/widgets/contact-badges.jsx");
|
||||
/* harmony import */ var _unread_badge_jsx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./unread-badge.jsx */ "./src/widgets/unread-badge.jsx");
|
||||
/* harmony import */ var tinode_sdk__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! tinode-sdk */ "tinode-sdk");
|
||||
/* harmony import */ var tinode_sdk__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(tinode_sdk__WEBPACK_IMPORTED_MODULE_5__);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
class Contact extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component) {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleClick = this.handleClick.bind(this);
|
||||
this.handleContextClick = this.handleContextClick.bind(this);
|
||||
}
|
||||
|
||||
handleClick(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
if (this.props.onSelected) {
|
||||
this.props.onSelected(this.props.item, this.props.index);
|
||||
}
|
||||
}
|
||||
|
||||
handleContextClick(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.props.showContextMenu({
|
||||
topicName: this.props.item,
|
||||
y: e.pageY,
|
||||
x: e.pageX
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
let title = this.props.title;
|
||||
|
||||
if (!title) {
|
||||
title = react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
|
||||
id: "unnamed_topic"
|
||||
}));
|
||||
} else if (title.length > 30) {
|
||||
title = title.substring(0, 28) + '…';
|
||||
}
|
||||
|
||||
const online = this.props.now ? 'online' : 'offline';
|
||||
const avatar = this.props.avatar ? this.props.avatar : true;
|
||||
const badges = this.props.badges ? this.props.badges.slice() : [];
|
||||
const icon_badges = [];
|
||||
|
||||
if (this.props.acs) {
|
||||
if (this.props.showMode) {
|
||||
badges.push({
|
||||
name: this.props.acs.getMode(),
|
||||
key: 'mode'
|
||||
});
|
||||
}
|
||||
|
||||
if (this.props.acs.isMuted()) {
|
||||
icon_badges.push({
|
||||
icon: 'muted'
|
||||
});
|
||||
}
|
||||
|
||||
if (!this.props.acs.isJoiner()) {
|
||||
icon_badges.push({
|
||||
icon: 'banned'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const subtitle = this.props.preview ? typeof this.props.preview == 'string' ? this.props.preview : react__WEBPACK_IMPORTED_MODULE_0___default().createElement((react__WEBPACK_IMPORTED_MODULE_0___default().Fragment), null, tinode_sdk__WEBPACK_IMPORTED_MODULE_5__.Drafty.format(this.props.preview, draftyFormatter, this)) : this.props.comment;
|
||||
return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
|
||||
className: !this.props.showCheckmark && this.props.selected ? "selected" : null,
|
||||
onClick: this.handleClick
|
||||
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
||||
className: "avatar-box"
|
||||
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_letter_tile_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
|
||||
avatar: avatar,
|
||||
title: this.props.title,
|
||||
topic: this.props.item
|
||||
}), this.props.showOnline ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
|
||||
className: online
|
||||
}) : this.props.showCheckmark && this.props.selected ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
|
||||
className: "checkmark material-icons"
|
||||
}, "check_circle") : null), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
||||
className: "text-box"
|
||||
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
|
||||
className: "contact-title"
|
||||
}, title), this.props.isChannel ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
|
||||
src: "/img/channel.png",
|
||||
className: "channel",
|
||||
alt: "channel"
|
||||
}) : null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_unread_badge_jsx__WEBPACK_IMPORTED_MODULE_4__.default, {
|
||||
count: this.props.unread
|
||||
}), react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_contact_badges_jsx__WEBPACK_IMPORTED_MODULE_3__.default, {
|
||||
badges: icon_badges
|
||||
})), subtitle ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
||||
className: "contact-comment"
|
||||
}, subtitle) : null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_contact_badges_jsx__WEBPACK_IMPORTED_MODULE_3__.default, {
|
||||
badges: badges
|
||||
}))), this.props.showContextMenu ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
|
||||
className: "menuTrigger"
|
||||
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
|
||||
href: "#",
|
||||
onClick: this.handleContextClick
|
||||
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
|
||||
className: "material-icons"
|
||||
}, "expand_more"))) : null);
|
||||
}
|
||||
|
||||
}
|
||||
;
|
||||
|
||||
function draftyFormatter(style, data, values, key) {
|
||||
let el = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.tagName(style);
|
||||
let el = tinode_sdk__WEBPACK_IMPORTED_MODULE_5__.Drafty.tagName(style);
|
||||
const attr = {
|
||||
key: key
|
||||
};
|
||||
@@ -7364,136 +7490,6 @@ function draftyFormatter(style, data, values, key) {
|
||||
}
|
||||
}
|
||||
|
||||
;
|
||||
/* harmony default export */ __webpack_exports__["default"] = ((0,react_intl__WEBPACK_IMPORTED_MODULE_1__.injectIntl)(ContactList));
|
||||
|
||||
/***/ }),
|
||||
|
||||
/***/ "./src/widgets/contact.jsx":
|
||||
/*!*********************************!*\
|
||||
!*** ./src/widgets/contact.jsx ***!
|
||||
\*********************************/
|
||||
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
|
||||
|
||||
__webpack_require__.r(__webpack_exports__);
|
||||
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
||||
/* harmony export */ "default": function() { return /* binding */ Contact; }
|
||||
/* harmony export */ });
|
||||
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! react */ "react");
|
||||
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
|
||||
/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! react-intl */ "react-intl");
|
||||
/* harmony import */ var react_intl__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react_intl__WEBPACK_IMPORTED_MODULE_1__);
|
||||
/* harmony import */ var _letter_tile_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./letter-tile.jsx */ "./src/widgets/letter-tile.jsx");
|
||||
/* harmony import */ var _contact_badges_jsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./contact-badges.jsx */ "./src/widgets/contact-badges.jsx");
|
||||
/* harmony import */ var _unread_badge_jsx__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./unread-badge.jsx */ "./src/widgets/unread-badge.jsx");
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
class Contact extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component) {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.handleClick = this.handleClick.bind(this);
|
||||
this.handleContextClick = this.handleContextClick.bind(this);
|
||||
}
|
||||
|
||||
handleClick(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
if (this.props.onSelected) {
|
||||
this.props.onSelected(this.props.item, this.props.index);
|
||||
}
|
||||
}
|
||||
|
||||
handleContextClick(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
this.props.showContextMenu({
|
||||
topicName: this.props.item,
|
||||
y: e.pageY,
|
||||
x: e.pageX
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
let title = this.props.title;
|
||||
|
||||
if (!title) {
|
||||
title = react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__.FormattedMessage, {
|
||||
id: "unnamed_topic"
|
||||
}));
|
||||
} else if (title.length > 30) {
|
||||
title = title.substring(0, 28) + '...';
|
||||
}
|
||||
|
||||
const online = this.props.now ? 'online' : 'offline';
|
||||
const avatar = this.props.avatar ? this.props.avatar : true;
|
||||
const badges = this.props.badges ? this.props.badges.slice() : [];
|
||||
const icon_badges = [];
|
||||
|
||||
if (this.props.acs) {
|
||||
if (this.props.showMode) {
|
||||
badges.push({
|
||||
name: this.props.acs.getMode(),
|
||||
key: 'mode'
|
||||
});
|
||||
}
|
||||
|
||||
if (this.props.acs.isMuted()) {
|
||||
icon_badges.push({
|
||||
icon: 'muted'
|
||||
});
|
||||
}
|
||||
|
||||
if (!this.props.acs.isJoiner()) {
|
||||
icon_badges.push({
|
||||
icon: 'banned'
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("li", {
|
||||
className: !this.props.showCheckmark && this.props.selected ? "selected" : null,
|
||||
onClick: this.handleClick
|
||||
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
||||
className: "avatar-box"
|
||||
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_letter_tile_jsx__WEBPACK_IMPORTED_MODULE_2__.default, {
|
||||
avatar: avatar,
|
||||
title: this.props.title,
|
||||
topic: this.props.item
|
||||
}), this.props.showOnline ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
|
||||
className: online
|
||||
}) : this.props.showCheckmark && this.props.selected ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
|
||||
className: "checkmark material-icons"
|
||||
}, "check_circle") : null), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
||||
className: "text-box"
|
||||
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
|
||||
className: "contact-title"
|
||||
}, title), this.props.isChannel ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("img", {
|
||||
src: "/img/channel.png",
|
||||
className: "channel",
|
||||
alt: "channel"
|
||||
}) : null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_unread_badge_jsx__WEBPACK_IMPORTED_MODULE_4__.default, {
|
||||
count: this.props.unread
|
||||
}), react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_contact_badges_jsx__WEBPACK_IMPORTED_MODULE_3__.default, {
|
||||
badges: icon_badges
|
||||
})), this.props.comment ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
|
||||
className: "contact-comment"
|
||||
}, this.props.comment) : null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_contact_badges_jsx__WEBPACK_IMPORTED_MODULE_3__.default, {
|
||||
badges: badges
|
||||
}))), this.props.showContextMenu ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
|
||||
className: "menuTrigger"
|
||||
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
|
||||
href: "#",
|
||||
onClick: this.handleContextClick
|
||||
}, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
|
||||
className: "material-icons"
|
||||
}, "expand_more"))) : null);
|
||||
}
|
||||
|
||||
}
|
||||
;
|
||||
|
||||
/***/ }),
|
||||
|
||||
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
+487
-509
File diff suppressed because one or more lines are too long
+1
-1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user