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

more refactoring of image preview

Browse Source
This commit is contained in:
or-else
2020-01-13 18:20:09 +03:00
parent 8622926a4c
commit d1c90f8434
10 changed files with 534 additions and 449 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/base.css
+6 -3
View File
@@ -1279,10 +1279,12 @@ i.search {
#image-preview-caption-panel {
display: flex;
justify-content: space-between;
background-color: transparent;
background-color: #eceff1;
box-shadow: 0 1px 2px silver; /* Faint shadow under the panel */
line-height: 2.5rem;
height: 3.5rem;
height: 4.6rem;
padding: 1rem 0.75rem 0 0.75rem;
z-index: 3;
}
#image-preview-caption-panel a {
@@ -1308,7 +1310,8 @@ i.search {
justify-content: space-around;
height: 3.2rem;
line-height: 1.5rem;
background-color: transparent;
background-color: #eceff1;
box-shadow: 0px -2px 3px -1px rgba(0,0,0,0.1); /* Faint shadow above panel */
}
/* Talk bubbles */
css/base.min.css
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
src/views/messages-view.jsx
+73 -18
View File
@@ -14,8 +14,8 @@ import LoadSpinner from '../widgets/load-spinner.jsx';
import LogoView from './logo-view.jsx';
import SendMessage from '../widgets/send-message.jsx';
import { DEFAULT_P2P_ACCESS_MODE, KEYPRESS_DELAY, MESSAGES_PAGE } from '../config.js';
import { makeImageUrl } from '../lib/blob-helpers.js';
import { DEFAULT_P2P_ACCESS_MODE, KEYPRESS_DELAY, MESSAGES_PAGE, MAX_IMAGE_DIM, MAX_INBAND_ATTACHMENT_SIZE } from '../config.js';
import { SUPPORTED_IMAGE_FORMATS, filePasted, fileToBase64, imageFileToBase64, imageFileScaledToBase64, makeImageUrl } from '../lib/blob-helpers.js';
import { shortDateFormat } from '../lib/strformat.js';
const messages = defineMessages({
@@ -77,6 +77,7 @@ class MessagesView extends React.Component {
this.handleEnablePeer = this.handleEnablePeer.bind(this);
this.handleAttachFile = this.handleAttachFile.bind(this);
this.handleAttachImage = this.handleAttachImage.bind(this);
this.handleNewImagePreview = this.handleNewImagePreview.bind(this);
}
componentDidMount() {
@@ -505,15 +506,76 @@ class MessagesView extends React.Component {
}
}
handleAttachImage(mime, bits, width, height, fname) {
this.props.sendMessage(Drafty.insertImage(null, 0, mime, bits, width, height, fname));
handleNewImagePreview(content) {
this.setState({ imagePreview: content });
// this.props.sendMessage(Drafty.insertImage(null, 0, mime, bits, width, height, fname));
}
handleAttachImage(file) {
// Check if the uploaded file is indeed an image and if it isn't too large.
if (file.size > MAX_INBAND_ATTACHMENT_SIZE || SUPPORTED_IMAGE_FORMATS.indexOf(file.type) < 0) {
// Convert image for size or format.
imageFileScaledToBase64(file, MAX_IMAGE_DIM, MAX_IMAGE_DIM, false,
// Success
(bits, mime, width, height, fname) => {
this.handleNewImagePreview({
url: URL.createObjectURL(file),
filename: fname,
width: width,
height: height,
size: bits.length,
type: mime
});
},
// Failure
(err) => {
this.props.onError(err, 'err');
});
} else {
// Image can be uploaded as is. No conversion is needed.
imageFileToBase64(file,
// Success
(bits, mime, width, height, fname) => {
this.handleNewImagePreview({
url: URL.createObjectURL(file),
filename: fname,
width: width,
height: height,
size: bits.length,
type: mime
});
},
// Failure
(err) => {
this.props.onError(err, 'err');
}
);
}
}
render() {
const {formatMessage} = this.props.intl;
let component;
if (this.state.topic) {
if (this.props.hideSelf) {
component = null;
} else if (!this.state.topic) {
component = (
<LogoView hideSelf={this.props.hideSelf}
serverVersion={this.props.serverVersion}
serverAddress={this.props.serverAddress} />
);
} else {
let component2;
if (this.state.imagePreview) {
component2 = (
<ImagePreview
content={this.state.imagePreview}
downloadable={true}
onClose={this.handleCloseImagePreview}
onSendMessage={this.props.sendMessage} />
);
} else {
const topic = this.props.tinode.getTopic(this.state.topic);
const groupTopic = topic.getType() == 'grp';
let messageNodes = [];
@@ -586,8 +648,8 @@ class MessagesView extends React.Component {
const avatar = this.state.avatar || true;
const online = this.props.online ? 'online' + (this.state.typingIndicator ? ' typing' : '') : 'offline';
component = (
<div id="topic-view" className={this.props.hideSelf ? 'nodisplay' : null}>
component2 = (
<>
<div id="topic-caption-panel" className="caption-panel">
{this.props.displayMobile ?
<a href="#" id="hide-message-view" onClick={(e) => {e.preventDefault(); this.props.onHideMessagesView();}}>
@@ -664,19 +726,12 @@ class MessagesView extends React.Component {
onAttachFile={this.handleAttachFile}
onAttachImage={this.handleAttachImage}
onError={this.props.onError} />}
{this.state.imagePreview ?
<ImagePreview content={this.state.imagePreview}
downloadable={true}
onClose={this.handleCloseImagePreview} /> : null}
</div>
);
} else {
component = (
<LogoView hideSelf={this.props.hideSelf}
serverVersion={this.props.serverVersion}
serverAddress={this.props.serverAddress} />
</>
);
}
component = <div id="topic-view">{component2}</div>
}
return component;
}
};
src/widgets/chat-message.jsx
+3 -3
View File
@@ -20,13 +20,13 @@ export default class ChatMessage extends React.Component {
props.uploader.onProgress = this.handleProgress.bind(this);
}
this.handlePreviewImage = this.handlePreviewImage.bind(this);
this.handleImagePreview = this.handleImagePreview.bind(this);
this.handleFormButtonClick = this.handleFormButtonClick.bind(this);
this.handleContextClick = this.handleContextClick.bind(this);
this.handleCancelUpload = this.handleCancelUpload.bind(this);
}
handlePreviewImage(e) {
handleImagePreview(e) {
e.preventDefault();
this.props.onImagePreview({
url: e.target.src,
@@ -177,7 +177,7 @@ function draftyFormatter(style, data, values, key) {
attr.style = { width: dim.dstWidth + 'px', height: dim.dstHeight + 'px' };
attr.src = sanitizeImageUrl(attr.src);
if (attr.src) {
attr.onClick = this.handlePreviewImage;
attr.onClick = this.handleImagePreview;
attr.className += ' image-clickable';
} else {
attr.src = 'img/broken_image.png';
src/widgets/image-preview.jsx
+9 -1
View File
@@ -1,5 +1,6 @@
import React from 'react';
import { FormattedMessage } from 'react-intl';
import SendMessage from '../widgets/send-message.jsx';
import { REM_SIZE } from '../config.js';
import { fitImageSize } from '../lib/blob-helpers.js';
@@ -60,6 +61,13 @@ export default class ImagePreview extends React.PureComponent {
<div id="image-preview-container" ref={(node) => this.assignWidth(node)}>
<img src={this.props.content.url} style={size} />
</div>
{this.props.onSendMessage ?
<SendMessage
tinode={this.props.tinode}
topic={this.props.topic}
onSendMessage={this.props.onSendMessage}
onError={this.props.onError} />
:
<div id="image-preview-footer">
<div>
<div><b><FormattedMessage id="label_file_name" defaultMessage="File name:"
@@ -76,7 +84,7 @@ export default class ImagePreview extends React.PureComponent {
description="Label for file size" /></b></div>
<div>{width} &times; {height} px; {bytesToHumanSize(this.props.content.size)}</div>
</div>
</div>
</div>}
</div>
);
}
src/widgets/send-message.jsx
+16 -34
View File
@@ -3,8 +3,8 @@ import React from 'react';
import { defineMessages, injectIntl } from 'react-intl';
import { Drafty } from 'tinode-sdk';
import { KEYPRESS_DELAY, MAX_EXTERN_ATTACHMENT_SIZE, MAX_IMAGE_DIM, MAX_INBAND_ATTACHMENT_SIZE } from '../config.js';
import { SUPPORTED_IMAGE_FORMATS, filePasted, fileToBase64, imageFileToBase64, imageFileScaledToBase64 } from '../lib/blob-helpers.js';
import { KEYPRESS_DELAY, MAX_EXTERN_ATTACHMENT_SIZE, MAX_INBAND_ATTACHMENT_SIZE } from '../config.js';
import { filePasted, fileToBase64 } from '../lib/blob-helpers.js';
import { bytesToHumanSize } from '../lib/strformat.js';
const messages = defineMessages({
@@ -81,32 +81,7 @@ class SendMessage extends React.PureComponent {
handleAttachImage(e) {
if (e.target.files && e.target.files.length > 0) {
const file = e.target.files[0];
// Check if the uploaded file is indeed an image and if it isn't too large.
if (file.size > MAX_INBAND_ATTACHMENT_SIZE || SUPPORTED_IMAGE_FORMATS.indexOf(file.type) < 0) {
// Convert image for size or format.
imageFileScaledToBase64(file, MAX_IMAGE_DIM, MAX_IMAGE_DIM, false,
// Success
(bits, mime, width, height, fname) => {
this.props.onAttachImage(mime, bits, width, height, fname);
},
// Failure
(err) => {
this.props.onError(err, 'err');
});
} else {
// Image can be uploaded as is. No conversion is needed.
imageFileToBase64(file,
// Success
(bits, mime, width, height, fname) => {
this.props.onAttachImage(mime, bits, width, height, fname);
},
// Failure
(err) => {
this.props.onError(err, 'err');
}
);
}
this.props.onAttachImage(e.target.files[0]);
}
// Clear the value so the same file can be uploaded again.
e.target.value = '';
@@ -186,16 +161,23 @@ class SendMessage extends React.PureComponent {
formatMessage(messages.type_new_message);
return (
<div id="send-message-panel">
{this.props.disabled ?
<i className="material-icons disabled">photo</i> :
{this.props.onAttachFile ?
(this.props.disabled ?
<>
<i className="material-icons disabled">photo</i>
<i className="material-icons disabled">attach_file</i>
</>
:
<>
<a href="#" onClick={(e) => {e.preventDefault(); this.attachImage.click();}} title="Add image">
<i className="material-icons secondary">photo</i>
</a>}
{this.props.disabled ?
<i className="material-icons disabled">attach_file</i> :
</a>
<a href="#" onClick={(e) => {e.preventDefault(); this.attachFile.click();}} title="Attach file">
<i className="material-icons secondary">attach_file</i>
</a>}
</a>
</>)
:
null}
<textarea id="sendMessage" placeholder={prompt}
disabled={this.props.disabled} value={this.state.message}
onChange={this.handleMessageTyping} onKeyPress={this.handleKeyPress}
umd/index.dev.js
+99 -62
View File
@@ -2952,6 +2952,7 @@ var MessagesView = function (_React$Component) {
_this.handleEnablePeer = _this.handleEnablePeer.bind(_assertThisInitialized(_this));
_this.handleAttachFile = _this.handleAttachFile.bind(_assertThisInitialized(_this));
_this.handleAttachImage = _this.handleAttachImage.bind(_assertThisInitialized(_this));
_this.handleNewImagePreview = _this.handleNewImagePreview.bind(_assertThisInitialized(_this));
return _this;
}
@@ -3324,20 +3325,73 @@ var MessagesView = function (_React$Component) {
this.props.sendMessage(Drafty.attachFile(null, mime, bits, fname));
}
}
}, {
key: "handleNewImagePreview",
value: function handleNewImagePreview(content) {
this.setState({
imagePreview: content
});
}
}, {
key: "handleAttachImage",
value: function handleAttachImage(mime, bits, width, height, fname) {
this.props.sendMessage(Drafty.insertImage(null, 0, mime, bits, width, height, fname));
value: function handleAttachImage(file) {
var _this6 = this;
if (file.size > _config_js__WEBPACK_IMPORTED_MODULE_12__["MAX_INBAND_ATTACHMENT_SIZE"] || _lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_13__["SUPPORTED_IMAGE_FORMATS"].indexOf(file.type) < 0) {
Object(_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_13__["imageFileScaledToBase64"])(file, _config_js__WEBPACK_IMPORTED_MODULE_12__["MAX_IMAGE_DIM"], _config_js__WEBPACK_IMPORTED_MODULE_12__["MAX_IMAGE_DIM"], false, function (bits, mime, width, height, fname) {
_this6.handleNewImagePreview({
url: URL.createObjectURL(file),
filename: fname,
width: width,
height: height,
size: bits.length,
type: mime
});
}, function (err) {
_this6.props.onError(err, 'err');
});
} else {
Object(_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_13__["imageFileToBase64"])(file, function (bits, mime, width, height, fname) {
_this6.handleNewImagePreview({
url: URL.createObjectURL(file),
filename: fname,
width: width,
height: height,
size: bits.length,
type: mime
});
}, function (err) {
_this6.props.onError(err, 'err');
});
}
}
}, {
key: "render",
value: function render() {
var _this6 = this;
var _this7 = this;
var formatMessage = this.props.intl.formatMessage;
var component;
if (this.state.topic) {
if (this.props.hideSelf) {
component = null;
} else if (!this.state.topic) {
component = react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_logo_view_jsx__WEBPACK_IMPORTED_MODULE_10__["default"], {
hideSelf: this.props.hideSelf,
serverVersion: this.props.serverVersion,
serverAddress: this.props.serverAddress
});
} else {
var component2;
if (this.state.imagePreview) {
component2 = react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_widgets_image_preview_jsx__WEBPACK_IMPORTED_MODULE_6__["default"], {
content: this.state.imagePreview,
downloadable: true,
onClose: this.handleCloseImagePreview,
onSendMessage: this.props.sendMessage
});
} else {
var topic = this.props.tinode.getTopic(this.state.topic);
var groupTopic = topic.getType() == 'grp';
var messageNodes = [];
@@ -3421,10 +3475,7 @@ var MessagesView = function (_React$Component) {
var avatar = this.state.avatar || true;
var online = this.props.online ? 'online' + (this.state.typingIndicator ? ' typing' : '') : 'offline';
component = react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
id: "topic-view",
className: this.props.hideSelf ? 'nodisplay' : null
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
component2 = react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
id: "topic-caption-panel",
className: "caption-panel"
}, this.props.displayMobile ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("a", {
@@ -3433,7 +3484,7 @@ var MessagesView = function (_React$Component) {
onClick: function onClick(e) {
e.preventDefault();
_this6.props.onHideMessagesView();
_this7.props.onHideMessagesView();
}
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("i", {
className: "material-icons"
@@ -3508,17 +3559,12 @@ var MessagesView = function (_React$Component) {
onAttachFile: this.handleAttachFile,
onAttachImage: this.handleAttachImage,
onError: this.props.onError
}), this.state.imagePreview ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_widgets_image_preview_jsx__WEBPACK_IMPORTED_MODULE_6__["default"], {
content: this.state.imagePreview,
downloadable: true,
onClose: this.handleCloseImagePreview
}) : null);
} else {
component = react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_logo_view_jsx__WEBPACK_IMPORTED_MODULE_10__["default"], {
hideSelf: this.props.hideSelf,
serverVersion: this.props.serverVersion,
serverAddress: this.props.serverAddress
});
}));
}
component = react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
id: "topic-view"
}, component2);
}
return component;
@@ -6822,7 +6868,7 @@ var ChatMessage = function (_React$Component) {
props.uploader.onProgress = _this.handleProgress.bind(_assertThisInitialized(_this));
}
_this.handlePreviewImage = _this.handlePreviewImage.bind(_assertThisInitialized(_this));
_this.handleImagePreview = _this.handleImagePreview.bind(_assertThisInitialized(_this));
_this.handleFormButtonClick = _this.handleFormButtonClick.bind(_assertThisInitialized(_this));
_this.handleContextClick = _this.handleContextClick.bind(_assertThisInitialized(_this));
_this.handleCancelUpload = _this.handleCancelUpload.bind(_assertThisInitialized(_this));
@@ -6830,8 +6876,8 @@ var ChatMessage = function (_React$Component) {
}
_createClass(ChatMessage, [{
key: "handlePreviewImage",
value: function handlePreviewImage(e) {
key: "handleImagePreview",
value: function handleImagePreview(e) {
e.preventDefault();
this.props.onImagePreview({
url: e.target.src,
@@ -7001,7 +7047,7 @@ function draftyFormatter(style, data, values, key) {
attr.src = Object(_lib_utils_js__WEBPACK_IMPORTED_MODULE_6__["sanitizeImageUrl"])(attr.src);
if (attr.src) {
attr.onClick = this.handlePreviewImage;
attr.onClick = this.handleImagePreview;
attr.className += ' image-clickable';
} else {
attr.src = 'img/broken_image.png';
@@ -8984,9 +9030,10 @@ __webpack_require__.r(__webpack_exports__);
/* 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 _config_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../config.js */ "./src/config.js");
/* harmony import */ var _lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../lib/blob-helpers.js */ "./src/lib/blob-helpers.js");
/* harmony import */ var _lib_strformat_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../lib/strformat.js */ "./src/lib/strformat.js");
/* harmony import */ var _widgets_send_message_jsx__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../widgets/send-message.jsx */ "./src/widgets/send-message.jsx");
/* harmony import */ var _config_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ../config.js */ "./src/config.js");
/* harmony import */ var _lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../lib/blob-helpers.js */ "./src/lib/blob-helpers.js");
/* harmony import */ var _lib_strformat_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../lib/strformat.js */ "./src/lib/strformat.js");
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -9011,6 +9058,7 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
var ImagePreview = function (_React$PureComponent) {
_inherits(ImagePreview, _React$PureComponent);
@@ -9047,7 +9095,7 @@ var ImagePreview = function (_React$PureComponent) {
return null;
}
var dim = Object(_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_3__["fitImageSize"])(this.props.content.width, this.props.content.height, this.state.width, this.state.height, false);
var dim = Object(_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_4__["fitImageSize"])(this.props.content.width, this.props.content.height, this.state.width, this.state.height, false);
var size = dim ? {
width: dim.dstWidth + 'px',
height: dim.dstHeight + 'px'
@@ -9059,7 +9107,7 @@ var ImagePreview = function (_React$PureComponent) {
size.maxWidth = '100%';
size.maxHeight = '100%';
var filename = this.props.content.filename;
var maxlength = Math.max((this.state.width / _config_js__WEBPACK_IMPORTED_MODULE_2__["REM_SIZE"] / 1.5 | 0) - 2, 12);
var maxlength = Math.max((this.state.width / _config_js__WEBPACK_IMPORTED_MODULE_3__["REM_SIZE"] / 1.5 | 0) - 2, 12);
if (filename.length > maxlength) {
filename = filename.slice(0, maxlength / 2 - 1) + '...' + filename.slice(1 - maxlength / 2);
@@ -9097,7 +9145,12 @@ var ImagePreview = function (_React$PureComponent) {
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("img", {
src: this.props.content.url,
style: size
})), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
})), this.props.onSendMessage ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(_widgets_send_message_jsx__WEBPACK_IMPORTED_MODULE_2__["default"], {
tinode: this.props.tinode,
topic: this.props.topic,
onSendMessage: this.props.onSendMessage,
onError: this.props.onError
}) : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
id: "image-preview-footer"
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("b", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__["FormattedMessage"], {
id: "label_file_name",
@@ -9110,7 +9163,7 @@ var ImagePreview = function (_React$PureComponent) {
}))), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, this.props.content.type)), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("b", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react_intl__WEBPACK_IMPORTED_MODULE_1__["FormattedMessage"], {
id: "label_size",
defaultMessage: "Size:"
}))), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, width, " \xD7 ", height, " px; ", Object(_lib_strformat_js__WEBPACK_IMPORTED_MODULE_4__["bytesToHumanSize"])(this.props.content.size)))));
}))), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, width, " \xD7 ", height, " px; ", Object(_lib_strformat_js__WEBPACK_IMPORTED_MODULE_5__["bytesToHumanSize"])(this.props.content.size)))));
}
}]);
@@ -10678,24 +10731,8 @@ var SendMessage = function (_React$PureComponent) {
}, {
key: "handleAttachImage",
value: function handleAttachImage(e) {
var _this3 = this;
if (e.target.files && e.target.files.length > 0) {
var file = e.target.files[0];
if (file.size > _config_js__WEBPACK_IMPORTED_MODULE_3__["MAX_INBAND_ATTACHMENT_SIZE"] || _lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_4__["SUPPORTED_IMAGE_FORMATS"].indexOf(file.type) < 0) {
Object(_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_4__["imageFileScaledToBase64"])(file, _config_js__WEBPACK_IMPORTED_MODULE_3__["MAX_IMAGE_DIM"], _config_js__WEBPACK_IMPORTED_MODULE_3__["MAX_IMAGE_DIM"], false, function (bits, mime, width, height, fname) {
_this3.props.onAttachImage(mime, bits, width, height, fname);
}, function (err) {
_this3.props.onError(err, 'err');
});
} else {
Object(_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_4__["imageFileToBase64"])(file, function (bits, mime, width, height, fname) {
_this3.props.onAttachImage(mime, bits, width, height, fname);
}, function (err) {
_this3.props.onError(err, 'err');
});
}
this.props.onAttachImage(e.target.files[0]);
}
e.target.value = '';
@@ -10703,7 +10740,7 @@ var SendMessage = function (_React$PureComponent) {
}, {
key: "handleAttachFile",
value: function handleAttachFile(e) {
var _this4 = this;
var _this3 = this;
var formatMessage = this.props.intl.formatMessage;
@@ -10726,7 +10763,7 @@ var SendMessage = function (_React$PureComponent) {
this.props.onAttachFile(file.type, null, file.name, file.size, uploadCompletionPromise, uploader);
} else {
Object(_lib_blob_helpers_js__WEBPACK_IMPORTED_MODULE_4__["fileToBase64"])(file, function (mime, bits, fname) {
_this4.props.onAttachFile(mime, bits, fname);
_this3.props.onAttachFile(mime, bits, fname);
}, this.props.onError);
}
}
@@ -10780,37 +10817,37 @@ var SendMessage = function (_React$PureComponent) {
}, {
key: "render",
value: function render() {
var _this5 = this;
var _this4 = this;
var formatMessage = this.props.intl.formatMessage;
var prompt = this.props.disabled ? formatMessage(messages.messaging_disabled) : formatMessage(messages.type_new_message);
return react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", {
id: "send-message-panel"
}, this.props.disabled ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("i", {
}, this.props.onAttachFile ? this.props.disabled ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("i", {
className: "material-icons disabled"
}, "photo") : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("a", {
}, "photo"), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("i", {
className: "material-icons disabled"
}, "attach_file")) : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement(react__WEBPACK_IMPORTED_MODULE_0___default.a.Fragment, null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("a", {
href: "#",
onClick: function onClick(e) {
e.preventDefault();
_this5.attachImage.click();
_this4.attachImage.click();
},
title: "Add image"
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("i", {
className: "material-icons secondary"
}, "photo")), this.props.disabled ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("i", {
className: "material-icons disabled"
}, "attach_file") : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("a", {
}, "photo")), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("a", {
href: "#",
onClick: function onClick(e) {
e.preventDefault();
_this5.attachFile.click();
_this4.attachFile.click();
},
title: "Attach file"
}, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("i", {
className: "material-icons secondary"
}, "attach_file")), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("textarea", {
}, "attach_file"))) : null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("textarea", {
id: "sendMessage",
placeholder: prompt,
disabled: this.props.disabled,
@@ -10818,7 +10855,7 @@ var SendMessage = function (_React$PureComponent) {
onChange: this.handleMessageTyping,
onKeyPress: this.handleKeyPress,
ref: function ref(_ref) {
_this5.messageEditArea = _ref;
_this4.messageEditArea = _ref;
},
autoFocus: true
}), this.props.disabled ? react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("i", {
@@ -10832,7 +10869,7 @@ var SendMessage = function (_React$PureComponent) {
}, "send")), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", {
type: "file",
ref: function ref(_ref2) {
_this5.attachFile = _ref2;
_this4.attachFile = _ref2;
},
onChange: this.handleAttachFile,
style: {
@@ -10841,7 +10878,7 @@ var SendMessage = function (_React$PureComponent) {
}), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("input", {
type: "file",
ref: function ref(_ref3) {
_this5.attachImage = _ref3;
_this4.attachImage = _ref3;
},
accept: "image/*",
onChange: this.handleAttachImage,
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