pro/im_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

more work on supporting message previews

Browse Source
This commit is contained in:
or-else
2021-01-17 17:26:57 -08:00
parent 55d7e0d5cb
commit 0afa8bcdcd
10 changed files with 712 additions and 728 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/config.js
+3
View File
@@ -81,6 +81,9 @@ export const MAX_ONLINE_IN_TOPIC = 4;
// Maximum length of user name, topic title, and private comment. // Maximum length of user name, topic title, and private comment.
export const MAX_TITLE_LENGTH = 60; 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". // Link for "Contact Us".
export const LINK_CONTACT_US = 'email:info@tinode.co'; export const LINK_CONTACT_US = 'email:info@tinode.co';
src/views/messages-view.jsx
+1 -5
View File
@@ -159,11 +159,7 @@ class MessagesView extends React.Component {
// Don't request the tags. They are useless unless the user // Don't request the tags. They are useless unless the user
// is the owner and is editing the topic. // is the owner and is editing the topic.
let getQuery = topic.startMetaQuery().withLaterDesc(); let getQuery = topic.startMetaQuery().withLaterDesc().withLaterSub();
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();
}
if (this.state.isReader || newTopic) { if (this.state.isReader || newTopic) {
// Reading is either permitted or we don't know because it's a new topic. Ask for messages. // Reading is either permitted or we don't know because it's a new topic. Ask for messages.
getQuery = getQuery.withLaterData(MESSAGES_PAGE); getQuery = getQuery.withLaterData(MESSAGES_PAGE);
src/widgets/contact-list.jsx
+10 -54
View File
@@ -11,10 +11,7 @@ import ContactAction from './contact-action.jsx';
import { makeImageUrl } from '../lib/blob-helpers.js'; import { makeImageUrl } from '../lib/blob-helpers.js';
const junk = { import { MESSAGE_PREVIEW_LENGTH } from '../config.js';
"ent":[{"data":{"mime":"image/jpeg","name":"hello.jpg","val":"<38992, bytes: ...>","width":100, "height":80},"tp":"EX"}],
"fmt":[{"at":-1, "key":0}]
};
const messages = defineMessages({ const messages = defineMessages({
badge_you: { badge_you: {
@@ -76,15 +73,22 @@ class ContactList extends React.Component {
badges.push({name: formatMessage(messages.badge_owner), color: 'blue'}); 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) ? const comment = Array.isArray(c.private) ?
c.private.join(',') : (c.private ? c.private.comment : null); 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( contactNodes.push(
<Contact <Contact
title={c.public ? c.public.fn : null} title={c.public ? c.public.fn : null}
avatar={makeImageUrl(c.public ? c.public.photo : null)} avatar={makeImageUrl(c.public ? c.public.photo : null)}
comment={comment} comment={comment}
preview={preview}
unread={this.props.showUnread ? c.unread : 0} unread={this.props.showUnread ? c.unread : 0}
now={c.online && this.props.connected} now={c.online && this.props.connected}
acs={c.acs} 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); export default injectIntl(ContactList);
src/widgets/contact.jsx
+57 -2
View File
@@ -6,6 +6,8 @@ import LetterTile from './letter-tile.jsx';
import ContactBadges from './contact-badges.jsx'; import ContactBadges from './contact-badges.jsx';
import UnreadBadge from './unread-badge.jsx'; import UnreadBadge from './unread-badge.jsx';
import { Drafty } from 'tinode-sdk';
export default class Contact extends React.Component { export default class Contact extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
@@ -35,7 +37,7 @@ export default class Contact extends React.Component {
title = <i><FormattedMessage id="unnamed_topic" /></i>; title = <i><FormattedMessage id="unnamed_topic" /></i>;
} else if (title.length > 30) { } else if (title.length > 30) {
// FIXME: this is probably wrong for RTL languages. // 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 online = this.props.now ? 'online' : 'offline';
const avatar = this.props.avatar ? this.props.avatar : true; 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 ( return (
<li className={!this.props.showCheckmark && this.props.selected ? "selected" : null} <li className={!this.props.showCheckmark && this.props.selected ? "selected" : null}
onClick={this.handleClick}> 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} {this.props.isChannel ? <img src="/img/channel.png" className="channel" alt="channel" /> : null}
<UnreadBadge count={this.props.unread} /><ContactBadges badges={icon_badges} /> <UnreadBadge count={this.props.unread} /><ContactBadges badges={icon_badges} />
</div> </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> <span><ContactBadges badges={badges} /></span>
</div> </div>
{this.props.showContextMenu ? {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;
}
};
umd/index.dev.js
+150 -154
View File
@@ -36,6 +36,7 @@ __webpack_require__.r(__webpack_exports__);
/* harmony export */ "IMAGE_PREVIEW_DIM": function() { return /* binding */ IMAGE_PREVIEW_DIM; }, /* 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_ONLINE_IN_TOPIC": function() { return /* binding */ MAX_ONLINE_IN_TOPIC; },
/* harmony export */ "MAX_TITLE_LENGTH": function() { return /* binding */ MAX_TITLE_LENGTH; }, /* 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_CONTACT_US": function() { return /* binding */ LINK_CONTACT_US; },
/* harmony export */ "LINK_PRIVACY_POLICY": function() { return /* binding */ LINK_PRIVACY_POLICY; }, /* harmony export */ "LINK_PRIVACY_POLICY": function() { return /* binding */ LINK_PRIVACY_POLICY; },
/* harmony export */ "LINK_TERMS_OF_SERVICE": function() { return /* binding */ LINK_TERMS_OF_SERVICE; } /* 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 IMAGE_PREVIEW_DIM = 64;
const MAX_ONLINE_IN_TOPIC = 4; const MAX_ONLINE_IN_TOPIC = 4;
const MAX_TITLE_LENGTH = 60; const MAX_TITLE_LENGTH = 60;
const MESSAGE_PREVIEW_LENGTH = 80;
const LINK_CONTACT_US = 'email:info@tinode.co'; const LINK_CONTACT_US = 'email:info@tinode.co';
const LINK_PRIVACY_POLICY = 'https://tinode.co/privacy.html'; const LINK_PRIVACY_POLICY = 'https://tinode.co/privacy.html';
const LINK_TERMS_OF_SERVICE = 'https://tinode.co/terms.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)) { 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; const newTopic = this.props.newTopicParams && this.props.newTopicParams._topicName == this.props.topic;
let getQuery = topic.startMetaQuery().withLaterDesc(); let getQuery = topic.startMetaQuery().withLaterDesc().withLaterSub();
if (this.state.isSharer || newTopic && !topic.isChannel()) {
getQuery = getQuery.withLaterSub();
}
if (this.state.isReader || newTopic) { if (this.state.isReader || newTopic) {
getQuery = getQuery.withLaterData(_config_js__WEBPACK_IMPORTED_MODULE_13__.MESSAGES_PAGE); 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) { handleTopicSelected(topicName) {
console.log("handleTopicSelected", topicName);
if (this.state.newTopicParams && this.state.newTopicParams._topicName != topicName) { if (this.state.newTopicParams && this.state.newTopicParams._topicName != topicName) {
this.setState({ this.setState({
newTopicParams: null 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_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 _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 _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)({ const messages = (0,react_intl__WEBPACK_IMPORTED_MODULE_1__.defineMessages)({
badge_you: { badge_you: {
id: '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; 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, { contactNodes.push(react__WEBPACK_IMPORTED_MODULE_0___default().createElement(_contact_jsx__WEBPACK_IMPORTED_MODULE_3__.default, {
title: c.public ? c.public.fn : null, title: c.public ? c.public.fn : null,
avatar: (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_5__.makeImageUrl)(c.public ? c.public.photo : null), avatar: (0,_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_5__.makeImageUrl)(c.public ? c.public.photo : null),
comment: comment, comment: comment,
preview: preview,
unread: this.props.showUnread ? c.unread : 0, unread: this.props.showUnread ? c.unread : 0,
now: c.online && this.props.connected, now: c.online && this.props.connected,
acs: c.acs, 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) { 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 = { const attr = {
key: key 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);
}
}
; ;
/***/ }), /***/ }),
umd/index.dev.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/index.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/index.prod.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
umd/tinode.dev.js
+486 -508
View File
File diff suppressed because one or more lines are too long
umd/tinode.prod.js
+1 -1
View File
File diff suppressed because one or more lines are too long