From d9df47e7b3545951b62bc49eca5af1fbabb81600 Mon Sep 17 00:00:00 2001 From: Nikki Gonzales <38495263+nikkithelegendarypokemonster@users.noreply.github.com> Date: Tue, 15 Oct 2024 15:37:13 +0800 Subject: [PATCH] MultiView: implement selectedIndex property update when selected item is hidden (#28145) Co-authored-by: ksercs --- .../js/__internal/ui/m_multi_view.ts | 57 ++++- .../DevExpress.ui.widgets/multiView.tests.js | 222 ++++++++++++++++++ 2 files changed, 267 insertions(+), 12 deletions(-) diff --git a/packages/devextreme/js/__internal/ui/m_multi_view.ts b/packages/devextreme/js/__internal/ui/m_multi_view.ts index f3e8226a0ab2..2134da9b44ac 100644 --- a/packages/devextreme/js/__internal/ui/m_multi_view.ts +++ b/packages/devextreme/js/__internal/ui/m_multi_view.ts @@ -100,7 +100,7 @@ const MultiView = CollectionWidget.inherit({ return this.option('items').length; }, - _normalizeIndex(index) { + _normalizeIndex(index, direction, loop = true) { const count = this._itemsCount(); if (index < 0) { @@ -110,9 +110,9 @@ const MultiView = CollectionWidget.inherit({ index -= count; } - const step = this._swipeDirection > 0 ? -1 : 1; - - while (!this._isItemVisible(index)) { + const step = direction > 0 ? -1 : 1; + const lastNotLoopedIndex = step === -1 ? 0 : count - 1; + while (!this._isItemVisible(index) && (loop || index !== lastNotLoopedIndex)) { index = (index + step) % count; } @@ -142,14 +142,37 @@ const MultiView = CollectionWidget.inherit({ this._initSwipeable(); }, + _ensureSelectedItemIsVisible(): void { + const { items, loop, selectedIndex: currentSelectedIndex } = this.option(); + + if (this._isItemVisible(currentSelectedIndex)) { + return; + } + + const allItemsHidden = items.every((_, index) => !this._isItemVisible(index)); + if (allItemsHidden) { + this.option('selectedIndex', 0); + return; + } + + const direction = -1 * this._getRTLSignCorrection(); + let newSelectedIndex = this._normalizeIndex(currentSelectedIndex, direction, loop); + if (newSelectedIndex === currentSelectedIndex) { + newSelectedIndex = this._normalizeIndex(currentSelectedIndex, -direction, loop); + } + + this.option('selectedIndex', newSelectedIndex); + }, + _initMarkup() { this._deferredItems = []; this.callBase(); + this._ensureSelectedItemIsVisible(); const selectedItemIndices = this._getSelectedItemIndices(); - this._updateItemsVisibility(selectedItemIndices[0]); + this._setElementAria(); this._setItemsAria(); }, @@ -391,20 +414,14 @@ const MultiView = CollectionWidget.inherit({ e.maxLeftOffset = toNumber(loop || (rtl ? selectedIndex > firstAvailableIndex : selectedIndex < lastAvailableIndex)); e.maxRightOffset = toNumber(loop || (rtl ? selectedIndex < lastAvailableIndex : selectedIndex > firstAvailableIndex)); - - this._swipeDirection = null; }, _swipeUpdateHandler(e) { const { offset } = e; const swipeDirection = sign(offset) * this._getRTLSignCorrection(); - if (swipeDirection !== this._swipeDirection) { - this._swipeDirection = swipeDirection; - } - const selectedIndex = this.option('selectedIndex'); - const newIndex = this._normalizeIndex(selectedIndex - swipeDirection); + const newIndex = this._normalizeIndex(selectedIndex - swipeDirection, swipeDirection); if (selectedIndex === newIndex) { return; @@ -513,6 +530,15 @@ const MultiView = CollectionWidget.inherit({ this.callBase(); }, + _itemOptionChanged(item, property) { + this.callBase(...arguments); + + const { selectedItem } = this.option(); + if (property === 'visible' && item === selectedItem) { + this._ensureSelectedItemIsVisible(); + } + }, + _optionChanged(args) { const { value } = args; @@ -533,6 +559,13 @@ const MultiView = CollectionWidget.inherit({ this._findBoundaryIndices(); this.callBase(args); break; + case 'selectedIndex': + if (this._isItemVisible(value)) { + this.callBase(args); + } else { + this._ensureSelectedItemIsVisible(); + } + break; default: this.callBase(args); } diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/multiView.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/multiView.tests.js index 37354b7b8ac5..cdf0559df0c2 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets/multiView.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets/multiView.tests.js @@ -1763,3 +1763,225 @@ QUnit.module('swipeable disabled state', () => { assert.equal(multiView.option('swipeEnabled'), false, 'MultiView.swipeEnabled'); }); }); + +QUnit.module('selectedIndex vs item.visible', () => { + QUnit.module('on init', () => { + QUnit.test('selectedIndex should be updated to the next visible item if initially selected item is hidden', function(assert) { + const $multiView = $('#multiView').dxMultiView({ + items: [ + { text: '1', visible: true }, + { text: '2', visible: false }, + { text: '3', visible: true }, + ], + selectedIndex: 1 + }); + const instance = $multiView.dxMultiView('instance'); + + assert.strictEqual(instance.option('selectedIndex'), 2, 'selectedIndex is updated on proper index'); + }); + + QUnit.test('selectedIndex should be updated to the next visible item to the left if initially selected item is hidden and RTL is enabled', function(assert) { + const $multiView = $('#multiView').dxMultiView({ + items: [ + { text: '1', visible: true }, + { text: '2', visible: false }, + { text: '3', visible: true }, + ], + selectedIndex: 1, + rtlEnabled: true + }); + const instance = $multiView.dxMultiView('instance'); + + assert.strictEqual(instance.option('selectedIndex'), 0, 'selectedIndex is updated on proper index'); + }); + + QUnit.test('selectedIndex should be zero when all items are not visible', function(assert) { + const $multiView = $('#multiView').dxMultiView({ + items: [ + { text: '1', visible: false }, + { text: '2', visible: false }, + { text: '3', visible: false }, + ], + selectedIndex: 1 + }); + const instance = $multiView.dxMultiView('instance'); + + assert.strictEqual(instance.option('selectedIndex'), 0, 'selectedIndex is updated on proper index'); + }); + + QUnit.test('next visible item should be selected if currently selected item is hidden and loop=true', function(assert) { + const $multiView = $('#multiView').dxMultiView({ + items: [ + { text: '1', visible: true }, + { text: '2', visible: false }, + { text: '3', visible: false } + ], + selectedIndex: 2, + loop: true + }); + const instance = $multiView.dxMultiView('instance'); + + assert.strictEqual(instance.option('selectedIndex'), 0, 'selectedIndex is updated on proper index'); + }); + + QUnit.test('first visible item should be selected if current selected item is hidden and it is in the end and loop = true', function(assert) { + const $multiView = $('#multiView').dxMultiView({ + items: [ + { text: '1', visible: true }, + { text: '2', visible: true }, + { text: '3', visible: false } + ], + selectedIndex: 2, + loop: true + }); + const instance = $multiView.dxMultiView('instance'); + + assert.strictEqual(instance.option('selectedIndex'), 0, 'selectedIndex is updated on proper index'); + }); + }); + + QUnit.module('on runtime', () => { + QUnit.test('selectedIndex should be updated to the next visible item if it is changed to a hidden item', function(assert) { + const $multiView = $('#multiView').dxMultiView({ + items: [ + { text: '1', visible: true }, + { text: '2', visible: false }, + { text: '3', visible: true }, + ] + }); + const instance = $multiView.dxMultiView('instance'); + instance.option('selectedIndex', 1); + + assert.strictEqual(instance.option('selectedIndex'), 2, 'selectedIndex is updated on proper index'); + }); + + QUnit.test('selectedIndex should be set to zero if all items became hidden', function(assert) { + const $multiView = $('#multiView').dxMultiView({ + items: [ + { text: '1', visible: true }, + { text: '2', visible: false }, + { text: '3', visible: true }, + ], + selectedIndex: 2 + }); + const instance = $multiView.dxMultiView('instance'); + instance.option({ + items: [ + { text: '1', visible: false }, + { text: '2', visible: false }, + { text: '3', visible: false }, + ] + }); + + assert.strictEqual(instance.option('selectedIndex'), 0, 'selectedIndex is updated on proper index'); + }); + + QUnit.test('when hiding selected item selectedIndex should be set to next visible item', function(assert) { + const $multiView = $('#multiView').dxMultiView({ + items: [ + { text: '1', visible: true }, + { text: '2', visible: true }, + { text: '3', visible: true }, + ], + selectedIndex: 1 + }); + const instance = $multiView.dxMultiView('instance'); + instance.option('items[1].visible', false); + + assert.strictEqual(instance.option('selectedIndex'), 2, 'selectedIndex is updated on proper index'); + }); + + QUnit.test('when hiding non-selected item before selectedIndex, selectedIndex should not change', function(assert) { + const $multiView = $('#multiView').dxMultiView({ + items: [ + { text: '1', visible: true }, + { text: '2', visible: true }, + { text: '3', visible: true }, + ], + selectedIndex: 2 + }); + const instance = $multiView.dxMultiView('instance'); + instance.option('items[1].visible', false); + + assert.strictEqual(instance.option('selectedIndex'), 2, 'selectedIndex is updated on proper index'); + }); + + QUnit.test('when hiding selected item positioned in the end, next visible item to the left is selected', function(assert) { + const $multiView = $('#multiView').dxMultiView({ + items: [ + { text: '1', visible: true }, + { text: '2', visible: true }, + { text: '3', visible: true }, + ], + selectedIndex: 2 + }); + const instance = $multiView.dxMultiView('instance'); + instance.option('items[2].visible', false); + + assert.strictEqual(instance.option('selectedIndex'), 1, 'selectedIndex is updated on proper index'); + }); + + QUnit.test('when showing previously invisible item before selectedIndex, selectedIndex should not change', function(assert) { + const $multiView = $('#multiView').dxMultiView({ + items: [ + { text: '1', visible: true }, + { text: '2', visible: false }, + { text: '3', visible: true }, + ], + selectedIndex: 2 + }); + const instance = $multiView.dxMultiView('instance'); + instance.option('items[1].visible', true); + + assert.strictEqual(instance.option('selectedIndex'), 2, 'selectedIndex is updated on proper index'); + }); + + QUnit.test('when showing previously invisible item after selectedIndex, selectedIndex should not change', function(assert) { + const $multiView = $('#multiView').dxMultiView({ + items: [ + { text: '1', visible: true }, + { text: '2', visible: false }, + { text: '3', visible: true }, + ], + selectedIndex: 0 + }); + const instance = $multiView.dxMultiView('instance'); + instance.option('items[1].visible', true); + + assert.strictEqual(instance.option('selectedIndex'), 0, 'selectedIndex is updated on proper index'); + }); + + QUnit.test('when hiding last visible item selectedIndex should return to 0 index', function(assert) { + const $multiView = $('#multiView').dxMultiView({ + items: [ + { text: '1', visible: false }, + { text: '2', visible: false }, + { text: '3', visible: true }, + ], + selectedIndex: 2 + }); + const instance = $multiView.dxMultiView('instance'); + instance.option('items[2].visible', false); + + assert.strictEqual(instance.option('selectedIndex'), 0, 'selectedIndex is updated on proper index'); + }); + + QUnit.test('after removing selected item selectedIndex should be restored to 0', function(assert) { + const $multiView = $('#multiView').dxMultiView({ + items: [ + { text: '1', visible: true }, + { text: '2', visible: true }, + { text: '3', visible: true }, + ], + selectedIndex: 2 + }); + const instance = $multiView.dxMultiView('instance'); + instance.option('items', [ + { text: '1', visible: true }, + { text: '2', visible: true }, + ]); + + assert.strictEqual(instance.option('selectedIndex'), 0, 'selectedIndex is not changed'); + }); + }); +});