Skip to content

Commit

Permalink
JS-5260: combine files and attachments into one list
Browse files Browse the repository at this point in the history
  • Loading branch information
@ra3orblade
ra3orblade committed Sep 17, 2024
1 parent e731ce4 commit cf9a58c
Show file tree
Hide file tree
Showing 6 changed files with 92 additions and 123 deletions.
7 changes: 3 additions & 4 deletions src/ts/component/block/chat/buttons.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import * as React from 'react';
import sha1 from 'sha1';
import { observer } from 'mobx-react';
import { Icon } from 'Component';
import { Action, I, J, keyboard, Mark, S, translate, U } from 'Lib';
Expand All @@ -16,7 +15,7 @@ interface Props extends I.BlockComponent {
onMenuClose: () => void;
onMention: () => void;
getObjectFromPath: (path: string) => void;
addFiles: (files: any, callBack?: () => void) => void;
addAttachments: (attachments: any[], callBack?: () => void) => void;
removeBookmark: (url: string) => void;
};

Expand Down Expand Up @@ -232,7 +231,7 @@ const ChatButtons = observer(class ChatButtons extends React.Component<Props, St
};

onAttachment (menu?: string) {
const { blockId, attachments, onMenuClose, onChatButtonSelect, addFiles, getObjectFromPath } = this.props;
const { blockId, attachments, onMenuClose, onChatButtonSelect, addAttachments, getObjectFromPath } = this.props;

const options: any[] = [
{ id: 'object', icon: 'object', name: translate('commonObject') },
Expand All @@ -244,7 +243,7 @@ const ChatButtons = observer(class ChatButtons extends React.Component<Props, St
const upload = () => {
Action.openFileDialog([], paths => {
if (paths.length) {
addFiles([ getObjectFromPath(paths[0]) ]);
addAttachments([ getObjectFromPath(paths[0]) ]);
};
});
};
Expand Down
162 changes: 67 additions & 95 deletions src/ts/component/block/chat/form.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ interface Props extends I.BlockComponent {

interface State {
attachments: any[];
files: any[];
};

const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
Expand All @@ -35,7 +34,6 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
replyingId: string = '';
state = {
attachments: [],
files: [],
};

constructor (props: Props) {
Expand All @@ -56,14 +54,13 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
this.onDragOver = this.onDragOver.bind(this);
this.onDragLeave = this.onDragLeave.bind(this);
this.onDrop = this.onDrop.bind(this);
this.addFiles = this.addFiles.bind(this);
this.onSend = this.onSend.bind(this);
this.onEdit = this.onEdit.bind(this);
this.onEditClear = this.onEditClear.bind(this);
this.onReply = this.onReply.bind(this);
this.onReplyClear = this.onReplyClear.bind(this);
this.onAttachmentRemove = this.onAttachmentRemove.bind(this);
this.onFileRemove = this.onFileRemove.bind(this);
this.addAttachments = this.addAttachments.bind(this);
this.hasSelection = this.hasSelection.bind(this);
this.caretMenuParam = this.caretMenuParam.bind(this);
this.removeBookmark = this.removeBookmark.bind(this);
Expand All @@ -73,7 +70,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {

render () {
const { rootId, readonly } = this.props;
const { attachments, files } = this.state;
const { attachments } = this.state;
const { space } = S.Common;
const value = this.getTextValue();

Expand Down Expand Up @@ -134,14 +131,11 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
onMouseUp={this.onMouseUp}
/>

{attachments.length || files.length ? (
{attachments.length ? (
<div className="attachments">
{attachments.map(item => (
<Attachment key={item.id} object={item} onRemove={this.onAttachmentRemove} />
))}
{files.map(item => (
<Attachment key={item.id} object={item} onRemove={this.onFileRemove} />
))}
</div>
) : ''}

Expand All @@ -158,7 +152,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
onChatButtonSelect={this.onChatButtonSelect}
onTextButtonToggle={this.onTextButtonToggle}
getObjectFromPath={this.getObjectFromPath}
addFiles={this.addFiles}
addAttachments={this.addAttachments}
onMenuClose={this.onMenuClose}
removeBookmark={this.removeBookmark}
/>
Expand Down Expand Up @@ -325,7 +319,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
onKeyUpInput (e: any) {
this.range = this.refEditable.getRange();

const { attachments, files } = this.state;
const { attachments } = this.state;
const { to } = this.range;
const { filter } = S.Common;
const value = this.getTextValue();
Expand Down Expand Up @@ -384,7 +378,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
};
};

if (!value && !attachments.length && !files.length && this.editingId) {
if (!value && !attachments.length && this.editingId) {
this.onDelete(this.editingId);
};

Expand Down Expand Up @@ -441,7 +435,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
};

if (list.length) {
this.addFiles(list);
this.addAttachments(list);
};
};

Expand Down Expand Up @@ -482,20 +476,66 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
node.removeClass('isDraggingOver');
keyboard.disableCommonDrop(true);

this.addFiles(list, scrollToBottom);
this.addAttachments(list, scrollToBottom);
keyboard.disableCommonDrop(false);
};

addFiles (list: any[], callBack?: () => void) {
this.setFiles(list.concat(this.state.files), callBack);
addAttachments (list: any[], callBack?: () => void) {
list = list.map(it => {
it.timestamp = U.Date.now();
return it;
});

this.setAttachments(list.concat(this.state.attachments), callBack);
};

setAttachments (list: any[], callBack?: () => void) {
this.setState({ attachments: this.checkLimit('attachments', list) }, callBack);
};

setFiles (list: any[], callBack?: () => void) {
this.setState({ files: this.checkLimit('files', list) }, callBack);
addBookmark (url: string) {
const add = (param: any) => {
const { title, description, url } = param;
const item = {
id: sha1(url),
name: title,
description,
layout: I.ObjectLayout.Bookmark,
source: url,
isTmp: true,
timestamp: U.Date.now(),
};
this.addAttachments([ item ]);
};

C.LinkPreview(url, (message: any) => {
if (message.error.code) {
add({ title: url, url });
} else {
add({ ...message.previewLink, url });
};
});
};

removeBookmarks () {
const attachments = this.state.attachments || [];
const bookmarks = attachments.filter(it => it.layout == I.ObjectLayout.Bookmark);

let filtered = attachments;
bookmarks.forEach(it => {
const marks = this.marks.filter(mark => mark.param == it.source);
if (!marks.length) {
filtered = filtered.filter(file => file.id != it.id);
};
});

if (attachments.length != filtered.length) {
this.setAttachments(filtered);
};
};

removeBookmark (url: string) {
this.onAttachmentRemove(sha1(url));
};

onSend () {
Expand All @@ -506,12 +546,12 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
const { rootId, scrollToBottom, scrollToMessage } = this.props;
const node = $(this.node);
const loader = node.find('#form-loader');
const list = this.state.files || [];
const files = list.filter(it => it.layout == I.ObjectLayout.File);
const bookmarks = list.filter(it => it.layout == I.ObjectLayout.Bookmark);
const list = this.state.attachments || [];
const files = list.filter(it => it.isTmp && U.Object.isFileLayout(it.layout));
const bookmarks = list.filter(it => it.isTmp && U.Object.isBookmarkLayout(it.layout));
const fl = files.length;
const bl = bookmarks.length;
const attachments = (this.state.attachments || []).map(it => ({ target: it.id, type: I.ChatAttachmentType.Link }));
const attachments = (this.state.attachments || []).map(it => ({ target: it.id, type: I.AttachmentType.Link }));

loader.addClass('active');

Expand Down Expand Up @@ -571,7 +611,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
n++;

if (message.objectId) {
attachments.push({ target: message.objectId, type: I.ChatAttachmentType.File });
attachments.push({ target: message.objectId, type: I.AttachmentType.File });
};

if (n == fl) {
Expand All @@ -593,7 +633,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
n++;

if (message.objectId) {
attachments.push({ target: message.objectId, type: I.ChatAttachmentType.Link });
attachments.push({ target: message.objectId, type: I.AttachmentType.Link });
};

if (n == bl) {
Expand Down Expand Up @@ -626,7 +666,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
this.editingId = '';
this.marks = [];
this.updateMarkup('', 0, 0);
this.setState({ attachments: [], files: [] }, () => this.refEditable.setRange(this.range));
this.setState({ attachments: [] }, () => this.refEditable.setRange(this.range));
};

onReply (message: I.ChatMessage) {
Expand Down Expand Up @@ -689,10 +729,6 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
this.setState({ attachments: this.state.attachments.filter(it => it.id != id) });
};

onFileRemove (id: string) {
this.setState({ files: this.state.files.filter(it => it.id != id) });
};

updateButtons () {
this.refButtons?.setButtons();
};
Expand Down Expand Up @@ -747,6 +783,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
case I.MarkType.Object: {
U.Object.getById(param, (object: any) => {
object.isTmp = true;
object.timestamp = U.Date.now();

attachments.unshift(object);
this.setAttachments(attachments);
Expand Down Expand Up @@ -801,64 +838,6 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
};
};

addBookmark (url: string) {
const { files } = this.state;
const id = sha1(url);

if (files.find(it => it.id == id)) {
return;
};

const add = (param: any) => {
const { title, description, url } = param;

files.unshift({
id,
name: title,
description,
layout: I.ObjectLayout.Bookmark,
source: url,
isTmp: true,
});

this.setFiles(files);
};

C.LinkPreview(url, (message: any) => {
if (message.error.code) {
add({ title: url, url });
} else {
add({ ...message.previewLink, url });
};
});
};

removeBookmarks () {
const files = this.state.files || [];
const bookmarks = files.filter(it => it.layout == I.ObjectLayout.Bookmark);

let filtered = files;
bookmarks.forEach(it => {
const marks = this.marks.filter(mark => mark.param == it.source);
if (!marks.length) {
filtered = filtered.filter(file => file.id != it.id);
};
});

if (files.length != filtered.length) {
this.setFiles(filtered);
};
};

removeBookmark (url: string) {
const files = this.state.files || [];
const filtered = files.filter(it => U.Object.isBookmarkLayout(it.layout) && (it.source != url));

if (files.length != filtered.length) {
this.setFiles(filtered);
};
};

onMention (fromKeyboard?: boolean) {
if (!this.range) {
return;
Expand Down Expand Up @@ -925,14 +904,7 @@ const ChatForm = observer(class ChatForm extends React.Component<Props, State> {
};

canSend () {
const { attachments, files } = this.state;

// You can send blank message when editing to delete it
if (this.editingId) {
return true;
};

return this.getTextValue() || attachments.length || files.length;
return this.editingId || this.getTextValue() || this.state.attachments.length;
};

hasSelection (): boolean {
Expand Down
4 changes: 2 additions & 2 deletions src/ts/interface/block/chat.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export enum ChatButton {
Mention = 3,
};

export enum ChatAttachmentType {
export enum AttachmentType {
File = 0,
Image = 1,
Link = 2,
Expand Down Expand Up @@ -37,7 +37,7 @@ export interface ChatMessageContent {

export interface ChatMessageAttachment {
target: string;
type: ChatAttachmentType;
type: AttachmentType;
};

export interface BlockChat extends I.Block {};
Loading

0 comments on commit cf9a58c

Please sign in to comment.