Collection.Edit & selection strategies, Collection.Async, Collection.…

…LiveUpdate, Collection.Hierarchical: convert into ES6 classes

packages/devextreme/js/__internal/scheduler/appointments/m_appointment_collection.ts

@@ -42,7 +42,7 @@ const COMPONENT_CLASS = 'dx-scheduler-scrollable-appointments';
 const DBLCLICK_EVENT_NAME = addNamespace(dblclickEvent, 'dxSchedulerAppointment');
 
 const toMs = dateUtils.dateToMilliseconds;
-
+// @ts-expect-error
 class SchedulerAppointments extends CollectionWidget {
   _virtualAppointments: any;
 

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

@@ -15,16 +15,16 @@ import type {
 } from '@js/ui/chat';
 import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
-
-import AlertList from './alertlist';
+import AlertList from '@ts/ui/chat/alertlist';
 import type {
   MessageEnteredEvent as MessageBoxMessageEnteredEvent,
   Properties as MessageBoxProperties,
   TypingStartEvent as MessageBoxTypingStartEvent,
-} from './messagebox';
-import MessageBox from './messagebox';
-import type { Change, MessageTemplate, Properties as MessageListProperties } from './messagelist';
-import MessageList from './messagelist';
+} from '@ts/ui/chat/messagebox';
+import MessageBox from '@ts/ui/chat/messagebox';
+import type { MessageTemplate, Properties as MessageListProperties } from '@ts/ui/chat/messagelist';
+import MessageList from '@ts/ui/chat/messagelist';
+import type { DataChange } from '@ts/ui/collection/collection_widget.base';
 
 const CHAT_CLASS = 'dx-chat';
 const TEXTEDITOR_INPUT_CLASS = 'dx-texteditor-input';
@@ -84,7 +84,10 @@ class Chat extends Widget<Properties> {
     this.option('items', []);
   }
 
-  _dataSourceChangedHandler(newItems: Message[], e?: { changes?: Change[] }): void {
+  _dataSourceChangedHandler(
+    newItems: Message[],
+    e?: { changes?: DataChange<Message, number | string>[] },
+  ): void {
     if (e?.changes) {
       this._messageList._modifyByChanges(e.changes);
 

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

@@ -2,9 +2,6 @@ import { Guid } from '@js/common';
 import type { Format } from '@js/common/core/localization';
 import dateLocalization from '@js/common/core/localization/date';
 import messageLocalization from '@js/common/core/localization/message';
-import type {
-  DeepPartial,
-} from '@js/core/index';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import resizeObserverSingleton from '@js/core/resize_observer';
@@ -21,6 +18,7 @@ import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
 import { getScrollTopMax } from '@ts/ui/scroll_view/utils/get_scroll_top_max';
 
+import type { DataChange } from '../collection/collection_widget.base';
 import { isElementVisible } from '../splitter/utils/layout';
 import MessageBubble, { CHAT_MESSAGEBUBBLE_CLASS } from './messagebubble';
 import type { MessageGroupAlignment } from './messagegroup';
@@ -50,13 +48,6 @@ const SCROLLABLE_CONTAINER_CLASS = 'dx-scrollable-container';
 export const MESSAGEGROUP_TIMEOUT = 5 * 1000 * 60;
 
 export type MessageTemplate = ((data: Message, messageBubbleContainer: Element) => void) | null;
-
-export interface Change {
-  type: 'insert' | 'update' | 'remove';
-  data?: DeepPartial<Message>;
-  key?: string | number;
-  index?: number;
-}
 export interface Properties extends WidgetOptions<MessageList> {
   items: Message[];
   currentUserId: number | string | undefined;
@@ -624,7 +615,7 @@ class MessageList extends Widget<Properties> {
     super._clean();
   }
 
-  _modifyByChanges(changes: Change[]): void {
+  _modifyByChanges(changes: DataChange<Message, number | string>[]): void {
     changes.forEach((change) => {
       switch (change.type) {
         case 'update':

packages/devextreme/js/__internal/ui/collection/collection_widget.base.ts

@@ -9,6 +9,9 @@ import messageLocalization from '@js/common/core/localization/message';
 import Action from '@js/core/action';
 import domAdapter from '@js/core/dom_adapter';
 import Guid from '@js/core/guid';
+import type {
+  DeepPartial,
+} from '@js/core/index';
 import type { dxElementWrapper } from '@js/core/renderer';
 import $ from '@js/core/renderer';
 import { BindableTemplate } from '@js/core/templates/bindable_template';
@@ -35,6 +38,7 @@ import { focusable } from '@js/ui/widget/selectors';
 import { getPublicElement } from '@ts/core/m_element';
 import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
+import type CollectionItem from '@ts/ui/collection/m_item';
 import CollectionWidgetItem from '@ts/ui/collection/m_item';
 
 const COLLECTION_CLASS = 'dx-collection';
@@ -68,6 +72,14 @@ interface ActionConfig {
   excludeValidators?: ('disabled' | 'readOnly')[];
 }
 
+export type DataChangeType = 'insert' | 'update' | 'remove';
+
+export interface DataChange<TItem = CollectionItem, TKey = any> {
+  key: TKey;
+  type: DataChangeType;
+  data: DeepPartial<TItem>;
+}
+
 type ItemTemplate<TItem> = template | (
   (itemData: TItem, itemIndex: number, itemElement: Element) => string | dxElementWrapper
 );
@@ -77,6 +89,7 @@ export interface ItemRenderInfo<TItem> {
   container: dxElementWrapper;
   contentClass: string;
   defaultTemplateName: ItemTemplate<TItem> | undefined;
+  uniqueKey?: string;
   templateProperty?: string;
 }
 export interface CollectionWidgetBaseProperties<
@@ -617,7 +630,7 @@ class CollectionWidget<
     property: string,
     value: unknown,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    prevValue: unknown,
+    prevValue?: unknown,
   ): void {
     const $item = this._findItemElementByItem(item);
     if (!$item.length) {
@@ -761,7 +774,11 @@ class CollectionWidget<
     this._startIndexForAppendedItems = null;
   }
 
-  _dataSourceChangedHandler(newItems: TItem[]): void {
+  _dataSourceChangedHandler(
+    newItems: TItem[],
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    e?: { changes?: DataChange<TItem, string | number>[] },
+  ): void {
     const items = this.option('items');
     if (this._initialized && items && this._shouldAppendItems()) {
       // @ts-expect-error ts-error
@@ -1081,7 +1098,6 @@ class CollectionWidget<
   _renderItems(items: TItem[]): void {
     if (items.length) {
       each(items, (index, itemData) => {
-        // @ts-expect-error ts-error
         // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
         this._renderItem(this._renderedItemsCount + index, itemData);
       });
@@ -1110,7 +1126,7 @@ class CollectionWidget<
   _renderItem(
     index: { group: number; item: number } | number,
     itemData: TItem,
-    $container: dxElementWrapper | null,
+    $container?: dxElementWrapper | null,
     $itemToReplace?: dxElementWrapper,
   ): dxElementWrapper {
     // @ts-expect-error ts-error