Skip to content

Commit

Permalink
visibility in swipe action
Browse files Browse the repository at this point in the history
  • Loading branch information
@nikkithelegendarypokemonster
nikkithelegendarypokemonster committed Oct 1, 2024
1 parent eb79e3c commit 179f41c
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 8 deletions.
33 changes: 25 additions & 8 deletions packages/devextreme/js/__internal/ui/m_multi_view.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,12 @@ const MultiView = CollectionWidget.inherit({
index -= count;
}

const step = this._swipeDirection > 0 ? -1 : 1;

while (!this._isItemVisible(index)) {
index = (index + step + count) % count;
}

return index;
},

Expand Down Expand Up @@ -141,6 +147,10 @@ const MultiView = CollectionWidget.inherit({

this.callBase();

// const keys = this.option('items').find(item => item.visible === true || item.visible === undefined);
// const selectedItemIndices = this._getSelectedItemIndices([keys]);
// this.option('selectedIndex', selectedItemIndices[0]);

const selectedItemIndices = this._getSelectedItemIndices();

this._updateItemsVisibility(selectedItemIndices[0]);
Expand Down Expand Up @@ -260,6 +270,10 @@ const MultiView = CollectionWidget.inherit({
}
},

_isItemVisible(index) {
return this.option('items')[index].visible ?? true;
},

_updateItemsVisibility(selectedIndex, newIndex) {
const $itemElements = this._itemElements();

Expand Down Expand Up @@ -353,8 +367,9 @@ const MultiView = CollectionWidget.inherit({

items.forEach((item, index) => {
const isDisabled = Boolean(item?.disabled);
const isVisible = this._isItemVisible(index);

if (!isDisabled) {
if (!isDisabled && isVisible) {
firstIndex ??= index;
lastIndex = index;
}
Expand Down Expand Up @@ -388,16 +403,18 @@ const MultiView = CollectionWidget.inherit({
const { offset } = e;
const swipeDirection = sign(offset) * this._getRTLSignCorrection();

_translator.move(this._$itemContainer, offset * this._itemWidth());

if (swipeDirection !== this._swipeDirection) {
this._swipeDirection = swipeDirection;
}

const selectedIndex = this.option('selectedIndex');
const newIndex = this._normalizeIndex(selectedIndex - swipeDirection);
const selectedIndex = this.option('selectedIndex');
const newIndex = this._normalizeIndex(selectedIndex - swipeDirection);

this._updateItems(selectedIndex, newIndex);
if (selectedIndex !== newIndex) {
_translator.move(this._$itemContainer, offset * this._itemWidth());
}

this._updateItems(selectedIndex, newIndex);
},

_findNextAvailableIndex(index, offset) {
Expand All @@ -419,8 +436,8 @@ const MultiView = CollectionWidget.inherit({

for (let i = index + offset; i >= firstAvailableIndex && i <= lastAvailableIndex; i += offset) {
const isDisabled = Boolean(items[i].disabled);

if (!isDisabled) {
const isVisible = this._isItemVisible(i);
if (!isDisabled && isVisible) {
return i;
}
}
Expand Down
101 changes: 101 additions & 0 deletions packages/devextreme/testing/tests/DevExpress.ui.widgets/multiView.tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,41 @@ QUnit.module('rendering', () => {
}
});

QUnit.test('multiview items.visible option should always be default to true', function(assert) {
const $multiView = $('#multiView').dxMultiView({
items: [
{ text: '1' }
]
});
const $items = $multiView.find(toSelector(MULTIVIEW_ITEM_CLASS));

assert.notOk($items.eq(0).hasClass(MULTIVIEW_ITEM_HIDDEN_CLASS), 'first item is visible');
});

QUnit.test('multiview should not render items those that are option visible is false', function(assert) {
const $multiView = $('#multiView').dxMultiView({
items: [
{ text: '1', visible: true },
{ text: '2', visible: false }
]
});
const $items = $multiView.find(toSelector(MULTIVIEW_ITEM_CLASS));

assert.notOk($items.eq(0).hasClass(MULTIVIEW_ITEM_HIDDEN_CLASS), 'first item is visible');
assert.ok($items.eq(1).hasClass(MULTIVIEW_ITEM_HIDDEN_CLASS), 'second item is hidden');
});

QUnit.test('when all items are not visible selectIndex should be 0', function(assert) {
const multiView = $('#multiView').dxMultiView({
items: [
{ text: '1', visible: false },
{ text: '2', visible: false }
]
}).dxMultiView('instance');

assert.strictEqual(multiView.option('selectedIndex'), 0, 'selectedIndex is back at 0');
});

QUnit.test('multiView should trigger resize event for item content after item visibility changed', function(assert) {
const resizeHandler = sinon.spy();

Expand Down Expand Up @@ -480,6 +515,21 @@ QUnit.module('interaction via swipe', {
});
});

QUnit.test('when only one item is visible, swipe action does not move the current visible item', function(assert) {
const $multiView = $('#multiView').dxMultiView({
items: [
{ text: '1', visible: true },
{ text: '2', visible: false }
]
});
const $itemContainer = $multiView.find(toSelector(MULTIVIEW_ITEM_CONTAINER_CLASS));
const pointer = pointerMock($multiView);

pointer.start().swipeStart().swipe(-0.1);
assert.strictEqual(position($itemContainer), 0, 'container did not move');
pointer.swipeEnd();
});

QUnit.test('item container should not be moved by swipe if items count less then 2', function(assert) {
const $multiView = $('#multiView').dxMultiView({
items: [1]
Expand Down Expand Up @@ -741,6 +791,57 @@ QUnit.module('loop', {
delete this.animationStartAction;
}
}, () => {
QUnit.test('when only one item is visible, swipe action does not move the current visible item', function(assert) {
const $multiView = $('#multiView').dxMultiView({
items: [
{ text: '1', visible: true },
{ text: '2', visible: false }
],
loop: true
});
const $itemContainer = $multiView.find(toSelector(MULTIVIEW_ITEM_CONTAINER_CLASS));
const pointer = pointerMock($multiView);

pointer.start().swipeStart().swipe(-0.1);
assert.strictEqual(position($itemContainer), 0, 'container did not move');
pointer.swipeEnd();
});

QUnit.test('when swiping left on the first item, show last visible item', function(assert) {
const $multiView = $('#multiView').dxMultiView({
items: [
{ text: '1', visible: true },
{ text: '2', visible: false },
{ text: '3', visible: true }
],
loop: true
});
const instance = $multiView.dxMultiView('instance');
const pointer = pointerMock($multiView);

pointer.start().swipeStart().swipe(-0.5).swipeEnd(-1);

assert.strictEqual(instance.option('selectedIndex'), 2, 'Correct item is shown after swiping left');
});

QUnit.test('when swiping right on the last item, show first visible item', function(assert) {
const $multiView = $('#multiView').dxMultiView({
items: [
{ text: '1', visible: true },
{ text: '2', visible: false },
{ text: '3', visible: true }
],
loop: true,
selectedIndex: 2
});
const instance = $multiView.dxMultiView('instance');
const pointer = pointerMock($multiView);

pointer.start().swipeStart().swipe(0.5).swipeEnd(1);

assert.strictEqual(instance.option('selectedIndex'), 0, 'Correct item is shown after swiping right');
});

QUnit.test('item container should be moved right if selected index is 0', function(assert) {
const $multiView = $('#multiView').dxMultiView({
items: [1, 2, 3],
Expand Down

0 comments on commit 179f41c

Please sign in to comment.