-

Test header

+
- -
-
From a7c73bf30006b278e485e99218c08ad4e5ed2f68 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marker=20dao=20=C2=AE?= Date: Wed, 17 Jul 2024 13:38:21 +0400 Subject: [PATCH 24/36] draft --- .../devextreme/js/__internal/ui/chat/chat.ts | 24 ++++++++++ .../js/__internal/ui/chat/chat_header.ts | 16 +++++++ .../js/__internal/ui/chat/chat_message_box.ts | 28 ++++++++++++ .../__internal/ui/chat/chat_message_list.ts | 26 +++++++++++ packages/devextreme/playground/jquery.html | 45 +++++++++++++++++++ 5 files changed, 139 insertions(+) create mode 100644 packages/devextreme/js/__internal/ui/chat/chat_header.ts create mode 100644 packages/devextreme/js/__internal/ui/chat/chat_message_box.ts create mode 100644 packages/devextreme/js/__internal/ui/chat/chat_message_list.ts diff --git a/packages/devextreme/js/__internal/ui/chat/chat.ts b/packages/devextreme/js/__internal/ui/chat/chat.ts index 1b011481fedf..984c3a81e630 100644 --- a/packages/devextreme/js/__internal/ui/chat/chat.ts +++ b/packages/devextreme/js/__internal/ui/chat/chat.ts @@ -3,9 +3,14 @@ import $ from '@js/core/renderer'; import type { Properties } from '@js/ui/chat'; import Widget from '../widget'; +import { renderHeader } from './chat_header'; +import { renderMessageBox } from './chat_message_box'; +import { renderMessageList, setItems } from './chat_message_list'; const CHAT_CLASS = 'dx-chat'; +const MOCK_CHAT_HEADER_TEXT = new Date(); + class Chat extends Widget { _getDefaultOptions(): Properties { return { @@ -21,6 +26,25 @@ class Chat extends Widget { $(this.element()).addClass(CHAT_CLASS); super._initMarkup(); + + this._renderHeader(); + this._renderMessageList(); + this._renderMessageBox(); + } + + _renderHeader(): void { + renderHeader(this.element(), MOCK_CHAT_HEADER_TEXT); + } + + _renderMessageList(): void { + const { items } = this.option(); + + setItems(items); + renderMessageList(this.element()); + } + + _renderMessageBox(): void { + renderMessageBox(this.element()); } _optionChanged(args: Record): void { diff --git a/packages/devextreme/js/__internal/ui/chat/chat_header.ts b/packages/devextreme/js/__internal/ui/chat/chat_header.ts new file mode 100644 index 000000000000..3b8639974fbd --- /dev/null +++ b/packages/devextreme/js/__internal/ui/chat/chat_header.ts @@ -0,0 +1,16 @@ +/* eslint-disable @typescript-eslint/explicit-module-boundary-types */ +import $ from '@js/core/renderer'; + +const CHAT_HEADER_CLASS = 'dx-chat-header'; +const CHAT_HEADER_TEXT_CLASS = 'dx-chat-header-text'; + +export const renderHeader = (element, text): void => { + const $headerText = $('

') + .addClass(CHAT_HEADER_TEXT_CLASS) + .text(text); + + $('

') + .addClass(CHAT_HEADER_CLASS) + .append($headerText) + .appendTo(element); +}; diff --git a/packages/devextreme/js/__internal/ui/chat/chat_message_box.ts b/packages/devextreme/js/__internal/ui/chat/chat_message_box.ts new file mode 100644 index 000000000000..b9685d7c3fcd --- /dev/null +++ b/packages/devextreme/js/__internal/ui/chat/chat_message_box.ts @@ -0,0 +1,28 @@ +/* eslint-disable @typescript-eslint/explicit-function-return-type */ +/* eslint-disable @typescript-eslint/explicit-module-boundary-types */ +import $ from '@js/core/renderer'; + +const CHAT_MESSAGE_BOX_CLASS = 'dx-chat-message-box'; +const CHAT_MESSAGE_BOX_TEXTAREA_CLASS = 'dx-chat-message-box-text-area'; +const CHAT_MESSAGE_BOX_BUTTON_CLASS = 'dx-chat-message-box-button'; + +const renderTextArea = ($messageBox) => { + const $textArea = $('