From 8c1e99663f478dce46c909c0f6ff4ed8a23e911d Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Thu, 13 Jun 2024 09:40:52 +0400 Subject: [PATCH 1/2] List, ListBase: move files to TS --- .../js/{ui/list/item.js => __internal/ui/list/m_item.ts} | 0 .../list/ui.list.base.js => __internal/ui/list/m_list.base.ts} | 0 .../ui/list/m_list.edit.decorator.context.ts} | 0 .../ui/list/m_list.edit.decorator.reorder.ts} | 0 .../ui/list/m_list.edit.decorator.selection.ts} | 0 .../ui/list/m_list.edit.decorator.static.ts} | 0 .../ui/list/m_list.edit.decorator.swipe.ts} | 0 .../ui/list/m_list.edit.decorator.switchable.button.ts} | 0 .../ui/list/m_list.edit.decorator.switchable.slide.ts} | 0 .../ui/list/m_list.edit.decorator.switchable.ts} | 0 .../ui/list/m_list.edit.decorator.ts} | 0 .../ui/list/m_list.edit.decorator_menu_helper.ts} | 0 .../ui/list/m_list.edit.decorator_registry.ts} | 0 .../ui/list/m_list.edit.provider.ts} | 0 .../ui/list/m_list.edit.search.ts} | 0 .../ui/list/m_list.edit.strategy.grouped.ts} | 0 .../list/ui.list.edit.js => __internal/ui/list/m_list.edit.ts} | 0 .../context.js => __internal/ui/list/modules/m_context.ts} | 0 .../ui/list/modules/m_deleting.context.ts} | 0 .../ui/list/modules/m_deleting.slideButton.ts} | 0 .../ui/list/modules/m_deleting.slideItem.ts} | 0 .../ui/list/modules/m_deleting.static.ts} | 0 .../ui/list/modules/m_deleting.swipe.ts} | 0 .../ui/list/modules/m_deleting.toggle.ts} | 0 .../deleting.js => __internal/ui/list/modules/m_deleting.ts} | 0 .../dragging.js => __internal/ui/list/modules/m_dragging.ts} | 0 .../modules/search.js => __internal/ui/list/modules/m_search.ts} | 0 .../selection.js => __internal/ui/list/modules/m_selection.ts} | 0 .../ui/shared/m_grouped_data_converter_mixin.ts} | 0 29 files changed, 0 insertions(+), 0 deletions(-) rename packages/devextreme/js/{ui/list/item.js => __internal/ui/list/m_item.ts} (100%) rename packages/devextreme/js/{ui/list/ui.list.base.js => __internal/ui/list/m_list.base.ts} (100%) rename packages/devextreme/js/{ui/list/ui.list.edit.decorator.context.js => __internal/ui/list/m_list.edit.decorator.context.ts} (100%) rename packages/devextreme/js/{ui/list/ui.list.edit.decorator.reorder.js => __internal/ui/list/m_list.edit.decorator.reorder.ts} (100%) rename packages/devextreme/js/{ui/list/ui.list.edit.decorator.selection.js => __internal/ui/list/m_list.edit.decorator.selection.ts} (100%) rename packages/devextreme/js/{ui/list/ui.list.edit.decorator.static.js => __internal/ui/list/m_list.edit.decorator.static.ts} (100%) rename packages/devextreme/js/{ui/list/ui.list.edit.decorator.swipe.js => __internal/ui/list/m_list.edit.decorator.swipe.ts} (100%) rename packages/devextreme/js/{ui/list/ui.list.edit.decorator.switchable.button.js => __internal/ui/list/m_list.edit.decorator.switchable.button.ts} (100%) rename packages/devextreme/js/{ui/list/ui.list.edit.decorator.switchable.slide.js => __internal/ui/list/m_list.edit.decorator.switchable.slide.ts} (100%) rename packages/devextreme/js/{ui/list/ui.list.edit.decorator.switchable.js => __internal/ui/list/m_list.edit.decorator.switchable.ts} (100%) rename packages/devextreme/js/{ui/list/ui.list.edit.decorator.js => __internal/ui/list/m_list.edit.decorator.ts} (100%) rename packages/devextreme/js/{ui/list/ui.list.edit.decorator_menu_helper.js => __internal/ui/list/m_list.edit.decorator_menu_helper.ts} (100%) rename packages/devextreme/js/{ui/list/ui.list.edit.decorator_registry.js => __internal/ui/list/m_list.edit.decorator_registry.ts} (100%) rename packages/devextreme/js/{ui/list/ui.list.edit.provider.js => __internal/ui/list/m_list.edit.provider.ts} (100%) rename packages/devextreme/js/{ui/list/ui.list.edit.search.js => __internal/ui/list/m_list.edit.search.ts} (100%) rename packages/devextreme/js/{ui/list/ui.list.edit.strategy.grouped.js => __internal/ui/list/m_list.edit.strategy.grouped.ts} (100%) rename packages/devextreme/js/{ui/list/ui.list.edit.js => __internal/ui/list/m_list.edit.ts} (100%) rename packages/devextreme/js/{ui/list/modules/context.js => __internal/ui/list/modules/m_context.ts} (100%) rename packages/devextreme/js/{ui/list/modules/deleting.context.js => __internal/ui/list/modules/m_deleting.context.ts} (100%) rename packages/devextreme/js/{ui/list/modules/deleting.slideButton.js => __internal/ui/list/modules/m_deleting.slideButton.ts} (100%) rename packages/devextreme/js/{ui/list/modules/deleting.slideItem.js => __internal/ui/list/modules/m_deleting.slideItem.ts} (100%) rename packages/devextreme/js/{ui/list/modules/deleting.static.js => __internal/ui/list/modules/m_deleting.static.ts} (100%) rename packages/devextreme/js/{ui/list/modules/deleting.swipe.js => __internal/ui/list/modules/m_deleting.swipe.ts} (100%) rename packages/devextreme/js/{ui/list/modules/deleting.toggle.js => __internal/ui/list/modules/m_deleting.toggle.ts} (100%) rename packages/devextreme/js/{ui/list/modules/deleting.js => __internal/ui/list/modules/m_deleting.ts} (100%) rename packages/devextreme/js/{ui/list/modules/dragging.js => __internal/ui/list/modules/m_dragging.ts} (100%) rename packages/devextreme/js/{ui/list/modules/search.js => __internal/ui/list/modules/m_search.ts} (100%) rename packages/devextreme/js/{ui/list/modules/selection.js => __internal/ui/list/modules/m_selection.ts} (100%) rename packages/devextreme/js/{ui/shared/grouped_data_converter_mixin.js => __internal/ui/shared/m_grouped_data_converter_mixin.ts} (100%) diff --git a/packages/devextreme/js/ui/list/item.js b/packages/devextreme/js/__internal/ui/list/m_item.ts similarity index 100% rename from packages/devextreme/js/ui/list/item.js rename to packages/devextreme/js/__internal/ui/list/m_item.ts diff --git a/packages/devextreme/js/ui/list/ui.list.base.js b/packages/devextreme/js/__internal/ui/list/m_list.base.ts similarity index 100% rename from packages/devextreme/js/ui/list/ui.list.base.js rename to packages/devextreme/js/__internal/ui/list/m_list.base.ts diff --git a/packages/devextreme/js/ui/list/ui.list.edit.decorator.context.js b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.context.ts similarity index 100% rename from packages/devextreme/js/ui/list/ui.list.edit.decorator.context.js rename to packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.context.ts diff --git a/packages/devextreme/js/ui/list/ui.list.edit.decorator.reorder.js b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.reorder.ts similarity index 100% rename from packages/devextreme/js/ui/list/ui.list.edit.decorator.reorder.js rename to packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.reorder.ts diff --git a/packages/devextreme/js/ui/list/ui.list.edit.decorator.selection.js b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.selection.ts similarity index 100% rename from packages/devextreme/js/ui/list/ui.list.edit.decorator.selection.js rename to packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.selection.ts diff --git a/packages/devextreme/js/ui/list/ui.list.edit.decorator.static.js b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.static.ts similarity index 100% rename from packages/devextreme/js/ui/list/ui.list.edit.decorator.static.js rename to packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.static.ts diff --git a/packages/devextreme/js/ui/list/ui.list.edit.decorator.swipe.js b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.swipe.ts similarity index 100% rename from packages/devextreme/js/ui/list/ui.list.edit.decorator.swipe.js rename to packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.swipe.ts diff --git a/packages/devextreme/js/ui/list/ui.list.edit.decorator.switchable.button.js b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.switchable.button.ts similarity index 100% rename from packages/devextreme/js/ui/list/ui.list.edit.decorator.switchable.button.js rename to packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.switchable.button.ts diff --git a/packages/devextreme/js/ui/list/ui.list.edit.decorator.switchable.slide.js b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.switchable.slide.ts similarity index 100% rename from packages/devextreme/js/ui/list/ui.list.edit.decorator.switchable.slide.js rename to packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.switchable.slide.ts diff --git a/packages/devextreme/js/ui/list/ui.list.edit.decorator.switchable.js b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.switchable.ts similarity index 100% rename from packages/devextreme/js/ui/list/ui.list.edit.decorator.switchable.js rename to packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.switchable.ts diff --git a/packages/devextreme/js/ui/list/ui.list.edit.decorator.js b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.ts similarity index 100% rename from packages/devextreme/js/ui/list/ui.list.edit.decorator.js rename to packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.ts diff --git a/packages/devextreme/js/ui/list/ui.list.edit.decorator_menu_helper.js b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator_menu_helper.ts similarity index 100% rename from packages/devextreme/js/ui/list/ui.list.edit.decorator_menu_helper.js rename to packages/devextreme/js/__internal/ui/list/m_list.edit.decorator_menu_helper.ts diff --git a/packages/devextreme/js/ui/list/ui.list.edit.decorator_registry.js b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator_registry.ts similarity index 100% rename from packages/devextreme/js/ui/list/ui.list.edit.decorator_registry.js rename to packages/devextreme/js/__internal/ui/list/m_list.edit.decorator_registry.ts diff --git a/packages/devextreme/js/ui/list/ui.list.edit.provider.js b/packages/devextreme/js/__internal/ui/list/m_list.edit.provider.ts similarity index 100% rename from packages/devextreme/js/ui/list/ui.list.edit.provider.js rename to packages/devextreme/js/__internal/ui/list/m_list.edit.provider.ts diff --git a/packages/devextreme/js/ui/list/ui.list.edit.search.js b/packages/devextreme/js/__internal/ui/list/m_list.edit.search.ts similarity index 100% rename from packages/devextreme/js/ui/list/ui.list.edit.search.js rename to packages/devextreme/js/__internal/ui/list/m_list.edit.search.ts diff --git a/packages/devextreme/js/ui/list/ui.list.edit.strategy.grouped.js b/packages/devextreme/js/__internal/ui/list/m_list.edit.strategy.grouped.ts similarity index 100% rename from packages/devextreme/js/ui/list/ui.list.edit.strategy.grouped.js rename to packages/devextreme/js/__internal/ui/list/m_list.edit.strategy.grouped.ts diff --git a/packages/devextreme/js/ui/list/ui.list.edit.js b/packages/devextreme/js/__internal/ui/list/m_list.edit.ts similarity index 100% rename from packages/devextreme/js/ui/list/ui.list.edit.js rename to packages/devextreme/js/__internal/ui/list/m_list.edit.ts diff --git a/packages/devextreme/js/ui/list/modules/context.js b/packages/devextreme/js/__internal/ui/list/modules/m_context.ts similarity index 100% rename from packages/devextreme/js/ui/list/modules/context.js rename to packages/devextreme/js/__internal/ui/list/modules/m_context.ts diff --git a/packages/devextreme/js/ui/list/modules/deleting.context.js b/packages/devextreme/js/__internal/ui/list/modules/m_deleting.context.ts similarity index 100% rename from packages/devextreme/js/ui/list/modules/deleting.context.js rename to packages/devextreme/js/__internal/ui/list/modules/m_deleting.context.ts diff --git a/packages/devextreme/js/ui/list/modules/deleting.slideButton.js b/packages/devextreme/js/__internal/ui/list/modules/m_deleting.slideButton.ts similarity index 100% rename from packages/devextreme/js/ui/list/modules/deleting.slideButton.js rename to packages/devextreme/js/__internal/ui/list/modules/m_deleting.slideButton.ts diff --git a/packages/devextreme/js/ui/list/modules/deleting.slideItem.js b/packages/devextreme/js/__internal/ui/list/modules/m_deleting.slideItem.ts similarity index 100% rename from packages/devextreme/js/ui/list/modules/deleting.slideItem.js rename to packages/devextreme/js/__internal/ui/list/modules/m_deleting.slideItem.ts diff --git a/packages/devextreme/js/ui/list/modules/deleting.static.js b/packages/devextreme/js/__internal/ui/list/modules/m_deleting.static.ts similarity index 100% rename from packages/devextreme/js/ui/list/modules/deleting.static.js rename to packages/devextreme/js/__internal/ui/list/modules/m_deleting.static.ts diff --git a/packages/devextreme/js/ui/list/modules/deleting.swipe.js b/packages/devextreme/js/__internal/ui/list/modules/m_deleting.swipe.ts similarity index 100% rename from packages/devextreme/js/ui/list/modules/deleting.swipe.js rename to packages/devextreme/js/__internal/ui/list/modules/m_deleting.swipe.ts diff --git a/packages/devextreme/js/ui/list/modules/deleting.toggle.js b/packages/devextreme/js/__internal/ui/list/modules/m_deleting.toggle.ts similarity index 100% rename from packages/devextreme/js/ui/list/modules/deleting.toggle.js rename to packages/devextreme/js/__internal/ui/list/modules/m_deleting.toggle.ts diff --git a/packages/devextreme/js/ui/list/modules/deleting.js b/packages/devextreme/js/__internal/ui/list/modules/m_deleting.ts similarity index 100% rename from packages/devextreme/js/ui/list/modules/deleting.js rename to packages/devextreme/js/__internal/ui/list/modules/m_deleting.ts diff --git a/packages/devextreme/js/ui/list/modules/dragging.js b/packages/devextreme/js/__internal/ui/list/modules/m_dragging.ts similarity index 100% rename from packages/devextreme/js/ui/list/modules/dragging.js rename to packages/devextreme/js/__internal/ui/list/modules/m_dragging.ts diff --git a/packages/devextreme/js/ui/list/modules/search.js b/packages/devextreme/js/__internal/ui/list/modules/m_search.ts similarity index 100% rename from packages/devextreme/js/ui/list/modules/search.js rename to packages/devextreme/js/__internal/ui/list/modules/m_search.ts diff --git a/packages/devextreme/js/ui/list/modules/selection.js b/packages/devextreme/js/__internal/ui/list/modules/m_selection.ts similarity index 100% rename from packages/devextreme/js/ui/list/modules/selection.js rename to packages/devextreme/js/__internal/ui/list/modules/m_selection.ts diff --git a/packages/devextreme/js/ui/shared/grouped_data_converter_mixin.js b/packages/devextreme/js/__internal/ui/shared/m_grouped_data_converter_mixin.ts similarity index 100% rename from packages/devextreme/js/ui/shared/grouped_data_converter_mixin.js rename to packages/devextreme/js/__internal/ui/shared/m_grouped_data_converter_mixin.ts From aa78853a64dd91edba842b9d2f99aa8dcb4828e8 Mon Sep 17 00:00:00 2001 From: EugeniyKiyashko Date: Thu, 13 Jun 2024 10:04:33 +0400 Subject: [PATCH 2/2] List, ListBase: ignore errors after move to TS --- .../header_filter/m_header_filter_core.ts | 4 +- .../m_tooltip_strategy_base.ts | 2 +- .../ui/date_box/m_date_box.strategy.list.ts | 2 +- .../ui/drop_down_editor/m_drop_down_list.ts | 2 +- .../js/__internal/ui/list/m_item.ts | 61 +- .../js/__internal/ui/list/m_list.base.ts | 1890 +++++++++-------- .../ui/list/m_list.edit.decorator.context.ts | 217 +- .../ui/list/m_list.edit.decorator.reorder.ts | 185 +- .../list/m_list.edit.decorator.selection.ts | 457 ++-- .../ui/list/m_list.edit.decorator.static.ts | 75 +- .../ui/list/m_list.edit.decorator.swipe.ts | 108 +- ...m_list.edit.decorator.switchable.button.ts | 268 +-- .../m_list.edit.decorator.switchable.slide.ts | 555 ++--- .../list/m_list.edit.decorator.switchable.ts | 361 ++-- .../ui/list/m_list.edit.decorator.ts | 173 +- .../list/m_list.edit.decorator_menu_helper.ts | 24 +- .../ui/list/m_list.edit.decorator_registry.ts | 13 +- .../ui/list/m_list.edit.provider.ts | 420 ++-- .../__internal/ui/list/m_list.edit.search.ts | 46 +- .../ui/list/m_list.edit.strategy.grouped.ts | 383 ++-- .../js/__internal/ui/list/m_list.edit.ts | 656 +++--- .../__internal/ui/list/modules/m_context.ts | 2 +- .../ui/list/modules/m_deleting.context.ts | 2 +- .../ui/list/modules/m_deleting.slideButton.ts | 2 +- .../ui/list/modules/m_deleting.slideItem.ts | 2 +- .../ui/list/modules/m_deleting.static.ts | 2 +- .../ui/list/modules/m_deleting.swipe.ts | 2 +- .../ui/list/modules/m_deleting.toggle.ts | 2 +- .../__internal/ui/list/modules/m_deleting.ts | 12 +- .../__internal/ui/list/modules/m_dragging.ts | 2 +- .../js/__internal/ui/list/modules/m_search.ts | 6 +- .../__internal/ui/list/modules/m_selection.ts | 2 +- .../js/__internal/ui/m_accordion.ts | 15 +- .../js/__internal/ui/m_action_sheet.ts | 3 +- .../js/__internal/ui/m_autocomplete.ts | 3 +- .../js/__internal/ui/m_drop_down_box.ts | 10 +- .../js/__internal/ui/m_select_box.ts | 14 +- .../devextreme/js/__internal/ui/m_tag_box.ts | 22 +- .../shared/m_grouped_data_converter_mixin.ts | 88 +- .../toolbar/internal/m_toolbar.menu.list.ts | 2 +- .../js/ui/gantt/ui.gantt.dialogs.js | 2 +- packages/devextreme/js/ui/list.js | 10 +- packages/devextreme/js/ui/list_light.js | 38 +- .../devextreme/playground/modular/entry.js | 22 +- .../desktopTooltip.tests.js | 2 +- .../listParts/commonTests.js | 2 +- .../listParts/editingUITests.js | 14 +- 47 files changed, 3098 insertions(+), 3087 deletions(-) diff --git a/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter_core.ts b/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter_core.ts index 61664db863eb..a03c6ff85d0d 100644 --- a/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter_core.ts +++ b/packages/devextreme/js/__internal/grids/grid_core/header_filter/m_header_filter_core.ts @@ -1,6 +1,6 @@ /* eslint-disable max-classes-per-file */ -import '@js/ui/list/modules/search'; -import '@js/ui/list/modules/selection'; +import '@ts/ui/list/modules/m_search'; +import '@ts/ui/list/modules/m_selection'; import $ from '@js/core/renderer'; import { extend } from '@js/core/utils/extend'; diff --git a/packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_tooltip_strategy_base.ts b/packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_tooltip_strategy_base.ts index 4bfa7735905c..45e7b84294c4 100644 --- a/packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_tooltip_strategy_base.ts +++ b/packages/devextreme/js/__internal/scheduler/tooltip_strategies/m_tooltip_strategy_base.ts @@ -1,8 +1,8 @@ import $ from '@js/core/renderer'; import { FunctionTemplate } from '@js/core/templates/function_template'; import Button from '@js/ui/button'; -import List from '@js/ui/list/ui.list.edit'; import { createPromise } from '@ts/core/utils/promise'; +import List from '@ts/ui/list/m_list.edit'; const TOOLTIP_APPOINTMENT_ITEM = 'dx-tooltip-appointment-item'; const TOOLTIP_APPOINTMENT_ITEM_CONTENT = `${TOOLTIP_APPOINTMENT_ITEM}-content`; diff --git a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.list.ts b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.list.ts index 04182ee7dc28..c114e8f99fb0 100644 --- a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.list.ts +++ b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.list.ts @@ -1,4 +1,4 @@ -import '@js/ui/list/modules/selection'; +import '@ts/ui/list/modules/m_selection'; import { ensureDefined, noop } from '@js/core/utils/common'; import dateSerialization from '@js/core/utils/date_serialization'; diff --git a/packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_list.ts b/packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_list.ts index 629d9b4d78cc..ec47661310bc 100644 --- a/packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_list.ts +++ b/packages/devextreme/js/__internal/ui/drop_down_editor/m_drop_down_list.ts @@ -21,8 +21,8 @@ import { addNamespace } from '@js/events/utils/index'; import messageLocalization from '@js/localization/message'; import DataExpressionMixin from '@js/ui/editor/ui.data_expression'; import List from '@js/ui/list_light'; -import DataConverterMixin from '@js/ui/shared/grouped_data_converter_mixin'; import errors from '@js/ui/widget/ui.errors'; +import DataConverterMixin from '@ts/ui/shared/m_grouped_data_converter_mixin'; import DropDownEditor from './m_drop_down_editor'; diff --git a/packages/devextreme/js/__internal/ui/list/m_item.ts b/packages/devextreme/js/__internal/ui/list/m_item.ts index 7495825e3342..a9908890fa17 100644 --- a/packages/devextreme/js/__internal/ui/list/m_item.ts +++ b/packages/devextreme/js/__internal/ui/list/m_item.ts @@ -1,5 +1,5 @@ -import $ from '../../core/renderer'; -import CollectionWidgetItem from '../collection/item'; +import $ from '@js/core/renderer'; +import CollectionWidgetItem from '@js/ui/collection/item'; const LIST_ITEM_BADGE_CONTAINER_CLASS = 'dx-list-item-badge-container'; const LIST_ITEM_BADGE_CLASS = 'dx-list-item-badge'; @@ -10,44 +10,43 @@ const LIST_ITEM_CHEVRON_CLASS = 'dx-list-item-chevron'; const ListItem = CollectionWidgetItem.inherit({ - _renderWatchers: function() { - this.callBase(); + _renderWatchers() { + this.callBase(); - this._startWatcher('badge', this._renderBadge.bind(this)); - this._startWatcher('showChevron', this._renderShowChevron.bind(this)); - }, + this._startWatcher('badge', this._renderBadge.bind(this)); + this._startWatcher('showChevron', this._renderShowChevron.bind(this)); + }, - _renderBadge: function(badge) { - this._$element.children('.' + LIST_ITEM_BADGE_CONTAINER_CLASS).remove(); + _renderBadge(badge) { + this._$element.children(`.${LIST_ITEM_BADGE_CONTAINER_CLASS}`).remove(); - if(!badge) { - return; - } + if (!badge) { + return; + } - const $badge = $('
') - .addClass(LIST_ITEM_BADGE_CONTAINER_CLASS) - .append($('
') - .addClass(LIST_ITEM_BADGE_CLASS) - .addClass(BADGE_CLASS) - .text(badge) - ); + const $badge = $('
') + .addClass(LIST_ITEM_BADGE_CONTAINER_CLASS) + .append($('
') + .addClass(LIST_ITEM_BADGE_CLASS) + .addClass(BADGE_CLASS) + .text(badge)); - const $chevron = this._$element.children('.' + LIST_ITEM_CHEVRON_CONTAINER_CLASS).first(); - $chevron.length > 0 ? $badge.insertBefore($chevron) : $badge.appendTo(this._$element); - }, + const $chevron = this._$element.children(`.${LIST_ITEM_CHEVRON_CONTAINER_CLASS}`).first(); + $chevron.length > 0 ? $badge.insertBefore($chevron) : $badge.appendTo(this._$element); + }, - _renderShowChevron: function(showChevron) { - this._$element.children('.' + LIST_ITEM_CHEVRON_CONTAINER_CLASS).remove(); + _renderShowChevron(showChevron) { + this._$element.children(`.${LIST_ITEM_CHEVRON_CONTAINER_CLASS}`).remove(); - if(!showChevron) { - return; - } + if (!showChevron) { + return; + } - const $chevronContainer = $('
').addClass(LIST_ITEM_CHEVRON_CONTAINER_CLASS); - const $chevron = $('
').addClass(LIST_ITEM_CHEVRON_CLASS); + const $chevronContainer = $('
').addClass(LIST_ITEM_CHEVRON_CONTAINER_CLASS); + const $chevron = $('
').addClass(LIST_ITEM_CHEVRON_CLASS); - $chevronContainer.append($chevron).appendTo(this._$element); - } + $chevronContainer.append($chevron).appendTo(this._$element); + }, }); diff --git a/packages/devextreme/js/__internal/ui/list/m_list.base.ts b/packages/devextreme/js/__internal/ui/list/m_list.base.ts index 2d4680a82e62..f36c59ba74d6 100644 --- a/packages/devextreme/js/__internal/ui/list/m_list.base.ts +++ b/packages/devextreme/js/__internal/ui/list/m_list.base.ts @@ -1,38 +1,39 @@ -import { getHeight, getOuterHeight, setHeight } from '../../core/utils/size'; -import $ from '../../core/renderer'; -import eventsEngine from '../../events/core/events_engine'; -import { ensureDefined, noop } from '../../core/utils/common'; -import { isDefined, isPlainObject } from '../../core/utils/type'; -import { getImageContainer } from '../../core/utils/icon'; -import { getPublicElement } from '../../core/element'; -import { each } from '../../core/utils/iterator'; -import { compileGetter } from '../../core/utils/data'; -import { extend } from '../../core/utils/extend'; -import fx from '../../animation/fx'; -import { name as clickEventName } from '../../events/click'; -import { end as swipeEventEnd } from '../../events/swipe'; -import { nativeScrolling } from '../../core/utils/support'; -import messageLocalization from '../../localization/message'; -import { render } from '../widget/utils.ink_ripple'; -import devices from '../../core/devices'; -import ListItem from './item'; -import Button from '../button'; -import { addNamespace } from '../../events/utils/index'; -import { current, isMaterial, isMaterialBased } from '../themes'; -import { hasWindow } from '../../core/utils/window'; -import ScrollView from '../scroll_view'; -import { deviceDependentOptions } from '../../__internal/ui/scroll_view/m_scrollable.device'; -import CollectionWidget from '../collection/ui.collection_widget.live_update'; -import { BindableTemplate } from '../../core/templates/bindable_template'; -import { Deferred } from '../../core/utils/deferred'; -import DataConverterMixin from '../shared/grouped_data_converter_mixin'; -import { getElementMargin } from '../../renovation/ui/scroll_view/utils/get_element_style'; -import Guid from '../../core/guid'; +import fx from '@js/animation/fx'; +import devices from '@js/core/devices'; +import { getPublicElement } from '@js/core/element'; +import Guid from '@js/core/guid'; +import $ from '@js/core/renderer'; +import { BindableTemplate } from '@js/core/templates/bindable_template'; +import { ensureDefined, noop } from '@js/core/utils/common'; +import { compileGetter } from '@js/core/utils/data'; +import { Deferred } from '@js/core/utils/deferred'; +import { extend } from '@js/core/utils/extend'; +import { getImageContainer } from '@js/core/utils/icon'; +import { each } from '@js/core/utils/iterator'; +import { getHeight, getOuterHeight, setHeight } from '@js/core/utils/size'; +import { nativeScrolling } from '@js/core/utils/support'; +import { isDefined, isPlainObject } from '@js/core/utils/type'; +import { hasWindow } from '@js/core/utils/window'; +import { name as clickEventName } from '@js/events/click'; +import eventsEngine from '@js/events/core/events_engine'; +import { end as swipeEventEnd } from '@js/events/swipe'; +import { addNamespace } from '@js/events/utils/index'; +import messageLocalization from '@js/localization/message'; +import { getElementMargin } from '@js/renovation/ui/scroll_view/utils/get_element_style'; +import Button from '@js/ui/button'; +import CollectionWidget from '@js/ui/collection/ui.collection_widget.live_update'; +import ScrollView from '@js/ui/scroll_view'; +import { current, isMaterial, isMaterialBased } from '@js/ui/themes'; +import { render } from '@js/ui/widget/utils.ink_ripple'; +import { deviceDependentOptions } from '@ts/ui/scroll_view/m_scrollable.device'; +import DataConverterMixin from '@ts/ui/shared/m_grouped_data_converter_mixin'; + +import ListItem from './m_item'; const LIST_CLASS = 'dx-list'; const LIST_ITEMS_CLASS = 'dx-list-items'; const LIST_ITEM_CLASS = 'dx-list-item'; -const LIST_ITEM_SELECTOR = '.' + LIST_ITEM_CLASS; +const LIST_ITEM_SELECTOR = `.${LIST_ITEM_CLASS}`; const LIST_ITEM_ICON_CONTAINER_CLASS = 'dx-list-item-icon-container'; const LIST_ITEM_ICON_CLASS = 'dx-list-item-icon'; const LIST_GROUP_CLASS = 'dx-list-group'; @@ -51,1065 +52,1066 @@ const LIST_FEEDBACK_SHOW_TIMEOUT = 70; const groupItemsGetter = compileGetter('items'); +// eslint-disable-next-line @typescript-eslint/naming-convention let _scrollView; export const ListBase = CollectionWidget.inherit({ - _activeStateUnit: [LIST_ITEM_SELECTOR, SELECT_ALL_ITEM_SELECTOR].join(','), + _activeStateUnit: [LIST_ITEM_SELECTOR, SELECT_ALL_ITEM_SELECTOR].join(','), - _supportedKeys: function() { - const that = this; + _supportedKeys() { + const that = this; - const moveFocusPerPage = function(direction) { - let $item = getEdgeVisibleItem(direction); - const isFocusedItem = $item.is(that.option('focusedElement')); + const moveFocusPerPage = function (direction) { + let $item = getEdgeVisibleItem(direction); + const isFocusedItem = $item.is(that.option('focusedElement')); - if(isFocusedItem) { - scrollListTo($item, direction); - $item = getEdgeVisibleItem(direction); - } + if (isFocusedItem) { + scrollListTo($item, direction); + $item = getEdgeVisibleItem(direction); + } - that.option('focusedElement', getPublicElement($item)); - that.scrollToItem($item); - }; + that.option('focusedElement', getPublicElement($item)); + that.scrollToItem($item); + }; - function getEdgeVisibleItem(direction) { - const scrollTop = that.scrollTop(); - const containerHeight = getHeight(that.$element()); + function getEdgeVisibleItem(direction) { + const scrollTop = that.scrollTop(); + const containerHeight = getHeight(that.$element()); - let $item = $(that.option('focusedElement')); - let isItemVisible = true; + let $item = $(that.option('focusedElement')); + let isItemVisible = true; - if(!$item.length) { - return $(); - } + if (!$item.length) { + // @ts-expect-error + return $(); + } - while(isItemVisible) { - const $nextItem = $item[direction](); + while (isItemVisible) { + const $nextItem = $item[direction](); - if(!$nextItem.length) { - break; - } - - const nextItemLocation = $nextItem.position().top + getOuterHeight($nextItem) / 2; - isItemVisible = nextItemLocation < containerHeight + scrollTop && nextItemLocation > scrollTop; - - if(isItemVisible) { - $item = $nextItem; - } - } - - return $item; + if (!$nextItem.length) { + break; } - function scrollListTo($item, direction) { - let resultPosition = $item.position().top; + const nextItemLocation = $nextItem.position().top + getOuterHeight($nextItem) / 2; + isItemVisible = nextItemLocation < containerHeight + scrollTop && nextItemLocation > scrollTop; - if(direction === 'prev') { - resultPosition = $item.position().top - getHeight(that.$element()) + getOuterHeight($item); - } - - that.scrollTo(resultPosition); + if (isItemVisible) { + $item = $nextItem; } + } - return extend(this.callBase(), { - leftArrow: noop, - rightArrow: noop, - pageUp: function() { - moveFocusPerPage('prev'); - return false; - }, - pageDown: function() { - moveFocusPerPage('next'); - return false; - } - }); - }, - - _getDefaultOptions: function() { - return extend(this.callBase(), { - - hoverStateEnabled: true, - - pullRefreshEnabled: false, - - scrollingEnabled: true, - - selectByClick: true, - - showScrollbar: 'onScroll', - - useNativeScrolling: true, - - bounceEnabled: true, - - scrollByContent: true, - - scrollByThumb: false, - - pullingDownText: messageLocalization.format('dxList-pullingDownText'), - - pulledDownText: messageLocalization.format('dxList-pulledDownText'), - - refreshingText: messageLocalization.format('dxList-refreshingText'), + return $item; + } - pageLoadingText: messageLocalization.format('dxList-pageLoadingText'), + function scrollListTo($item, direction) { + let resultPosition = $item.position().top; - onScroll: null, + if (direction === 'prev') { + resultPosition = $item.position().top - getHeight(that.$element()) + getOuterHeight($item); + } - onPullRefresh: null, + that.scrollTo(resultPosition); + } - onPageLoading: null, + return extend(this.callBase(), { + leftArrow: noop, + rightArrow: noop, + pageUp() { + moveFocusPerPage('prev'); + return false; + }, + pageDown() { + moveFocusPerPage('next'); + return false; + }, + }); + }, - pageLoadMode: 'scrollBottom', + _getDefaultOptions() { + return extend(this.callBase(), { - nextButtonText: messageLocalization.format('dxList-nextButtonText'), + hoverStateEnabled: true, - onItemSwipe: null, + pullRefreshEnabled: false, - grouped: false, + scrollingEnabled: true, - onGroupRendered: null, + selectByClick: true, - collapsibleGroups: false, + showScrollbar: 'onScroll', - groupTemplate: 'group', + useNativeScrolling: true, - indicateLoading: true, + bounceEnabled: true, - /** - * @name dxListOptions.selectedIndex - * @type number - * @default -1 - * @hidden - */ + scrollByContent: true, - /** - * @name dxListOptions.selectedItem - * @hidden - */ + scrollByThumb: false, - activeStateEnabled: true, + pullingDownText: messageLocalization.format('dxList-pullingDownText'), - _itemAttributes: { 'role': 'option' }, + pulledDownText: messageLocalization.format('dxList-pulledDownText'), - useInkRipple: false, + refreshingText: messageLocalization.format('dxList-refreshingText'), - wrapItemText: false, + pageLoadingText: messageLocalization.format('dxList-pageLoadingText'), - _swipeEnabled: true, + onScroll: null, - showChevronExpr: function(data) { return data ? data.showChevron : undefined; }, - badgeExpr: function(data) { return data ? data.badge : undefined; } - }); - }, - - _defaultOptionsRules: function() { - const themeName = current(); - - return this.callBase().concat(deviceDependentOptions(), [ - { - device: function() { - return !nativeScrolling; - }, - options: { - useNativeScrolling: false - } - }, - { - device: function(device) { - return !nativeScrolling && !devices.isSimulator() && devices.real().deviceType === 'desktop' && device.platform === 'generic'; - }, - options: { - showScrollbar: 'onHover', - - pageLoadMode: 'nextButton' - } - }, - { - device: function() { - return devices.real().deviceType === 'desktop' && !devices.isSimulator(); - }, - options: { - focusStateEnabled: true - } - }, - { - device: function() { - return isMaterial(themeName); - }, - options: { - useInkRipple: true - } - }, - { - device: function() { - return isMaterialBased(themeName); - }, - options: { - pullingDownText: '', - pulledDownText: '', - refreshingText: '', - pageLoadingText: '', - } - } - ]); - }, - - _visibilityChanged: function(visible) { - if(visible) { - this._updateLoadingState(true); - } - }, - - _itemClass: function() { - return LIST_ITEM_CLASS; - }, - - _itemDataKey: function() { - return LIST_ITEM_DATA_KEY; - }, - - _itemContainer: function() { - return this._$container; - }, - - _getItemsContainer: function() { - return this._$listContainer; - }, - - _cleanItemContainer: function() { - this.callBase(); - const listContainer = this._getItemsContainer(); - $(listContainer).empty(); - listContainer.appendTo(this._$container); - }, - - _saveSelectionChangeEvent: function(e) { - this._selectionChangeEventInstance = e; - }, - - _getSelectionChangeEvent: function() { - return this._selectionChangeEventInstance; - }, - - _refreshItemElements: function() { - if(!this.option('grouped')) { - this._itemElementsCache = this._getItemsContainer().children(this._itemSelector()); - } else { - this._itemElementsCache = this._getItemsContainer() - .children('.' + LIST_GROUP_CLASS) - .children('.' + LIST_GROUP_BODY_CLASS) - .children(this._itemSelector()); - } - }, + onPullRefresh: null, - _modifyByChanges: function() { - this.callBase.apply(this, arguments); + onPageLoading: null, - this._refreshItemElements(); - this._updateLoadingState(true); - }, + pageLoadMode: 'scrollBottom', - reorderItem: function(itemElement, toItemElement) { - const promise = this.callBase(itemElement, toItemElement); + nextButtonText: messageLocalization.format('dxList-nextButtonText'), - return promise.done(function() { - this._refreshItemElements(); - }); - }, + onItemSwipe: null, - deleteItem: function(itemElement) { - const promise = this.callBase(itemElement); + grouped: false, - return promise.done(function() { - this._refreshItemElements(); - }); - }, + onGroupRendered: null, - _itemElements: function() { - return this._itemElementsCache; - }, + collapsibleGroups: false, - _itemSelectHandler: function(e) { - if(this.option('selectionMode') === 'single' && this.isItemSelected(e.currentTarget)) { - return; - } + groupTemplate: 'group', - return this.callBase(e); - }, + indicateLoading: true, - _allowDynamicItemsAppend: function() { - return true; - }, + activeStateEnabled: true, - _init: function() { - this.callBase(); - this._dataController.resetDataSourcePageIndex(); - this._$container = this.$element(); + _itemAttributes: { role: 'option' }, - this._$listContainer = $('
').addClass(LIST_ITEMS_CLASS); - this._initScrollView(); + useInkRipple: false, - this._feedbackShowTimeout = LIST_FEEDBACK_SHOW_TIMEOUT; - this._createGroupRenderAction(); - }, + wrapItemText: false, - _scrollBottomMode: function() { - return this.option('pageLoadMode') === 'scrollBottom'; - }, + _swipeEnabled: true, - _nextButtonMode: function() { - return this.option('pageLoadMode') === 'nextButton'; - }, + showChevronExpr(data) { return data ? data.showChevron : undefined; }, + badgeExpr(data) { return data ? data.badge : undefined; }, + }); + }, - _dataSourceOptions: function() { - const scrollBottom = this._scrollBottomMode(); - const nextButton = this._nextButtonMode(); + _defaultOptionsRules() { + const themeName = current(); - return extend(this.callBase(), { - paginate: ensureDefined(scrollBottom || nextButton, true) - }); - }, - - _getGroupedOption: function() { - return this.option('grouped'); - }, - - _getGroupContainerByIndex: function(groupIndex) { - return this._getItemsContainer().find(`.${LIST_GROUP_CLASS}`).eq(groupIndex).find(`.${LIST_GROUP_BODY_CLASS}`); - }, - - _dataSourceFromUrlLoadMode: function() { - return 'raw'; - }, - - _initScrollView: function() { - const scrollingEnabled = this.option('scrollingEnabled'); - const pullRefreshEnabled = scrollingEnabled && this.option('pullRefreshEnabled'); - const autoPagingEnabled = scrollingEnabled && this._scrollBottomMode() && !!this._dataController.getDataSource(); - - this._scrollView = this._createComponent(this.$element(), getScrollView(), { - height: this.option('height'), - width: this.option('width'), - disabled: this.option('disabled') || !scrollingEnabled, - onScroll: this._scrollHandler.bind(this), - onPullDown: pullRefreshEnabled ? this._pullDownHandler.bind(this) : null, - onReachBottom: autoPagingEnabled ? this._scrollBottomHandler.bind(this) : null, - showScrollbar: this.option('showScrollbar'), - useNative: this.option('useNativeScrolling'), - bounceEnabled: this.option('bounceEnabled'), - scrollByContent: this.option('scrollByContent'), - scrollByThumb: this.option('scrollByThumb'), - pullingDownText: this.option('pullingDownText'), - pulledDownText: this.option('pulledDownText'), - refreshingText: this.option('refreshingText'), - reachBottomText: this.option('pageLoadingText'), - useKeyboard: false, - }); + return this.callBase().concat(deviceDependentOptions(), [ + { + device() { + return !nativeScrolling; + }, + options: { + useNativeScrolling: false, + }, + }, + { + device(device) { + return !nativeScrolling && !devices.isSimulator() && devices.real().deviceType === 'desktop' && device.platform === 'generic'; + }, + options: { + showScrollbar: 'onHover', - this._$container = $(this._scrollView.content()); + pageLoadMode: 'nextButton', + }, + }, + { + device() { + return devices.real().deviceType === 'desktop' && !devices.isSimulator(); + }, + options: { + focusStateEnabled: true, + }, + }, + { + device() { + return isMaterial(themeName); + }, + options: { + useInkRipple: true, + }, + }, + { + device() { + return isMaterialBased(themeName); + }, + options: { + pullingDownText: '', + pulledDownText: '', + refreshingText: '', + pageLoadingText: '', + }, + }, + ]); + }, - this._$listContainer.appendTo(this._$container); + _visibilityChanged(visible) { + if (visible) { + this._updateLoadingState(true); + } + }, + + _itemClass() { + return LIST_ITEM_CLASS; + }, + + _itemDataKey() { + return LIST_ITEM_DATA_KEY; + }, + + _itemContainer() { + return this._$container; + }, + + _getItemsContainer() { + return this._$listContainer; + }, + + _cleanItemContainer() { + this.callBase(); + const listContainer = this._getItemsContainer(); + $(listContainer).empty(); + listContainer.appendTo(this._$container); + }, + + _saveSelectionChangeEvent(e) { + this._selectionChangeEventInstance = e; + }, + + _getSelectionChangeEvent() { + return this._selectionChangeEventInstance; + }, + + _refreshItemElements() { + if (!this.option('grouped')) { + this._itemElementsCache = this._getItemsContainer().children(this._itemSelector()); + } else { + this._itemElementsCache = this._getItemsContainer() + .children(`.${LIST_GROUP_CLASS}`) + .children(`.${LIST_GROUP_BODY_CLASS}`) + .children(this._itemSelector()); + } + }, - this._toggleWrapItemText(this.option('wrapItemText')); + _modifyByChanges() { + this.callBase.apply(this, arguments); - this._createScrollViewActions(); - }, - - _toggleWrapItemText: function(value) { - this._$listContainer.toggleClass(WRAP_ITEM_TEXT_CLASS, value); - }, - - _createScrollViewActions: function() { - this._scrollAction = this._createActionByOption('onScroll'); - this._pullRefreshAction = this._createActionByOption('onPullRefresh'); - this._pageLoadingAction = this._createActionByOption('onPageLoading'); - }, - - _scrollHandler: function(e) { - this._scrollAction && this._scrollAction(e); - }, - - _initTemplates: function() { - this._templateManager.addDefaultTemplates({ - group: new BindableTemplate(function($container, data) { - if(isPlainObject(data)) { - if(data.key) { - $container.text(data.key); - } - } else { - $container.text(String(data)); - } - }, ['key'], this.option('integrationOptions.watchMethod')) - }); - this.callBase(); - }, + this._refreshItemElements(); + this._updateLoadingState(true); + }, - _prepareDefaultItemTemplate: function(data, $container) { - this.callBase(data, $container); + reorderItem(itemElement, toItemElement) { + const promise = this.callBase(itemElement, toItemElement); - if(data.icon) { - const $icon = getImageContainer(data.icon).addClass(LIST_ITEM_ICON_CLASS); - const $iconContainer = $('
').addClass(LIST_ITEM_ICON_CONTAINER_CLASS); + return promise.done(function () { + this._refreshItemElements(); + }); + }, - $iconContainer.append($icon); + deleteItem(itemElement) { + const promise = this.callBase(itemElement); - $container.prepend($iconContainer); - } - }, + return promise.done(function () { + this._refreshItemElements(); + }); + }, - _getBindableFields: function() { - return ['text', 'html', 'icon']; - }, + _itemElements() { + return this._itemElementsCache; + }, - _updateLoadingState: function(tryLoadMore) { - const dataController = this._dataController; - const shouldLoadNextPage = this._scrollBottomMode() && tryLoadMore && !dataController.isLoading() && !this._isLastPage(); + _itemSelectHandler(e) { + if (this.option('selectionMode') === 'single' && this.isItemSelected(e.currentTarget)) { + return; + } - if(this._shouldContinueLoading(shouldLoadNextPage)) { - this._infiniteDataLoading(); + return this.callBase(e); + }, + + _allowDynamicItemsAppend() { + return true; + }, + + _init() { + this.callBase(); + this._dataController.resetDataSourcePageIndex(); + this._$container = this.$element(); + + this._$listContainer = $('
').addClass(LIST_ITEMS_CLASS); + this._initScrollView(); + + this._feedbackShowTimeout = LIST_FEEDBACK_SHOW_TIMEOUT; + this._createGroupRenderAction(); + }, + + _scrollBottomMode() { + return this.option('pageLoadMode') === 'scrollBottom'; + }, + + _nextButtonMode() { + return this.option('pageLoadMode') === 'nextButton'; + }, + + _dataSourceOptions() { + const scrollBottom = this._scrollBottomMode(); + const nextButton = this._nextButtonMode(); + + return extend(this.callBase(), { + paginate: ensureDefined(scrollBottom || nextButton, true), + }); + }, + + _getGroupedOption() { + return this.option('grouped'); + }, + + _getGroupContainerByIndex(groupIndex) { + return this._getItemsContainer().find(`.${LIST_GROUP_CLASS}`).eq(groupIndex).find(`.${LIST_GROUP_BODY_CLASS}`); + }, + + _dataSourceFromUrlLoadMode() { + return 'raw'; + }, + + _initScrollView() { + const scrollingEnabled = this.option('scrollingEnabled'); + const pullRefreshEnabled = scrollingEnabled && this.option('pullRefreshEnabled'); + const autoPagingEnabled = scrollingEnabled && this._scrollBottomMode() && !!this._dataController.getDataSource(); + + this._scrollView = this._createComponent(this.$element(), getScrollView(), { + height: this.option('height'), + width: this.option('width'), + disabled: this.option('disabled') || !scrollingEnabled, + onScroll: this._scrollHandler.bind(this), + onPullDown: pullRefreshEnabled ? this._pullDownHandler.bind(this) : null, + onReachBottom: autoPagingEnabled ? this._scrollBottomHandler.bind(this) : null, + showScrollbar: this.option('showScrollbar'), + useNative: this.option('useNativeScrolling'), + bounceEnabled: this.option('bounceEnabled'), + scrollByContent: this.option('scrollByContent'), + scrollByThumb: this.option('scrollByThumb'), + pullingDownText: this.option('pullingDownText'), + pulledDownText: this.option('pulledDownText'), + refreshingText: this.option('refreshingText'), + reachBottomText: this.option('pageLoadingText'), + useKeyboard: false, + }); + + this._$container = $(this._scrollView.content()); + + this._$listContainer.appendTo(this._$container); + + this._toggleWrapItemText(this.option('wrapItemText')); + + this._createScrollViewActions(); + }, + + _toggleWrapItemText(value) { + this._$listContainer.toggleClass(WRAP_ITEM_TEXT_CLASS, value); + }, + + _createScrollViewActions() { + this._scrollAction = this._createActionByOption('onScroll'); + this._pullRefreshAction = this._createActionByOption('onPullRefresh'); + this._pageLoadingAction = this._createActionByOption('onPageLoading'); + }, + + _scrollHandler(e) { + this._scrollAction && this._scrollAction(e); + }, + + _initTemplates() { + this._templateManager.addDefaultTemplates({ + group: new BindableTemplate(($container, data) => { + if (isPlainObject(data)) { + if (data.key) { + $container.text(data.key); + } } else { - this._scrollView.release(!shouldLoadNextPage && !dataController.isLoading()); - this._toggleNextButton(this._shouldRenderNextButton() && !this._isLastPage()); - this._loadIndicationSuppressed(false); + $container.text(String(data)); } - }, + }, ['key'], this.option('integrationOptions.watchMethod')), + }); + this.callBase(); + }, - _shouldRenderNextButton: function() { - return this._nextButtonMode() && this._dataController.isLoaded(); - }, + _prepareDefaultItemTemplate(data, $container) { + this.callBase(data, $container); - _isDataSourceFirstLoadCompleted: function(newValue) { - if(isDefined(newValue)) { - this._isFirstLoadCompleted = newValue; - } + if (data.icon) { + // @ts-expect-error + const $icon = getImageContainer(data.icon).addClass(LIST_ITEM_ICON_CLASS); + const $iconContainer = $('
').addClass(LIST_ITEM_ICON_CONTAINER_CLASS); - return this._isFirstLoadCompleted; - }, - - _dataSourceLoadingChangedHandler: function(isLoading) { - if(this._loadIndicationSuppressed()) { - return; - } - - if(isLoading && this.option('indicateLoading')) { - this._showLoadingIndicatorTimer = setTimeout((function() { - const isEmpty = !this._itemElements().length; - const shouldIndicateLoading = !isEmpty || this._isDataSourceFirstLoadCompleted(); - if(shouldIndicateLoading) { - this._scrollView?.startLoading(); - } - }).bind(this)); - } else { - clearTimeout(this._showLoadingIndicatorTimer); - this._scrollView && this._scrollView.finishLoading(); - } - if(!isLoading) { - this._isDataSourceFirstLoadCompleted(false); - } - }, + $iconContainer.append($icon); - _dataSourceChangedHandler: function() { - if(!this._shouldAppendItems() && hasWindow()) { - this._scrollView && this._scrollView.scrollTo(0); - } + $container.prepend($iconContainer); + } + }, + + _getBindableFields() { + return ['text', 'html', 'icon']; + }, + + _updateLoadingState(tryLoadMore) { + const dataController = this._dataController; + const shouldLoadNextPage = this._scrollBottomMode() && tryLoadMore && !dataController.isLoading() && !this._isLastPage(); + + if (this._shouldContinueLoading(shouldLoadNextPage)) { + this._infiniteDataLoading(); + } else { + this._scrollView.release(!shouldLoadNextPage && !dataController.isLoading()); + this._toggleNextButton(this._shouldRenderNextButton() && !this._isLastPage()); + this._loadIndicationSuppressed(false); + } + }, - this.callBase.apply(this, arguments); + _shouldRenderNextButton() { + return this._nextButtonMode() && this._dataController.isLoaded(); + }, - this._isDataSourceFirstLoadCompleted(true); - }, + _isDataSourceFirstLoadCompleted(newValue) { + if (isDefined(newValue)) { + this._isFirstLoadCompleted = newValue; + } - _refreshContent: function() { - this._prepareContent(); - this._fireContentReadyAction(); - }, + return this._isFirstLoadCompleted; + }, - _hideLoadingIfLoadIndicationOff: function() { - if(!this.option('indicateLoading')) { - this._dataSourceLoadingChangedHandler(false); - } - }, + _dataSourceLoadingChangedHandler(isLoading) { + if (this._loadIndicationSuppressed()) { + return; + } - _loadIndicationSuppressed: function(value) { - if(!arguments.length) { - return this._isLoadIndicationSuppressed; - } - this._isLoadIndicationSuppressed = value; - }, - - _scrollViewIsFull: function() { - const scrollView = this._scrollView; - return !scrollView || getHeight(scrollView.content()) > getHeight(scrollView.container()); - }, - - _pullDownHandler: function(e) { - this._pullRefreshAction(e); - const dataController = this._dataController; - - if(dataController.getDataSource() && !dataController.isLoading()) { - this._clearSelectedItems(); - dataController.pageIndex(0); - dataController.reload(); - } else { - this._updateLoadingState(); + if (isLoading && this.option('indicateLoading')) { + this._showLoadingIndicatorTimer = setTimeout(() => { + const isEmpty = !this._itemElements().length; + const shouldIndicateLoading = !isEmpty || this._isDataSourceFirstLoadCompleted(); + if (shouldIndicateLoading) { + this._scrollView?.startLoading(); } - }, - - _shouldContinueLoading: function(shouldLoadNextPage) { - const isBottomReached = getHeight(this._scrollView.content()) - getHeight(this._scrollView.container()) < (this._scrollView.scrollOffset()?.top ?? 0); + }); + } else { + clearTimeout(this._showLoadingIndicatorTimer); + this._scrollView && this._scrollView.finishLoading(); + } + if (!isLoading) { + this._isDataSourceFirstLoadCompleted(false); + } + }, - return shouldLoadNextPage && (!this._scrollViewIsFull() || isBottomReached); - }, + _dataSourceChangedHandler() { + if (!this._shouldAppendItems() && hasWindow()) { + this._scrollView && this._scrollView.scrollTo(0); + } - _infiniteDataLoading: function() { - const isElementVisible = this.$element().is(':visible'); + this.callBase.apply(this, arguments); - if(isElementVisible) { - clearTimeout(this._loadNextPageTimer); + this._isDataSourceFirstLoadCompleted(true); + }, - this._loadNextPageTimer = setTimeout(() => { - this._loadNextPage(); - }); - } - }, + _refreshContent() { + this._prepareContent(); + this._fireContentReadyAction(); + }, - _scrollBottomHandler: function(e) { - this._pageLoadingAction(e); - const dataController = this._dataController; + _hideLoadingIfLoadIndicationOff() { + if (!this.option('indicateLoading')) { + this._dataSourceLoadingChangedHandler(false); + } + }, - if(!dataController.isLoading() && !this._isLastPage()) { - this._loadNextPage(); - } else { - this._updateLoadingState(); - } - }, + _loadIndicationSuppressed(value) { + if (!arguments.length) { + return this._isLoadIndicationSuppressed; + } + this._isLoadIndicationSuppressed = value; + }, + + _scrollViewIsFull() { + const scrollView = this._scrollView; + return !scrollView || getHeight(scrollView.content()) > getHeight(scrollView.container()); + }, + + _pullDownHandler(e) { + this._pullRefreshAction(e); + const dataController = this._dataController; + + if (dataController.getDataSource() && !dataController.isLoading()) { + this._clearSelectedItems(); + dataController.pageIndex(0); + dataController.reload(); + } else { + this._updateLoadingState(); + } + }, - _renderItems: function(items) { - if(this.option('grouped')) { - each(items, this._renderGroup.bind(this)); - this._attachGroupCollapseEvent(); - this._renderEmptyMessage(); + _shouldContinueLoading(shouldLoadNextPage) { + const isBottomReached = getHeight(this._scrollView.content()) - getHeight(this._scrollView.container()) < (this._scrollView.scrollOffset()?.top ?? 0); - if(isMaterial()) { - this.attachGroupHeaderInkRippleEvents(); - } - } else { - this.callBase.apply(this, arguments); - } + return shouldLoadNextPage && (!this._scrollViewIsFull() || isBottomReached); + }, - this._refreshItemElements(); - this._updateLoadingState(true); - }, - - _attachGroupCollapseEvent: function() { - const eventName = addNamespace(clickEventName, this.NAME); - const selector = '.' + LIST_GROUP_HEADER_CLASS; - const $element = this.$element(); - const collapsibleGroups = this.option('collapsibleGroups'); - - $element.toggleClass(LIST_COLLAPSIBLE_GROUPS_CLASS, collapsibleGroups); - - eventsEngine.off($element, eventName, selector); - if(collapsibleGroups) { - eventsEngine.on($element, eventName, selector, (function(e) { - this._createAction((function(e) { - const $group = $(e.event.currentTarget).parent(); - this._collapseGroupHandler($group); - if(this.option('focusStateEnabled')) { - this.option('focusedElement', getPublicElement($group.find('.' + LIST_ITEM_CLASS).eq(0))); - } - }).bind(this), { - validatingTargetName: 'element' - })({ - event: e - }); - }).bind(this)); - } - }, + _infiniteDataLoading() { + const isElementVisible = this.$element().is(':visible'); - _collapseGroupHandler: function($group, toggle) { - const deferred = new Deferred(); + if (isElementVisible) { + clearTimeout(this._loadNextPageTimer); - if($group.hasClass(LIST_GROUP_COLLAPSED_CLASS) === toggle) { - return deferred.resolve(); - } + this._loadNextPageTimer = setTimeout(() => { + this._loadNextPage(); + }); + } + }, - const $groupBody = $group.children('.' + LIST_GROUP_BODY_CLASS); + _scrollBottomHandler(e) { + this._pageLoadingAction(e); + const dataController = this._dataController; - const startHeight = getOuterHeight($groupBody); - let endHeight = 0; - if(startHeight === 0) { - setHeight($groupBody, 'auto'); - endHeight = getOuterHeight($groupBody); - } + if (!dataController.isLoading() && !this._isLastPage()) { + this._loadNextPage(); + } else { + this._updateLoadingState(); + } + }, + + _renderItems(items) { + if (this.option('grouped')) { + each(items, this._renderGroup.bind(this)); + this._attachGroupCollapseEvent(); + this._renderEmptyMessage(); + // @ts-expect-error + if (isMaterial()) { + this.attachGroupHeaderInkRippleEvents(); + } + } else { + this.callBase.apply(this, arguments); + } - $group.toggleClass(LIST_GROUP_COLLAPSED_CLASS, toggle); - - fx.animate($groupBody, { - type: 'custom', - from: { height: startHeight }, - to: { height: endHeight }, - duration: 200, - complete: (function() { - this.updateDimensions(); - this._updateLoadingState(true); - deferred.resolve(); - }).bind(this) + this._refreshItemElements(); + this._updateLoadingState(true); + }, + + _attachGroupCollapseEvent() { + const eventName = addNamespace(clickEventName, this.NAME); + const selector = `.${LIST_GROUP_HEADER_CLASS}`; + const $element = this.$element(); + const collapsibleGroups = this.option('collapsibleGroups'); + + $element.toggleClass(LIST_COLLAPSIBLE_GROUPS_CLASS, collapsibleGroups); + + eventsEngine.off($element, eventName, selector); + if (collapsibleGroups) { + eventsEngine.on($element, eventName, selector, (e) => { + this._createAction((e) => { + const $group = $(e.event.currentTarget).parent(); + this._collapseGroupHandler($group); + if (this.option('focusStateEnabled')) { + this.option('focusedElement', getPublicElement($group.find(`.${LIST_ITEM_CLASS}`).eq(0))); + } + }, { + validatingTargetName: 'element', + })({ + event: e, }); + }); + } + }, - return deferred.promise(); - }, - - _dataSourceLoadErrorHandler: function() { - this._forgetNextPageLoading(); + _collapseGroupHandler($group, toggle) { + const deferred = Deferred(); - if(this._initialized) { - this._renderEmptyMessage(); - this._updateLoadingState(); - } - }, - - _initMarkup: function() { - this._itemElementsCache = $(); + if ($group.hasClass(LIST_GROUP_COLLAPSED_CLASS) === toggle) { + return deferred.resolve(); + } - this.$element().addClass(LIST_CLASS); - this.callBase(); - this.option('useInkRipple') && this._renderInkRipple(); + const $groupBody = $group.children(`.${LIST_GROUP_BODY_CLASS}`); - const elementAria = { - 'role': 'group', - 'roledescription': 'list', - }; + const startHeight = getOuterHeight($groupBody); + let endHeight = 0; + if (startHeight === 0) { + setHeight($groupBody, 'auto'); + endHeight = getOuterHeight($groupBody); + } - this.setAria(elementAria, this.$element()); - this.setAria({ role: 'application' }, this._focusTarget()); + $group.toggleClass(LIST_GROUP_COLLAPSED_CLASS, toggle); + + fx.animate($groupBody, { + // @ts-expect-error + type: 'custom', + // @ts-expect-error + from: { height: startHeight }, + // @ts-expect-error + to: { height: endHeight }, + duration: 200, + complete: function () { + this.updateDimensions(); + this._updateLoadingState(true); + deferred.resolve(); + }.bind(this), + }); - this._setListAria(); - }, + return deferred.promise(); + }, - _setListAria() { - const { items, allowItemDeleting } = this.option(); + _dataSourceLoadErrorHandler() { + this._forgetNextPageLoading(); - const label = allowItemDeleting - ? messageLocalization.format('dxList-listAriaLabel-deletable') - : messageLocalization.format('dxList-listAriaLabel'); + if (this._initialized) { + this._renderEmptyMessage(); + this._updateLoadingState(); + } + }, - const listArea = items?.length ? { - role: 'listbox', - label, - } : { - role: undefined, - label: undefined - }; + _initMarkup() { + // @ts-expect-error + this._itemElementsCache = $(); - this.setAria(listArea, this._$listContainer); - }, + this.$element().addClass(LIST_CLASS); + this.callBase(); + this.option('useInkRipple') && this._renderInkRipple(); - _focusTarget: function() { - return this._itemContainer(); - }, + const elementAria = { + role: 'group', + // eslint-disable-next-line spellcheck/spell-checker + roledescription: 'list', + }; - _renderInkRipple: function() { - this._inkRipple = render(); - }, + this.setAria(elementAria, this.$element()); + this.setAria({ role: 'application' }, this._focusTarget()); - _toggleActiveState: function($element, value, e) { - this.callBase.apply(this, arguments); - const that = this; + this._setListAria(); + }, - if(!this._inkRipple) { - return; - } + _setListAria() { + const { items, allowItemDeleting } = this.option(); - const config = { - element: $element, - event: e - }; - - if(value) { - if(isMaterial()) { - this._inkRippleTimer = setTimeout(function() { - that._inkRipple.showWave(config); - }, LIST_FEEDBACK_SHOW_TIMEOUT / 2); - } else { - that._inkRipple.showWave(config); - } - } else { - clearTimeout(this._inkRippleTimer); - this._inkRipple.hideWave(config); - } - }, + const label = allowItemDeleting + ? messageLocalization.format('dxList-listAriaLabel-deletable') + : messageLocalization.format('dxList-listAriaLabel'); - _postprocessRenderItem: function(args) { - this._refreshItemElements(); - this.callBase.apply(this, arguments); + const listArea = items?.length ? { + role: 'listbox', + label, + } : { + role: undefined, + label: undefined, + }; - if(this.option('_swipeEnabled')) { - this._attachSwipeEvent($(args.itemElement)); - } - }, + this.setAria(listArea, this._$listContainer); + }, - _attachSwipeEvent: function($itemElement) { - const endEventName = addNamespace(swipeEventEnd, this.NAME); + _focusTarget() { + return this._itemContainer(); + }, - eventsEngine.on($itemElement, endEventName, this._itemSwipeEndHandler.bind(this)); - }, + _renderInkRipple() { + this._inkRipple = render(); + }, - _itemSwipeEndHandler: function(e) { - this._itemDXEventHandler(e, 'onItemSwipe', { - direction: e.offset < 0 ? 'left' : 'right' - }); - }, + _toggleActiveState($element, value, e) { + this.callBase.apply(this, arguments); + const that = this; - _nextButtonHandler: function(e) { - this._pageLoadingAction(e); + if (!this._inkRipple) { + return; + } - const dataController = this._dataController; - if(dataController.getDataSource() && !dataController.isLoading()) { - this._scrollView.toggleLoading(true); - this._$nextButton.detach(); - this._loadIndicationSuppressed(true); - this._loadNextPage(); - } - }, - - _renderGroup: function(index, group) { - const $groupElement = $('
') - .addClass(LIST_GROUP_CLASS) - .appendTo(this._getItemsContainer()); - - const id = `dx-${new Guid().toString()}`; - const groupAria = { - role: 'group', - 'labelledby': id, - }; - - this.setAria(groupAria, $groupElement); - - const $groupHeaderElement = $('
') - .addClass(LIST_GROUP_HEADER_CLASS) - .attr('id', id) - .appendTo($groupElement); - - const groupTemplateName = this.option('groupTemplate'); - const groupTemplate = this._getTemplate(group.template || groupTemplateName, group, index, $groupHeaderElement); - const renderArgs = { - index: index, - itemData: group, - container: getPublicElement($groupHeaderElement) - }; - - this._createItemByTemplate(groupTemplate, renderArgs); - - $('
') - .addClass(LIST_GROUP_HEADER_INDICATOR_CLASS) - .prependTo($groupHeaderElement); - - this._renderingGroupIndex = index; - - const $groupBody = $('
') - .addClass(LIST_GROUP_BODY_CLASS) - .appendTo($groupElement); - - each(groupItemsGetter(group) || [], (function(itemIndex, item) { - this._renderItem({ group: index, item: itemIndex }, item, $groupBody); - }).bind(this)); - - this._groupRenderAction({ - groupElement: getPublicElement($groupElement), - groupIndex: index, - groupData: group - }); - }, + const config = { + element: $element, + event: e, + }; + + if (value) { + // @ts-expect-error + if (isMaterial()) { + this._inkRippleTimer = setTimeout(() => { + that._inkRipple.showWave(config); + }, LIST_FEEDBACK_SHOW_TIMEOUT / 2); + } else { + that._inkRipple.showWave(config); + } + } else { + clearTimeout(this._inkRippleTimer); + this._inkRipple.hideWave(config); + } + }, - downInkRippleHandler: function(e) { - this._toggleActiveState($(e.currentTarget), true, e); - }, + _postprocessRenderItem(args) { + this._refreshItemElements(); + this.callBase.apply(this, arguments); - upInkRippleHandler: function(e) { - this._toggleActiveState($(e.currentTarget), false); - }, + if (this.option('_swipeEnabled')) { + this._attachSwipeEvent($(args.itemElement)); + } + }, - attachGroupHeaderInkRippleEvents: function() { - const selector = '.' + LIST_GROUP_HEADER_CLASS; - const $element = this.$element(); + _attachSwipeEvent($itemElement) { + const endEventName = addNamespace(swipeEventEnd, this.NAME); - this._downInkRippleHandler = this._downInkRippleHandler || this.downInkRippleHandler.bind(this); - this._upInkRippleHandler = this._upInkRippleHandler || this.upInkRippleHandler.bind(this); + eventsEngine.on($itemElement, endEventName, this._itemSwipeEndHandler.bind(this)); + }, - const downArguments = [$element, 'dxpointerdown', selector, this._downInkRippleHandler]; - const upArguments = [$element, 'dxpointerup dxpointerout', selector, this._upInkRippleHandler]; + _itemSwipeEndHandler(e) { + this._itemDXEventHandler(e, 'onItemSwipe', { + direction: e.offset < 0 ? 'left' : 'right', + }); + }, - eventsEngine.off(...downArguments); - eventsEngine.on(...downArguments); + _nextButtonHandler(e) { + this._pageLoadingAction(e); - eventsEngine.off(...upArguments); - eventsEngine.on(...upArguments); - }, + const dataController = this._dataController; + if (dataController.getDataSource() && !dataController.isLoading()) { + this._scrollView.toggleLoading(true); + this._$nextButton.detach(); + this._loadIndicationSuppressed(true); + this._loadNextPage(); + } + }, + + _renderGroup(index, group) { + const $groupElement = $('
') + .addClass(LIST_GROUP_CLASS) + .appendTo(this._getItemsContainer()); + + const id = `dx-${new Guid().toString()}`; + const groupAria = { + role: 'group', + // eslint-disable-next-line spellcheck/spell-checker + labelledby: id, + }; + + this.setAria(groupAria, $groupElement); + + const $groupHeaderElement = $('
') + .addClass(LIST_GROUP_HEADER_CLASS) + .attr('id', id) + .appendTo($groupElement); + + const groupTemplateName = this.option('groupTemplate'); + const groupTemplate = this._getTemplate(group.template || groupTemplateName, group, index, $groupHeaderElement); + const renderArgs = { + index, + itemData: group, + container: getPublicElement($groupHeaderElement), + }; + + this._createItemByTemplate(groupTemplate, renderArgs); + + $('
') + .addClass(LIST_GROUP_HEADER_INDICATOR_CLASS) + .prependTo($groupHeaderElement); + + this._renderingGroupIndex = index; + + const $groupBody = $('
') + .addClass(LIST_GROUP_BODY_CLASS) + .appendTo($groupElement); + // @ts-expect-error + each(groupItemsGetter(group) || [], (itemIndex, item) => { + this._renderItem({ group: index, item: itemIndex }, item, $groupBody); + }); + + this._groupRenderAction({ + groupElement: getPublicElement($groupElement), + groupIndex: index, + groupData: group, + }); + }, + + downInkRippleHandler(e) { + this._toggleActiveState($(e.currentTarget), true, e); + }, + + upInkRippleHandler(e) { + this._toggleActiveState($(e.currentTarget), false); + }, + + attachGroupHeaderInkRippleEvents() { + const selector = `.${LIST_GROUP_HEADER_CLASS}`; + const $element = this.$element(); + + this._downInkRippleHandler = this._downInkRippleHandler || this.downInkRippleHandler.bind(this); + this._upInkRippleHandler = this._upInkRippleHandler || this.upInkRippleHandler.bind(this); + + const downArguments = [$element, 'dxpointerdown', selector, this._downInkRippleHandler]; + const upArguments = [$element, 'dxpointerup dxpointerout', selector, this._upInkRippleHandler]; + // @ts-expect-error + eventsEngine.off(...downArguments); + // @ts-expect-error + eventsEngine.on(...downArguments); + // @ts-expect-error + eventsEngine.off(...upArguments); + // @ts-expect-error + eventsEngine.on(...upArguments); + }, + + _createGroupRenderAction() { + this._groupRenderAction = this._createActionByOption('onGroupRendered'); + }, + + _clean() { + clearTimeout(this._inkRippleTimer); + if (this._$nextButton) { + this._$nextButton.remove(); + this._$nextButton = null; + } + this.callBase.apply(this, arguments); + }, + + _dispose() { + this._isDataSourceFirstLoadCompleted(false); + clearTimeout(this._holdTimer); + clearTimeout(this._loadNextPageTimer); + clearTimeout(this._showLoadingIndicatorTimer); + this.callBase(); + }, + + _toggleDisabledState(value) { + this.callBase(value); + this._scrollView.option('disabled', value || !this.option('scrollingEnabled')); + }, + + _toggleNextButton(value) { + const dataController = this._dataController; + const $nextButton = this._getNextButton(); + + this.$element().toggleClass(LIST_HAS_NEXT_CLASS, value); + + if (value && dataController.isLoaded()) { + $nextButton.appendTo(this._itemContainer()); + } - _createGroupRenderAction: function() { - this._groupRenderAction = this._createActionByOption('onGroupRendered'); - }, + if (!value) { + $nextButton.detach(); + } + }, - _clean: function() { - clearTimeout(this._inkRippleTimer); - if(this._$nextButton) { - this._$nextButton.remove(); - this._$nextButton = null; - } - this.callBase.apply(this, arguments); - }, + _getNextButton() { + if (!this._$nextButton) { + this._$nextButton = this._createNextButton(); + } + return this._$nextButton; + }, + + _createNextButton() { + const $result = $('
').addClass(LIST_NEXT_BUTTON_CLASS); + + const $button = $('
').appendTo($result); + + this._createComponent($button, Button, { + text: this.option('nextButtonText'), + onClick: this._nextButtonHandler.bind(this), + // @ts-expect-error + type: isMaterialBased() ? 'default' : undefined, + integrationOptions: {}, + }); + + return $result; + }, + + _moveFocus() { + this.callBase.apply(this, arguments); + + this.scrollToItem(this.option('focusedElement')); + }, + + _refresh() { + if (!hasWindow()) { + this.callBase(); + } else { + const scrollTop = this._scrollView.scrollTop(); + this.callBase(); + scrollTop && this._scrollView.scrollTo(scrollTop); + } + }, - _dispose: function() { + _optionChanged(args) { + switch (args.name) { + case 'pageLoadMode': + this._toggleNextButton(args.value); + this._initScrollView(); + break; + case 'dataSource': + this.callBase(args); + this._initScrollView(); this._isDataSourceFirstLoadCompleted(false); - clearTimeout(this._holdTimer); - clearTimeout(this._loadNextPageTimer); - clearTimeout(this._showLoadingIndicatorTimer); - this.callBase(); - }, - - _toggleDisabledState: function(value) { - this.callBase(value); - this._scrollView.option('disabled', value || !this.option('scrollingEnabled')); - }, - - _toggleNextButton: function(value) { - const dataController = this._dataController; - const $nextButton = this._getNextButton(); - - this.$element().toggleClass(LIST_HAS_NEXT_CLASS, value); - - if(value && dataController.isLoaded()) { - $nextButton.appendTo(this._itemContainer()); - } - - if(!value) { - $nextButton.detach(); - } - }, - - _getNextButton: function() { - if(!this._$nextButton) { - this._$nextButton = this._createNextButton(); - } - return this._$nextButton; - }, - - _createNextButton: function() { - const $result = $('
').addClass(LIST_NEXT_BUTTON_CLASS); - - const $button = $('
').appendTo($result); - - this._createComponent($button, Button, { - text: this.option('nextButtonText'), - onClick: this._nextButtonHandler.bind(this), - type: isMaterialBased() ? 'default' : undefined, - integrationOptions: {} - }); - - return $result; - }, - - _moveFocus: function() { - this.callBase.apply(this, arguments); - - this.scrollToItem(this.option('focusedElement')); - }, - - _refresh: function() { - if(!hasWindow()) { - this.callBase(); - } else { - const scrollTop = this._scrollView.scrollTop(); - this.callBase(); - scrollTop && this._scrollView.scrollTo(scrollTop); - } - }, - - _optionChanged: function(args) { - switch(args.name) { - case 'pageLoadMode': - this._toggleNextButton(args.value); - this._initScrollView(); - break; - case 'dataSource': - this.callBase(args); - this._initScrollView(); - this._isDataSourceFirstLoadCompleted(false); - break; - case 'items': - this.callBase(args); - this._isDataSourceFirstLoadCompleted(false); - break; - case 'pullingDownText': - case 'pulledDownText': - case 'refreshingText': - case 'pageLoadingText': - case 'showScrollbar': - case 'bounceEnabled': - case 'scrollByContent': - case 'scrollByThumb': - case 'useNativeScrolling': - case 'scrollingEnabled': - case 'pullRefreshEnabled': - this._initScrollView(); - this._updateLoadingState(true); - break; - case 'nextButtonText': - case 'onItemSwipe': - case 'useInkRipple': - this._invalidate(); - break; - case 'onScroll': - case 'onPullRefresh': - case 'onPageLoading': - this._createScrollViewActions(); - break; - case 'grouped': - case 'collapsibleGroups': - case 'groupTemplate': - this._invalidate(); - break; - case 'wrapItemText': - this._toggleWrapItemText(args.value); - break; - case 'onGroupRendered': - this._createGroupRenderAction(); - break; - case 'width': - case 'height': - this.callBase(args); - this._scrollView.option(args.name, args.value); - this._scrollView.update(); - break; - case 'indicateLoading': - this._hideLoadingIfLoadIndicationOff(); - break; - case 'visible': - this.callBase(args); - this._scrollView.update(); - break; - case 'rtlEnabled': - this._initScrollView(); - this.callBase(args); - break; - case 'showChevronExpr': - case 'badgeExpr': - this._invalidate(); - break; - case '_swipeEnabled': - break; - case 'selectByClick': - break; - default: - this.callBase(args); - } - }, - - _extendActionArgs: function($itemElement) { - if(!this.option('grouped')) { - return this.callBase($itemElement); - } - - const $group = $itemElement.closest('.' + LIST_GROUP_CLASS); - const $item = $group.find('.' + LIST_ITEM_CLASS); - return extend(this.callBase($itemElement), { - itemIndex: { - group: $group.index(), - item: $item.index($itemElement) - } - }); - }, - - expandGroup: function(groupIndex) { - const deferred = new Deferred(); - const $group = this._getItemsContainer().find(`.${LIST_GROUP_CLASS}`).eq(groupIndex); - - this._collapseGroupHandler($group, false).done((function() { - deferred.resolveWith(this); - }).bind(this)); - - return deferred.promise(); - }, - - collapseGroup: function(groupIndex) { - const deferred = new Deferred(); - const $group = this._getItemsContainer().find(`.${LIST_GROUP_CLASS}`).eq(groupIndex); - - this._collapseGroupHandler($group, true).done((function() { - deferred.resolveWith(this); - }).bind(this)); - - return deferred; - }, + break; + case 'items': + this.callBase(args); + this._isDataSourceFirstLoadCompleted(false); + break; + case 'pullingDownText': + case 'pulledDownText': + case 'refreshingText': + case 'pageLoadingText': + case 'showScrollbar': + case 'bounceEnabled': + case 'scrollByContent': + case 'scrollByThumb': + case 'useNativeScrolling': + case 'scrollingEnabled': + case 'pullRefreshEnabled': + this._initScrollView(); + this._updateLoadingState(true); + break; + case 'nextButtonText': + case 'onItemSwipe': + case 'useInkRipple': + this._invalidate(); + break; + case 'onScroll': + case 'onPullRefresh': + case 'onPageLoading': + this._createScrollViewActions(); + break; + case 'grouped': + case 'collapsibleGroups': + case 'groupTemplate': + this._invalidate(); + break; + case 'wrapItemText': + this._toggleWrapItemText(args.value); + break; + case 'onGroupRendered': + this._createGroupRenderAction(); + break; + case 'width': + case 'height': + this.callBase(args); + this._scrollView.option(args.name, args.value); + this._scrollView.update(); + break; + case 'indicateLoading': + this._hideLoadingIfLoadIndicationOff(); + break; + case 'visible': + this.callBase(args); + this._scrollView.update(); + break; + case 'rtlEnabled': + this._initScrollView(); + this.callBase(args); + break; + case 'showChevronExpr': + case 'badgeExpr': + this._invalidate(); + break; + case '_swipeEnabled': + break; + case 'selectByClick': + break; + default: + this.callBase(args); + } + }, - updateDimensions: function() { - const that = this; - const deferred = new Deferred(); + _extendActionArgs($itemElement) { + if (!this.option('grouped')) { + return this.callBase($itemElement); + } - if(that._scrollView) { - that._scrollView.update().done(function() { - !that._scrollViewIsFull() && that._updateLoadingState(true); - deferred.resolveWith(that); - }); - } else { - deferred.resolveWith(that); - } + const $group = $itemElement.closest(`.${LIST_GROUP_CLASS}`); + const $item = $group.find(`.${LIST_ITEM_CLASS}`); + return extend(this.callBase($itemElement), { + itemIndex: { + group: $group.index(), + item: $item.index($itemElement), + }, + }); + }, + + expandGroup(groupIndex) { + const deferred = Deferred(); + const $group = this._getItemsContainer().find(`.${LIST_GROUP_CLASS}`).eq(groupIndex); + + this._collapseGroupHandler($group, false).done(() => { + deferred.resolveWith(this); + }); + + return deferred.promise(); + }, + + collapseGroup(groupIndex) { + const deferred = Deferred(); + const $group = this._getItemsContainer().find(`.${LIST_GROUP_CLASS}`).eq(groupIndex); + + this._collapseGroupHandler($group, true).done(() => { + deferred.resolveWith(this); + }); + + return deferred; + }, + + updateDimensions() { + const that = this; + const deferred = Deferred(); + + if (that._scrollView) { + that._scrollView.update().done(() => { + !that._scrollViewIsFull() && that._updateLoadingState(true); + deferred.resolveWith(that); + }); + } else { + deferred.resolveWith(that); + } - return deferred.promise(); - }, + return deferred.promise(); + }, - reload: function() { - this.callBase(); - this.scrollTo(0); - this._pullDownHandler(); - }, + reload() { + this.callBase(); + this.scrollTo(0); + this._pullDownHandler(); + }, - repaint: function() { - this.scrollTo(0); - this.callBase(); - }, + repaint() { + this.scrollTo(0); + this.callBase(); + }, - scrollTop: function() { - return this._scrollView.scrollOffset().top; - }, + scrollTop() { + return this._scrollView.scrollOffset().top; + }, - clientHeight: function() { - return this._scrollView.clientHeight(); - }, + clientHeight() { + return this._scrollView.clientHeight(); + }, - scrollHeight: function() { - return this._scrollView.scrollHeight(); - }, + scrollHeight() { + return this._scrollView.scrollHeight(); + }, - scrollBy: function(distance) { - this._scrollView.scrollBy(distance); - }, + scrollBy(distance) { + this._scrollView.scrollBy(distance); + }, - scrollTo: function(location) { - this._scrollView.scrollTo(location); - }, + scrollTo(location) { + this._scrollView.scrollTo(location); + }, - scrollToItem: function(itemElement) { - const $item = this._editStrategy.getItemElement(itemElement); + scrollToItem(itemElement) { + const $item = this._editStrategy.getItemElement(itemElement); - const item = $item?.get(0); - this._scrollView.scrollToElement(item, { bottom: getElementMargin(item, 'bottom') }); - }, + const item = $item?.get(0); + this._scrollView.scrollToElement(item, { bottom: getElementMargin(item, 'bottom') }); + }, - _dimensionChanged: function() { - this.updateDimensions(); - } + _dimensionChanged() { + this.updateDimensions(); + }, }).include(DataConverterMixin); ListBase.ItemClass = ListItem; function getScrollView() { - return _scrollView || ScrollView; + return _scrollView || ScrollView; } export function setScrollView(value) { - _scrollView = value; + _scrollView = value; } diff --git a/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.context.ts b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.context.ts index 83917311eb01..48ac21a6214d 100644 --- a/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.context.ts +++ b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.context.ts @@ -1,120 +1,121 @@ -import { getOuterHeight, getOuterWidth } from '../../core/utils/size'; -import $ from '../../core/renderer'; -import EditDecoratorMenuHelperMixin from './ui.list.edit.decorator_menu_helper'; -import messageLocalization from '../../localization/message'; -import { register as registerDecorator } from './ui.list.edit.decorator_registry'; -import EditDecorator from './ui.list.edit.decorator'; -import Overlay from '../overlay/ui.overlay'; -import { ListBase } from './ui.list.base'; +import $ from '@js/core/renderer'; +import { getOuterHeight, getOuterWidth } from '@js/core/utils/size'; +import messageLocalization from '@js/localization/message'; +import Overlay from '@js/ui/overlay/ui.overlay'; + +import { ListBase } from './m_list.base'; +import EditDecorator from './m_list.edit.decorator'; +import EditDecoratorMenuHelperMixin from './m_list.edit.decorator_menu_helper'; +import { register as registerDecorator } from './m_list.edit.decorator_registry'; const CONTEXTMENU_CLASS = 'dx-list-context-menu'; const CONTEXTMENU_MENUCONTENT_CLASS = 'dx-list-context-menucontent'; registerDecorator( - 'menu', - 'context', - EditDecorator.inherit({ - - _init: function() { - const $menu = $('
').addClass(CONTEXTMENU_CLASS); - this._list.$element().append($menu); - - this._menu = this._renderOverlay($menu); - }, - - _renderOverlay: function($element) { - return this._list._createComponent($element, Overlay, { - shading: false, - deferRendering: true, - hideOnParentScroll: true, - hideOnOutsideClick: function(e) { - return !$(e.target).closest('.' + CONTEXTMENU_CLASS).length; - }, - animation: { - show: { - type: 'slide', - duration: 300, - from: { - height: 0, - opacity: 1 - }, - to: { - height: (function() { return getOuterHeight(this._$menuList); }).bind(this), - opacity: 1 - } - }, - hide: { - type: 'slide', - duration: 0, - from: { - opacity: 1 - }, - to: { - opacity: 0 - } - } - }, - _ignoreFunctionValueDeprecation: true, - height: (function() { return this._$menuList ? getOuterHeight(this._$menuList) : 0; }).bind(this), - width: (function() { return getOuterWidth(this._list.$element()); }).bind(this), - onContentReady: this._renderMenuContent.bind(this) - }); - }, - - _renderMenuContent: function(e) { - const $overlayContent = e.component.$content(); - - const items = this._menuItems().slice(); - if(this._deleteEnabled()) { - items.push({ - text: messageLocalization.format('dxListEditDecorator-delete'), - action: this._deleteItem.bind(this) - }); - } - - this._$menuList = $('
'); - this._list._createComponent(this._$menuList, ListBase, { - items: items, - onItemClick: this._menuItemClickHandler.bind(this), - height: 'auto', - integrationOptions: {} - }); - - $overlayContent.addClass(CONTEXTMENU_MENUCONTENT_CLASS); - $overlayContent.append(this._$menuList); + 'menu', + 'context', + EditDecorator.inherit({ + + _init() { + const $menu = $('
').addClass(CONTEXTMENU_CLASS); + this._list.$element().append($menu); + + this._menu = this._renderOverlay($menu); + }, + + _renderOverlay($element) { + return this._list._createComponent($element, Overlay, { + shading: false, + deferRendering: true, + hideOnParentScroll: true, + hideOnOutsideClick(e) { + return !$(e.target).closest(`.${CONTEXTMENU_CLASS}`).length; }, - - _menuItemClickHandler: function(args) { - this._menu.hide(); - this._fireMenuAction(this._$itemWithMenu, args.itemData.action); + animation: { + show: { + type: 'slide', + duration: 300, + from: { + height: 0, + opacity: 1, + }, + to: { + height: function () { return getOuterHeight(this._$menuList); }.bind(this), + opacity: 1, + }, + }, + hide: { + type: 'slide', + duration: 0, + from: { + opacity: 1, + }, + to: { + opacity: 0, + }, + }, }, - - _deleteItem: function() { - this._list.deleteItem(this._$itemWithMenu); + _ignoreFunctionValueDeprecation: true, + height: function () { return this._$menuList ? getOuterHeight(this._$menuList) : 0; }.bind(this), + width: function () { return getOuterWidth(this._list.$element()); }.bind(this), + onContentReady: this._renderMenuContent.bind(this), + }); + }, + + _renderMenuContent(e) { + const $overlayContent = e.component.$content(); + + const items = this._menuItems().slice(); + if (this._deleteEnabled()) { + items.push({ + text: messageLocalization.format('dxListEditDecorator-delete'), + action: this._deleteItem.bind(this), + }); + } + + this._$menuList = $('
'); + this._list._createComponent(this._$menuList, ListBase, { + items, + onItemClick: this._menuItemClickHandler.bind(this), + height: 'auto', + integrationOptions: {}, + }); + + $overlayContent.addClass(CONTEXTMENU_MENUCONTENT_CLASS); + $overlayContent.append(this._$menuList); + }, + + _menuItemClickHandler(args) { + this._menu.hide(); + this._fireMenuAction(this._$itemWithMenu, args.itemData.action); + }, + + _deleteItem() { + this._list.deleteItem(this._$itemWithMenu); + }, + + handleContextMenu($itemElement) { + this._$itemWithMenu = $itemElement; + + this._menu.option({ + position: { + my: 'top', + at: 'bottom', + of: $itemElement, + collision: 'flip', }, + }); + this._menu.show(); - handleContextMenu: function($itemElement) { - this._$itemWithMenu = $itemElement; - - this._menu.option({ - position: { - my: 'top', - at: 'bottom', - of: $itemElement, - collision: 'flip' - } - }); - this._menu.show(); - - return true; - }, + return true; + }, - dispose: function() { - if(this._menu) { - this._menu.$element().remove(); - } + dispose() { + if (this._menu) { + this._menu.$element().remove(); + } - this.callBase.apply(this, arguments); - } - }).include(EditDecoratorMenuHelperMixin) + this.callBase.apply(this, arguments); + }, + }).include(EditDecoratorMenuHelperMixin), ); diff --git a/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.reorder.ts b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.reorder.ts index b549b06db1ec..979bf0e05366 100644 --- a/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.reorder.ts +++ b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.reorder.ts @@ -1,11 +1,12 @@ -import { setWidth, getWidth } from '../../core/utils/size'; -import $ from '../../core/renderer'; -import eventsEngine from '../../events/core/events_engine'; -import { extend } from '../../core/utils/extend'; -import { isMouseEvent } from '../../events/utils/index'; -import { register as registerDecorator } from './ui.list.edit.decorator_registry'; -import EditDecorator from './ui.list.edit.decorator'; -import Sortable from '../sortable'; +import $ from '@js/core/renderer'; +import { extend } from '@js/core/utils/extend'; +import { getWidth, setWidth } from '@js/core/utils/size'; +import eventsEngine from '@js/events/core/events_engine'; +import { isMouseEvent } from '@js/events/utils/index'; +import Sortable from '@js/ui/sortable'; + +import EditDecorator from './m_list.edit.decorator'; +import { register as registerDecorator } from './m_list.edit.decorator_registry'; const REORDER_HANDLE_CONTAINER_CLASS = 'dx-list-reorder-handle-container'; const REORDER_HANDLE_CLASS = 'dx-list-reorder-handle'; @@ -13,89 +14,87 @@ const REORDERING_ITEM_GHOST_CLASS = 'dx-list-item-ghost-reordering'; const STATE_HOVER_CLASS = 'dx-state-hover'; registerDecorator( - 'reorder', - 'default', - EditDecorator.inherit({ - - _init: function() { - const list = this._list; - - this._groupedEnabled = this._list.option('grouped'); - - this._lockedDrag = false; - - const filter = this._groupedEnabled ? - '> .dx-list-items > .dx-list-group > .dx-list-group-body > .dx-list-item' : - '> .dx-list-items > .dx-list-item'; - - this._sortable = list._createComponent(list._scrollView.content(), Sortable, extend({ - component: list, - contentTemplate: null, - allowReordering: false, - filter, - container: list.$element(), - dragDirection: list.option('itemDragging.group') ? 'both' : 'vertical', - handle: `.${REORDER_HANDLE_CLASS}`, - dragTemplate: this._dragTemplate, - onDragStart: this._dragStartHandler.bind(this), - onDragChange: this._dragChangeHandler.bind(this), - onReorder: this._reorderHandler.bind(this) - }, list.option('itemDragging'))); - }, - - afterRender: function() { - this._sortable.update(); - }, - - _dragTemplate: function(e) { - const result = $(e.itemElement) - .clone() - .addClass(REORDERING_ITEM_GHOST_CLASS) - .addClass(STATE_HOVER_CLASS); - setWidth(result, getWidth(e.itemElement)); - return result; - }, - - _dragStartHandler: function(e) { - if(this._lockedDrag) { - e.cancel = true; - return; - } - }, - - _dragChangeHandler: function(e) { - if(this._groupedEnabled && !this._sameParent(e.fromIndex, e.toIndex)) { - e.cancel = true; - return; - } - }, - - _sameParent: function(fromIndex, toIndex) { - const $dragging = this._list.getItemElementByFlatIndex(fromIndex); - const $over = this._list.getItemElementByFlatIndex(toIndex); - - return $over.parent().get(0) === $dragging.parent().get(0); - }, - - _reorderHandler: function(e) { - const $targetElement = this._list.getItemElementByFlatIndex(e.toIndex); - this._list.reorderItem($(e.itemElement), $targetElement); - }, - - afterBag: function(config) { - const $handle = $('
').addClass(REORDER_HANDLE_CLASS); - - eventsEngine.on($handle, 'dxpointerdown', (e) => { - this._lockedDrag = !isMouseEvent(e); - }); - eventsEngine.on($handle, 'dxhold', { timeout: 30 }, (e) => { - e.cancel = true; - this._lockedDrag = false; - }); - - config.$container - .addClass(REORDER_HANDLE_CONTAINER_CLASS) - .append($handle); - } - }) + 'reorder', + 'default', + EditDecorator.inherit({ + + _init() { + const list = this._list; + + this._groupedEnabled = this._list.option('grouped'); + + this._lockedDrag = false; + + const filter = this._groupedEnabled + ? '> .dx-list-items > .dx-list-group > .dx-list-group-body > .dx-list-item' + : '> .dx-list-items > .dx-list-item'; + + this._sortable = list._createComponent(list._scrollView.content(), Sortable, extend({ + component: list, + contentTemplate: null, + allowReordering: false, + filter, + container: list.$element(), + dragDirection: list.option('itemDragging.group') ? 'both' : 'vertical', + handle: `.${REORDER_HANDLE_CLASS}`, + dragTemplate: this._dragTemplate, + onDragStart: this._dragStartHandler.bind(this), + onDragChange: this._dragChangeHandler.bind(this), + onReorder: this._reorderHandler.bind(this), + }, list.option('itemDragging'))); + }, + + afterRender() { + this._sortable.update(); + }, + + _dragTemplate(e) { + const result = $(e.itemElement) + .clone() + .addClass(REORDERING_ITEM_GHOST_CLASS) + .addClass(STATE_HOVER_CLASS); + setWidth(result, getWidth(e.itemElement)); + return result; + }, + + _dragStartHandler(e) { + if (this._lockedDrag) { + e.cancel = true; + } + }, + + _dragChangeHandler(e) { + if (this._groupedEnabled && !this._sameParent(e.fromIndex, e.toIndex)) { + e.cancel = true; + } + }, + + _sameParent(fromIndex, toIndex) { + const $dragging = this._list.getItemElementByFlatIndex(fromIndex); + const $over = this._list.getItemElementByFlatIndex(toIndex); + + return $over.parent().get(0) === $dragging.parent().get(0); + }, + + _reorderHandler(e) { + const $targetElement = this._list.getItemElementByFlatIndex(e.toIndex); + this._list.reorderItem($(e.itemElement), $targetElement); + }, + + afterBag(config) { + const $handle = $('
').addClass(REORDER_HANDLE_CLASS); + + eventsEngine.on($handle, 'dxpointerdown', (e) => { + this._lockedDrag = !isMouseEvent(e); + }); + eventsEngine.on($handle, 'dxhold', { timeout: 30 }, (e) => { + e.cancel = true; + this._lockedDrag = false; + }); + + config.$container + .addClass(REORDER_HANDLE_CONTAINER_CLASS) + .append($handle); + }, + }), ); diff --git a/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.selection.ts b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.selection.ts index b1f266fe93cb..e0ecee841d7c 100644 --- a/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.selection.ts +++ b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.selection.ts @@ -1,15 +1,15 @@ -import $ from '../../core/renderer'; -import eventsEngine from '../../events/core/events_engine'; -import { name as clickEventName } from '../../events/click'; -import { extend } from '../../core/utils/extend'; -import errors from '../widget/ui.errors'; -import CheckBox from '../check_box'; -import RadioButton from '../radio_group/radio_button'; -import { addNamespace } from '../../events/utils/index'; -import { register as registerDecorator } from './ui.list.edit.decorator_registry'; -import EditDecorator from './ui.list.edit.decorator'; -import messageLocalization from '../../localization/message'; - +import $ from '@js/core/renderer'; +import { extend } from '@js/core/utils/extend'; +import { name as clickEventName } from '@js/events/click'; +import eventsEngine from '@js/events/core/events_engine'; +import { addNamespace } from '@js/events/utils/index'; +import messageLocalization from '@js/localization/message'; +import CheckBox from '@js/ui/check_box'; +import RadioButton from '@js/ui/radio_group/radio_button'; +import errors from '@js/ui/widget/ui.errors'; + +import EditDecorator from './m_list.edit.decorator'; +import { register as registerDecorator } from './m_list.edit.decorator_registry'; const SELECT_DECORATOR_ENABLED_CLASS = 'dx-list-select-decorator-enabled'; @@ -30,225 +30,226 @@ const CLICK_EVENT_NAME = addNamespace(clickEventName, 'dxListEditDecorator'); const DEFAULT_SELECT_ALL_ARIA_LABEL = messageLocalization.format('dxList-selectAll'); registerDecorator( - 'selection', - 'default', - EditDecorator.inherit({ - - _init: function() { - this.callBase.apply(this, arguments); - - const selectionMode = this._list.option('selectionMode'); - - this._singleStrategy = selectionMode === 'single'; - this._containerClass = this._singleStrategy ? SELECT_RADIO_BUTTON_CONTAINER_CLASS : SELECT_CHECKBOX_CONTAINER_CLASS; - this._controlClass = this._singleStrategy ? SELECT_RADIO_BUTTON_CLASS : SELECT_CHECKBOX_CLASS; - - this._controlWidget = this._singleStrategy ? RadioButton : CheckBox; - - this._list.$element().addClass(SELECT_DECORATOR_ENABLED_CLASS); - }, - - beforeBag: function(config) { - const $itemElement = config.$itemElement; - const $container = config.$container.addClass(this._containerClass); - - const $control = $('
') - .addClass(this._controlClass) - .appendTo($container); - new this._controlWidget($control, extend(this._commonOptions(), { - value: this._isSelected($itemElement), - elementAttr: { 'aria-label': 'Check State' }, - focusStateEnabled: false, - hoverStateEnabled: false, - onValueChanged: (function(e) { - e.event && this._list._saveSelectionChangeEvent(e.event); - this._processCheckedState($itemElement, e.value); - e.event && e.event.stopPropagation(); - }).bind(this) - })); - }, - - modifyElement: function(config) { - this.callBase.apply(this, arguments); - - const $itemElement = config.$itemElement; - const control = this._controlWidget.getInstance($itemElement.find('.' + this._controlClass)); - - eventsEngine.on($itemElement, 'stateChanged', (function(e, state) { - control.option('value', state); - }).bind(this)); - }, - - _updateSelectAllState: function() { - if(!this._$selectAll) { - return; - } - - this._selectAllCheckBox.option('value', this._list.isSelectAll()); - }, + 'selection', + 'default', + EditDecorator.inherit({ + + _init() { + this.callBase.apply(this, arguments); + + const selectionMode = this._list.option('selectionMode'); + + this._singleStrategy = selectionMode === 'single'; + this._containerClass = this._singleStrategy ? SELECT_RADIO_BUTTON_CONTAINER_CLASS : SELECT_CHECKBOX_CONTAINER_CLASS; + this._controlClass = this._singleStrategy ? SELECT_RADIO_BUTTON_CLASS : SELECT_CHECKBOX_CLASS; + + this._controlWidget = this._singleStrategy ? RadioButton : CheckBox; + + this._list.$element().addClass(SELECT_DECORATOR_ENABLED_CLASS); + }, + + beforeBag(config) { + const { $itemElement } = config; + const $container = config.$container.addClass(this._containerClass); + + const $control = $('
') + .addClass(this._controlClass) + .appendTo($container); + // eslint-disable-next-line no-new + new this._controlWidget($control, extend(this._commonOptions(), { + value: this._isSelected($itemElement), + elementAttr: { 'aria-label': 'Check State' }, + focusStateEnabled: false, + hoverStateEnabled: false, + onValueChanged: function (e) { + e.event && this._list._saveSelectionChangeEvent(e.event); + this._processCheckedState($itemElement, e.value); + e.event && e.event.stopPropagation(); + }.bind(this), + })); + }, + + modifyElement(config) { + this.callBase.apply(this, arguments); + + const { $itemElement } = config; + const control = this._controlWidget.getInstance($itemElement.find(`.${this._controlClass}`)); + + eventsEngine.on($itemElement, 'stateChanged', (e, state) => { + control.option('value', state); + }); + }, + + _updateSelectAllState() { + if (!this._$selectAll) { + return; + } + + this._selectAllCheckBox.option('value', this._list.isSelectAll()); + }, + + afterRender() { + if (this._list.option('selectionMode') !== 'all') { + return; + } + + if (!this._$selectAll) { + this._renderSelectAll(); + } else { + this._updateSelectAllState(); + } + }, + + handleKeyboardEvents(currentFocusedIndex, moveFocusUp) { + const moveFocusDown = !moveFocusUp; + const list = this._list; + const $selectAll = this._$selectAll; + const lastItemIndex = list._getLastItemIndex(); + const isFocusOutOfList = moveFocusUp && currentFocusedIndex === 0 + || moveFocusDown && currentFocusedIndex === lastItemIndex; + const hasSelectAllItem = !!$selectAll; + + if (hasSelectAllItem && isFocusOutOfList) { + list.option('focusedElement', $selectAll); + list.scrollToItem(list.option('focusedElement')); + + return true; + } + + return false; + }, + // @ts-expect-error + handleEnterPressing(e) { + if (this._$selectAll && this._$selectAll.hasClass(FOCUSED_STATE_CLASS)) { + e.target = this._$selectAll.get(0); + this._list._saveSelectionChangeEvent(e); + this._selectAllCheckBox.option('value', !this._selectAllCheckBox.option('value')); + return true; + } + }, + + _renderSelectAll() { + this._$selectAll = $('
').addClass(SELECT_DECORATOR_SELECT_ALL_CLASS); + + const downArrowHandler = this._list._supportedKeys().downArrow.bind(this._list); + + const selectAllCheckBoxElement = $('
') + .addClass(SELECT_DECORATOR_SELECT_ALL_CHECKBOX_CLASS) + .appendTo(this._$selectAll); + + this._selectAllCheckBox = this._list._createComponent( + selectAllCheckBoxElement, + CheckBox, + { + elementAttr: { 'aria-label': DEFAULT_SELECT_ALL_ARIA_LABEL }, + focusStateEnabled: false, + hoverStateEnabled: false, + }, + ); + + this._selectAllCheckBox.registerKeyHandler('downArrow', downArrowHandler); + + $('
').addClass(SELECT_DECORATOR_SELECT_ALL_LABEL_CLASS) + .text(this._list.option('selectAllText')) + .appendTo(this._$selectAll); + + this._list.itemsContainer().prepend(this._$selectAll); + + this._updateSelectAllState(); + this._updateSelectAllAriaLabel(); + this._attachSelectAllHandler(); + }, + + _attachSelectAllHandler() { + this._selectAllCheckBox.option('onValueChanged', this._selectAllHandler.bind(this)); + + eventsEngine.off(this._$selectAll, CLICK_EVENT_NAME); + eventsEngine.on(this._$selectAll, CLICK_EVENT_NAME, this._selectAllClickHandler.bind(this)); + }, + + _updateSelectAllAriaLabel() { + if (!this._$selectAll) { + return; + } + + const { value } = this._selectAllCheckBox.option(); + + const indeterminate = value === undefined; + + const checkedText = indeterminate ? 'half checked' : value ? 'checked' : 'not checked'; + const label = `${DEFAULT_SELECT_ALL_ARIA_LABEL}, ${checkedText}`; + + this._$selectAll.attr({ 'aria-label': label }); + }, + + _selectAllHandler(e) { + e.event && e.event.stopPropagation(); + e.event && this._list._saveSelectionChangeEvent(e.event); + + const { value } = this._selectAllCheckBox.option(); + + if (value) { + this._selectAllItems(); + } else if (value === false) { + this._unselectAllItems(); + } + + this._updateSelectAllAriaLabel(); + + this._list._createActionByOption('onSelectAllValueChanged')({ value }); + }, + + _checkSelectAllCapability() { + const list = this._list; + const dataController = list._dataController; + + if (list.option('selectAllMode') === 'allPages' && list.option('grouped') && !dataController.group()) { + errors.log('W1010'); + return false; + } + return true; + }, + + _selectAllItems() { + if (!this._checkSelectAllCapability()) return; + + this._list._selection.selectAll(this._list.option('selectAllMode') === 'page'); + }, + + _unselectAllItems() { + if (!this._checkSelectAllCapability()) return; + + this._list._selection.deselectAll(this._list.option('selectAllMode') === 'page'); + }, - afterRender: function() { - if(this._list.option('selectionMode') !== 'all') { - return; - } + _selectAllClickHandler(e) { + this._list._saveSelectionChangeEvent(e); + this._selectAllCheckBox.option('value', !this._selectAllCheckBox.option('value')); + }, - if(!this._$selectAll) { - this._renderSelectAll(); - } else { - this._updateSelectAllState(); - } - }, - - handleKeyboardEvents: function(currentFocusedIndex, moveFocusUp) { - const moveFocusDown = !moveFocusUp; - const list = this._list; - const $selectAll = this._$selectAll; - const lastItemIndex = list._getLastItemIndex(); - const isFocusOutOfList = moveFocusUp && currentFocusedIndex === 0 || - moveFocusDown && currentFocusedIndex === lastItemIndex; - const hasSelectAllItem = !!$selectAll; - - if(hasSelectAllItem && isFocusOutOfList) { - list.option('focusedElement', $selectAll); - list.scrollToItem(list.option('focusedElement')); - - return true; - } - - return false; - }, - - handleEnterPressing: function(e) { - if(this._$selectAll && this._$selectAll.hasClass(FOCUSED_STATE_CLASS)) { - e.target = this._$selectAll.get(0); - this._list._saveSelectionChangeEvent(e); - this._selectAllCheckBox.option('value', !this._selectAllCheckBox.option('value')); - return true; - } - }, + _isSelected($itemElement) { + return this._list.isItemSelected($itemElement); + }, - _renderSelectAll() { - this._$selectAll = $('
').addClass(SELECT_DECORATOR_SELECT_ALL_CLASS); - - const downArrowHandler = this._list._supportedKeys().downArrow.bind(this._list); - - const selectAllCheckBoxElement = $('
') - .addClass(SELECT_DECORATOR_SELECT_ALL_CHECKBOX_CLASS) - .appendTo(this._$selectAll); - - this._selectAllCheckBox = this._list._createComponent( - selectAllCheckBoxElement, - CheckBox, - { - elementAttr: { 'aria-label': DEFAULT_SELECT_ALL_ARIA_LABEL }, - focusStateEnabled: false, - hoverStateEnabled: false, - } - ); - - this._selectAllCheckBox.registerKeyHandler('downArrow', downArrowHandler); - - $('
').addClass(SELECT_DECORATOR_SELECT_ALL_LABEL_CLASS) - .text(this._list.option('selectAllText')) - .appendTo(this._$selectAll); - - this._list.itemsContainer().prepend(this._$selectAll); - - this._updateSelectAllState(); - this._updateSelectAllAriaLabel(); - this._attachSelectAllHandler(); - }, + _processCheckedState($itemElement, checked) { + if (checked) { + this._list.selectItem($itemElement); + } else { + this._list.unselectItem($itemElement); + } + }, - _attachSelectAllHandler: function() { - this._selectAllCheckBox.option('onValueChanged', this._selectAllHandler.bind(this)); - - eventsEngine.off(this._$selectAll, CLICK_EVENT_NAME); - eventsEngine.on(this._$selectAll, CLICK_EVENT_NAME, this._selectAllClickHandler.bind(this)); - }, - - _updateSelectAllAriaLabel() { - if(!this._$selectAll) { - return; - } - - const { value } = this._selectAllCheckBox.option(); - - const indeterminate = value === undefined; - - const checkedText = indeterminate ? 'half checked' : value ? 'checked' : 'not checked'; - const label = `${DEFAULT_SELECT_ALL_ARIA_LABEL}, ${checkedText}`; - - this._$selectAll.attr({ 'aria-label': label }); - }, - - _selectAllHandler: function(e) { - e.event && e.event.stopPropagation(); - e.event && this._list._saveSelectionChangeEvent(e.event); - - const { value } = this._selectAllCheckBox.option(); - - if(value) { - this._selectAllItems(); - } else if(value === false) { - this._unselectAllItems(); - } - - this._updateSelectAllAriaLabel(); - - this._list._createActionByOption('onSelectAllValueChanged')({ value }); - }, - - _checkSelectAllCapability: function() { - const list = this._list; - const dataController = list._dataController; - - if(list.option('selectAllMode') === 'allPages' && list.option('grouped') && !dataController.group()) { - errors.log('W1010'); - return false; - } - return true; - }, - - _selectAllItems: function() { - if(!this._checkSelectAllCapability()) return; - - this._list._selection.selectAll(this._list.option('selectAllMode') === 'page'); - }, - - _unselectAllItems: function() { - if(!this._checkSelectAllCapability()) return; - - this._list._selection.deselectAll(this._list.option('selectAllMode') === 'page'); - }, - - _selectAllClickHandler: function(e) { - this._list._saveSelectionChangeEvent(e); - this._selectAllCheckBox.option('value', !this._selectAllCheckBox.option('value')); - }, - - _isSelected: function($itemElement) { - return this._list.isItemSelected($itemElement); - }, - - _processCheckedState: function($itemElement, checked) { - if(checked) { - this._list.selectItem($itemElement); - } else { - this._list.unselectItem($itemElement); - } - }, - - dispose: function() { - this._disposeSelectAll(); - this._list.$element().removeClass(SELECT_DECORATOR_ENABLED_CLASS); - this.callBase.apply(this, arguments); - }, + dispose() { + this._disposeSelectAll(); + this._list.$element().removeClass(SELECT_DECORATOR_ENABLED_CLASS); + this.callBase.apply(this, arguments); + }, - _disposeSelectAll: function() { - if(this._$selectAll) { - this._$selectAll.remove(); - this._$selectAll = null; - } - } - }) + _disposeSelectAll() { + if (this._$selectAll) { + this._$selectAll.remove(); + this._$selectAll = null; + } + }, + }), ); diff --git a/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.static.ts b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.static.ts index 5152a019ff8c..87dac3abcfa0 100644 --- a/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.static.ts +++ b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.static.ts @@ -1,43 +1,44 @@ -import $ from '../../core/renderer'; -import Button from '../button'; -import { register as registerDecorator } from './ui.list.edit.decorator_registry'; -import EditDecorator from './ui.list.edit.decorator'; +import $ from '@js/core/renderer'; +import Button from '@js/ui/button'; + +import EditDecorator from './m_list.edit.decorator'; +import { register as registerDecorator } from './m_list.edit.decorator_registry'; const STATIC_DELETE_BUTTON_CONTAINER_CLASS = 'dx-list-static-delete-button-container'; const STATIC_DELETE_BUTTON_CLASS = 'dx-list-static-delete-button'; registerDecorator( - 'delete', - 'static', - EditDecorator.inherit({ - afterBag: function(config) { - const $itemElement = config.$itemElement; - const $container = config.$container; - - const $button = $('
').addClass(STATIC_DELETE_BUTTON_CLASS); - - this._list._createComponent($button, Button, { - icon: 'remove', - onClick: (function(args) { - args.event.stopPropagation(); - this._deleteItem($itemElement); - }).bind(this), - integrationOptions: {} - }); - - $container - .addClass(STATIC_DELETE_BUTTON_CONTAINER_CLASS) - .append($button); - - this._updateButtonAttributes($button); - }, - - _deleteItem: function($itemElement) { - if($itemElement.is('.dx-state-disabled, .dx-state-disabled *')) { - return; - } - - this._list.deleteItem($itemElement); - } - }) + 'delete', + 'static', + EditDecorator.inherit({ + afterBag(config) { + const { $itemElement } = config; + const { $container } = config; + + const $button = $('
').addClass(STATIC_DELETE_BUTTON_CLASS); + + this._list._createComponent($button, Button, { + icon: 'remove', + onClick: function (args) { + args.event.stopPropagation(); + this._deleteItem($itemElement); + }.bind(this), + integrationOptions: {}, + }); + + $container + .addClass(STATIC_DELETE_BUTTON_CONTAINER_CLASS) + .append($button); + + this._updateButtonAttributes($button); + }, + + _deleteItem($itemElement) { + if ($itemElement.is('.dx-state-disabled, .dx-state-disabled *')) { + return; + } + + this._list.deleteItem($itemElement); + }, + }), ); diff --git a/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.swipe.ts b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.swipe.ts index cda7123eff11..21211b6ce514 100644 --- a/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.swipe.ts +++ b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.swipe.ts @@ -1,59 +1,59 @@ -import { getWidth } from '../../core/utils/size'; -import { move } from '../../animation/translator'; -import fx from '../../animation/fx'; -import { register as registerDecorator } from './ui.list.edit.decorator_registry'; -import EditDecorator from './ui.list.edit.decorator'; -import { Deferred } from '../../core/utils/deferred'; +import fx from '@js/animation/fx'; +import { move } from '@js/animation/translator'; +import { Deferred } from '@js/core/utils/deferred'; +import { getWidth } from '@js/core/utils/size'; +import EditDecorator from './m_list.edit.decorator'; +import { register as registerDecorator } from './m_list.edit.decorator_registry'; registerDecorator( - 'delete', - 'swipe', - EditDecorator.inherit({ - - _shouldHandleSwipe: true, - - _renderItemPosition: function($itemElement, offset, animate) { - const deferred = new Deferred(); - const itemOffset = offset * this._itemElementWidth; - - if(animate) { - fx.animate($itemElement, { - to: { left: itemOffset }, - type: 'slide', - complete: function() { - deferred.resolve($itemElement, offset); - } - }); - } else { - move($itemElement, { left: itemOffset }); - deferred.resolve(); - } - - return deferred.promise(); - }, - - _swipeStartHandler: function($itemElement) { - this._itemElementWidth = getWidth($itemElement); - return true; - }, - - _swipeUpdateHandler: function($itemElement, args) { - this._renderItemPosition($itemElement, args.offset); - return true; - }, - - _swipeEndHandler: function($itemElement, args) { - const offset = args.targetOffset; - - this._renderItemPosition($itemElement, offset, true).done((function($itemElement, offset) { - if(Math.abs(offset)) { - this._list.deleteItem($itemElement).fail((function() { - this._renderItemPosition($itemElement, 0, true); - }).bind(this)); - } - }).bind(this)); - return true; + 'delete', + 'swipe', + EditDecorator.inherit({ + + _shouldHandleSwipe: true, + + _renderItemPosition($itemElement, offset, animate) { + const deferred = Deferred(); + const itemOffset = offset * this._itemElementWidth; + + if (animate) { + fx.animate($itemElement, { + to: { left: itemOffset }, + type: 'slide', + complete() { + deferred.resolve($itemElement, offset); + }, + }); + } else { + move($itemElement, { left: itemOffset }); + deferred.resolve(); + } + + return deferred.promise(); + }, + + _swipeStartHandler($itemElement) { + this._itemElementWidth = getWidth($itemElement); + return true; + }, + + _swipeUpdateHandler($itemElement, args) { + this._renderItemPosition($itemElement, args.offset); + return true; + }, + + _swipeEndHandler($itemElement, args) { + const offset = args.targetOffset; + + this._renderItemPosition($itemElement, offset, true).done(($itemElement, offset) => { + if (Math.abs(offset)) { + this._list.deleteItem($itemElement).fail(() => { + this._renderItemPosition($itemElement, 0, true); + }); } - }) + }); + return true; + }, + }), ); diff --git a/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.switchable.button.ts b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.switchable.button.ts index a2be8b5d5199..f0601fedd0df 100644 --- a/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.switchable.button.ts +++ b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.switchable.button.ts @@ -1,11 +1,12 @@ -import { getWidth, getOuterWidth } from '../../core/utils/size'; -import $ from '../../core/renderer'; -import fx from '../../animation/fx'; -import Button from '../button'; -import messageLocalization from '../../localization/message'; -import { register as registerDecorator } from './ui.list.edit.decorator_registry'; -import SwitchableEditDecorator from './ui.list.edit.decorator.switchable'; -import { isMaterialBased } from '../themes'; +import fx from '@js/animation/fx'; +import $ from '@js/core/renderer'; +import { getOuterWidth, getWidth } from '@js/core/utils/size'; +import messageLocalization from '@js/localization/message'; +import Button from '@js/ui/button'; +import { isMaterialBased } from '@js/ui/themes'; + +import SwitchableEditDecorator from './m_list.edit.decorator.switchable'; +import { register as registerDecorator } from './m_list.edit.decorator_registry'; const SWITCHABLE_DELETE_BUTTON_CONTAINER_CLASS = 'dx-list-switchable-delete-button-container'; const SWITCHABLE_DELETE_BUTTON_WRAPPER_CLASS = 'dx-list-switchable-delete-button-wrapper'; @@ -16,145 +17,150 @@ const SWITCHABLE_DELETE_BUTTON_ANIMATION_DURATION = 200; const SwitchableButtonEditDecorator = SwitchableEditDecorator.inherit({ - _init: function() { - this.callBase.apply(this, arguments); - - const $buttonContainer = $('
').addClass(SWITCHABLE_DELETE_BUTTON_CONTAINER_CLASS); - const $buttonWrapper = $('
').addClass(SWITCHABLE_DELETE_BUTTON_WRAPPER_CLASS); - const $buttonInnerWrapper = $('
').addClass(SWITCHABLE_DELETE_BUTTON_INNER_WRAPPER_CLASS); - const $button = $('
').addClass(SWITCHABLE_DELETE_BUTTON_CLASS); - - this._list._createComponent($button, Button, { - text: messageLocalization.format('dxListEditDecorator-delete'), - type: 'danger', - stylingMode: isMaterialBased() ? 'text' : 'contained', - onClick: (function(e) { - this._deleteItem(); - e.event.stopPropagation(); - }).bind(this), - integrationOptions: {} - }); - - $buttonContainer.append($buttonWrapper); - $buttonWrapper.append($buttonInnerWrapper); - $buttonInnerWrapper.append($button); - - this._$buttonContainer = $buttonContainer; - - this._updateButtonAttributes($button); - }, - - _enablePositioning: function($itemElement) { - this.callBase.apply(this, arguments); - - fx.stop(this._$buttonContainer, true); - this._$buttonContainer.appendTo($itemElement); - }, - - _disablePositioning: function() { - this.callBase.apply(this, arguments); - - this._$buttonContainer.detach(); - }, - - _animatePrepareDeleteReady: function() { - const rtl = this._isRtlEnabled(); - const listWidth = getWidth(this._list.$element()); - const buttonWidth = this._buttonWidth(); - const fromValue = rtl ? listWidth : -buttonWidth; - const toValue = rtl ? listWidth - buttonWidth : 0; - - return fx.animate(this._$buttonContainer, { - type: 'custom', - duration: SWITCHABLE_DELETE_BUTTON_ANIMATION_DURATION, - from: { right: fromValue }, - to: { right: toValue } - }); - }, - - _animateForgetDeleteReady: function() { - const rtl = this._isRtlEnabled(); - const listWidth = getWidth(this._list.$element()); - const buttonWidth = this._buttonWidth(); - const fromValue = rtl ? listWidth - buttonWidth : 0; - const toValue = rtl ? listWidth : -buttonWidth; - - return fx.animate(this._$buttonContainer, { - type: 'custom', - duration: SWITCHABLE_DELETE_BUTTON_ANIMATION_DURATION, - from: { right: fromValue }, - to: { right: toValue } - }); - }, - - _buttonWidth: function() { - if(!this._buttonContainerWidth) { - this._buttonContainerWidth = getOuterWidth(this._$buttonContainer); - } - return this._buttonContainerWidth; - }, - - dispose: function() { - if(this._$buttonContainer) { - this._$buttonContainer.remove(); - } + _init() { + this.callBase.apply(this, arguments); + + const $buttonContainer = $('
').addClass(SWITCHABLE_DELETE_BUTTON_CONTAINER_CLASS); + const $buttonWrapper = $('
').addClass(SWITCHABLE_DELETE_BUTTON_WRAPPER_CLASS); + const $buttonInnerWrapper = $('
').addClass(SWITCHABLE_DELETE_BUTTON_INNER_WRAPPER_CLASS); + const $button = $('
').addClass(SWITCHABLE_DELETE_BUTTON_CLASS); + + this._list._createComponent($button, Button, { + text: messageLocalization.format('dxListEditDecorator-delete'), + type: 'danger', + // @ts-expect-error + stylingMode: isMaterialBased() ? 'text' : 'contained', + onClick: function (e) { + this._deleteItem(); + e.event.stopPropagation(); + }.bind(this), + integrationOptions: {}, + }); + + $buttonContainer.append($buttonWrapper); + $buttonWrapper.append($buttonInnerWrapper); + $buttonInnerWrapper.append($button); + + this._$buttonContainer = $buttonContainer; + + this._updateButtonAttributes($button); + }, + + _enablePositioning($itemElement) { + this.callBase.apply(this, arguments); + + fx.stop(this._$buttonContainer, true); + this._$buttonContainer.appendTo($itemElement); + }, + + _disablePositioning() { + this.callBase.apply(this, arguments); + + this._$buttonContainer.detach(); + }, + + _animatePrepareDeleteReady() { + const rtl = this._isRtlEnabled(); + const listWidth = getWidth(this._list.$element()); + const buttonWidth = this._buttonWidth(); + const fromValue = rtl ? listWidth : -buttonWidth; + const toValue = rtl ? listWidth - buttonWidth : 0; + + return fx.animate(this._$buttonContainer, { + // @ts-expect-error + type: 'custom', + duration: SWITCHABLE_DELETE_BUTTON_ANIMATION_DURATION, + // @ts-expect-error + from: { right: fromValue }, + // @ts-expect-error + to: { right: toValue }, + }); + }, + + _animateForgetDeleteReady() { + const rtl = this._isRtlEnabled(); + const listWidth = getWidth(this._list.$element()); + const buttonWidth = this._buttonWidth(); + const fromValue = rtl ? listWidth - buttonWidth : 0; + const toValue = rtl ? listWidth : -buttonWidth; + + return fx.animate(this._$buttonContainer, { + // @ts-expect-error + type: 'custom', + duration: SWITCHABLE_DELETE_BUTTON_ANIMATION_DURATION, + // @ts-expect-error + from: { right: fromValue }, + // @ts-expect-error + to: { right: toValue }, + }); + }, + + _buttonWidth() { + if (!this._buttonContainerWidth) { + this._buttonContainerWidth = getOuterWidth(this._$buttonContainer); + } + return this._buttonContainerWidth; + }, - this.callBase.apply(this, arguments); + dispose() { + if (this._$buttonContainer) { + this._$buttonContainer.remove(); } -}); + this.callBase.apply(this, arguments); + }, +}); const TOGGLE_DELETE_SWITCH_CONTAINER_CLASS = 'dx-list-toggle-delete-switch-container'; const TOGGLE_DELETE_SWITCH_CLASS = 'dx-list-toggle-delete-switch'; registerDecorator( - 'delete', - 'toggle', - SwitchableButtonEditDecorator.inherit({ - - beforeBag: function(config) { - const $itemElement = config.$itemElement; - const $container = config.$container; - - const $toggle = $('
').addClass(TOGGLE_DELETE_SWITCH_CLASS); - this._list._createComponent($toggle, Button, { - icon: 'toggle-delete', - onClick: (function(e) { - fx.stop(this._$buttonContainer, false); - this._toggleDeleteReady($itemElement); - e.event.stopPropagation(); - }).bind(this), - integrationOptions: {} - }); - - $container.addClass(TOGGLE_DELETE_SWITCH_CONTAINER_CLASS); - $container.append($toggle); - - this._updateButtonAttributes($toggle); - } - - }) -); + 'delete', + 'toggle', + SwitchableButtonEditDecorator.inherit({ + + beforeBag(config) { + const { $itemElement } = config; + const { $container } = config; + + const $toggle = $('
').addClass(TOGGLE_DELETE_SWITCH_CLASS); + this._list._createComponent($toggle, Button, { + icon: 'toggle-delete', + onClick: function (e) { + fx.stop(this._$buttonContainer, false); + this._toggleDeleteReady($itemElement); + e.event.stopPropagation(); + }.bind(this), + integrationOptions: {}, + }); + + $container.addClass(TOGGLE_DELETE_SWITCH_CONTAINER_CLASS); + $container.append($toggle); + + this._updateButtonAttributes($toggle); + }, + }), +); registerDecorator( - 'delete', - 'slideButton', - SwitchableButtonEditDecorator.inherit({ + 'delete', + 'slideButton', + SwitchableButtonEditDecorator.inherit({ - _shouldHandleSwipe: true, + _shouldHandleSwipe: true, - _swipeEndHandler: function($itemElement, args) { - if(args.targetOffset !== 0) { - fx.stop(this._$buttonContainer, false); - this._toggleDeleteReady($itemElement); - } + _swipeEndHandler($itemElement, args) { + if (args.targetOffset !== 0) { + fx.stop(this._$buttonContainer, false); + this._toggleDeleteReady($itemElement); + } - return true; - } + return true; + }, - }) + }), ); export default SwitchableButtonEditDecorator; diff --git a/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.switchable.slide.ts b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.switchable.slide.ts index 5483e7e00d46..06bf94d30bf7 100644 --- a/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.switchable.slide.ts +++ b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.switchable.slide.ts @@ -1,18 +1,19 @@ -import { getOuterWidth, setWidth } from '../../core/utils/size'; -import $ from '../../core/renderer'; -import eventsEngine from '../../events/core/events_engine'; -import { noop } from '../../core/utils/common'; -import { name as clickEventName } from '../../events/click'; -import messageLocalization from '../../localization/message'; -import { locate, move } from '../../animation/translator'; -import { addNamespace } from '../../events/utils/index'; -import { active } from '../../events/core/emitter.feedback'; -import EditDecoratorMenuHelperMixin from './ui.list.edit.decorator_menu_helper'; -import { register as registerDecorator } from './ui.list.edit.decorator_registry'; -import SwitchableEditDecorator from './ui.list.edit.decorator.switchable'; -import fx from '../../animation/fx'; -import { isMaterialBased } from '../themes'; -import ActionSheet from '../action_sheet'; +import fx from '@js/animation/fx'; +import { locate, move } from '@js/animation/translator'; +import $ from '@js/core/renderer'; +import { noop } from '@js/core/utils/common'; +import { getOuterWidth, setWidth } from '@js/core/utils/size'; +import { name as clickEventName } from '@js/events/click'; +import { active } from '@js/events/core/emitter.feedback'; +import eventsEngine from '@js/events/core/events_engine'; +import { addNamespace } from '@js/events/utils/index'; +import messageLocalization from '@js/localization/message'; +import ActionSheet from '@js/ui/action_sheet'; +import { isMaterialBased } from '@js/ui/themes'; + +import SwitchableEditDecorator from './m_list.edit.decorator.switchable'; +import EditDecoratorMenuHelperMixin from './m_list.edit.decorator_menu_helper'; +import { register as registerDecorator } from './m_list.edit.decorator_registry'; const LIST_EDIT_DECORATOR = 'dxListEditDecorator'; const CLICK_EVENT_NAME = addNamespace(clickEventName, LIST_EDIT_DECORATOR); @@ -33,270 +34,272 @@ const SLIDE_MENU_BUTTON_DELETE_CLASS = 'dx-list-slide-menu-button-delete'; const SLIDE_MENU_ANIMATION_DURATION = 400; const SLIDE_MENU_ANIMATION_EASING = 'cubic-bezier(0.075, 0.82, 0.165, 1)'; - registerDecorator( - 'menu', - 'slide', - SwitchableEditDecorator.inherit({ - - _shouldHandleSwipe: true, - - _init: function() { - this.callBase.apply(this, arguments); - - this._$buttonsContainer = $('
').addClass(SLIDE_MENU_BUTTONS_CONTAINER_CLASS); - eventsEngine.on(this._$buttonsContainer, ACTIVE_EVENT_NAME, noop); - - this._$buttons = $('
') - .addClass(SLIDE_MENU_BUTTONS_CLASS) - .appendTo(this._$buttonsContainer); - - this._renderMenu(); - this._renderDeleteButton(); - }, - - _renderMenu: function() { - if(!this._menuEnabled()) { - return; - } - - const menuItems = this._menuItems(); - - if(menuItems.length === 1) { - const menuItem = menuItems[0]; - - this._renderMenuButton(menuItem.text, (function(e) { - e.stopPropagation(); - this._fireAction(menuItem); - }).bind(this)); - } else { - const $menu = $('
').addClass(SLIDE_MENU_CLASS); - this._menu = this._list._createComponent($menu, ActionSheet, { - showTitle: false, - items: menuItems, - onItemClick: (function(args) { - this._fireAction(args.itemData); - }).bind(this), - integrationOptions: {} - }); - $menu.appendTo(this._list.$element()); - - const $menuButton = this._renderMenuButton(messageLocalization.format('dxListEditDecorator-more'), (function(e) { - e.stopPropagation(); - this._menu.show(); - }).bind(this)); - this._menu.option('target', $menuButton); - } - }, - - _renderMenuButton: function(text, action) { - const $menuButton = $('
') - .addClass(SLIDE_MENU_BUTTON_CLASS) - .addClass(SLIDE_MENU_BUTTON_MENU_CLASS) - .text(text); - - this._$buttons.append($menuButton); - eventsEngine.on($menuButton, CLICK_EVENT_NAME, action); - - return $menuButton; - }, - - _renderDeleteButton: function() { - if(!this._deleteEnabled()) { - return; - } - - const $deleteButton = $('
') - .addClass(SLIDE_MENU_BUTTON_CLASS) - .addClass(SLIDE_MENU_BUTTON_DELETE_CLASS) - .text(isMaterialBased() - ? '' - : messageLocalization.format('dxListEditDecorator-delete')); - - eventsEngine.on($deleteButton, CLICK_EVENT_NAME, (function(e) { - e.stopPropagation(); - this._deleteItem(); - }).bind(this)); - - this._$buttons.append($deleteButton); - }, - - _fireAction: function(menuItem) { - this._fireMenuAction($(this._cachedNode), menuItem.action); - this._cancelDeleteReadyItem(); - }, - - modifyElement: function(config) { - this.callBase.apply(this, arguments); - - const $itemElement = config.$itemElement; - - $itemElement - .addClass(SLIDE_MENU_WRAPPER_CLASS); - - const $slideMenuContent = $('
') - .addClass(SLIDE_MENU_CONTENT_CLASS); - - $itemElement.wrapInner($slideMenuContent); - }, - - _getDeleteButtonContainer: function() { - return this._$buttonsContainer; - }, - - handleClick: function(_, e) { - if($(e.target).closest('.' + SLIDE_MENU_CONTENT_CLASS).length) { - return this.callBase.apply(this, arguments); - } - return false; - }, - - _swipeStartHandler: function($itemElement) { - this._enablePositioning($itemElement); - this._cacheItemData($itemElement); - this._setPositions(this._getPositions(0)); - }, - - _swipeUpdateHandler: function($itemElement, args) { - const rtl = this._isRtlEnabled(); - const signCorrection = rtl ? -1 : 1; - const isItemReadyToDelete = this._isReadyToDelete($itemElement); - const moveJustStarted = this._getCurrentPositions().content === this._getStartPositions().content; - - if(moveJustStarted && !isItemReadyToDelete && args.offset * signCorrection > 0) { - args.cancel = true; - return; - } - - const offset = this._cachedItemWidth * args.offset; - const startOffset = isItemReadyToDelete ? -this._cachedButtonWidth * signCorrection : 0; - const correctedOffset = (offset + startOffset) * signCorrection; - const percent = correctedOffset < 0 ? Math.abs((offset + startOffset) / this._cachedButtonWidth) : 0; - - this._setPositions(this._getPositions(percent)); - return true; - }, - - _getStartPositions: function() { - const rtl = this._isRtlEnabled(); - const signCorrection = rtl ? -1 : 1; - - return { - content: 0, - buttonsContainer: (rtl ? -this._cachedButtonWidth : this._cachedItemWidth), - buttons: -this._cachedButtonWidth * signCorrection - }; - }, - - _getPositions: function(percent) { - const rtl = this._isRtlEnabled(); - const signCorrection = rtl ? -1 : 1; - const startPositions = this._getStartPositions(); - - return { - content: startPositions.content - percent * this._cachedButtonWidth * signCorrection, - buttonsContainer: startPositions.buttonsContainer - Math.min(percent, 1) * this._cachedButtonWidth * signCorrection, - buttons: startPositions.buttons + Math.min(percent, 1) * this._cachedButtonWidth * signCorrection - }; - }, - - _getCurrentPositions: function() { - return { - content: locate(this._$cachedContent).left, - buttonsContainer: locate(this._$buttonsContainer).left, - buttons: locate(this._$buttons).left - }; - }, - - _setPositions: function(positions) { - move(this._$cachedContent, { left: positions.content }); - move(this._$buttonsContainer, { left: positions.buttonsContainer }); - move(this._$buttons, { left: positions.buttons }); - }, - - _cacheItemData: function($itemElement) { - if($itemElement[0] === this._cachedNode) { - return; - } - - this._$cachedContent = $itemElement.find('.' + SLIDE_MENU_CONTENT_CLASS); - this._cachedItemWidth = getOuterWidth($itemElement); - this._cachedButtonWidth = this._cachedButtonWidth || getOuterWidth(this._$buttons); - setWidth(this._$buttonsContainer, this._cachedButtonWidth); - - if(this._$cachedContent.length) { - this._cachedNode = $itemElement[0]; - } - }, - - _minButtonContainerLeftOffset: function() { - return this._cachedItemWidth - this._cachedButtonWidth; - }, - - _swipeEndHandler: function($itemElement, args) { - this._cacheItemData($itemElement); - - const signCorrection = this._isRtlEnabled() ? 1 : -1; - const offset = this._cachedItemWidth * args.offset; - const endedAtReadyToDelete = !this._isReadyToDelete($itemElement) && (offset * signCorrection > this._cachedButtonWidth * 0.2); - const readyToDelete = args.targetOffset === signCorrection && endedAtReadyToDelete; - - this._toggleDeleteReady($itemElement, readyToDelete); - return true; - }, - - _enablePositioning: function($itemElement) { - fx.stop(this._$cachedContent, true); - - this.callBase.apply(this, arguments); - - this._$buttonsContainer.appendTo($itemElement); - }, - - _disablePositioning: function() { - this.callBase.apply(this, arguments); - - this._$buttonsContainer.detach(); - }, - - _animatePrepareDeleteReady: function() { - return this._animateToPositions(this._getPositions(1)); - }, - - _animateForgetDeleteReady: function($itemElement) { - this._cacheItemData($itemElement); - - return this._animateToPositions(this._getPositions(0)); - }, - - _animateToPositions: function(positions) { - const that = this; - - const currentPosition = this._getCurrentPositions(); - const durationTimePart = Math.min(Math.abs(currentPosition.content - positions.content) / this._cachedButtonWidth, 1); - - return fx.animate(this._$cachedContent, { - from: currentPosition, - to: positions, - easing: SLIDE_MENU_ANIMATION_EASING, - duration: SLIDE_MENU_ANIMATION_DURATION * durationTimePart, - strategy: 'frame', - draw: function(positions) { - that._setPositions(positions); - } - }); + 'menu', + 'slide', + SwitchableEditDecorator.inherit({ + + _shouldHandleSwipe: true, + + _init() { + this.callBase.apply(this, arguments); + + this._$buttonsContainer = $('
').addClass(SLIDE_MENU_BUTTONS_CONTAINER_CLASS); + eventsEngine.on(this._$buttonsContainer, ACTIVE_EVENT_NAME, noop); + + this._$buttons = $('
') + .addClass(SLIDE_MENU_BUTTONS_CLASS) + .appendTo(this._$buttonsContainer); + + this._renderMenu(); + this._renderDeleteButton(); + }, + + _renderMenu() { + if (!this._menuEnabled()) { + return; + } + + const menuItems = this._menuItems(); + + if (menuItems.length === 1) { + const menuItem = menuItems[0]; + + this._renderMenuButton(menuItem.text, (e) => { + e.stopPropagation(); + this._fireAction(menuItem); + }); + } else { + const $menu = $('
').addClass(SLIDE_MENU_CLASS); + this._menu = this._list._createComponent($menu, ActionSheet, { + showTitle: false, + items: menuItems, + onItemClick: function (args) { + this._fireAction(args.itemData); + }.bind(this), + integrationOptions: {}, + }); + $menu.appendTo(this._list.$element()); + + const $menuButton = this._renderMenuButton(messageLocalization.format('dxListEditDecorator-more'), (e) => { + e.stopPropagation(); + this._menu.show(); + }); + this._menu.option('target', $menuButton); + } + }, + + _renderMenuButton(text, action) { + const $menuButton = $('
') + .addClass(SLIDE_MENU_BUTTON_CLASS) + .addClass(SLIDE_MENU_BUTTON_MENU_CLASS) + .text(text); + + this._$buttons.append($menuButton); + eventsEngine.on($menuButton, CLICK_EVENT_NAME, action); + + return $menuButton; + }, + + _renderDeleteButton() { + if (!this._deleteEnabled()) { + return; + } + + const $deleteButton = $('
') + .addClass(SLIDE_MENU_BUTTON_CLASS) + .addClass(SLIDE_MENU_BUTTON_DELETE_CLASS) + // @ts-expect-error + .text(isMaterialBased() + ? '' + : messageLocalization.format('dxListEditDecorator-delete')); + + eventsEngine.on($deleteButton, CLICK_EVENT_NAME, (e) => { + e.stopPropagation(); + this._deleteItem(); + }); + + this._$buttons.append($deleteButton); + }, + + _fireAction(menuItem) { + this._fireMenuAction($(this._cachedNode), menuItem.action); + this._cancelDeleteReadyItem(); + }, + + modifyElement(config) { + this.callBase.apply(this, arguments); + + const { $itemElement } = config; + + $itemElement + .addClass(SLIDE_MENU_WRAPPER_CLASS); + + const $slideMenuContent = $('
') + .addClass(SLIDE_MENU_CONTENT_CLASS); + + $itemElement.wrapInner($slideMenuContent); + }, + + _getDeleteButtonContainer() { + return this._$buttonsContainer; + }, + + handleClick(_, e) { + if ($(e.target).closest(`.${SLIDE_MENU_CONTENT_CLASS}`).length) { + return this.callBase.apply(this, arguments); + } + return false; + }, + + _swipeStartHandler($itemElement) { + this._enablePositioning($itemElement); + this._cacheItemData($itemElement); + this._setPositions(this._getPositions(0)); + }, + + _swipeUpdateHandler($itemElement, args) { + const rtl = this._isRtlEnabled(); + const signCorrection = rtl ? -1 : 1; + const isItemReadyToDelete = this._isReadyToDelete($itemElement); + const moveJustStarted = this._getCurrentPositions().content === this._getStartPositions().content; + + if (moveJustStarted && !isItemReadyToDelete && args.offset * signCorrection > 0) { + args.cancel = true; + return; + } + + const offset = this._cachedItemWidth * args.offset; + const startOffset = isItemReadyToDelete ? -this._cachedButtonWidth * signCorrection : 0; + const correctedOffset = (offset + startOffset) * signCorrection; + const percent = correctedOffset < 0 ? Math.abs((offset + startOffset) / this._cachedButtonWidth) : 0; + + this._setPositions(this._getPositions(percent)); + return true; + }, + + _getStartPositions() { + const rtl = this._isRtlEnabled(); + const signCorrection = rtl ? -1 : 1; + + return { + content: 0, + buttonsContainer: rtl ? -this._cachedButtonWidth : this._cachedItemWidth, + buttons: -this._cachedButtonWidth * signCorrection, + }; + }, + + _getPositions(percent) { + const rtl = this._isRtlEnabled(); + const signCorrection = rtl ? -1 : 1; + const startPositions = this._getStartPositions(); + + return { + content: startPositions.content - percent * this._cachedButtonWidth * signCorrection, + buttonsContainer: startPositions.buttonsContainer - Math.min(percent, 1) * this._cachedButtonWidth * signCorrection, + buttons: startPositions.buttons + Math.min(percent, 1) * this._cachedButtonWidth * signCorrection, + }; + }, + + _getCurrentPositions() { + return { + content: locate(this._$cachedContent).left, + buttonsContainer: locate(this._$buttonsContainer).left, + buttons: locate(this._$buttons).left, + }; + }, + + _setPositions(positions) { + move(this._$cachedContent, { left: positions.content }); + move(this._$buttonsContainer, { left: positions.buttonsContainer }); + move(this._$buttons, { left: positions.buttons }); + }, + + _cacheItemData($itemElement) { + if ($itemElement[0] === this._cachedNode) { + return; + } + + this._$cachedContent = $itemElement.find(`.${SLIDE_MENU_CONTENT_CLASS}`); + this._cachedItemWidth = getOuterWidth($itemElement); + this._cachedButtonWidth = this._cachedButtonWidth || getOuterWidth(this._$buttons); + setWidth(this._$buttonsContainer, this._cachedButtonWidth); + + if (this._$cachedContent.length) { + // eslint-disable-next-line prefer-destructuring + this._cachedNode = $itemElement[0]; + } + }, + + _minButtonContainerLeftOffset() { + return this._cachedItemWidth - this._cachedButtonWidth; + }, + + _swipeEndHandler($itemElement, args) { + this._cacheItemData($itemElement); + + const signCorrection = this._isRtlEnabled() ? 1 : -1; + const offset = this._cachedItemWidth * args.offset; + const endedAtReadyToDelete = !this._isReadyToDelete($itemElement) && (offset * signCorrection > this._cachedButtonWidth * 0.2); + const readyToDelete = args.targetOffset === signCorrection && endedAtReadyToDelete; + + this._toggleDeleteReady($itemElement, readyToDelete); + return true; + }, + + _enablePositioning($itemElement) { + fx.stop(this._$cachedContent, true); + + this.callBase.apply(this, arguments); + + this._$buttonsContainer.appendTo($itemElement); + }, + + _disablePositioning() { + this.callBase.apply(this, arguments); + + this._$buttonsContainer.detach(); + }, + + _animatePrepareDeleteReady() { + return this._animateToPositions(this._getPositions(1)); + }, + + _animateForgetDeleteReady($itemElement) { + this._cacheItemData($itemElement); + + return this._animateToPositions(this._getPositions(0)); + }, + + _animateToPositions(positions) { + const that = this; + + const currentPosition = this._getCurrentPositions(); + const durationTimePart = Math.min(Math.abs(currentPosition.content - positions.content) / this._cachedButtonWidth, 1); + + return fx.animate(this._$cachedContent, { + from: currentPosition, + to: positions, + easing: SLIDE_MENU_ANIMATION_EASING, + duration: SLIDE_MENU_ANIMATION_DURATION * durationTimePart, + // @ts-expect-error + strategy: 'frame', + draw(positions) { + that._setPositions(positions); }, + }); + }, - dispose: function() { - if(this._menu) { - this._menu.$element().remove(); - } - if(this._$buttonsContainer) { - this._$buttonsContainer.remove(); - } + dispose() { + if (this._menu) { + this._menu.$element().remove(); + } + if (this._$buttonsContainer) { + this._$buttonsContainer.remove(); + } - this.callBase.apply(this, arguments); - } + this.callBase.apply(this, arguments); + }, - }).include(EditDecoratorMenuHelperMixin) + }).include(EditDecoratorMenuHelperMixin), ); diff --git a/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.switchable.ts b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.switchable.ts index 0624e85e62e2..e43544b6c881 100644 --- a/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.switchable.ts +++ b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.switchable.ts @@ -1,12 +1,14 @@ -import { getOuterHeight, setHeight } from '../../core/utils/size'; -import $ from '../../core/renderer'; -import eventsEngine from '../../events/core/events_engine'; -import { noop } from '../../core/utils/common'; -import EditDecorator from './ui.list.edit.decorator'; -const abstract = EditDecorator.abstract; -import { addNamespace } from '../../events/utils/index'; -import pointerEvents from '../../events/pointer'; -import { active } from '../../events/core/emitter.feedback'; +import $ from '@js/core/renderer'; +import { noop } from '@js/core/utils/common'; +import { getOuterHeight, setHeight } from '@js/core/utils/size'; +import { active } from '@js/events/core/emitter.feedback'; +import eventsEngine from '@js/events/core/events_engine'; +import pointerEvents from '@js/events/pointer'; +import { addNamespace } from '@js/events/utils/index'; + +import EditDecorator from './m_list.edit.decorator'; + +const { abstract } = EditDecorator; const LIST_EDIT_DECORATOR = 'dxListEditDecorator'; const POINTER_DOWN_EVENT_NAME = addNamespace(pointerEvents.down, LIST_EDIT_DECORATOR); @@ -24,177 +26,178 @@ const SWITCHABLE_DELETE_BUTTON_CONTAINER_CLASS = 'dx-list-switchable-delete-butt const SwitchableEditDecorator = EditDecorator.inherit({ - _init: function() { - this._$topShield = $('
').addClass(SWITCHABLE_DELETE_TOP_SHIELD_CLASS); - this._$bottomShield = $('
').addClass(SWITCHABLE_DELETE_BOTTOM_SHIELD_CLASS); - this._$itemContentShield = $('
').addClass(SWITCHABLE_DELETE_ITEM_CONTENT_SHIELD_CLASS); - - eventsEngine.on(this._$topShield, POINTER_DOWN_EVENT_NAME, this._cancelDeleteReadyItem.bind(this)); - eventsEngine.on(this._$bottomShield, POINTER_DOWN_EVENT_NAME, this._cancelDeleteReadyItem.bind(this)); - - this._list.$element() - .append(this._$topShield.toggle(false)) - .append(this._$bottomShield.toggle(false)); - }, - - handleClick: function() { - return this._cancelDeleteReadyItem(); - }, - - _cancelDeleteReadyItem: function() { - if(!this._$readyToDeleteItem) { - return false; - } - - this._cancelDelete(this._$readyToDeleteItem); - return true; - }, - - _cancelDelete: function($itemElement) { - this._toggleDeleteReady($itemElement, false); - }, - - _toggleDeleteReady: function($itemElement, readyToDelete) { - if(readyToDelete === undefined) { - readyToDelete = !this._isReadyToDelete($itemElement); - } - - this._toggleShields($itemElement, readyToDelete); - this._toggleScrolling(readyToDelete); - this._cacheReadyToDeleteItem($itemElement, readyToDelete); - this._animateToggleDelete($itemElement, readyToDelete); - }, - - _isReadyToDelete: function($itemElement) { - return $itemElement.hasClass(SWITCHABLE_DELETE_READY_CLASS); - }, - - _toggleShields: function($itemElement, enabled) { - this._list.$element().toggleClass(SWITCHABLE_MENU_SHIELD_POSITIONING_CLASS, enabled); - this._$topShield.toggle(enabled); - this._$bottomShield.toggle(enabled); - if(enabled) { - this._updateShieldsHeight($itemElement); - } - - this._toggleContentShield($itemElement, enabled); - }, - - _updateShieldsHeight: function($itemElement) { - const $list = this._list.$element(); - - const listTopOffset = $list.offset().top; - const listHeight = getOuterHeight($list); - const itemTopOffset = $itemElement.offset().top; - const itemHeight = getOuterHeight($itemElement); - - const dirtyTopShieldHeight = itemTopOffset - listTopOffset; - const dirtyBottomShieldHeight = listHeight - itemHeight - dirtyTopShieldHeight; - - setHeight(this._$topShield, Math.max(dirtyTopShieldHeight, 0)); - setHeight(this._$bottomShield, Math.max(dirtyBottomShieldHeight, 0)); - }, - - _toggleContentShield: function($itemElement, enabled) { - if(enabled) { - $itemElement - .find('.' + LIST_ITEM_CONTENT_CLASS) - .first() - .append(this._$itemContentShield); - } else { - this._$itemContentShield.detach(); - } - }, - - _toggleScrolling: function(readyToDelete) { - const scrollView = this._list.$element().dxScrollView('instance'); - - if(readyToDelete) { - scrollView.on('start', this._cancelScrolling); - } else { - scrollView.off('start', this._cancelScrolling); - } - }, - - _cancelScrolling: function(args) { - args.event.cancel = true; - }, - - _cacheReadyToDeleteItem: function($itemElement, cache) { - if(cache) { - this._$readyToDeleteItem = $itemElement; - } else { - delete this._$readyToDeleteItem; - } - }, - - _animateToggleDelete: function($itemElement, readyToDelete) { - if(readyToDelete) { - this._enablePositioning($itemElement); - this._prepareDeleteReady($itemElement); - this._animatePrepareDeleteReady($itemElement); - eventsEngine.off($itemElement, pointerEvents.up); - } else { - this._forgetDeleteReady($itemElement); - this._animateForgetDeleteReady($itemElement).done(this._disablePositioning.bind(this, $itemElement)); - } - }, - - _enablePositioning: function($itemElement) { - $itemElement.addClass(SWITCHABLE_MENU_ITEM_SHIELD_POSITIONING_CLASS); - eventsEngine.on($itemElement, ACTIVE_EVENT_NAME, noop); - eventsEngine.one($itemElement, pointerEvents.up, this._disablePositioning.bind(this, $itemElement)); - }, - - _disablePositioning: function($itemElement) { - $itemElement.removeClass(SWITCHABLE_MENU_ITEM_SHIELD_POSITIONING_CLASS); - eventsEngine.off($itemElement, ACTIVE_EVENT_NAME); - }, - - _prepareDeleteReady: function($itemElement) { - $itemElement.addClass(SWITCHABLE_DELETE_READY_CLASS); - }, - - _forgetDeleteReady: function($itemElement) { - $itemElement.removeClass(SWITCHABLE_DELETE_READY_CLASS); - }, - - _animatePrepareDeleteReady: abstract, - - _animateForgetDeleteReady: abstract, - - _getDeleteButtonContainer: function($itemElement) { - $itemElement = $itemElement || this._$readyToDeleteItem; - - return $itemElement.children('.' + SWITCHABLE_DELETE_BUTTON_CONTAINER_CLASS); - }, - - _deleteItem: function($itemElement) { - $itemElement = $itemElement || this._$readyToDeleteItem; - this._getDeleteButtonContainer($itemElement).detach(); - - if($itemElement.is('.dx-state-disabled, .dx-state-disabled *')) { - return; - } - - this._list.deleteItem($itemElement) - .always(this._cancelDelete.bind(this, $itemElement)); - }, - - _isRtlEnabled: function() { - return this._list.option('rtlEnabled'); - }, - - dispose: function() { - if(this._$topShield) { - this._$topShield.remove(); - } - if(this._$bottomShield) { - this._$bottomShield.remove(); - } - - this.callBase.apply(this, arguments); + _init() { + this._$topShield = $('
').addClass(SWITCHABLE_DELETE_TOP_SHIELD_CLASS); + this._$bottomShield = $('
').addClass(SWITCHABLE_DELETE_BOTTOM_SHIELD_CLASS); + this._$itemContentShield = $('
').addClass(SWITCHABLE_DELETE_ITEM_CONTENT_SHIELD_CLASS); + + eventsEngine.on(this._$topShield, POINTER_DOWN_EVENT_NAME, this._cancelDeleteReadyItem.bind(this)); + eventsEngine.on(this._$bottomShield, POINTER_DOWN_EVENT_NAME, this._cancelDeleteReadyItem.bind(this)); + + this._list.$element() + .append(this._$topShield.toggle(false)) + .append(this._$bottomShield.toggle(false)); + }, + + handleClick() { + return this._cancelDeleteReadyItem(); + }, + + _cancelDeleteReadyItem() { + if (!this._$readyToDeleteItem) { + return false; + } + + this._cancelDelete(this._$readyToDeleteItem); + return true; + }, + + _cancelDelete($itemElement) { + this._toggleDeleteReady($itemElement, false); + }, + + _toggleDeleteReady($itemElement, readyToDelete) { + if (readyToDelete === undefined) { + readyToDelete = !this._isReadyToDelete($itemElement); + } + + this._toggleShields($itemElement, readyToDelete); + this._toggleScrolling(readyToDelete); + this._cacheReadyToDeleteItem($itemElement, readyToDelete); + this._animateToggleDelete($itemElement, readyToDelete); + }, + + _isReadyToDelete($itemElement) { + return $itemElement.hasClass(SWITCHABLE_DELETE_READY_CLASS); + }, + + _toggleShields($itemElement, enabled) { + this._list.$element().toggleClass(SWITCHABLE_MENU_SHIELD_POSITIONING_CLASS, enabled); + this._$topShield.toggle(enabled); + this._$bottomShield.toggle(enabled); + if (enabled) { + this._updateShieldsHeight($itemElement); + } + + this._toggleContentShield($itemElement, enabled); + }, + + _updateShieldsHeight($itemElement) { + const $list = this._list.$element(); + + const listTopOffset = $list.offset().top; + const listHeight = getOuterHeight($list); + const itemTopOffset = $itemElement.offset().top; + const itemHeight = getOuterHeight($itemElement); + + const dirtyTopShieldHeight = itemTopOffset - listTopOffset; + const dirtyBottomShieldHeight = listHeight - itemHeight - dirtyTopShieldHeight; + + setHeight(this._$topShield, Math.max(dirtyTopShieldHeight, 0)); + setHeight(this._$bottomShield, Math.max(dirtyBottomShieldHeight, 0)); + }, + + _toggleContentShield($itemElement, enabled) { + if (enabled) { + $itemElement + .find(`.${LIST_ITEM_CONTENT_CLASS}`) + .first() + .append(this._$itemContentShield); + } else { + this._$itemContentShield.detach(); + } + }, + + _toggleScrolling(readyToDelete) { + const scrollView = this._list.$element().dxScrollView('instance'); + + if (readyToDelete) { + scrollView.on('start', this._cancelScrolling); + } else { + scrollView.off('start', this._cancelScrolling); } + }, + + _cancelScrolling(args) { + args.event.cancel = true; + }, + + _cacheReadyToDeleteItem($itemElement, cache) { + if (cache) { + this._$readyToDeleteItem = $itemElement; + } else { + delete this._$readyToDeleteItem; + } + }, + + _animateToggleDelete($itemElement, readyToDelete) { + if (readyToDelete) { + this._enablePositioning($itemElement); + this._prepareDeleteReady($itemElement); + this._animatePrepareDeleteReady($itemElement); + eventsEngine.off($itemElement, pointerEvents.up); + } else { + this._forgetDeleteReady($itemElement); + this._animateForgetDeleteReady($itemElement).done(this._disablePositioning.bind(this, $itemElement)); + } + }, + + _enablePositioning($itemElement) { + $itemElement.addClass(SWITCHABLE_MENU_ITEM_SHIELD_POSITIONING_CLASS); + eventsEngine.on($itemElement, ACTIVE_EVENT_NAME, noop); + // @ts-expect-error + eventsEngine.one($itemElement, pointerEvents.up, this._disablePositioning.bind(this, $itemElement)); + }, + + _disablePositioning($itemElement) { + $itemElement.removeClass(SWITCHABLE_MENU_ITEM_SHIELD_POSITIONING_CLASS); + eventsEngine.off($itemElement, ACTIVE_EVENT_NAME); + }, + + _prepareDeleteReady($itemElement) { + $itemElement.addClass(SWITCHABLE_DELETE_READY_CLASS); + }, + + _forgetDeleteReady($itemElement) { + $itemElement.removeClass(SWITCHABLE_DELETE_READY_CLASS); + }, + + _animatePrepareDeleteReady: abstract, + + _animateForgetDeleteReady: abstract, + + _getDeleteButtonContainer($itemElement) { + $itemElement = $itemElement || this._$readyToDeleteItem; + + return $itemElement.children(`.${SWITCHABLE_DELETE_BUTTON_CONTAINER_CLASS}`); + }, + + _deleteItem($itemElement) { + $itemElement = $itemElement || this._$readyToDeleteItem; + this._getDeleteButtonContainer($itemElement).detach(); + + if ($itemElement.is('.dx-state-disabled, .dx-state-disabled *')) { + return; + } + + this._list.deleteItem($itemElement) + .always(this._cancelDelete.bind(this, $itemElement)); + }, + + _isRtlEnabled() { + return this._list.option('rtlEnabled'); + }, + + dispose() { + if (this._$topShield) { + this._$topShield.remove(); + } + if (this._$bottomShield) { + this._$bottomShield.remove(); + } + + this.callBase.apply(this, arguments); + }, }); diff --git a/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.ts b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.ts index a70457924e98..f7c306029111 100644 --- a/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.ts +++ b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator.ts @@ -1,15 +1,14 @@ -import { getWidth } from '../../core/utils/size'; -import $ from '../../core/renderer'; -import eventsEngine from '../../events/core/events_engine'; -import { noop } from '../../core/utils/common'; -import Class from '../../core/class'; +import Class from '@js/core/class'; +import $ from '@js/core/renderer'; +import { noop } from '@js/core/utils/common'; +import { getWidth } from '@js/core/utils/size'; +import eventsEngine from '@js/events/core/events_engine'; import { - start as swipeEventStart, - swipe as swipeEventSwipe, - end as swipeEventEnd -} from '../../events/swipe'; -import { addNamespace } from '../../events/utils/index'; - + end as swipeEventEnd, + start as swipeEventStart, + swipe as swipeEventSwipe, +} from '@js/events/swipe'; +import { addNamespace } from '@js/events/utils/index'; const LIST_EDIT_DECORATOR = 'dxListEditDecorator'; const SWIPE_START_EVENT_NAME = addNamespace(swipeEventStart, LIST_EDIT_DECORATOR); @@ -18,106 +17,106 @@ const SWIPE_END_EVENT_NAME = addNamespace(swipeEventEnd, LIST_EDIT_DECORATOR); const EditDecorator = Class.inherit({ - ctor: function(list) { - this._list = list; - - this._init(); - }, - - _init: noop, - - _shouldHandleSwipe: false, - - _attachSwipeEvent: function(config) { - const swipeConfig = { - itemSizeFunc: (function() { - if(this._clearSwipeCache) { - this._itemWidthCache = getWidth(this._list.$element()); - this._clearSwipeCache = false; - } - return this._itemWidthCache; - }).bind(this) - }; - - eventsEngine.on(config.$itemElement, SWIPE_START_EVENT_NAME, swipeConfig, this._itemSwipeStartHandler.bind(this)); - eventsEngine.on(config.$itemElement, SWIPE_UPDATE_EVENT_NAME, this._itemSwipeUpdateHandler.bind(this)); - eventsEngine.on(config.$itemElement, SWIPE_END_EVENT_NAME, this._itemSwipeEndHandler.bind(this)); - }, - - _itemSwipeStartHandler: function(e) { - const $itemElement = $(e.currentTarget); - if($itemElement.is('.dx-state-disabled, .dx-state-disabled *')) { - e.cancel = true; - return; + ctor(list) { + this._list = list; + + this._init(); + }, + + _init: noop, + + _shouldHandleSwipe: false, + + _attachSwipeEvent(config) { + const swipeConfig = { + itemSizeFunc: function () { + if (this._clearSwipeCache) { + this._itemWidthCache = getWidth(this._list.$element()); + this._clearSwipeCache = false; } + return this._itemWidthCache; + }.bind(this), + }; - clearTimeout(this._list._inkRippleTimer); + eventsEngine.on(config.$itemElement, SWIPE_START_EVENT_NAME, swipeConfig, this._itemSwipeStartHandler.bind(this)); + eventsEngine.on(config.$itemElement, SWIPE_UPDATE_EVENT_NAME, this._itemSwipeUpdateHandler.bind(this)); + eventsEngine.on(config.$itemElement, SWIPE_END_EVENT_NAME, this._itemSwipeEndHandler.bind(this)); + }, - this._swipeStartHandler($itemElement, e); - }, + _itemSwipeStartHandler(e) { + const $itemElement = $(e.currentTarget); + if ($itemElement.is('.dx-state-disabled, .dx-state-disabled *')) { + e.cancel = true; + return; + } - _itemSwipeUpdateHandler: function(e) { - const $itemElement = $(e.currentTarget); + clearTimeout(this._list._inkRippleTimer); - this._swipeUpdateHandler($itemElement, e); - }, + this._swipeStartHandler($itemElement, e); + }, - _itemSwipeEndHandler: function(e) { - const $itemElement = $(e.currentTarget); + _itemSwipeUpdateHandler(e) { + const $itemElement = $(e.currentTarget); - this._swipeEndHandler($itemElement, e); + this._swipeUpdateHandler($itemElement, e); + }, - this._clearSwipeCache = true; - }, + _itemSwipeEndHandler(e) { + const $itemElement = $(e.currentTarget); - beforeBag: noop, + this._swipeEndHandler($itemElement, e); - afterBag: noop, + this._clearSwipeCache = true; + }, - _commonOptions: function() { - return { - activeStateEnabled: this._list.option('activeStateEnabled'), - hoverStateEnabled: this._list.option('hoverStateEnabled'), - focusStateEnabled: this._list.option('focusStateEnabled') - }; - }, + beforeBag: noop, - _updateButtonAttributes($button) { - $button.attr({ - tabindex: -1, - role: null, - 'aria-label': null, - }); - }, + afterBag: noop, - modifyElement: function(config) { - if(this._shouldHandleSwipe) { - this._attachSwipeEvent(config); - this._clearSwipeCache = true; - } - }, + _commonOptions() { + return { + activeStateEnabled: this._list.option('activeStateEnabled'), + hoverStateEnabled: this._list.option('hoverStateEnabled'), + focusStateEnabled: this._list.option('focusStateEnabled'), + }; + }, + + _updateButtonAttributes($button) { + $button.attr({ + tabindex: -1, + role: null, + 'aria-label': null, + }); + }, + + modifyElement(config) { + if (this._shouldHandleSwipe) { + this._attachSwipeEvent(config); + this._clearSwipeCache = true; + } + }, - afterRender: noop, + afterRender: noop, - handleClick: noop, + handleClick: noop, - handleKeyboardEvents: noop, + handleKeyboardEvents: noop, - handleEnterPressing: noop, + handleEnterPressing: noop, - handleContextMenu: noop, + handleContextMenu: noop, - _swipeStartHandler: noop, + _swipeStartHandler: noop, - _swipeUpdateHandler: noop, + _swipeUpdateHandler: noop, - _swipeEndHandler: noop, + _swipeEndHandler: noop, - visibilityChange: noop, + visibilityChange: noop, - getExcludedSelectors: noop, + getExcludedSelectors: noop, - dispose: noop + dispose: noop, }); diff --git a/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator_menu_helper.ts b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator_menu_helper.ts index af91d7235537..fa0b52f5afa9 100644 --- a/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator_menu_helper.ts +++ b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator_menu_helper.ts @@ -1,20 +1,20 @@ const EditDecoratorMenuHelperMixin = { - _menuEnabled: function() { - return !!this._menuItems().length; - }, + _menuEnabled() { + return !!this._menuItems().length; + }, - _menuItems: function() { - return this._list.option('menuItems'); - }, + _menuItems() { + return this._list.option('menuItems'); + }, - _deleteEnabled: function() { - return this._list.option('allowItemDeleting'); - }, + _deleteEnabled() { + return this._list.option('allowItemDeleting'); + }, - _fireMenuAction: function($itemElement, action) { - this._list._itemEventHandlerByHandler($itemElement, action, {}, { excludeValidators: ['disabled', 'readOnly'] }); - } + _fireMenuAction($itemElement, action) { + this._list._itemEventHandlerByHandler($itemElement, action, {}, { excludeValidators: ['disabled', 'readOnly'] }); + }, }; diff --git a/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator_registry.ts b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator_registry.ts index eaee85a28196..1ebd55a3e586 100644 --- a/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator_registry.ts +++ b/packages/devextreme/js/__internal/ui/list/m_list.edit.decorator_registry.ts @@ -1,12 +1,13 @@ -import { extend } from '../../core/utils/extend'; +import { extend } from '@js/core/utils/extend'; + export const registry = {}; export function register(option, type, decoratorClass) { - const decoratorsRegistry = registry; + const decoratorsRegistry = registry; - const decoratorConfig = {}; - decoratorConfig[option] = decoratorsRegistry[option] ? decoratorsRegistry[option] : {}; - decoratorConfig[option][type] = decoratorClass; + const decoratorConfig = {}; + decoratorConfig[option] = decoratorsRegistry[option] ? decoratorsRegistry[option] : {}; + decoratorConfig[option][type] = decoratorClass; - extend(decoratorsRegistry, decoratorConfig); + extend(decoratorsRegistry, decoratorConfig); } diff --git a/packages/devextreme/js/__internal/ui/list/m_list.edit.provider.ts b/packages/devextreme/js/__internal/ui/list/m_list.edit.provider.ts index f98e79e78e9e..a37048a599ab 100644 --- a/packages/devextreme/js/__internal/ui/list/m_list.edit.provider.ts +++ b/packages/devextreme/js/__internal/ui/list/m_list.edit.provider.ts @@ -1,76 +1,70 @@ -import $ from '../../core/renderer'; -import { noop } from '../../core/utils/common'; -import Class from '../../core/class'; -import { extend } from '../../core/utils/extend'; -import { each } from '../../core/utils/iterator'; -import errors from '../widget/ui.errors'; -import { registry } from './ui.list.edit.decorator_registry'; - -const editOptionsRegistry = []; - -const registerOption = function(enabledFunc, decoratorTypeFunc, decoratorSubTypeFunc) { - editOptionsRegistry.push({ - enabled: enabledFunc, - decoratorType: decoratorTypeFunc, - decoratorSubType: decoratorSubTypeFunc - }); +import Class from '@js/core/class'; +import $ from '@js/core/renderer'; +import { noop } from '@js/core/utils/common'; +import { extend } from '@js/core/utils/extend'; +import { each } from '@js/core/utils/iterator'; +import errors from '@js/ui/widget/ui.errors'; + +import { registry } from './m_list.edit.decorator_registry'; + +const editOptionsRegistry: { + enabled: any; + decoratorType: any; + decoratorSubType: any; +}[] = []; + +const registerOption = function (enabledFunc, decoratorTypeFunc, decoratorSubTypeFunc) { + editOptionsRegistry.push({ + enabled: enabledFunc, + decoratorType: decoratorTypeFunc, + decoratorSubType: decoratorSubTypeFunc, + }); }; // NOTE: option registration order does matter registerOption( - function() { - return this.option('menuItems').length; - }, - function() { - return 'menu'; - }, - function() { - return this.option('menuMode'); - } + function () { + return this.option('menuItems').length; + }, + () => 'menu', + function () { + return this.option('menuMode'); + }, ); registerOption( - function() { - return !this.option('menuItems').length && this.option('allowItemDeleting'); - }, - function() { - const mode = this.option('itemDeleteMode'); - - return mode === 'toggle' || mode === 'slideButton' || mode === 'swipe' || mode === 'static' ? 'delete' : 'menu'; - }, - function() { - let mode = this.option('itemDeleteMode'); - - if(mode === 'slideItem') { - mode = 'slide'; - } - - return mode; + function () { + return !this.option('menuItems').length && this.option('allowItemDeleting'); + }, + function () { + const mode = this.option('itemDeleteMode'); + + return mode === 'toggle' || mode === 'slideButton' || mode === 'swipe' || mode === 'static' ? 'delete' : 'menu'; + }, + function () { + let mode = this.option('itemDeleteMode'); + + if (mode === 'slideItem') { + mode = 'slide'; } + + return mode; + }, ); registerOption( - function() { - return this.option('selectionMode') !== 'none' && this.option('showSelectionControls'); - }, - function() { - return 'selection'; - }, - function() { - return 'default'; - } + function () { + return this.option('selectionMode') !== 'none' && this.option('showSelectionControls'); + }, + () => 'selection', + () => 'default', ); registerOption( - function() { - return this.option('itemDragging.allowReordering') || this.option('itemDragging.allowDropInsideItem') || this.option('itemDragging.group'); - }, - function() { - return 'reorder'; - }, - function() { - return 'default'; - } + function () { + return this.option('itemDragging.allowReordering') || this.option('itemDragging.allowDropInsideItem') || this.option('itemDragging.group'); + }, + () => 'reorder', + () => 'default', ); - const LIST_ITEM_BEFORE_BAG_CLASS = 'dx-list-item-before-bag'; const LIST_ITEM_AFTER_BAG_CLASS = 'dx-list-item-after-bag'; @@ -82,160 +76,160 @@ const DECORATOR_GET_EXCLUDED_SELECTORS_METHOD = 'getExcludedSelectors'; const EditProvider = Class.inherit({ - ctor: function(list) { - this._list = list; - this._fetchRequiredDecorators(); - }, - - dispose: function() { - if(this._decorators && this._decorators.length) { - each(this._decorators, function(_, decorator) { - decorator.dispose(); - }); - } - }, - - _fetchRequiredDecorators: function() { - this._decorators = []; - - each(editOptionsRegistry, (function(_, option) { - const optionEnabled = option.enabled.call(this._list); - if(optionEnabled) { - const decoratorType = option.decoratorType.call(this._list); - const decoratorSubType = option.decoratorSubType.call(this._list); - - const decorator = this._createDecorator(decoratorType, decoratorSubType); - - this._decorators.push(decorator); - } - }).bind(this)); - }, - - _createDecorator: function(type, subType) { - const decoratorClass = this._findDecorator(type, subType); - - return new decoratorClass(this._list); - }, - - _findDecorator: function(type, subType) { - const foundDecorator = registry[type]?.[subType]; - - if(!foundDecorator) { - throw errors.Error('E1012', type, subType); - } - - return foundDecorator; - }, - - modifyItemElement: function(args) { - const $itemElement = $(args.itemElement); - - const config = { - $itemElement: $itemElement - }; - - this._prependBeforeBags($itemElement, config); - this._appendAfterBags($itemElement, config); - this._applyDecorators(DECORATOR_MODIFY_ELEMENT_METHOD, config); - }, - - afterItemsRendered: function() { - this._applyDecorators(DECORATOR_AFTER_RENDER_METHOD); - }, - - _prependBeforeBags: function($itemElement, config) { - const $beforeBags = this._collectDecoratorsMarkup(DECORATOR_BEFORE_BAG_CREATE_METHOD, config, LIST_ITEM_BEFORE_BAG_CLASS); - $itemElement.prepend($beforeBags); - }, - - _appendAfterBags: function($itemElement, config) { - const $afterBags = this._collectDecoratorsMarkup(DECORATOR_AFTER_BAG_CREATE_METHOD, config, LIST_ITEM_AFTER_BAG_CLASS); - $itemElement.append($afterBags); - }, - - _collectDecoratorsMarkup: function(method, config, containerClass) { - const $collector = $('
'); - - each(this._decorators, function() { - const $container = $('
').addClass(containerClass); - this[method](extend({ - $container: $container - }, config)); - if($container.children().length) { - $collector.append($container); - } - }); - - return $collector.children(); - }, - - _applyDecorators: function(method, config) { - each(this._decorators, function() { - this[method](config); - }); - }, - - _handlerExists: function(name) { - if(!this._decorators) { - return false; - } - - const decorators = this._decorators; - const length = decorators.length; - for(let i = 0; i < length; i++) { - if(decorators[i][name] !== noop) { - return true; - } - } - - return false; - }, - - _eventHandler: function(name, $itemElement, e) { - if(!this._decorators) { - return false; - } - - let response = false; - const decorators = this._decorators; - const length = decorators.length; - for(let i = 0; i < length; i++) { - response = decorators[i][name]($itemElement, e); - if(response) { - break; - } - } - - return response; - }, - - handleClick: function($itemElement, e) { - return this._eventHandler('handleClick', $itemElement, e); - }, - - handleKeyboardEvents: function(currentFocusedIndex, moveFocusUp) { - return this._eventHandler('handleKeyboardEvents', currentFocusedIndex, moveFocusUp); - }, - - handleEnterPressing: function(e) { - return this._eventHandler('handleEnterPressing', e); - }, - - contextMenuHandlerExists: function() { - return this._handlerExists('handleContextMenu'); - }, - - handleContextMenu: function($itemElement, e) { - return this._eventHandler('handleContextMenu', $itemElement, e); - }, - - getExcludedItemSelectors: function() { - const excludedSelectors = []; - - this._applyDecorators(DECORATOR_GET_EXCLUDED_SELECTORS_METHOD, excludedSelectors); - - return excludedSelectors.join(','); + ctor(list) { + this._list = list; + this._fetchRequiredDecorators(); + }, + + dispose() { + if (this._decorators && this._decorators.length) { + each(this._decorators, (_, decorator) => { + decorator.dispose(); + }); + } + }, + + _fetchRequiredDecorators() { + this._decorators = []; + + each(editOptionsRegistry, (_, option) => { + const optionEnabled = option.enabled.call(this._list); + if (optionEnabled) { + const decoratorType = option.decoratorType.call(this._list); + const decoratorSubType = option.decoratorSubType.call(this._list); + + const decorator = this._createDecorator(decoratorType, decoratorSubType); + + this._decorators.push(decorator); + } + }); + }, + + _createDecorator(type, subType) { + const decoratorClass = this._findDecorator(type, subType); + // eslint-disable-next-line new-cap + return new decoratorClass(this._list); + }, + + _findDecorator(type, subType) { + const foundDecorator = registry[type]?.[subType]; + + if (!foundDecorator) { + throw errors.Error('E1012', type, subType); } + + return foundDecorator; + }, + + modifyItemElement(args) { + const $itemElement = $(args.itemElement); + + const config = { + $itemElement, + }; + + this._prependBeforeBags($itemElement, config); + this._appendAfterBags($itemElement, config); + this._applyDecorators(DECORATOR_MODIFY_ELEMENT_METHOD, config); + }, + + afterItemsRendered() { + this._applyDecorators(DECORATOR_AFTER_RENDER_METHOD); + }, + + _prependBeforeBags($itemElement, config) { + const $beforeBags = this._collectDecoratorsMarkup(DECORATOR_BEFORE_BAG_CREATE_METHOD, config, LIST_ITEM_BEFORE_BAG_CLASS); + $itemElement.prepend($beforeBags); + }, + + _appendAfterBags($itemElement, config) { + const $afterBags = this._collectDecoratorsMarkup(DECORATOR_AFTER_BAG_CREATE_METHOD, config, LIST_ITEM_AFTER_BAG_CLASS); + $itemElement.append($afterBags); + }, + + _collectDecoratorsMarkup(method, config, containerClass) { + const $collector = $('
'); + + each(this._decorators, function () { + const $container = $('
').addClass(containerClass); + this[method](extend({ + $container, + }, config)); + if ($container.children().length) { + $collector.append($container); + } + }); + + return $collector.children(); + }, + + _applyDecorators(method, config) { + each(this._decorators, function () { + this[method](config); + }); + }, + + _handlerExists(name) { + if (!this._decorators) { + return false; + } + + const decorators = this._decorators; + const { length } = decorators; + for (let i = 0; i < length; i++) { + if (decorators[i][name] !== noop) { + return true; + } + } + + return false; + }, + + _eventHandler(name, $itemElement, e) { + if (!this._decorators) { + return false; + } + + let response = false; + const decorators = this._decorators; + const { length } = decorators; + for (let i = 0; i < length; i++) { + response = decorators[i][name]($itemElement, e); + if (response) { + break; + } + } + + return response; + }, + + handleClick($itemElement, e) { + return this._eventHandler('handleClick', $itemElement, e); + }, + + handleKeyboardEvents(currentFocusedIndex, moveFocusUp) { + return this._eventHandler('handleKeyboardEvents', currentFocusedIndex, moveFocusUp); + }, + + handleEnterPressing(e) { + return this._eventHandler('handleEnterPressing', e); + }, + + contextMenuHandlerExists() { + return this._handlerExists('handleContextMenu'); + }, + + handleContextMenu($itemElement, e) { + return this._eventHandler('handleContextMenu', $itemElement, e); + }, + + getExcludedItemSelectors() { + const excludedSelectors = []; + + this._applyDecorators(DECORATOR_GET_EXCLUDED_SELECTORS_METHOD, excludedSelectors); + + return excludedSelectors.join(','); + }, }); export default EditProvider; diff --git a/packages/devextreme/js/__internal/ui/list/m_list.edit.search.ts b/packages/devextreme/js/__internal/ui/list/m_list.edit.search.ts index 94bf3a6d0787..519bdc100b48 100644 --- a/packages/devextreme/js/__internal/ui/list/m_list.edit.search.ts +++ b/packages/devextreme/js/__internal/ui/list/m_list.edit.search.ts @@ -1,33 +1,35 @@ -import ListEdit from './ui.list.edit'; -import searchBoxMixin from '../widget/ui.search_box_mixin'; +import searchBoxMixin from '@js/ui/widget/ui.search_box_mixin'; + +import ListEdit from './m_list.edit'; const ListSearch = ListEdit.inherit(searchBoxMixin).inherit({ - _addWidgetPrefix: function(className) { - return 'dx-list-' + className; - }, + _addWidgetPrefix(className) { + return `dx-list-${className}`; + }, - _getCombinedFilter: function() { - const dataController = this._dataController; - const storeLoadOptions = { filter: dataController.filter() }; - dataController.addSearchFilter(storeLoadOptions); - const filter = storeLoadOptions.filter; + _getCombinedFilter() { + const dataController = this._dataController; + const storeLoadOptions = { filter: dataController.filter() }; + dataController.addSearchFilter(storeLoadOptions); + const { filter } = storeLoadOptions; - return filter; - }, + return filter; + }, - _initDataSource: function() { - const value = this.option('searchValue'); - const expr = this.option('searchExpr'); - const mode = this.option('searchMode'); + _initDataSource() { + const value = this.option('searchValue'); + const expr = this.option('searchExpr'); + const mode = this.option('searchMode'); - this.callBase(); + this.callBase(); - const dataController = this._dataController; + const dataController = this._dataController; - value && value.length && dataController.searchValue(value); - mode.length && dataController.searchOperation(searchBoxMixin.getOperationBySearchMode(mode)); - expr && dataController.searchExpr(expr); - } + value && value.length && dataController.searchValue(value); + // @ts-expect-error + mode.length && dataController.searchOperation(searchBoxMixin.getOperationBySearchMode(mode)); + expr && dataController.searchExpr(expr); + }, }); export default ListSearch; diff --git a/packages/devextreme/js/__internal/ui/list/m_list.edit.strategy.grouped.ts b/packages/devextreme/js/__internal/ui/list/m_list.edit.strategy.grouped.ts index 8572f1865cd7..a2a43bec81fd 100644 --- a/packages/devextreme/js/__internal/ui/list/m_list.edit.strategy.grouped.ts +++ b/packages/devextreme/js/__internal/ui/list/m_list.edit.strategy.grouped.ts @@ -1,10 +1,9 @@ -import $ from '../../core/renderer'; -import { isNumeric } from '../../core/utils/type'; -import { each } from '../../core/utils/iterator'; -import storeHelper from '../../data/store_helper'; -import query from '../../data/query'; -import EditStrategy from '../collection/ui.collection_widget.edit.strategy.plain'; - +import $ from '@js/core/renderer'; +import { each } from '@js/core/utils/iterator'; +import { isNumeric } from '@js/core/utils/type'; +import query from '@js/data/query'; +import storeHelper from '@js/data/store_helper'; +import EditStrategy from '@js/ui/collection/ui.collection_widget.edit.strategy.plain'; const LIST_ITEM_CLASS = 'dx-list-item'; const LIST_GROUP_CLASS = 'dx-list-group'; @@ -12,239 +11,245 @@ const LIST_GROUP_CLASS = 'dx-list-group'; const SELECTION_SHIFT = 20; const SELECTION_MASK = (1 << SELECTION_SHIFT) - 1; -const combineIndex = function(indices) { - return (indices.group << SELECTION_SHIFT) + indices.item; +const combineIndex = function (indices) { + return (indices.group << SELECTION_SHIFT) + indices.item; }; -const splitIndex = function(combinedIndex) { - return { - group: combinedIndex >> SELECTION_SHIFT, - item: combinedIndex & SELECTION_MASK - }; +const splitIndex = function (combinedIndex) { + return { + group: combinedIndex >> SELECTION_SHIFT, + item: combinedIndex & SELECTION_MASK, + }; }; const GroupedEditStrategy = EditStrategy.inherit({ - _groupElements: function() { - return this._collectionWidget._itemContainer().find('.' + LIST_GROUP_CLASS); - }, + _groupElements() { + return this._collectionWidget._itemContainer().find(`.${LIST_GROUP_CLASS}`); + }, - _groupItemElements: function($group) { - return $group.find('.' + LIST_ITEM_CLASS); - }, + _groupItemElements($group) { + return $group.find(`.${LIST_ITEM_CLASS}`); + }, - getIndexByItemData: function(itemData) { - const groups = this._collectionWidget.option('items'); - let index = false; + getIndexByItemData(itemData) { + const groups = this._collectionWidget.option('items'); + let index = false; - if(!itemData) return false; + if (!itemData) return false; - if(itemData.items && itemData.items.length) { - itemData = itemData.items[0]; + if (itemData.items && itemData.items.length) { + // eslint-disable-next-line prefer-destructuring + itemData = itemData.items[0]; + } + // @ts-expect-error + each(groups, (groupIndex, group) => { + if (!group.items) return false; + + each(group.items, (itemIndex, item) => { + if (item !== itemData) { + return true; } + // @ts-expect-error + index = { + group: groupIndex, + item: itemIndex, + }; - each(groups, function(groupIndex, group) { - if(!group.items) return false; + return false; + }); - each(group.items, function(itemIndex, item) { - if(item !== itemData) { - return true; - } + if (index) { + return false; + } + }); - index = { - group: groupIndex, - item: itemIndex - }; + return index; + }, - return false; - }); + getItemDataByIndex(index) { + const items = this._collectionWidget.option('items'); - if(index) { - return false; - } - }); + if (isNumeric(index)) { + return this.itemsGetter()[index]; + } - return index; - }, + return (index && items[index.group] && items[index.group].items[index.item]) || null; + }, - getItemDataByIndex: function(index) { - const items = this._collectionWidget.option('items'); + itemsGetter() { + let resultItems = []; + const items = this._collectionWidget.option('items'); - if(isNumeric(index)) { - return this.itemsGetter()[index]; - } + for (let i = 0; i < items.length; i++) { + if (items[i] && items[i].items) { + resultItems = resultItems.concat(items[i].items); + } else { + // @ts-expect-error + resultItems.push(items[i]); + } + } + return resultItems; + }, + + deleteItemAtIndex(index) { + const indices = splitIndex(index); + const itemGroup = this._collectionWidget.option('items')[indices.group].items; + + itemGroup.splice(indices.item, 1); + }, + + getKeysByItems(items) { + let plainItems = []; + let i; + for (i = 0; i < items.length; i++) { + if (items[i] && items[i].items) { + plainItems = plainItems.concat(items[i].items); + } else { + // @ts-expect-error + plainItems.push(items[i]); + } + } - return (index && items[index.group] && items[index.group].items[index.item]) || null; - }, + const result = []; - itemsGetter: function() { - let resultItems = []; - const items = this._collectionWidget.option('items'); + for (i = 0; i < plainItems.length; i++) { + // @ts-expect-error + result.push(this._collectionWidget.keyOf(plainItems[i])); + } - for(let i = 0; i < items.length; i++) { - if(items[i] && items[i].items) { - resultItems = resultItems.concat(items[i].items); - } else { - resultItems.push(items[i]); - } - } - return resultItems; - }, - - deleteItemAtIndex: function(index) { - const indices = splitIndex(index); - const itemGroup = this._collectionWidget.option('items')[indices.group].items; - - itemGroup.splice(indices.item, 1); - }, - - getKeysByItems: function(items) { - let plainItems = []; - let i; - for(i = 0; i < items.length; i++) { - if(items[i] && items[i].items) { - plainItems = plainItems.concat(items[i].items); - } else { - plainItems.push(items[i]); - } + return result; + }, + + getIndexByKey(key, items) { + const groups = items || this._collectionWidget.option('items'); + let index = -1; + const that = this; + // @ts-expect-error + each(groups, (groupIndex, group) => { + if (!group.items) return; + // @ts-expect-error + each(group.items, (itemIndex, item) => { + const itemKey = that._collectionWidget.keyOf(item); + if (that._equalKeys(itemKey, key)) { + // @ts-expect-error + index = { + group: groupIndex, + item: itemIndex, + }; + return false; } + }); - const result = []; + if (index !== -1) { + return false; + } + }); - for(i = 0; i < plainItems.length; i++) { - result.push(this._collectionWidget.keyOf(plainItems[i])); - } + return index; + }, - return result; - }, - - getIndexByKey: function(key, items) { - const groups = items || this._collectionWidget.option('items'); - let index = -1; - const that = this; - - each(groups, function(groupIndex, group) { - if(!group.items) return; - - each(group.items, function(itemIndex, item) { - const itemKey = that._collectionWidget.keyOf(item); - if(that._equalKeys(itemKey, key)) { - index = { - group: groupIndex, - item: itemIndex - }; - return false; - } - }); - - if(index !== -1) { - return false; - } - }); - - return index; - }, - - _getGroups: function(items) { - const dataController = this._collectionWidget._dataController; - const group = dataController.group(); - - if(group) { - return storeHelper.queryByOptions(query(items), { group: group }).toArray(); - } + _getGroups(items) { + const dataController = this._collectionWidget._dataController; + const group = dataController.group(); - return this._collectionWidget.option('items'); - }, + if (group) { + return storeHelper.queryByOptions(query(items), { group }).toArray(); + } - getItemsByKeys: function(keys, items) { - const result = []; - const groups = this._getGroups(items); - const groupItemByKeyMap = {}; + return this._collectionWidget.option('items'); + }, - const getItemMeta = (key) => { - const index = this.getIndexByKey(key, groups); - const group = index && groups[index.group]; + getItemsByKeys(keys, items) { + const result = []; + const groups = this._getGroups(items); + const groupItemByKeyMap = {}; - if(!group) return; + const getItemMeta = (key) => { + const index = this.getIndexByKey(key, groups); + const group = index && groups[index.group]; - return { - groupKey: group.key, - item: group.items[index.item] - }; - }; + if (!group) return; - each(keys, function(_, key) { - const itemMeta = getItemMeta(key); + return { + groupKey: group.key, + item: group.items[index.item], + }; + }; - if(!itemMeta) return; + each(keys, (_, key) => { + const itemMeta = getItemMeta(key); - const groupKey = itemMeta.groupKey; - const item = itemMeta.item; + if (!itemMeta) return; - let selectedGroup = groupItemByKeyMap[groupKey]; - if(!selectedGroup) { - selectedGroup = { key: groupKey, items: [] }; - groupItemByKeyMap[groupKey] = selectedGroup; - result.push(selectedGroup); - } + const { groupKey } = itemMeta; + const { item } = itemMeta; - selectedGroup.items.push(item); - }); + let selectedGroup = groupItemByKeyMap[groupKey]; + if (!selectedGroup) { + selectedGroup = { key: groupKey, items: [] }; + groupItemByKeyMap[groupKey] = selectedGroup; + // @ts-expect-error + result.push(selectedGroup); + } - return result; - }, + selectedGroup.items.push(item); + }); - moveItemAtIndexToIndex: function(movingIndex, destinationIndex) { - const items = this._collectionWidget.option('items'); + return result; + }, - const movingIndices = splitIndex(movingIndex); - const destinationIndices = splitIndex(destinationIndex); + moveItemAtIndexToIndex(movingIndex, destinationIndex) { + const items = this._collectionWidget.option('items'); - const movingItemGroup = items[movingIndices.group].items; - const destinationItemGroup = items[destinationIndices.group].items; + const movingIndices = splitIndex(movingIndex); + const destinationIndices = splitIndex(destinationIndex); - const movedItemData = movingItemGroup[movingIndices.item]; + const movingItemGroup = items[movingIndices.group].items; + const destinationItemGroup = items[destinationIndices.group].items; - movingItemGroup.splice(movingIndices.item, 1); - destinationItemGroup.splice(destinationIndices.item, 0, movedItemData); - }, + const movedItemData = movingItemGroup[movingIndices.item]; - _isItemIndex: function(index) { - return index && isNumeric(index.group) && isNumeric(index.item); - }, + movingItemGroup.splice(movingIndices.item, 1); + destinationItemGroup.splice(destinationIndices.item, 0, movedItemData); + }, - _getNormalizedItemIndex: function(itemElement) { - const $item = $(itemElement); - const $group = $item.closest('.' + LIST_GROUP_CLASS); + _isItemIndex(index) { + return index && isNumeric(index.group) && isNumeric(index.item); + }, - if(!$group.length) { - return -1; - } + _getNormalizedItemIndex(itemElement) { + const $item = $(itemElement); + const $group = $item.closest(`.${LIST_GROUP_CLASS}`); - return combineIndex({ - group: this._groupElements().index($group), - item: this._groupItemElements($group).index($item) - }); - }, + if (!$group.length) { + return -1; + } - _normalizeItemIndex: function(index) { - return combineIndex(index); - }, + return combineIndex({ + group: this._groupElements().index($group), + item: this._groupItemElements($group).index($item), + }); + }, - _denormalizeItemIndex: function(index) { - return splitIndex(index); - }, + _normalizeItemIndex(index) { + return combineIndex(index); + }, - _getItemByNormalizedIndex: function(index) { - const indices = splitIndex(index); - const $group = this._groupElements().eq(indices.group); + _denormalizeItemIndex(index) { + return splitIndex(index); + }, - return this._groupItemElements($group).eq(indices.item); - }, + _getItemByNormalizedIndex(index) { + const indices = splitIndex(index); + const $group = this._groupElements().eq(indices.group); - _itemsFromSameParent: function(firstIndex, secondIndex) { - return splitIndex(firstIndex).group === splitIndex(secondIndex).group; - } + return this._groupItemElements($group).eq(indices.item); + }, + + _itemsFromSameParent(firstIndex, secondIndex) { + return splitIndex(firstIndex).group === splitIndex(secondIndex).group; + }, }); diff --git a/packages/devextreme/js/__internal/ui/list/m_list.edit.ts b/packages/devextreme/js/__internal/ui/list/m_list.edit.ts index 772b9d29970a..b107f79f7147 100644 --- a/packages/devextreme/js/__internal/ui/list/m_list.edit.ts +++ b/packages/devextreme/js/__internal/ui/list/m_list.edit.ts @@ -1,376 +1,356 @@ -import $ from '../../core/renderer'; -import { isTouchEvent } from '../../events/utils/index'; -import { extend } from '../../core/utils/extend'; -import GroupedEditStrategy from './ui.list.edit.strategy.grouped'; -import localizationMessage from '../../localization/message'; -import EditProvider from './ui.list.edit.provider'; -import { ListBase } from './ui.list.base'; +import $ from '@js/core/renderer'; +import { extend } from '@js/core/utils/extend'; +import { isTouchEvent } from '@js/events/utils/index'; +import localizationMessage from '@js/localization/message'; + +import { ListBase } from './m_list.base'; +import EditProvider from './m_list.edit.provider'; +import GroupedEditStrategy from './m_list.edit.strategy.grouped'; const LIST_ITEM_SELECTED_CLASS = 'dx-list-item-selected'; const LIST_ITEM_RESPONSE_WAIT_CLASS = 'dx-list-item-response-wait'; const ListEdit = ListBase.inherit({ - _supportedKeys() { - const that = this; - const parent = this.callBase(); - - const deleteFocusedItem = e => { - if(that.option('allowItemDeleting')) { - e.preventDefault(); - that.deleteItem(that.option('focusedElement')); - } - }; - - const moveFocusedItem = (e, moveUp) => { - const editStrategy = this._editStrategy; - const focusedElement = this.option('focusedElement'); - const focusedItemIndex = editStrategy.getNormalizedIndex(focusedElement); - const isLastIndexFocused = focusedItemIndex === this._getLastItemIndex(); - - if(isLastIndexFocused && this._dataController.isLoading()) { - return; - } - - if(e.shiftKey && that.option('itemDragging.allowReordering')) { - const nextItemIndex = focusedItemIndex + (moveUp ? -1 : 1); - const $nextItem = editStrategy.getItemElement(nextItemIndex); - - this.reorderItem(focusedElement, $nextItem); - this.scrollToItem(focusedElement); - e.preventDefault(); - } else { - const editProvider = this._editProvider; - const isInternalMoving = editProvider.handleKeyboardEvents(focusedItemIndex, moveUp); - - if(!isInternalMoving) { - moveUp ? parent.upArrow(e) : parent.downArrow(e); - } - } - }; - - const enter = function(e) { - if(!this._editProvider.handleEnterPressing(e)) { - parent.enter.apply(this, arguments); - } - }; - - const space = function(e) { - if(!this._editProvider.handleEnterPressing(e)) { - parent.space.apply(this, arguments); - } - }; - - return extend({}, parent, { - del: deleteFocusedItem, - upArrow: e => moveFocusedItem(e, true), - downArrow: e => moveFocusedItem(e), - enter, - space - }); - }, - - _updateSelection() { - this._editProvider.afterItemsRendered(); - this.callBase(); - }, - - _getLastItemIndex() { - return this._itemElements().length - 1; - }, - - _refreshItemElements() { - this.callBase(); - - const excludedSelectors = this._editProvider.getExcludedItemSelectors(); - - if(excludedSelectors.length) { - this._itemElementsCache = this._itemElementsCache.not(excludedSelectors); + _supportedKeys() { + const that = this; + const parent = this.callBase(); + + const deleteFocusedItem = (e) => { + if (that.option('allowItemDeleting')) { + e.preventDefault(); + that.deleteItem(that.option('focusedElement')); + } + }; + + const moveFocusedItem = (e, moveUp?: boolean) => { + const editStrategy = this._editStrategy; + const focusedElement = this.option('focusedElement'); + const focusedItemIndex = editStrategy.getNormalizedIndex(focusedElement); + const isLastIndexFocused = focusedItemIndex === this._getLastItemIndex(); + + if (isLastIndexFocused && this._dataController.isLoading()) { + return; + } + + if (e.shiftKey && that.option('itemDragging.allowReordering')) { + const nextItemIndex = focusedItemIndex + (moveUp ? -1 : 1); + const $nextItem = editStrategy.getItemElement(nextItemIndex); + + this.reorderItem(focusedElement, $nextItem); + this.scrollToItem(focusedElement); + e.preventDefault(); + } else { + const editProvider = this._editProvider; + const isInternalMoving = editProvider.handleKeyboardEvents(focusedItemIndex, moveUp); + + if (!isInternalMoving) { + moveUp ? parent.upArrow(e) : parent.downArrow(e); } - }, + } + }; + + const enter = function (e) { + if (!this._editProvider.handleEnterPressing(e)) { + parent.enter.apply(this, arguments); + } + }; + + const space = function (e) { + if (!this._editProvider.handleEnterPressing(e)) { + parent.space.apply(this, arguments); + } + }; + + return extend({}, parent, { + del: deleteFocusedItem, + upArrow: (e) => moveFocusedItem(e, true), + downArrow: (e) => moveFocusedItem(e), + enter, + space, + }); + }, + + _updateSelection() { + this._editProvider.afterItemsRendered(); + this.callBase(); + }, + + _getLastItemIndex() { + return this._itemElements().length - 1; + }, + + _refreshItemElements() { + this.callBase(); + + const excludedSelectors = this._editProvider.getExcludedItemSelectors(); + + if (excludedSelectors.length) { + this._itemElementsCache = this._itemElementsCache.not(excludedSelectors); + } + }, - _isItemStrictEquals: function(item1, item2) { - const privateKey = item1 && item1.__dx_key__; - if(privateKey && !this.key() && this._selection.isItemSelected(privateKey)) { - return false; - } + _isItemStrictEquals(item1, item2) { + const privateKey = item1 && item1.__dx_key__; + if (privateKey && !this.key() && this._selection.isItemSelected(privateKey)) { + return false; + } - return this.callBase(item1, item2); - }, + return this.callBase(item1, item2); + }, - _getDefaultOptions() { - return extend(this.callBase(), { - showSelectionControls: false, + _getDefaultOptions() { + return extend(this.callBase(), { + showSelectionControls: false, - selectionMode: 'none', + selectionMode: 'none', - selectAllMode: 'page', + selectAllMode: 'page', - onSelectAllValueChanged: null, + onSelectAllValueChanged: null, - selectAllText: localizationMessage.format('dxList-selectAll'), + selectAllText: localizationMessage.format('dxList-selectAll'), - menuItems: [], + menuItems: [], - menuMode: 'context', + menuMode: 'context', - allowItemDeleting: false, + allowItemDeleting: false, - itemDeleteMode: 'static', + itemDeleteMode: 'static', - itemDragging: {} - }); - }, + itemDragging: {}, + }); + }, - _defaultOptionsRules() { - return this.callBase().concat([ - { - device: device => device.platform === 'ios', - options: { - menuMode: 'slide', + _defaultOptionsRules() { + return this.callBase().concat([ + { + device: (device) => device.platform === 'ios', + options: { + menuMode: 'slide', - itemDeleteMode: 'slideItem' - } - }, - { - device: { platform: 'android' }, - options: { - itemDeleteMode: 'swipe' - } - } - ]); - }, + itemDeleteMode: 'slideItem', + }, + }, + { + device: { platform: 'android' }, + options: { + itemDeleteMode: 'swipe', + }, + }, + ]); + }, - _init() { - this.callBase(); - this._initEditProvider(); - }, + _init() { + this.callBase(); + this._initEditProvider(); + }, - _initDataSource() { - this.callBase(); + _initDataSource() { + this.callBase(); - if(!this._isPageSelectAll()) { - this._dataSource && this._dataSource.requireTotalCount(true); - } - }, + if (!this._isPageSelectAll()) { + this._dataSource && this._dataSource.requireTotalCount(true); + } + }, - _isPageSelectAll() { - return this.option('selectAllMode') === 'page'; - }, + _isPageSelectAll() { + return this.option('selectAllMode') === 'page'; + }, - _initEditProvider() { - this._editProvider = new EditProvider(this); - }, + _initEditProvider() { + this._editProvider = new EditProvider(this); + }, - _disposeEditProvider() { - if(this._editProvider) { - this._editProvider.dispose(); - } - }, - - _refreshEditProvider() { - this._disposeEditProvider(); - this._initEditProvider(); - }, - - _initEditStrategy() { - if(this.option('grouped')) { - this._editStrategy = new GroupedEditStrategy(this); - } else { - this.callBase(); - } - }, - - _initMarkup() { - this._refreshEditProvider(); - this.callBase(); - }, - - _renderItems(...args) { - this.callBase(...args); - this._editProvider.afterItemsRendered(); - }, - - _selectedItemClass() { - return LIST_ITEM_SELECTED_CLASS; - }, - - _itemResponseWaitClass() { - return LIST_ITEM_RESPONSE_WAIT_CLASS; - }, - - _itemClickHandler(e) { - const $itemElement = $(e.currentTarget); - if($itemElement.is('.dx-state-disabled, .dx-state-disabled *')) { - return; - } + _disposeEditProvider() { + if (this._editProvider) { + this._editProvider.dispose(); + } + }, + + _refreshEditProvider() { + this._disposeEditProvider(); + this._initEditProvider(); + }, + + _initEditStrategy() { + if (this.option('grouped')) { + this._editStrategy = new GroupedEditStrategy(this); + } else { + this.callBase(); + } + }, + + _initMarkup() { + this._refreshEditProvider(); + this.callBase(); + }, + + _renderItems(...args) { + this.callBase(...args); + this._editProvider.afterItemsRendered(); + }, + + _selectedItemClass() { + return LIST_ITEM_SELECTED_CLASS; + }, + + _itemResponseWaitClass() { + return LIST_ITEM_RESPONSE_WAIT_CLASS; + }, + + _itemClickHandler(e) { + const $itemElement = $(e.currentTarget); + if ($itemElement.is('.dx-state-disabled, .dx-state-disabled *')) { + return; + } - const handledByEditProvider = this._editProvider.handleClick($itemElement, e); - if(handledByEditProvider) { - return; - } - this._saveSelectionChangeEvent(e); - this.callBase(...arguments); - }, - - _shouldFireContextMenuEvent(...args) { - return this.callBase(...args) || this._editProvider.contextMenuHandlerExists(); - }, - - _itemHoldHandler(e) { - const $itemElement = $(e.currentTarget); - if($itemElement.is('.dx-state-disabled, .dx-state-disabled *')) { - return; - } + const handledByEditProvider = this._editProvider.handleClick($itemElement, e); + if (handledByEditProvider) { + return; + } + this._saveSelectionChangeEvent(e); + this.callBase(...arguments); + }, + + _shouldFireContextMenuEvent(...args) { + return this.callBase(...args) || this._editProvider.contextMenuHandlerExists(); + }, + + _itemHoldHandler(e) { + const $itemElement = $(e.currentTarget); + if ($itemElement.is('.dx-state-disabled, .dx-state-disabled *')) { + return; + } - const handledByEditProvider = isTouchEvent(e) && this._editProvider.handleContextMenu($itemElement, e); - if(handledByEditProvider) { - e.handledByEditProvider = true; - return; - } + const handledByEditProvider = isTouchEvent(e) && this._editProvider.handleContextMenu($itemElement, e); + if (handledByEditProvider) { + e.handledByEditProvider = true; + return; + } - this.callBase(...arguments); - }, + this.callBase(...arguments); + }, - _getItemContainer: function(changeData) { - if(this.option('grouped')) { - const groupIndex = this._editStrategy.getIndexByItemData(changeData)?.group; - return this._getGroupContainerByIndex(groupIndex); - } else { - return this.callBase(changeData); - } - }, + _getItemContainer(changeData) { + if (this.option('grouped')) { + const groupIndex = this._editStrategy.getIndexByItemData(changeData)?.group; + return this._getGroupContainerByIndex(groupIndex); + } + return this.callBase(changeData); + }, - _itemContextMenuHandler(e) { - const $itemElement = $(e.currentTarget); - if($itemElement.is('.dx-state-disabled, .dx-state-disabled *')) { - return; - } + _itemContextMenuHandler(e) { + const $itemElement = $(e.currentTarget); + if ($itemElement.is('.dx-state-disabled, .dx-state-disabled *')) { + return; + } - const handledByEditProvider = !e.handledByEditProvider && this._editProvider.handleContextMenu($itemElement, e); - if(handledByEditProvider) { - e.preventDefault(); - return; - } + const handledByEditProvider = !e.handledByEditProvider && this._editProvider.handleContextMenu($itemElement, e); + if (handledByEditProvider) { + e.preventDefault(); + return; + } - this.callBase(...arguments); - }, - - _postprocessRenderItem(args) { - this.callBase(...arguments); - this._editProvider.modifyItemElement(args); - }, - - _clean() { - this._disposeEditProvider(); - this.callBase(); - }, - - focusListItem(index) { - const $item = this._editStrategy.getItemElement(index); - - this.option('focusedElement', $item); - this.focus(); - this.scrollToItem(this.option('focusedElement')); - }, - - _optionChanged(args) { - switch(args.name) { - case 'selectAllMode': - this._initDataSource(); - this._dataController.pageIndex(0); - this._dataController.load(); - break; - case 'grouped': - this._clearSelectedItems(); - delete this._renderingGroupIndex; - this._initEditStrategy(); - this.callBase(args); - break; - case 'showSelectionControls': - case 'menuItems': - case 'menuMode': - case 'allowItemDeleting': - case 'itemDeleteMode': - case 'itemDragging': - case 'selectAllText': - this._invalidate(); - break; - case 'onSelectAllValueChanged': - break; - default: - this.callBase(args); - } - }, - - selectAll() { - return this._selection.selectAll(this._isPageSelectAll()); - }, - - unselectAll() { - return this._selection.deselectAll(this._isPageSelectAll()); - }, - - isSelectAll() { - return this._selection.getSelectAllState(this._isPageSelectAll()); - }, - - /** - * @name dxList.getFlatIndexByItemElement - * @publicName getFlatIndexByItemElement(itemElement) - * @param1 itemElement:Element - * @return object - * @hidden - */ - getFlatIndexByItemElement(itemElement) { - return this._itemElements().index(itemElement); - }, - - /** - * @name dxList.getItemElementByFlatIndex - * @publicName getItemElementByFlatIndex(flatIndex) - * @param1 flatIndex:Number - * @return Element - * @hidden - */ - getItemElementByFlatIndex(flatIndex) { - const $itemElements = this._itemElements(); - - if(flatIndex < 0 || flatIndex >= $itemElements.length) { - return $(); - } + this.callBase(...arguments); + }, + + _postprocessRenderItem(args) { + this.callBase(...arguments); + this._editProvider.modifyItemElement(args); + }, + + _clean() { + this._disposeEditProvider(); + this.callBase(); + }, + + focusListItem(index) { + const $item = this._editStrategy.getItemElement(index); + + this.option('focusedElement', $item); + this.focus(); + this.scrollToItem(this.option('focusedElement')); + }, + + _optionChanged(args) { + switch (args.name) { + case 'selectAllMode': + this._initDataSource(); + this._dataController.pageIndex(0); + this._dataController.load(); + break; + case 'grouped': + this._clearSelectedItems(); + delete this._renderingGroupIndex; + this._initEditStrategy(); + this.callBase(args); + break; + case 'showSelectionControls': + case 'menuItems': + case 'menuMode': + case 'allowItemDeleting': + case 'itemDeleteMode': + case 'itemDragging': + case 'selectAllText': + this._invalidate(); + break; + case 'onSelectAllValueChanged': + break; + default: + this.callBase(args); + } + }, + + selectAll() { + return this._selection.selectAll(this._isPageSelectAll()); + }, + + unselectAll() { + return this._selection.deselectAll(this._isPageSelectAll()); + }, - return $itemElements.eq(flatIndex); - }, - - /** - * @name dxList.getItemByIndex - * @publicName getItemByIndex(index) - * @param1 index:Number - * @return object - * @hidden - */ - getItemByIndex(index) { - return this._editStrategy.getItemDataByIndex(index); - }, - - deleteItem(itemElement) { - const editStrategy = this._editStrategy; - const deletingElementIndex = editStrategy.getNormalizedIndex(itemElement); - const focusedElement = this.option('focusedElement'); - const focusStateEnabled = this.option('focusStateEnabled'); - const focusedItemIndex = focusedElement ? editStrategy.getNormalizedIndex(focusedElement) : deletingElementIndex; - const isLastIndexFocused = focusedItemIndex === this._getLastItemIndex(); - const nextFocusedItem = isLastIndexFocused || deletingElementIndex < focusedItemIndex - ? focusedItemIndex - 1 - : focusedItemIndex; - const promise = this.callBase(itemElement); - - return promise.done(function() { - if(focusStateEnabled) { - this.focusListItem(nextFocusedItem); - } - }); + isSelectAll() { + return this._selection.getSelectAllState(this._isPageSelectAll()); + }, + + getFlatIndexByItemElement(itemElement) { + return this._itemElements().index(itemElement); + }, + + getItemElementByFlatIndex(flatIndex) { + const $itemElements = this._itemElements(); + + if (flatIndex < 0 || flatIndex >= $itemElements.length) { + // @ts-expect-error + return $(); } + + return $itemElements.eq(flatIndex); + }, + + getItemByIndex(index) { + return this._editStrategy.getItemDataByIndex(index); + }, + + deleteItem(itemElement) { + const editStrategy = this._editStrategy; + const deletingElementIndex = editStrategy.getNormalizedIndex(itemElement); + const focusedElement = this.option('focusedElement'); + const focusStateEnabled = this.option('focusStateEnabled'); + const focusedItemIndex = focusedElement ? editStrategy.getNormalizedIndex(focusedElement) : deletingElementIndex; + const isLastIndexFocused = focusedItemIndex === this._getLastItemIndex(); + const nextFocusedItem = isLastIndexFocused || deletingElementIndex < focusedItemIndex + ? focusedItemIndex - 1 + : focusedItemIndex; + const promise = this.callBase(itemElement); + + return promise.done(function () { + if (focusStateEnabled) { + this.focusListItem(nextFocusedItem); + } + }); + }, }); export default ListEdit; diff --git a/packages/devextreme/js/__internal/ui/list/modules/m_context.ts b/packages/devextreme/js/__internal/ui/list/modules/m_context.ts index 6816364c14ee..191633f2761c 100644 --- a/packages/devextreme/js/__internal/ui/list/modules/m_context.ts +++ b/packages/devextreme/js/__internal/ui/list/modules/m_context.ts @@ -1 +1 @@ -import '../ui.list.edit.decorator.context'; +import '../m_list.edit.decorator.context'; diff --git a/packages/devextreme/js/__internal/ui/list/modules/m_deleting.context.ts b/packages/devextreme/js/__internal/ui/list/modules/m_deleting.context.ts index 08fb8305558b..b153f35cb242 100644 --- a/packages/devextreme/js/__internal/ui/list/modules/m_deleting.context.ts +++ b/packages/devextreme/js/__internal/ui/list/modules/m_deleting.context.ts @@ -1 +1 @@ -import './context'; +import './m_context'; diff --git a/packages/devextreme/js/__internal/ui/list/modules/m_deleting.slideButton.ts b/packages/devextreme/js/__internal/ui/list/modules/m_deleting.slideButton.ts index 61263ec2d81f..691e198e7b23 100644 --- a/packages/devextreme/js/__internal/ui/list/modules/m_deleting.slideButton.ts +++ b/packages/devextreme/js/__internal/ui/list/modules/m_deleting.slideButton.ts @@ -1 +1 @@ -import '../ui.list.edit.decorator.switchable.button'; +import '../m_list.edit.decorator.switchable.button'; diff --git a/packages/devextreme/js/__internal/ui/list/modules/m_deleting.slideItem.ts b/packages/devextreme/js/__internal/ui/list/modules/m_deleting.slideItem.ts index ae2e6116e8e3..cff01357275b 100644 --- a/packages/devextreme/js/__internal/ui/list/modules/m_deleting.slideItem.ts +++ b/packages/devextreme/js/__internal/ui/list/modules/m_deleting.slideItem.ts @@ -1 +1 @@ -import '../ui.list.edit.decorator.switchable.slide'; +import '../m_list.edit.decorator.switchable.slide'; diff --git a/packages/devextreme/js/__internal/ui/list/modules/m_deleting.static.ts b/packages/devextreme/js/__internal/ui/list/modules/m_deleting.static.ts index 64a630b9c774..b55080773756 100644 --- a/packages/devextreme/js/__internal/ui/list/modules/m_deleting.static.ts +++ b/packages/devextreme/js/__internal/ui/list/modules/m_deleting.static.ts @@ -1 +1 @@ -import '../ui.list.edit.decorator.static'; +import '../m_list.edit.decorator.static'; diff --git a/packages/devextreme/js/__internal/ui/list/modules/m_deleting.swipe.ts b/packages/devextreme/js/__internal/ui/list/modules/m_deleting.swipe.ts index e50974c8f100..05194304193f 100644 --- a/packages/devextreme/js/__internal/ui/list/modules/m_deleting.swipe.ts +++ b/packages/devextreme/js/__internal/ui/list/modules/m_deleting.swipe.ts @@ -1 +1 @@ -import '../ui.list.edit.decorator.swipe'; +import '../m_list.edit.decorator.swipe'; diff --git a/packages/devextreme/js/__internal/ui/list/modules/m_deleting.toggle.ts b/packages/devextreme/js/__internal/ui/list/modules/m_deleting.toggle.ts index 61263ec2d81f..691e198e7b23 100644 --- a/packages/devextreme/js/__internal/ui/list/modules/m_deleting.toggle.ts +++ b/packages/devextreme/js/__internal/ui/list/modules/m_deleting.toggle.ts @@ -1 +1 @@ -import '../ui.list.edit.decorator.switchable.button'; +import '../m_list.edit.decorator.switchable.button'; diff --git a/packages/devextreme/js/__internal/ui/list/modules/m_deleting.ts b/packages/devextreme/js/__internal/ui/list/modules/m_deleting.ts index 0e407b058ad5..d1dedf534b8f 100644 --- a/packages/devextreme/js/__internal/ui/list/modules/m_deleting.ts +++ b/packages/devextreme/js/__internal/ui/list/modules/m_deleting.ts @@ -1,6 +1,6 @@ -import './deleting.context'; -import './deleting.slideButton'; -import './deleting.slideItem'; -import './deleting.static'; -import './deleting.swipe'; -import './deleting.toggle'; +import './m_deleting.context'; +import './m_deleting.slideButton'; +import './m_deleting.slideItem'; +import './m_deleting.static'; +import './m_deleting.swipe'; +import './m_deleting.toggle'; diff --git a/packages/devextreme/js/__internal/ui/list/modules/m_dragging.ts b/packages/devextreme/js/__internal/ui/list/modules/m_dragging.ts index 1499b7aa26a7..64374e7c64dc 100644 --- a/packages/devextreme/js/__internal/ui/list/modules/m_dragging.ts +++ b/packages/devextreme/js/__internal/ui/list/modules/m_dragging.ts @@ -1 +1 @@ -import '../ui.list.edit.decorator.reorder'; +import '../m_list.edit.decorator.reorder'; diff --git a/packages/devextreme/js/__internal/ui/list/modules/m_search.ts b/packages/devextreme/js/__internal/ui/list/modules/m_search.ts index 78cb2de14882..e1e8b30ea49b 100644 --- a/packages/devextreme/js/__internal/ui/list/modules/m_search.ts +++ b/packages/devextreme/js/__internal/ui/list/modules/m_search.ts @@ -1,4 +1,4 @@ -import searchBoxMixin from '../../widget/ui.search_box_mixin'; -import TextBox from '../../text_box'; - +import TextBox from '@js/ui/text_box'; +import searchBoxMixin from '@js/ui/widget/ui.search_box_mixin'; +// @ts-expect-error searchBoxMixin.setEditorClass(TextBox); diff --git a/packages/devextreme/js/__internal/ui/list/modules/m_selection.ts b/packages/devextreme/js/__internal/ui/list/modules/m_selection.ts index 7750b9f12ef6..62a986aa4f62 100644 --- a/packages/devextreme/js/__internal/ui/list/modules/m_selection.ts +++ b/packages/devextreme/js/__internal/ui/list/modules/m_selection.ts @@ -1 +1 @@ -import '../ui.list.edit.decorator.selection'; +import '../m_list.edit.decorator.selection'; diff --git a/packages/devextreme/js/__internal/ui/m_accordion.ts b/packages/devextreme/js/__internal/ui/m_accordion.ts index 5df0e4fb62a5..3676653aba8a 100644 --- a/packages/devextreme/js/__internal/ui/m_accordion.ts +++ b/packages/devextreme/js/__internal/ui/m_accordion.ts @@ -196,8 +196,7 @@ const Accordion = CollectionWidget.inherit({ }, _renderItemContent(args) { - // @ts-expect-error - this._deferredTemplateItems[args.index] = new Deferred(); + this._deferredTemplateItems[args.index] = Deferred(); const itemTitle = this.callBase(extend({}, args, { contentClass: ACCORDION_ITEM_TITLE_CLASS, @@ -207,8 +206,7 @@ const Accordion = CollectionWidget.inherit({ this._attachItemTitleClickAction(itemTitle); - // @ts-expect-error - const deferred = new Deferred(); + const deferred = Deferred(); if (isDefined(this._deferredItems[args.index])) { this._deferredItems[args.index] = deferred; } else { @@ -326,8 +324,7 @@ const Accordion = CollectionWidget.inherit({ let d; if (skipAnimation || startHeight === endHeight) { $element.css('height', endHeight); - // @ts-expect-error - d = new Deferred().resolve(); + d = Deferred().resolve(); } else { d = fx.animate($element, { // @ts-expect-error @@ -440,8 +437,7 @@ const Accordion = CollectionWidget.inherit({ }, expandItem(index) { - // @ts-expect-error - this._deferredAnimate = new Deferred(); + this._deferredAnimate = Deferred(); this.selectItem(index); @@ -449,8 +445,7 @@ const Accordion = CollectionWidget.inherit({ }, collapseItem(index) { - // @ts-expect-error - this._deferredAnimate = new Deferred(); + this._deferredAnimate = Deferred(); this.unselectItem(index); diff --git a/packages/devextreme/js/__internal/ui/m_action_sheet.ts b/packages/devextreme/js/__internal/ui/m_action_sheet.ts index fe55e5ba9476..bbe997297eac 100644 --- a/packages/devextreme/js/__internal/ui/m_action_sheet.ts +++ b/packages/devextreme/js/__internal/ui/m_action_sheet.ts @@ -310,8 +310,7 @@ const ActionSheet = CollectionWidget.inherit({ toggle(showing) { const that = this; - // @ts-expect-error - const d = new Deferred(); + const d = Deferred(); that._popup.toggle(showing).done(() => { that.option('visible', showing); diff --git a/packages/devextreme/js/__internal/ui/m_autocomplete.ts b/packages/devextreme/js/__internal/ui/m_autocomplete.ts index 624369138a39..fde9e9388e2e 100644 --- a/packages/devextreme/js/__internal/ui/m_autocomplete.ts +++ b/packages/devextreme/js/__internal/ui/m_autocomplete.ts @@ -136,8 +136,7 @@ const Autocomplete = (DropDownList as any).inherit({ _loadItem(value, cache) { const selectedItem = this._getItemFromPlain(value, cache); - // @ts-expect-error - return new Deferred().resolve(selectedItem).promise(); + return Deferred().resolve(selectedItem).promise(); }, _dataSourceOptions() { diff --git a/packages/devextreme/js/__internal/ui/m_drop_down_box.ts b/packages/devextreme/js/__internal/ui/m_drop_down_box.ts index 114e0c0131b4..cf6dbb96de22 100644 --- a/packages/devextreme/js/__internal/ui/m_drop_down_box.ts +++ b/packages/devextreme/js/__internal/ui/m_drop_down_box.ts @@ -107,8 +107,8 @@ const DropDownBox = (DropDownEditor as any).inherit({ if (!this._dataSource) { this.callBase(values); - // @ts-expect-error - return new Deferred().resolve(); + + return Deferred().resolve(); } const currentValue = this._getCurrentValue(); @@ -117,8 +117,7 @@ const DropDownBox = (DropDownEditor as any).inherit({ keys = Array.isArray(keys) ? keys : [keys]; const itemLoadDeferreds = map(keys, (key) => { - // @ts-expect-error - const deferred = new Deferred(); + const deferred = Deferred(); this ._loadItem(key) .always((item) => { @@ -144,8 +143,7 @@ const DropDownBox = (DropDownEditor as any).inherit({ }, _loadItem(value) { - // @ts-expect-error - const deferred = new Deferred(); + const deferred = Deferred(); const that = this; const selectedItem = grep(this.option('items') || [], (item) => this._isValueEquals(this._valueGetter(item), value))[0]; diff --git a/packages/devextreme/js/__internal/ui/m_select_box.ts b/packages/devextreme/js/__internal/ui/m_select_box.ts index 0aa7e8dd1696..5775e1abca5b 100644 --- a/packages/devextreme/js/__internal/ui/m_select_box.ts +++ b/packages/devextreme/js/__internal/ui/m_select_box.ts @@ -1,4 +1,4 @@ -import '@js/ui/list/modules/selection'; +import '@ts/ui/list/modules/m_selection'; import registerComponent from '@js/core/component_registrator'; import domAdapter from '@js/core/dom_adapter'; @@ -284,8 +284,7 @@ const SelectBox = (DropDownList as any).inherit({ this._renderInputValue(); this._setSubmitValue(); - // @ts-expect-error - return new Deferred().resolve(); + return Deferred().resolve(); }, _renderInputValue() { @@ -304,8 +303,7 @@ const SelectBox = (DropDownList as any).inherit({ _renderInputValueImpl() { this._renderField(); - // @ts-expect-error - return new Deferred().resolve(); + return Deferred().resolve(); }, _setNextItem(step) { @@ -317,8 +315,7 @@ const SelectBox = (DropDownList as any).inherit({ _setNextValue(e) { const dataSourceIsLoaded = this._dataController.isLoaded() - // @ts-expect-error - ? new Deferred().resolve() + ? Deferred().resolve() : this._dataController.load(); dataSourceIsLoaded.done(() => { @@ -703,8 +700,7 @@ const SelectBox = (DropDownList as any).inherit({ _loadItem(value, cache) { const that = this; - // @ts-expect-error - const deferred = new Deferred(); + const deferred = Deferred(); this.callBase(value, cache) .done((item) => { diff --git a/packages/devextreme/js/__internal/ui/m_tag_box.ts b/packages/devextreme/js/__internal/ui/m_tag_box.ts index 3ec7377138c2..7080c1eeb6d9 100644 --- a/packages/devextreme/js/__internal/ui/m_tag_box.ts +++ b/packages/devextreme/js/__internal/ui/m_tag_box.ts @@ -652,8 +652,7 @@ const TagBox = (SelectBox as any).inherit({ }, _renderMultiSelect() { - // @ts-expect-error - const d = new Deferred(); + const d = Deferred(); this._updateTagsContainer(this._$textEditorInputContainer); this._renderInputSize(); @@ -785,8 +784,7 @@ const TagBox = (SelectBox as any).inherit({ const clientFilterFunction = creator.getLocalFilter(this._valueGetter); const filteredItems = selectedItems.filter(clientFilterFunction); const selectedItemsAlreadyLoaded = filteredItems.length === values.length; - // @ts-expect-error - const d = new Deferred(); + const d = Deferred(); const dataController = this._dataController; if ((!this._isDataSourceChanged || isListItemsLoaded) && selectedItemsAlreadyLoaded) { @@ -844,8 +842,7 @@ const TagBox = (SelectBox as any).inherit({ } }); - // @ts-expect-error - const d = new Deferred(); + const d = Deferred(); when.apply(this, loadItemPromises).always(() => { d.resolve(items); }); @@ -880,8 +877,7 @@ const TagBox = (SelectBox as any).inherit({ }, _getFilteredGroupedItems(values) { - // @ts-expect-error - const selectedItems = new Deferred(); + const selectedItems = Deferred(); if (this._filteredGroupedItemsLoadPromise) { this._dataController.cancel(this._filteredGroupedItemsLoadPromise.operationId); @@ -906,8 +902,7 @@ const TagBox = (SelectBox as any).inherit({ _loadTagsData() { const values = this._getValue(); - // @ts-expect-error - const tagData = new Deferred(); + const tagData = Deferred(); this._selectedItems = []; @@ -926,8 +921,7 @@ const TagBox = (SelectBox as any).inherit({ }, _renderTags() { - // @ts-expect-error - const d = new Deferred(); + const d = Deferred(); let isPlainDataUsed = false; if (this._shouldGetItemsFromPlain(this._valuesToUpdate)) { @@ -1024,8 +1018,8 @@ const TagBox = (SelectBox as any).inherit({ _renderTagsCore(items) { this._isInputReady?.reject(); - // @ts-expect-error - this._isInputReady = new Deferred(); + + this._isInputReady = Deferred(); this._renderField(); this.option('selectedItems', this._selectedItems.slice()); diff --git a/packages/devextreme/js/__internal/ui/shared/m_grouped_data_converter_mixin.ts b/packages/devextreme/js/__internal/ui/shared/m_grouped_data_converter_mixin.ts index 79290b427b91..a842c1524da7 100644 --- a/packages/devextreme/js/__internal/ui/shared/m_grouped_data_converter_mixin.ts +++ b/packages/devextreme/js/__internal/ui/shared/m_grouped_data_converter_mixin.ts @@ -1,51 +1,49 @@ -import { isObject } from '../../core/utils/type'; +import { isObject } from '@js/core/utils/type'; -const isCorrectStructure = data => { - return Array.isArray(data) && data.every(item => { - const hasTwoFields = Object.keys(item).length === 2; - const hasCorrectFields = 'key' in item && 'items' in item; +const isCorrectStructure = (data) => Array.isArray(data) && data.every((item) => { + const hasTwoFields = Object.keys(item).length === 2; + const hasCorrectFields = 'key' in item && 'items' in item; - return hasTwoFields && hasCorrectFields && Array.isArray(item.items); - }); -}; + return hasTwoFields && hasCorrectFields && Array.isArray(item.items); +}); export default { - _getSpecificDataSourceOption: function() { - const groupKey = 'key'; - let dataSource = this.option('dataSource'); - let hasSimpleItems = false; - let data = {}; - - if(this._getGroupedOption() && isCorrectStructure(dataSource)) { - data = dataSource.reduce((accumulator, item) => { - const items = item.items.map(innerItem => { - if(!isObject(innerItem)) { - innerItem = { text: innerItem }; - hasSimpleItems = true; - } - - if(!(groupKey in innerItem)) { - innerItem[groupKey] = item.key; - } - - return innerItem; - }); - return accumulator.concat(items); - }, []); - - dataSource = { - store: { - type: 'array', - data - }, - group: { selector: 'key', keepInitialKeyOrder: true } - }; - - if(hasSimpleItems) { - dataSource.searchExpr = 'text'; - } - } - - return dataSource; + _getSpecificDataSourceOption() { + const groupKey = 'key'; + let dataSource = this.option('dataSource'); + let hasSimpleItems = false; + let data = {}; + + if (this._getGroupedOption() && isCorrectStructure(dataSource)) { + data = dataSource.reduce((accumulator, item) => { + const items = item.items.map((innerItem) => { + if (!isObject(innerItem)) { + innerItem = { text: innerItem }; + hasSimpleItems = true; + } + + if (!(groupKey in innerItem)) { + innerItem[groupKey] = item.key; + } + + return innerItem; + }); + return accumulator.concat(items); + }, []); + + dataSource = { + store: { + type: 'array', + data, + }, + group: { selector: 'key', keepInitialKeyOrder: true }, + }; + + if (hasSimpleItems) { + dataSource.searchExpr = 'text'; + } } + + return dataSource; + }, }; diff --git a/packages/devextreme/js/__internal/ui/toolbar/internal/m_toolbar.menu.list.ts b/packages/devextreme/js/__internal/ui/toolbar/internal/m_toolbar.menu.list.ts index 185ccf1532ba..35ec889f1387 100644 --- a/packages/devextreme/js/__internal/ui/toolbar/internal/m_toolbar.menu.list.ts +++ b/packages/devextreme/js/__internal/ui/toolbar/internal/m_toolbar.menu.list.ts @@ -1,6 +1,6 @@ import $ from '@js/core/renderer'; import { each } from '@js/core/utils/iterator'; -import { ListBase } from '@js/ui/list/ui.list.base'; +import { ListBase } from '@ts/ui/list/m_list.base'; const TOOLBAR_MENU_ACTION_CLASS = 'dx-toolbar-menu-action'; const TOOLBAR_HIDDEN_BUTTON_CLASS = 'dx-toolbar-hidden-button'; diff --git a/packages/devextreme/js/ui/gantt/ui.gantt.dialogs.js b/packages/devextreme/js/ui/gantt/ui.gantt.dialogs.js index 78020002d9b6..a76e4335f2d6 100644 --- a/packages/devextreme/js/ui/gantt/ui.gantt.dialogs.js +++ b/packages/devextreme/js/ui/gantt/ui.gantt.dialogs.js @@ -5,7 +5,7 @@ import '../radio_group'; import dateLocalization from '../../localization/date'; import messageLocalization from '../../localization/message'; import '../list_light'; -import '../list/modules/deleting'; +import '../../__internal/ui/list/modules/m_deleting'; export class GanttDialog { constructor(owner, $element) { diff --git a/packages/devextreme/js/ui/list.js b/packages/devextreme/js/ui/list.js index f54599db0450..0c9b9458617d 100644 --- a/packages/devextreme/js/ui/list.js +++ b/packages/devextreme/js/ui/list.js @@ -1,9 +1,9 @@ import List from './list_light'; -import './list/modules/selection'; -import './list/modules/deleting'; -import './list/modules/dragging'; -import './list/modules/context'; -import './list/modules/search'; +import '../__internal/ui/list/modules/m_selection'; +import '../__internal/ui/list/modules/m_deleting'; +import '../__internal/ui/list/modules/m_dragging'; +import '../__internal/ui/list/modules/m_context'; +import '../__internal/ui/list/modules/m_search'; export default List; diff --git a/packages/devextreme/js/ui/list_light.js b/packages/devextreme/js/ui/list_light.js index 33b1cdb32807..d7acecb78ec5 100644 --- a/packages/devextreme/js/ui/list_light.js +++ b/packages/devextreme/js/ui/list_light.js @@ -1,4 +1,4 @@ -import ListEdit from './list/ui.list.edit.search'; +import ListEdit from '../__internal/ui/list/m_list.edit.search'; import registerComponent from '../core/component_registrator'; // STYLE list @@ -6,3 +6,39 @@ import registerComponent from '../core/component_registrator'; registerComponent('dxList', ListEdit); export default ListEdit; + +/** + * @name dxListOptions.selectedIndex + * @type number + * @default -1 + * @hidden + */ + +/** + * @name dxListOptions.selectedItem + * @hidden + */ + +/** + * @name dxList.getItemElementByFlatIndex + * @publicName getItemElementByFlatIndex(flatIndex) + * @param1 flatIndex:Number + * @return Element + * @hidden + */ + +/** + * @name dxList.getFlatIndexByItemElement + * @publicName getFlatIndexByItemElement(itemElement) + * @param1 itemElement:Element + * @return object + * @hidden + */ + +/** + * @name dxList.getItemByIndex + * @publicName getItemByIndex(index) + * @param1 index:Number + * @return object + * @hidden + */ diff --git a/packages/devextreme/playground/modular/entry.js b/packages/devextreme/playground/modular/entry.js index 558878e05e4b..0811727027a4 100644 --- a/packages/devextreme/playground/modular/entry.js +++ b/packages/devextreme/playground/modular/entry.js @@ -10,62 +10,62 @@ const newElement = (name) => { return el; }; -import 'devextreme/ui/list/modules/selection'; +import 'devextreme/__internal/ui/list/modules/m_selection'; new ListBase(newElement('selection'), { dataSource: [ 1, 2, 3 ], showSelectionControls: true, selectionMode: 'single' }); -import 'devextreme/ui/list/modules/deleting'; +import 'devextreme/__internal/ui/list/modules/m_deleting'; new ListBase(newElement('deleting'), { dataSource: [ 1, 2, 3 ], allowItemDeleting: true }); -import 'devextreme/ui/list/modules/deleting.context'; +import 'devextreme/__internal/ui/list/modules/m_deleting.context'; new ListBase(newElement('itemDeleteMode context'), { dataSource: [ 1, 2, 3 ], allowItemDeleting: true, itemDeleteMode: 'context' }); -import 'devextreme/ui/list/modules/deleting.swipe'; +import 'devextreme/__internal/ui/list/modules/m_deleting.swipe'; new ListBase(newElement('itemDeleteMode swipe'), { dataSource: [ 1, 2, 3 ], allowItemDeleting: true, itemDeleteMode: 'swipe' }); -import 'devextreme/ui/list/modules/deleting.slideItem'; +import 'devextreme/__internal/ui/list/modules/m_deleting.slideItem'; new ListBase(newElement('itemDeleteMode slideItem'), { dataSource: [ 1, 2, 3 ], allowItemDeleting: true, itemDeleteMode: 'slideItem' }); -import 'devextreme/ui/list/modules/deleting.toggle'; +import 'devextreme/__internal/ui/list/modules/m_deleting.toggle'; new ListBase(newElement('itemDeleteMode toggle'), { dataSource: [ 1, 2, 3 ], allowItemDeleting: true, itemDeleteMode: 'toggle' }); -import 'devextreme/ui/list/modules/deleting.slideButton'; +import 'devextreme/__internal/ui/list/modules/m_deleting.slideButton'; new ListBase(newElement('itemDeleteModeslideButton'), { dataSource: [ 1, 2, 3 ], allowItemDeleting: true, itemDeleteMode: 'slideButton' }); -import 'devextreme/ui/list/modules/deleting.static'; +import 'devextreme/__internal/ui/list/modules/m_deleting.static'; new ListBase(newElement('itemDeleteModestatic'), { dataSource: [ 1, 2, 3 ], allowItemDeleting: true, itemDeleteMode: 'static' }); -import 'devextreme/ui/list/modules/dragging'; +import 'devextreme/__internal/ui/list/modules/m_dragging'; new ListBase(newElement('itemDragging allowReordering'), { dataSource: [ 1, 2, 3 ], itemDragging: { @@ -87,7 +87,7 @@ new ListBase(newElement('itemDragging group'), { } }); -import 'devextreme/ui/list/modules/context'; +import 'devextreme/__internal/ui/list/modules/m_context'; new ListBase(newElement('context'), { dataSource: [ 1, 2, 3 ], menuItems: [ @@ -95,7 +95,7 @@ new ListBase(newElement('context'), { ] }); -import 'devextreme/ui/list/modules/search'; +import 'devextreme/__internal/ui/list/modules/m_search'; new ListBase(newElement('search'), { dataSource: [ 1, 2, 3 ], searchEnabled: true diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/desktopTooltip.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/desktopTooltip.tests.js index ae6ed9c0414a..3a93af0f4ecf 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/desktopTooltip.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/desktopTooltip.tests.js @@ -2,7 +2,7 @@ import { DesktopTooltipStrategy } from '__internal/scheduler/tooltip_strategies/ import { FunctionTemplate } from 'core/templates/function_template'; import { extend } from 'core/utils/extend'; import Tooltip from 'ui/tooltip'; -import List from 'ui/list/ui.list.edit'; +import List from '__internal/ui/list/m_list.edit'; import Button from 'ui/button'; import support from 'core/utils/support'; diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/listParts/commonTests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/listParts/commonTests.js index efbcbd4925b3..4b6fd703aac5 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/listParts/commonTests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/listParts/commonTests.js @@ -18,7 +18,7 @@ import ArrayStore from 'data/array_store'; import CustomStore from 'data/custom_store'; import DOMComponent from 'core/dom_component'; import List from 'ui/list'; -import { setScrollView } from 'ui/list/ui.list.base'; +import { setScrollView } from '__internal/ui/list/m_list.base'; import ScrollView from 'ui/scroll_view'; import eventsEngine from 'events/core/events_engine'; import ariaAccessibilityTestHelper from '../../../helpers/ariaAccessibilityTestHelper.js'; diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/listParts/editingUITests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/listParts/editingUITests.js index 207e16710bcf..c679ad2103d2 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/listParts/editingUITests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/listParts/editingUITests.js @@ -9,9 +9,9 @@ import config from 'core/config'; import pointerMock from '../../../helpers/pointerMock.js'; import contextMenuEvent from 'events/contextmenu'; import keyboardMock from '../../../helpers/keyboardMock.js'; -import decoratorRegistry from 'ui/list/ui.list.edit.decorator_registry'; -import SwitchableEditDecorator from 'ui/list/ui.list.edit.decorator.switchable'; -import SwitchableButtonEditDecorator from 'ui/list/ui.list.edit.decorator.switchable.button'; +import { registry, register } from '__internal/ui/list/m_list.edit.decorator_registry'; +import SwitchableEditDecorator from '__internal/ui/list/m_list.edit.decorator.switchable'; +import SwitchableButtonEditDecorator from '__internal/ui/list/m_list.edit.decorator.switchable.button'; import themes from 'ui/themes'; import { DataSource } from 'data/data_source/data_source'; import ArrayStore from 'data/array_store'; @@ -58,10 +58,10 @@ QUnit.module('switchable menu decorator', { }); - decoratorRegistry.register('menu', 'test', testDecorator); + register('menu', 'test', testDecorator); }, afterEach: function() { - delete decoratorRegistry.registry.menu.test; + delete registry.menu.test; } }); @@ -289,12 +289,12 @@ QUnit.module('switchable button delete decorator', { } }); - decoratorRegistry.register('menu', 'test', testDecorator); + register('menu', 'test', testDecorator); }, afterEach: function() { fx.off = false; - delete decoratorRegistry.registry.menu.test; + delete registry.menu.test; } });