refactor

DevExpress · Oct 9, 2024 · 20d1cb0 · 20d1cb0
1 parent 965a841
commit 20d1cb0
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 31 deletions.
diff --git a/e2e/testcafe-devextreme/tests/chat/messageList.ts b/e2e/testcafe-devextreme/tests/chat/messageList.ts
@@ -104,7 +104,7 @@ test('Messagelist appearance with scrollbar', async (t) => {
     user: userSecond,
     width: 400,
     height: 600,
-    showDateHeaders: false,
+    showDayHeaders: false,
   });
 });
 

diff --git a/packages/devextreme/js/__internal/ui/chat/chat.ts b/packages/devextreme/js/__internal/ui/chat/chat.ts
@@ -21,7 +21,7 @@ import MessageList from './messagelist';
 const CHAT_CLASS = 'dx-chat';
 const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
 
-type Properties = ChatProperties & { title: string; showDateHeaders: boolean };
+type Properties = ChatProperties & { title: string; showDayHeaders: boolean };
 
 class Chat extends Widget<Properties> {
   _chatHeader?: ChatHeader;
@@ -43,7 +43,7 @@ class Chat extends Widget<Properties> {
       dataSource: null,
       user: { id: new Guid().toString() },
       onMessageSend: undefined,
-      showDateHeaders: true,
+      showDayHeaders: true,
     };
   }
 
@@ -99,7 +99,7 @@ class Chat extends Widget<Properties> {
   }
 
   _renderMessageList(): void {
-    const { items = [], user, showDateHeaders } = this.option();
+    const { items = [], user, showDayHeaders } = this.option();
 
     const currentUserId = user?.id;
     const $messageList = $('<div>');
@@ -109,7 +109,7 @@ class Chat extends Widget<Properties> {
     this._messageList = this._createComponent($messageList, MessageList, {
       items,
       currentUserId,
-      showDateHeaders,
+      showDayHeaders,
     });
   }
 
@@ -217,7 +217,8 @@ class Chat extends Widget<Properties> {
       case 'onMessageSend':
         this._createMessageSendAction();
         break;
-      case 'showDateHeaders':
+      case 'showDayHeaders':
+        this._messageList.option(name, value);
         break;
       default:
         super._optionChanged(args);

diff --git a/packages/devextreme/js/__internal/ui/chat/messagelist.ts b/packages/devextreme/js/__internal/ui/chat/messagelist.ts
@@ -24,21 +24,21 @@ const CHAT_MESSAGELIST_EMPTY_VIEW_CLASS = 'dx-chat-messagelist-empty-view';
 const CHAT_MESSAGELIST_EMPTY_IMAGE_CLASS = 'dx-chat-messagelist-empty-image';
 const CHAT_MESSAGELIST_EMPTY_MESSAGE_CLASS = 'dx-chat-messagelist-empty-message';
 const CHAT_MESSAGELIST_EMPTY_PROMPT_CLASS = 'dx-chat-messagelist-empty-prompt';
-const CHAT_MESSAGELIST_DATE_HEADER_CLASS = 'dx-chat-messagelist-date-header';
+const CHAT_MESSAGELIST_DAY_HEADER_CLASS = 'dx-chat-messagelist-day-header';
 
 const SCROLLABLE_CONTAINER_CLASS = 'dx-scrollable-container';
 export const MESSAGEGROUP_TIMEOUT = 5 * 1000 * 60;
 
 export interface Properties extends WidgetOptions<MessageList> {
   items: Message[];
   currentUserId: number | string | undefined;
-  showDateHeaders: boolean;
+  showDayHeaders: boolean;
 }
 
 class MessageList extends Widget<Properties> {
   private _messageGroups?: MessageGroup[];
 
-  private _messageDate?: null | string | number | Date;
+  private _lastMessageDate?: null | string | number | Date;
 
   private _containerClientHeight!: number;
 
@@ -49,15 +49,15 @@ class MessageList extends Widget<Properties> {
       ...super._getDefaultOptions(),
       items: [],
       currentUserId: '',
-      showDateHeaders: true,
+      showDayHeaders: true,
     };
   }
 
   _init(): void {
     super._init();
 
     this._messageGroups = [];
-    this._messageDate = null;
+    this._lastMessageDate = null;
   }
 
   _initMarkup(): void {
@@ -176,9 +176,9 @@ class MessageList extends Widget<Properties> {
     });
   }
 
-  _shouldAddDateHeader(timestamp: undefined | string | number | Date): boolean {
-    const { showDateHeaders } = this.option();
-    if (timestamp === undefined || !showDateHeaders) {
+  _shouldAddDayHeader(timestamp: undefined | string | number | Date): boolean {
+    const { showDayHeaders } = this.option();
+    if (timestamp === undefined || !showDayHeaders) {
       return false;
     }
 
@@ -188,18 +188,14 @@ class MessageList extends Widget<Properties> {
       return false;
     }
 
-    return !dateUtils.sameDate(this._messageDate, deserializedDate);
+    return !dateUtils.sameDate(this._lastMessageDate, deserializedDate);
   }
 
-  _createMessageDateHeader(timestamp: string | number | Date | undefined): void {
-    if (timestamp === undefined) {
-      return;
-    }
-
+  _createDayHeader(timestamp: string | number | Date | undefined): void {
     const deserializedDate = dateSerialization.deserializeDate(timestamp);
     const today = new Date();
     const yesterday = new Date(new Date().setDate(today.getDate() - 1));
-    this._messageDate = deserializedDate;
+    this._lastMessageDate = deserializedDate;
 
     let headerDate = deserializedDate.toLocaleDateString(undefined, {
       day: '2-digit',
@@ -216,7 +212,7 @@ class MessageList extends Widget<Properties> {
     }
 
     $('<div>')
-      .addClass(CHAT_MESSAGELIST_DATE_HEADER_CLASS)
+      .addClass(CHAT_MESSAGELIST_DAY_HEADER_CLASS)
       .text(headerDate)
       .appendTo(this._$content());
   }
@@ -236,12 +232,12 @@ class MessageList extends Widget<Properties> {
     items.forEach((item, index) => {
       const newMessageGroupItem = item ?? {};
       const id = newMessageGroupItem.author?.id;
-      const shouldCreateDateHeader = this._shouldAddDateHeader(item?.timestamp);
+      const shouldCreateDayHeader = this._shouldAddDayHeader(item?.timestamp);
       const isTimeoutExceeded = this._isTimeoutExceeded(
         currentMessageGroupItems[currentMessageGroupItems.length - 1] ?? {},
         item,
       );
-      const shouldCreateMessageGroup = (shouldCreateDateHeader && currentMessageGroupItems.length)
+      const shouldCreateMessageGroup = (shouldCreateDayHeader && currentMessageGroupItems.length)
         || isTimeoutExceeded
         || id !== currentMessageGroupUserId;
 
@@ -255,8 +251,8 @@ class MessageList extends Widget<Properties> {
         currentMessageGroupItems.push(newMessageGroupItem);
       }
 
-      if (shouldCreateDateHeader) {
-        this._createMessageDateHeader(item?.timestamp);
+      if (shouldCreateDayHeader) {
+        this._createDayHeader(item?.timestamp);
       }
 
       if (items.length - 1 === index) {
@@ -269,24 +265,24 @@ class MessageList extends Widget<Properties> {
     const { author, timestamp } = message;
 
     const lastMessageGroup = this._messageGroups?.[this._messageGroups.length - 1];
-    const shouldCreateDateHeader = this._shouldAddDateHeader(timestamp);
+    const shouldCreateDayHeader = this._shouldAddDayHeader(timestamp);
 
     if (lastMessageGroup) {
       const { items } = lastMessageGroup.option();
       const lastMessageGroupItem = items[items.length - 1];
       const lastMessageGroupUserId = lastMessageGroupItem.author?.id;
       const isTimeoutExceeded = this._isTimeoutExceeded(lastMessageGroupItem, message);
 
-      if (author?.id === lastMessageGroupUserId && !isTimeoutExceeded && !shouldCreateDateHeader) {
+      if (author?.id === lastMessageGroupUserId && !isTimeoutExceeded && !shouldCreateDayHeader) {
         lastMessageGroup.renderMessage(message);
         this._scrollContentToLastMessage();
 
         return;
       }
     }
 
-    if (shouldCreateDateHeader) {
-      this._createMessageDateHeader(timestamp);
+    if (shouldCreateDayHeader) {
+      this._createDayHeader(timestamp);
     }
 
     this._createMessageGroupComponent([message], author?.id);
@@ -389,7 +385,8 @@ class MessageList extends Widget<Properties> {
       case 'items':
         this._processItemsUpdating(value ?? [], previousValue ?? []);
         break;
-      case 'showDateHeaders':
+      case 'showDayHeaders':
+        this._invalidate();
         break;
       default:
         super._optionChanged(args);