Skip to content

Commit c214744

Browse files
ZedwagZedwag
authored
Chat FU: attach button should be invisible and fileUploader should reset value after message editing started (#31589)
1 parent f2268b5 commit c214744

File tree

4 files changed

+127
-3
lines changed

4 files changed

+127
-3
lines changed

‎packages/devextreme/js/__internal/ui/chat/chat.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -330,6 +330,8 @@ class Chat extends Widget<Properties> {
330330
messageEditingStartArgs.cancel,
331331
() => {
332332
this._messageBox.option('text', e.message.text);
333+
this._messageBox.resetFileUploader();
334+
this._messageBox.toggleAttachButtonVisibleState(false);
333335
this._messageToEdit = e.message;
334336
},
335337
);
@@ -340,6 +342,8 @@ class Chat extends Widget<Properties> {
340342
this._messageEditCanceledAction?.({ message: this._messageToEdit });
341343
this._messageToEdit = undefined;
342344
}
345+
346+
this._messageBox.toggleAttachButtonVisibleState(true);
343347
}
344348

345349
_showDeleteConfirmationPopup(e: Pick<MessageDeletingEvent, 'message'>): void {
@@ -406,6 +410,7 @@ class Chat extends Widget<Properties> {
406410
eventArgs.cancel,
407411
() => {
408412
this._messageBox.option('text', '');
413+
this._messageBox.toggleAttachButtonVisibleState(true);
409414
this._messageUpdatedAction?.(eventArgs);
410415
this._messageToEdit = undefined;
411416
},

‎packages/devextreme/js/__internal/ui/chat/message_box/chat_text_area.ts‎

Lines changed: 15 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,8 @@ class ChatTextArea extends TextArea<Properties> {
7171

7272
_filesToSend?: Map<File, FileToSend>;
7373

74+
_attachButton?: Button;
75+
7476
_sendButton?: Button;
7577

7678
_sendAction?: (e: Partial<SendEvent>) => void;
@@ -240,6 +242,9 @@ class ChatTextArea extends TextArea<Properties> {
240242
this._cleanInformer();
241243
this._updateInputHeight();
242244
},
245+
onInitialized: (e: InitializedEvent): void => {
246+
this._attachButton = e.component;
247+
},
243248
},
244249
} as ToolbarItem;
245250

@@ -426,8 +431,7 @@ class ChatTextArea extends TextArea<Properties> {
426431
_processSendButtonActivation(e: Partial<SendEvent>): void {
427432
this._sendAction?.(e);
428433
this.reset();
429-
this._fileUploader?.reset();
430-
this._filesToSend?.clear();
434+
this.resetFileUploader();
431435
this._toggleButtonDisableState(true);
432436
}
433437

@@ -542,6 +546,15 @@ class ChatTextArea extends TextArea<Properties> {
542546
this._cleanInformer();
543547
super._dispose();
544548
}
549+
550+
resetFileUploader(): void {
551+
this._fileUploader?.reset();
552+
this._filesToSend?.clear();
553+
}
554+
555+
toggleAttachButtonVisibleState(state: boolean): void {
556+
this._attachButton?.option('visible', state);
557+
}
545558
}
546559

547560
export default ChatTextArea;

‎packages/devextreme/js/__internal/ui/chat/message_box/message_box.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -304,6 +304,14 @@ class MessageBox extends DOMComponent<MessageBox, Properties> {
304304
});
305305
}
306306

307+
resetFileUploader(): void {
308+
this._textArea.resetFileUploader();
309+
}
310+
311+
toggleAttachButtonVisibleState(state: boolean): void {
312+
this._textArea.toggleAttachButtonVisibleState(state);
313+
}
314+
307315
_updateEditingPreview(text: string | undefined): void {
308316
if (this._editingPreview) {
309317
this._editingPreview.option('text', text);

‎packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.tests.js‎

Lines changed: 99 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import $ from 'jquery';
22

3+
import Button from 'ui/button';
34
import Chat from 'ui/chat';
45
import MessageList, {
56
CHAT_MESSAGELIST_CONTEXT_MENU_CLASS
67
} from '__internal/ui/chat/messagelist';
78
import ContextMenu, {
89
DX_MENU_ITEM_CLASS,
910
} from '__internal/ui/context_menu/context_menu';
11+
import FileUploader, {
12+
FILEUPLOADER_CLASS,
13+
} from '__internal/ui/file_uploader/file_uploader';
1014
import {
1115
FOCUSED_STATE_CLASS,
1216
WIDGET_CLASS,
@@ -38,7 +42,10 @@ import { BUTTON_CLASS } from '__internal/ui/button/button';
3842
import { CHAT_FILE_CLASS } from '__internal/ui/chat/file_view/file';
3943

4044
import MessageBubble from '__internal/ui/chat/messagebubble';
41-
import ChatTextArea, { CHAT_TEXTAREA_CLASS } from '__internal/ui/chat/message_box/chat_text_area';
45+
import ChatTextArea, {
46+
CHAT_TEXTAREA_CLASS,
47+
CHAT_TEXT_AREA_ATTACH_BUTTON,
48+
} from '__internal/ui/chat/message_box/chat_text_area';
4249

4350
const CHAT_MESSAGEGROUP_CLASS = 'dx-chat-messagegroup';
4451
const CHAT_MESSAGELIST_CLASS = 'dx-chat-messagelist';
@@ -123,6 +130,8 @@ const moduleConfig = {
123130
this.getEditingPreview = () => this.$element.find(`.${CHAT_EDITING_PREVIEW_CLASS}`);
124131
this.getCancelEditingButton = () => this.$element.find(`.${CHAT_EDITING_PREVIEW_CANCEL_BUTTON_CLASS}`);
125132
this.getMessageListEmptyView = () => this.$element.find(`.${CHAT_MESSAGELIST_EMPTY_VIEW_CLASS}`);
133+
this.getFileUploader = () => FileUploader.getInstance(this.$element.find(`.${FILEUPLOADER_CLASS}`));
134+
this.getAttachButton = () => Button.getInstance(this.$element.find(`.${CHAT_TEXT_AREA_ATTACH_BUTTON}`));
126135

127136
init();
128137
},
@@ -1227,6 +1236,95 @@ QUnit.module('Chat', () => {
12271236
assert.strictEqual(this.textArea.option('value'), 'b', 'input contains editing message text');
12281237
assert.strictEqual(this.$textArea.hasClass(FOCUSED_STATE_CLASS), true, 'input is focused');
12291238
});
1239+
1240+
QUnit.testInActiveWindow('attach button should be hidden after editing is started', function(assert) {
1241+
this.reinit({
1242+
items: [{ text: 'f', author: userSecond }],
1243+
focusStateEnabled: true,
1244+
user: userSecond,
1245+
editing: {
1246+
allowUpdating: true
1247+
},
1248+
fileUploaderOptions: {},
1249+
});
1250+
const attachButton = this.getAttachButton();
1251+
assert.strictEqual(attachButton.option('visible'), true, 'attach button is visible');
1252+
1253+
const $bubbles = this.getBubbles();
1254+
$bubbles.eq(0).trigger('dxcontextmenu');
1255+
1256+
const $editButton = this.getContextMenuItems().eq(0);
1257+
$editButton.trigger('dxclick');
1258+
1259+
assert.strictEqual(attachButton.option('visible'), false, 'attach button is hidden');
1260+
});
1261+
1262+
QUnit.testInActiveWindow('attach button should be visible after editing is done', function(assert) {
1263+
this.reinit({
1264+
items: [{ text: 'f', author: userSecond }],
1265+
focusStateEnabled: true,
1266+
user: userSecond,
1267+
editing: {
1268+
allowUpdating: true
1269+
},
1270+
fileUploaderOptions: {},
1271+
});
1272+
const $bubbles = this.getBubbles();
1273+
$bubbles.eq(0).trigger('dxcontextmenu');
1274+
1275+
const $editButton = this.getContextMenuItems().eq(0);
1276+
$editButton.trigger('dxclick');
1277+
this.$sendButton.trigger('dxclick');
1278+
1279+
const attachButton = this.getAttachButton();
1280+
1281+
assert.strictEqual(attachButton.option('visible'), true, 'attach button is visible');
1282+
});
1283+
1284+
QUnit.testInActiveWindow('attach button should be visible after editing is canceled', function(assert) {
1285+
this.reinit({
1286+
items: [{ text: 'f', author: userSecond }],
1287+
focusStateEnabled: true,
1288+
user: userSecond,
1289+
editing: {
1290+
allowUpdating: true
1291+
},
1292+
fileUploaderOptions: {},
1293+
});
1294+
const $bubbles = this.getBubbles();
1295+
$bubbles.eq(0).trigger('dxcontextmenu');
1296+
1297+
const $editButton = this.getContextMenuItems().eq(0);
1298+
$editButton.trigger('dxclick');
1299+
this.getCancelEditingButton().trigger('dxclick');
1300+
1301+
const attachButton = this.getAttachButton();
1302+
1303+
assert.strictEqual(attachButton.option('visible'), true, 'attach button is visible');
1304+
});
1305+
1306+
QUnit.testInActiveWindow('fileUploader should reset value after message editing is started', function(assert) {
1307+
this.reinit({
1308+
items: [{ text: 'f', author: userSecond }],
1309+
focusStateEnabled: true,
1310+
user: userSecond,
1311+
editing: {
1312+
allowUpdating: true
1313+
},
1314+
fileUploaderOptions: {},
1315+
});
1316+
1317+
const fileUploader = this.getFileUploader();
1318+
fileUploader.option('value', [{ name: 'fakefile.png', size: 123 }]);
1319+
1320+
const $bubbles = this.getBubbles();
1321+
$bubbles.eq(0).trigger('dxcontextmenu');
1322+
1323+
const $editButton = this.getContextMenuItems().eq(0);
1324+
$editButton.trigger('dxclick');
1325+
1326+
assert.deepEqual(fileUploader.option('value'), []);
1327+
});
12301328
});
12311329

12321330
QUnit.module('Events', () => {

0 commit comments

Comments
 (0)