From cbba54faa3137b4582f17740f1f6a97649b772db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marker=20dao=20=C2=AE?= Date: Fri, 30 Aug 2024 19:32:24 +0400 Subject: [PATCH] Chat: Hide title prop and prevent Header rendering --- .../devextreme-angular/src/ui/chat/index.ts | 21 ----------- .../scss/widgets/base/chat/_index.scss | 5 +-- packages/devextreme-vue/src/chat.ts | 3 -- .../devextreme/js/__internal/ui/chat/chat.ts | 35 +++++++++++++----- packages/devextreme/js/ui/chat.d.ts | 6 ---- .../chatParts/chat.markup.tests.js | 36 ++++++++++++++++++- .../chatParts/chat.tests.js | 2 ++ packages/devextreme/ts/dx.all.d.ts | 4 --- 8 files changed, 66 insertions(+), 46 deletions(-) diff --git a/packages/devextreme-angular/src/ui/chat/index.ts b/packages/devextreme-angular/src/ui/chat/index.ts index 0ab39535ea85..3b12df31c558 100644 --- a/packages/devextreme-angular/src/ui/chat/index.ts +++ b/packages/devextreme-angular/src/ui/chat/index.ts @@ -192,19 +192,6 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges } - /** - * [descr:dxChatOptions.title] - - */ - @Input() - get title(): string { - return this._getOption('title'); - } - set title(value: string) { - this._setOption('title', value); - } - - /** * [descr:dxChatOptions.user] @@ -345,13 +332,6 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges */ @Output() rtlEnabledChange: EventEmitter; - /** - - * This member supports the internal infrastructure and is not intended to be used directly from your code. - - */ - @Output() titleChange: EventEmitter; - /** * This member supports the internal infrastructure and is not intended to be used directly from your code. @@ -411,7 +391,6 @@ export class DxChatComponent extends DxComponent implements OnDestroy, OnChanges { emit: 'hoverStateEnabledChange' }, { emit: 'itemsChange' }, { emit: 'rtlEnabledChange' }, - { emit: 'titleChange' }, { emit: 'userChange' }, { emit: 'visibleChange' }, { emit: 'widthChange' } diff --git a/packages/devextreme-scss/scss/widgets/base/chat/_index.scss b/packages/devextreme-scss/scss/widgets/base/chat/_index.scss index 9b254cb2e07a..50631cc2b22b 100644 --- a/packages/devextreme-scss/scss/widgets/base/chat/_index.scss +++ b/packages/devextreme-scss/scss/widgets/base/chat/_index.scss @@ -14,8 +14,8 @@ $chat-bubble-border-radius: 12px; $chat-text-area-height: 40px; .dx-chat { - display: grid; - grid-template-rows: 24px 1fr minmax(40px, auto); + display: flex; + flex-direction: column; width: $chat-width; height: $chat-height; padding: $chat-padding; @@ -32,6 +32,7 @@ $chat-text-area-height: 40px; .dx-chat-message-list { box-sizing: border-box; + flex-grow: 1; overflow: hidden; } diff --git a/packages/devextreme-vue/src/chat.ts b/packages/devextreme-vue/src/chat.ts index 54a67dc1680e..a8ef6d018abc 100644 --- a/packages/devextreme-vue/src/chat.ts +++ b/packages/devextreme-vue/src/chat.ts @@ -17,7 +17,6 @@ type AccessibleOptions = Pick { - _chatHeader!: ChatHeader; +type Title = string; + +class Chat extends Widget { + _chatHeader?: ChatHeader; _messageBox!: MessageBox; @@ -25,7 +27,7 @@ class Chat extends Widget { _messageSendAction?: (e: Partial) => void; - _getDefaultOptions(): Properties { + _getDefaultOptions(): Properties & { title: Title } { return { ...super._getDefaultOptions(), activeStateEnabled: true, @@ -49,15 +51,20 @@ class Chat extends Widget { super._initMarkup(); - this._renderHeader(); + const { title } = this.option(); + + if (title) { + this._renderHeader(title); + } + this._renderMessageList(); this._renderMessageBox(); } - _renderHeader(): void { - const { title = '' } = this.option(); + _renderHeader(title: string): void { + const $header = $('
'); - const $header = $('
').appendTo(this.element()); + this.element().prepend($header.get(0)); this._chatHeader = this._createComponent($header, ChatHeader, { title, @@ -133,9 +140,19 @@ class Chat extends Widget { case 'hoverStateEnabled': this._messageBox.option({ [name]: value }); break; - case 'title': - this._chatHeader.option('title', (value as Properties['title']) ?? ''); + case 'title': { + if (value) { + if (this._chatHeader) { + this._chatHeader.option('title', (value as Title)); + } else { + this._renderHeader((value as Title)); + } + } else if (this._chatHeader) { + this._chatHeader.dispose(); + this._chatHeader.$element().remove(); + } break; + } case 'user': this._messageList.option('currentUserId', (value as Properties['user'])?.id); break; diff --git a/packages/devextreme/js/ui/chat.d.ts b/packages/devextreme/js/ui/chat.d.ts index 32be9906dda4..46ba1998c99c 100644 --- a/packages/devextreme/js/ui/chat.d.ts +++ b/packages/devextreme/js/ui/chat.d.ts @@ -132,12 +132,6 @@ export interface dxChatOptions extends WidgetOptions { * @public */ user?: User; - /** - * @docid - * @default '' - * @public - */ - title?: string; /** * @docid * @fires dxChatOptions.onOptionChanged diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.markup.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.markup.tests.js index a77d38962889..3d3e2cd888b0 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.markup.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.markup.tests.js @@ -29,12 +29,46 @@ const moduleConfig = { QUnit.module('Chat', moduleConfig, () => { QUnit.module('Render', () => { - QUnit.test('Header should be rendered', function(assert) { + QUnit.test('Header should be rendered if title is not empty', function(assert) { + this.reinit({ title: 'custom' }); + + const $header = this.$element.find(`.${CHAT_HEADER_CLASS}`); + + assert.strictEqual($header.length, 1); + }); + + QUnit.test('Header should not be rendered if title is empty', function(assert) { + const $header = this.$element.find(`.${CHAT_HEADER_CLASS}`); + + assert.strictEqual($header.length, 0); + }); + + QUnit.test('Header should be rendered if title is not empty on init and in runtime', function(assert) { + this.reinit({ title: 'custom' }); + this.instance.option({ title: 'new custom' }); + const $header = this.$element.find(`.${CHAT_HEADER_CLASS}`); assert.strictEqual($header.length, 1); }); + QUnit.test('Header should be rendered if title is empty on init and not empty in runtime', function(assert) { + this.instance.option({ title: 'new custom' }); + + const $header = this.$element.find(`.${CHAT_HEADER_CLASS}`); + + assert.strictEqual($header.length, 1); + }); + + QUnit.test('Header should be removed if title is empty in runtime', function(assert) { + this.reinit({ title: 'custom' }); + this.instance.option({ title: '' }); + + const $header = this.$element.find(`.${CHAT_HEADER_CLASS}`); + + assert.strictEqual($header.length, 0); + }); + QUnit.test('Message list should be rendered', function(assert) { const $messageList = this.$element.find(`.${CHAT_MESSAGE_LIST_CLASS}`); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.tests.js index a33258e6e858..9a790e3d3fd8 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/chatParts/chat.tests.js @@ -4,7 +4,9 @@ import Chat from 'ui/chat'; import MessageList from '__internal/ui/chat/chat_message_list'; import MessageBox from '__internal/ui/chat/chat_message_box'; import keyboardMock from '../../../helpers/keyboardMock.js'; + import { isRenderer } from 'core/utils/type'; + import config from 'core/config'; const CHAT_HEADER_TEXT_CLASS = 'dx-chat-header-text'; diff --git a/packages/devextreme/ts/dx.all.d.ts b/packages/devextreme/ts/dx.all.d.ts index 821491a8576c..a4f5f5676ff0 100644 --- a/packages/devextreme/ts/dx.all.d.ts +++ b/packages/devextreme/ts/dx.all.d.ts @@ -9477,10 +9477,6 @@ declare module DevExpress.ui { * [descr:dxChatOptions.user] */ user?: DevExpress.ui.dxChat.User; - /** - * [descr:dxChatOptions.title] - */ - title?: string; /** * [descr:dxChatOptions.items] */