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

code rearrangement

Browse Source
This commit is contained in:
or-else
2021-09-15 13:45:50 -07:00
parent 3a46599e79
commit 228cc9669c
7 changed files with 286 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lib/formatters.js
+143 -113
View File
@@ -82,68 +82,72 @@ function handleImageData(el, data, attr) {
// onFormButtonClick: this.handleFormButtonClick // onFormButtonClick: this.handleFormButtonClick
// onQuoteClick: this.handleQuoteClick (optional) // onQuoteClick: this.handleQuoteClick (optional)
export function fullFormatter(style, data, values, key) { export function fullFormatter(style, data, values, key) {
if (style == 'EX') { if (!style) {
// attachments are handled elsewhere. // Unformatted.
return values;
}
if (style == 'HD') {
// Hidden.
return null; return null;
} }
let el = Drafty.tagName(style); let el = Drafty.tagName(style);
if (el) { const attr = Drafty.attrValue(style, data) || {};
const attr = Drafty.attrValue(style, data) || {}; attr.key = key;
attr.key = key; switch (style) {
switch (style) { case 'HL':
case 'HL': // Highlighted text. Assign class name.
// Highlighted text. Assign class name. attr.className = 'highlight';
attr.className = 'highlight'; break;
break; case 'IM':
case 'IM': // Additional processing for images
// Additional processing for images el = handleImageData.call(this, el, data, attr);
el = handleImageData.call(this, el, data, attr); // Image element cannot have content.
// Image element cannot have content. values = null;
values = null; break;
break; case 'BN':
case 'BN': // Button
// Button attr.onClick = this.onFormButtonClick;
attr.onClick = this.onFormButtonClick; let inner = React.Children.map(values, (child) => {
let inner = React.Children.map(values, (child) => { return typeof child == 'string' ? child : undefined;
return typeof child == 'string' ? child : undefined; });
}); if (!inner || inner.length == 0) {
if (!inner || inner.length == 0) { inner = [attr.name]
inner = [attr.name] }
} // Get text which will be sent back when the button is clicked.
// Get text which will be sent back when the button is clicked. attr['data-title'] = inner.join('');
attr['data-title'] = inner.join(''); break;
break; case 'MN':
case 'MN': // Mention
// Mention if (data && data.hasOwnProperty('colorId')) {
if (data && data.hasOwnProperty('colorId')) { attr.className = 'mn-dark-color' + data.colorId;
attr.className = 'mn-dark-color' + data.colorId; }
} break;
break; case 'FM':
case 'FM': // Form
// Form attr.className = 'bot-form';
attr.className = 'bot-form'; break;
break; case 'RW':
case 'RW': // Form element formatting is dependent on element content.
// Form element formatting is dependent on element content. break;
break; case 'QQ':
case 'QQ': // Quote/citation.
// Quote/citation. attr.className = 'reply-quote'
attr.className = 'reply-quote' attr.onClick = this.onQuoteClick;
attr.onClick = this.onQuoteClick; break;
break; default:
default: if (el == '_UNKN') {
if (el == '_UNKN') { // Unknown element.
// Unknown element. el = React.Fragment;
el = React.Fragment; values = [<i className="material-icons gray">extension</i>, ' '].concat(values || []);
values = [<i className="material-icons gray">extension</i>, ' '].concat(values || []); }
} break;
break; }
} if (!el) {
return React.createElement(el, attr, values);
} else {
return values; return values;
} }
return React.createElement(el, attr, values);
}; };
// Converts Drafty object into a one-line preview. 'this' is set by the caller. // Converts Drafty object into a one-line preview. 'this' is set by the caller.
@@ -151,64 +155,73 @@ export function fullFormatter(style, data, values, key) {
// formatMessage: this.props.intl.formatMessage // formatMessage: this.props.intl.formatMessage
// messages: formatjs messages defined with defineMessages. // messages: formatjs messages defined with defineMessages.
export function previewFormatter(style, data, values, key) { export function previewFormatter(style, data, values, key) {
let el = Drafty.tagName(style); if (!style) {
const attr = { key: key }; // Unformatted.
if (el) {
switch (style) {
case 'BR':
// Replace new line with a space.
el = React.Fragment;
values = [' '];
break;
case 'HL':
// Make highlight less prominent in preview.
attr.className = 'highlight preview';
break;
case 'LN':
case 'MN':
// Disable links in previews.
el = 'span';
break;
case 'IM':
// Replace image with '[icon] Image'.
el = React.Fragment;
values = [<i key="im" className="material-icons">photo</i>, this.formatMessage(messages.drafty_image)];
break;
case 'BN':
el = 'span';
attr.className = 'flat-button faux';
break;
case 'FM':
el = React.Fragment;
values = [<i key="fm" className="material-icons">dashboard</i>,
this.formatMessage(messages.drafty_form)].concat(' ', values || []);
break;
case 'RW':
el = React.Fragment;
break;
case 'EX':
if (data) {
if (data.mime == 'application/json') {
// Ignore JSON attachments: they are form response payloads.
return null;
}
// Clear inband data.
data.val = null;
}
el = React.Fragment;
values = [<i key="ex" className="material-icons">attachment</i>, this.formatMessage(messages.drafty_attachment)];
break;
default:
if (el == '_UNKN') {
el = React.Fragment;
values = [<i key="unkn" className="material-icons">extension</i>, ' '].concat(values || []);
}
break;
}
return React.createElement(el, attr, values);
} else {
return values; return values;
} }
if (style == 'HD') {
// Hidden.
return null;
}
let el = Drafty.tagName(style);
const attr = { key: key };
switch (style) {
case 'BR':
// Replace new line with a space.
el = React.Fragment;
values = [' '];
break;
case 'HL':
// Make highlight less prominent in preview.
attr.className = 'highlight preview';
break;
case 'LN':
case 'MN':
// Disable links in previews.
el = 'span';
break;
case 'IM':
// Replace image with '[icon] Image'.
el = React.Fragment;
values = [<i key="im" className="material-icons">photo</i>, this.formatMessage(messages.drafty_image)];
break;
case 'BN':
el = 'span';
attr.className = 'flat-button faux';
break;
case 'FM':
el = React.Fragment;
values = [<i key="fm" className="material-icons">dashboard</i>,
this.formatMessage(messages.drafty_form)].concat(' ', values || []);
break;
case 'RW':
el = React.Fragment;
break;
case 'EX':
if (data) {
if (data.mime == 'application/json') {
// Ignore JSON attachments: they are form response payloads.
return null;
}
// Clear inband data.
data.val = null;
}
el = React.Fragment;
values = [<i key="ex" className="material-icons">attachment</i>, this.formatMessage(messages.drafty_attachment)];
break;
default:
if (el == '_UNKN') {
el = React.Fragment;
values = [<i key="unkn" className="material-icons">extension</i>, ' '].concat(values || []);
}
break;
}
if (!el) {
return values;
}
return React.createElement(el, attr, values);
}; };
// Converts Drafty object into a quoted reply. 'this' is set by the caller. // Converts Drafty object into a quoted reply. 'this' is set by the caller.
@@ -218,7 +231,7 @@ export function previewFormatter(style, data, values, key) {
// authorizeURL: this.props.tinode.authorizeURL // authorizeURL: this.props.tinode.authorizeURL
// onQuoteClick: this.handleQuoteClick (optional) // onQuoteClick: this.handleQuoteClick (optional)
export function quoteFormatter(style, data, values, key) { export function quoteFormatter(style, data, values, key) {
if (['BR', 'IM', 'MN', 'QQ'].includes(style)) { if (['BR', 'EX', 'IM', 'MN', 'QQ'].includes(style)) {
let el = Drafty.tagName(style); let el = Drafty.tagName(style);
let attr = Drafty.attrValue(style, data) || {}; let attr = Drafty.attrValue(style, data) || {};
attr.key = key; attr.key = key;
@@ -240,6 +253,23 @@ export function quoteFormatter(style, data, values, key) {
attr.className = 'reply-quote'; attr.className = 'reply-quote';
attr.onClick = this.onQuoteClick; attr.onClick = this.onQuoteClick;
break; break;
case 'EX':
let fname;
if (data) {
if (data.mime == 'application/json') {
// Ignore JSON attachments: they are form response payloads.
return null;
}
// Clear inband data.
data.val = null;
fname = data.name;
}
if (!fname)
fname = this.formatMessage(messages.drafty_attachment);
}
el = React.Fragment;
values = [<i key="ex" className="material-icons">attachment</i>, fname];
break;
} }
return React.createElement(el, attr, values); return React.createElement(el, attr, values);
} }
umd/index.dev.js
+130 -105
View File
@@ -450,158 +450,173 @@ function handleImageData(el, data, attr) {
} }
function fullFormatter(style, data, values, key) { function fullFormatter(style, data, values, key) {
if (style == 'EX') { if (!style) {
return values;
}
if (style == 'HD') {
return null; return null;
} }
let el = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.tagName(style); let el = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.tagName(style);
const attr = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.attrValue(style, data) || {};
attr.key = key;
if (el) { switch (style) {
const attr = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.attrValue(style, data) || {}; case 'HL':
attr.key = key; attr.className = 'highlight';
break;
switch (style) { case 'IM':
case 'HL': el = handleImageData.call(this, el, data, attr);
attr.className = 'highlight'; values = null;
break; break;
case 'IM': case 'BN':
el = handleImageData.call(this, el, data, attr); attr.onClick = this.onFormButtonClick;
values = null; let inner = react__WEBPACK_IMPORTED_MODULE_0___default().Children.map(values, child => {
break; return typeof child == 'string' ? child : undefined;
});
case 'BN': if (!inner || inner.length == 0) {
attr.onClick = this.onFormButtonClick; inner = [attr.name];
let inner = react__WEBPACK_IMPORTED_MODULE_0___default().Children.map(values, child => { }
return typeof child == 'string' ? child : undefined;
});
if (!inner || inner.length == 0) { attr['data-title'] = inner.join('');
inner = [attr.name]; break;
}
attr['data-title'] = inner.join(''); case 'MN':
break; if (data && data.hasOwnProperty('colorId')) {
attr.className = 'mn-dark-color' + data.colorId;
}
case 'MN': break;
if (data && data.hasOwnProperty('colorId')) {
attr.className = 'mn-dark-color' + data.colorId;
}
break; case 'FM':
attr.className = 'bot-form';
break;
case 'FM': case 'RW':
attr.className = 'bot-form'; break;
break;
case 'RW': case 'QQ':
break; attr.className = 'reply-quote';
attr.onClick = this.onQuoteClick;
break;
case 'QQ': default:
attr.className = 'reply-quote'; if (el == '_UNKN') {
attr.onClick = this.onQuoteClick; el = (react__WEBPACK_IMPORTED_MODULE_0___default().Fragment);
break; values = [react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: "material-icons gray"
}, "extension"), ' '].concat(values || []);
}
default: break;
if (el == '_UNKN') { }
el = (react__WEBPACK_IMPORTED_MODULE_0___default().Fragment);
values = [react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
className: "material-icons gray"
}, "extension"), ' '].concat(values || []);
}
break; if (!el) {
}
return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(el, attr, values);
} else {
return values; return values;
} }
return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(el, attr, values);
} }
; ;
function previewFormatter(style, data, values, key) { function previewFormatter(style, data, values, key) {
if (!style) {
return values;
}
if (style == 'HD') {
return null;
}
let el = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.tagName(style); let el = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.tagName(style);
const attr = { const attr = {
key: key key: key
}; };
if (el) { switch (style) {
switch (style) { case 'BR':
case 'BR': el = (react__WEBPACK_IMPORTED_MODULE_0___default().Fragment);
el = (react__WEBPACK_IMPORTED_MODULE_0___default().Fragment); values = [' '];
values = [' ']; break;
break;
case 'HL': case 'HL':
attr.className = 'highlight preview'; attr.className = 'highlight preview';
break; break;
case 'LN': case 'LN':
case 'MN': case 'MN':
el = 'span'; el = 'span';
break; break;
case 'IM': case 'IM':
el = (react__WEBPACK_IMPORTED_MODULE_0___default().Fragment); el = (react__WEBPACK_IMPORTED_MODULE_0___default().Fragment);
values = [react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", { values = [react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
key: "im", key: "im",
className: "material-icons" className: "material-icons"
}, "photo"), this.formatMessage(messages.drafty_image)]; }, "photo"), this.formatMessage(messages.drafty_image)];
break; break;
case 'BN': case 'BN':
el = 'span'; el = 'span';
attr.className = 'flat-button faux'; attr.className = 'flat-button faux';
break; break;
case 'FM': case 'FM':
el = (react__WEBPACK_IMPORTED_MODULE_0___default().Fragment); el = (react__WEBPACK_IMPORTED_MODULE_0___default().Fragment);
values = [react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", { values = [react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
key: "fm", key: "fm",
className: "material-icons" className: "material-icons"
}, "dashboard"), this.formatMessage(messages.drafty_form)].concat(' ', values || []); }, "dashboard"), this.formatMessage(messages.drafty_form)].concat(' ', values || []);
break; break;
case 'RW': case 'RW':
el = (react__WEBPACK_IMPORTED_MODULE_0___default().Fragment); el = (react__WEBPACK_IMPORTED_MODULE_0___default().Fragment);
break; break;
case 'EX': case 'EX':
if (data) { if (data) {
if (data.mime == 'application/json') { if (data.mime == 'application/json') {
return null; return null;
}
data.val = null;
} }
data.val = null;
}
el = (react__WEBPACK_IMPORTED_MODULE_0___default().Fragment);
values = [react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
key: "ex",
className: "material-icons"
}, "attachment"), this.formatMessage(messages.drafty_attachment)];
break;
default:
if (el == '_UNKN') {
el = (react__WEBPACK_IMPORTED_MODULE_0___default().Fragment); el = (react__WEBPACK_IMPORTED_MODULE_0___default().Fragment);
values = [react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", { values = [react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
key: "ex", key: "unkn",
className: "material-icons" className: "material-icons"
}, "attachment"), this.formatMessage(messages.drafty_attachment)]; }, "extension"), ' '].concat(values || []);
break; }
default: break;
if (el == '_UNKN') { }
el = (react__WEBPACK_IMPORTED_MODULE_0___default().Fragment);
values = [react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
key: "unkn",
className: "material-icons"
}, "extension"), ' '].concat(values || []);
}
break; if (!el) {
}
return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(el, attr, values);
} else {
return values; return values;
} }
return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(el, attr, values);
} }
; ;
function quoteFormatter(style, data, values, key) { function quoteFormatter(style, data, values, key) {
if (['BR', 'IM', 'MN', 'QQ'].includes(style)) { if (['BR', 'IM', 'MN', 'QQ'].includes(style)) {
if (style == 'EX') {
console.log("quoteFormatter EX 1", data);
}
let el = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.tagName(style); let el = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.tagName(style);
let attr = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.attrValue(style, data) || {}; let attr = tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.attrValue(style, data) || {};
attr.key = key; attr.key = key;
@@ -635,6 +650,10 @@ function quoteFormatter(style, data, values, key) {
return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(el, attr, values); return react__WEBPACK_IMPORTED_MODULE_0___default().createElement(el, attr, values);
} }
if (style == 'EX') {
console.log("quoteFormatter EX 2", data);
}
return previewFormatter.call(this, style, data, values, key); return previewFormatter.call(this, style, data, values, key);
} }
@@ -11439,10 +11458,16 @@ class SendMessage extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureComp
formatMessage formatMessage
} = this.props.intl; } = this.props.intl;
const prompt = this.props.disabled ? formatMessage(messages.messaging_disabled) : this.props.messagePrompt ? formatMessage(messages[this.props.messagePrompt]) : formatMessage(messages.type_new_message); const prompt = this.props.disabled ? formatMessage(messages.messaging_disabled) : this.props.messagePrompt ? formatMessage(messages[this.props.messagePrompt]) : formatMessage(messages.type_new_message);
if (this.props.replyTo) {
console.log("Reply:", this.props.replyTo.content);
}
const quote = this.props.replyTo ? tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.format(this.props.replyTo.content, _lib_formatters_js__WEBPACK_IMPORTED_MODULE_5__.quoteFormatter, { const quote = this.props.replyTo ? tinode_sdk__WEBPACK_IMPORTED_MODULE_2__.Drafty.format(this.props.replyTo.content, _lib_formatters_js__WEBPACK_IMPORTED_MODULE_5__.quoteFormatter, {
formatMessage: formatMessage, formatMessage: formatMessage,
authorizeURL: this.props.tinode.authorizeURL authorizeURL: this.props.tinode.authorizeURL
}) : null; }) : null;
console.log("Quoted:", quote);
return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { return react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
id: "send-message-wrapper" id: "send-message-wrapper"
}, quote ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", { }, quote ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
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
+9 -12
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