Collection.Edit & selection strategies, Collection.Async, Collection.LiveUpdate, Collection.Hierarchical: convert into ES6 classes

Author: EugeniyKiyashko

packages/devextreme/js/__internal/core/widget/component.ts

@@ -29,6 +29,15 @@ const getEventName = (actionName): string => actionName.charAt(2).toLowerCase()
 
 const isInnerOption = (optionName): boolean => optionName.indexOf('_', 0) === 0;
 
+export interface ActionConfig {
+  beforeExecute?: (e: Record<string, unknown>) => void;
+  afterExecute?: (e: Record<string, unknown>) => void;
+  excludeValidators?: ('disabled' | 'readOnly')[];
+  element?: Element;
+  validatingTargetName?: string;
+  category?: 'rendering';
+}
+
 export interface Properties<TComponent> extends ComponentOptions<
 EventInfo<TComponent>,
 InitializedEventInfo<TComponent>,
@@ -350,7 +359,7 @@ export class Component<
   }
 
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
-  _createAction(actionSource, config): (e) => void {
+  _createAction(actionSource, config?: ActionConfig): (e) => void {
     // eslint-disable-next-line @typescript-eslint/init-declarations
     let action;
 
@@ -373,7 +382,7 @@ export class Component<
 
   _createActionByOption(
     optionName: string,
-    config?: Record<string, unknown>,
+    config?: ActionConfig,
   ): (event?: Record<string, unknown>) => void {
     // eslint-disable-next-line @typescript-eslint/init-declarations
     let action;

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>[] },
+  ): 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>[]): void {
     changes.forEach((change) => {
       switch (change.type) {
         case 'update':

packages/devextreme/js/__internal/ui/collection/async.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';
@@ -33,8 +36,10 @@ import type {
 import type { CollectionWidgetItem as CollectionWidgetItemProperties, CollectionWidgetOptions, ItemLike } from '@js/ui/collection/ui.collection_widget.base';
 import { focusable } from '@js/ui/widget/selectors';
 import { getPublicElement } from '@ts/core/m_element';
+import type { ActionConfig } from '@ts/core/widget/component';
 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';
@@ -62,10 +67,12 @@ const FOCUS_PAGE_DOWN = 'pagedown';
 const FOCUS_LAST = 'last';
 const FOCUS_FIRST = 'first';
 
-interface ActionConfig {
-  beforeExecute?: (e: DxEvent) => void;
-  afterExecute?: (e: DxEvent) => void;
-  excludeValidators?: ('disabled' | 'readOnly')[];
+export type DataChangeType = 'insert' | 'update' | 'remove';
+
+export interface DataChange<TItem = CollectionItem, TKey = number | string> {
+  key: TKey;
+  type: DataChangeType;
+  data: DeepPartial<TItem>;
 }
 
 type ItemTemplate<TItem> = template | (
@@ -77,8 +84,17 @@ export interface ItemRenderInfo<TItem> {
   container: dxElementWrapper;
   contentClass: string;
   defaultTemplateName: ItemTemplate<TItem> | undefined;
+  uniqueKey?: string;
   templateProperty?: string;
 }
+
+export interface PostprocessRenderItemInfo<TItem> {
+  itemElement: dxElementWrapper;
+  itemContent: dxElementWrapper;
+  itemData: TItem;
+  itemIndex: number;
+}
+
 export interface CollectionWidgetBaseProperties<
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     TComponent extends CollectionWidget<any, TItem, TKey> | any,
@@ -617,7 +633,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 +777,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>[] },
+  ): void {
     const items = this.option('items');
     if (this._initialized && items && this._shouldAppendItems()) {
       // @ts-expect-error ts-error
@@ -1081,7 +1101,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 +1129,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
@@ -1264,12 +1283,7 @@ class CollectionWidget<
   // eslint-disable-next-line class-methods-use-this
   _postprocessRenderItem(
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    args: {
-      itemElement: dxElementWrapper;
-      itemContent: dxElementWrapper;
-      itemData: TItem;
-      itemIndex: number;
-    },
+    args: PostprocessRenderItemInfo<TItem>,
   ): void {}
 
   _executeItemRenderAction(