Skip to content

Commit 8425734

Browse files
liamdebeasiGwe-n
liamdebeasi
and
Gwe-n
authored
fix(reorder-group): support custom components (#26289)
resolves #19447 Co-authored-by: Gwe-n <gwe-n@users.noreply.github.com>
1 parent a52bfe6 commit 8425734

File tree

12 files changed

+277
-229
lines changed

12 files changed

+277
-229
lines changed

‎core/src/components/reorder-group/reorder-group.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,8 @@
44
// --------------------------------------------------
55

66
.reorder-list-active > * {
7+
display: block;
8+
79
transition: transform 300ms;
810
will-change: transform;
911
}

‎core/src/components/reorder-group/test/basic/e2e.ts‎

Lines changed: 0 additions & 10 deletions
This file was deleted.

‎core/src/components/reorder-group/test/basic/reorder-group.e2e.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { expect } from '@playwright/test';
2+
import { test } from '@utils/test/playwright';
3+
4+
test.describe('reorder group: basic', () => {
5+
test.beforeEach(({ skip }) => {
6+
skip.rtl();
7+
skip.mode('ios', 'Reorder group does not have per-mode styles');
8+
});
9+
test('should render the handle when reorder group is enabled', async ({ page }) => {
10+
await page.setContent(`
11+
<ion-reorder-group disabled="false">
12+
<ion-item>
13+
<ion-label>Item</ion-label>
14+
<ion-reorder slot="end"></ion-reorder>
15+
</ion-item>
16+
</ion-reorder-group>
17+
`);
18+
const reorder = page.locator('ion-reorder');
19+
await expect(reorder).toBeVisible();
20+
});
21+
test('should not render the handle when reorder group is disabled', async ({ page }) => {
22+
await page.setContent(`
23+
<ion-reorder-group disabled="true">
24+
<ion-item>
25+
<ion-label>Item</ion-label>
26+
<ion-reorder slot="end"></ion-reorder>
27+
</ion-item>
28+
</ion-reorder-group>
29+
`);
30+
const reorder = page.locator('ion-reorder');
31+
await expect(reorder).toBeHidden();
32+
});
33+
});

‎core/src/components/reorder-group/test/interactive/e2e.ts‎

Lines changed: 0 additions & 67 deletions
This file was deleted.

‎core/src/components/reorder-group/test/interactive/index.html‎

Lines changed: 25 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -15,44 +15,32 @@
1515
</head>
1616

1717
<body>
18-
<ion-list><ion-reorder-group disabled="false"></ion-reorder-group></ion-list>
19-
18+
<ion-reorder-group disabled="false">
19+
<ion-item>
20+
<ion-label>Item 1</ion-label>
21+
<ion-reorder slot="end"></ion-reorder>
22+
</ion-item>
23+
<ion-reorder>
24+
<ion-item>
25+
<ion-label>Item 2</ion-label>
26+
</ion-item>
27+
</ion-reorder>
28+
<ion-item>
29+
<ion-label>Item 3</ion-label>
30+
<ion-reorder slot="end"></ion-reorder>
31+
</ion-item>
32+
<ion-reorder>
33+
<ion-item>
34+
<ion-label>Item 4</ion-label>
35+
</ion-item>
36+
</ion-reorder>
37+
</ion-reorder-group>
2038
<script>
21-
class TestReorderListShadowDom extends HTMLElement {
22-
constructor() {
23-
super();
24-
const shadow = this.attachShadow({ mode: 'open' });
25-
const wrapper = document.createElement('div');
26-
wrapper.innerHTML = `<ion-list><ion-reorder-group disabled="false"></ion-reorder-group></ion-list>`;
27-
shadow.appendChild(wrapper);
28-
}
29-
}
30-
31-
customElements.define('test-reorder-list-shadow-dom', TestReorderListShadowDom);
32-
33-
function addReorderItem(list) {
34-
const reorderItem = document.createElement('ion-reorder');
35-
reorderItem.innerHTML = `<ion-item>
36-
<ion-label>
37-
<h2>Item ${list.childElementCount}</h2>
38-
</ion-label>
39-
</ion-item>`;
40-
41-
reorderItem.id = `item-${list.childElementCount}`;
42-
43-
list.appendChild(reorderItem);
44-
}
45-
46-
const testShadowDomEl = document.createElement('test-reorder-list-shadow-dom');
47-
document.body.appendChild(testShadowDomEl);
48-
49-
let lists = Array.from(document.getElementsByTagName('ion-reorder-group'));
50-
lists.push(testShadowDomEl.shadowRoot.querySelector('ion-reorder-group'));
51-
52-
for (var i = 0; i < lists.length; i++) {
53-
lists[i].addEventListener('ionItemReorder', ({ detail }) => detail.complete(true));
54-
for (var j = 0; j < 3; j++) addReorderItem(lists[i]);
55-
}
39+
const group = document.querySelector('ion-reorder-group');
40+
group.addEventListener('ionItemReorder', (ev) => {
41+
ev.detail.complete();
42+
window.dispatchEvent(new CustomEvent('ionItemReorderComplete'));
43+
});
5644
</script>
5745
</body>
5846
</html>

‎core/src/components/reorder-group/test/interactive/reorder-group.e2e.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { expect } from '@playwright/test';
2+
import { test, dragElementBy } from '@utils/test/playwright';
3+
4+
test.describe('reorder group: interactive', () => {
5+
test.beforeEach(({ skip }) => {
6+
skip.rtl();
7+
skip.mode('ios', 'Reorder group does not have per-mode styles');
8+
skip.browser(
9+
(browserName: string) => browserName !== 'chromium',
10+
'dragElementBy is flaky outside of Chrome browsers.'
11+
);
12+
});
13+
test('should drag and drop when ion-reorder wraps ion-item', async ({ page }) => {
14+
await page.goto(`/src/components/reorder-group/test/interactive`);
15+
16+
const items = page.locator('ion-item');
17+
const ionItemReorderComplete = await page.spyOnEvent('ionItemReorderComplete');
18+
19+
await expect(items).toContainText(['Item 1', 'Item 2', 'Item 3', 'Item 4']);
20+
21+
await dragElementBy(items.nth(1), page, 0, 300);
22+
await ionItemReorderComplete.next();
23+
24+
await expect(items).toContainText(['Item 1', 'Item 3', 'Item 4', 'Item 2']);
25+
});
26+
test('should drag and drop when ion-item wraps ion-reorder', async ({ page }) => {
27+
await page.goto(`/src/components/reorder-group/test/interactive`);
28+
29+
const reorderHandle = page.locator('ion-reorder');
30+
const items = page.locator('ion-item');
31+
const ionItemReorderComplete = await page.spyOnEvent('ionItemReorderComplete');
32+
33+
await expect(items).toContainText(['Item 1', 'Item 2', 'Item 3', 'Item 4']);
34+
35+
await dragElementBy(reorderHandle.nth(0), page, 0, 300);
36+
await ionItemReorderComplete.next();
37+
38+
await expect(items).toContainText(['Item 2', 'Item 3', 'Item 4', 'Item 1']);
39+
});
40+
});

‎core/src/components/reorder-group/test/nested/index.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Reorder - Nested</title>
6+
<meta
7+
name="viewport"
8+
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
9+
/>
10+
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
11+
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
12+
<script src="../../../../../scripts/testing/scripts.js"></script>
13+
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
14+
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
15+
</head>
16+
17+
<body>
18+
<ion-app>
19+
<ion-header>
20+
<ion-toolbar>
21+
<ion-title>Reorder - Nested</ion-title>
22+
</ion-toolbar>
23+
</ion-header>
24+
25+
<ion-content id="content">
26+
<ion-list>
27+
<ion-reorder-group disabled="false">
28+
<app-reorder item="1"></app-reorder>
29+
<app-reorder item="2" parent="true"></app-reorder>
30+
<app-reorder item="3"></app-reorder>
31+
<app-reorder item="4" parent="true"></app-reorder>
32+
</ion-reorder-group>
33+
</ion-list>
34+
</ion-content>
35+
36+
<script>
37+
class AppReorder extends HTMLElement {
38+
constructor() {
39+
super();
40+
41+
if (this.getAttribute('parent') === 'true') {
42+
this.innerHTML = `
43+
<ion-reorder>
44+
<ion-item>
45+
<ion-label>Item ${this.getItem()}</ion-label>
46+
</ion-item>
47+
</ion-reorder>
48+
`;
49+
} else {
50+
this.innerHTML = `
51+
<ion-item>
52+
<ion-label>Item ${this.getItem()}</ion-label>
53+
<ion-reorder slot="end"></ion-reorder>
54+
</ion-item>
55+
`;
56+
}
57+
}
58+
getItem() {
59+
return this.getAttribute('item');
60+
}
61+
}
62+
customElements.define('app-reorder', AppReorder);
63+
64+
const group = document.querySelector('ion-reorder-group');
65+
group.addEventListener('ionItemReorder', (ev) => {
66+
ev.detail.complete();
67+
window.dispatchEvent(new CustomEvent('ionItemReorderComplete'));
68+
});
69+
</script>
70+
</ion-app>
71+
</body>
72+
</html>

‎core/src/components/reorder-group/test/nested/reorder-group.e2e.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { expect } from '@playwright/test';
2+
import { test, dragElementBy } from '@utils/test/playwright';
3+
4+
test.describe('reorder group: nested', () => {
5+
test.beforeEach(({ skip }) => {
6+
skip.rtl();
7+
skip.mode('ios', 'Reorder group does not have per-mode styles');
8+
skip.browser(
9+
(browserName: string) => browserName !== 'chromium',
10+
'dragElementBy is flaky outside of Chrome browsers.'
11+
);
12+
});
13+
test('should drag and drop when ion-reorder wraps ion-item', async ({ page }) => {
14+
await page.goto(`/src/components/reorder-group/test/nested`);
15+
16+
const items = page.locator('app-reorder');
17+
const ionItemReorderComplete = await page.spyOnEvent('ionItemReorderComplete');
18+
19+
await expect(items).toContainText(['Item 1', 'Item 2', 'Item 3', 'Item 4']);
20+
21+
await dragElementBy(items.nth(1), page, 0, 300);
22+
await ionItemReorderComplete.next();
23+
24+
await expect(items).toContainText(['Item 1', 'Item 3', 'Item 4', 'Item 2']);
25+
});
26+
test('should drag and drop when ion-item wraps ion-reorder', async ({ page }) => {
27+
await page.goto(`/src/components/reorder-group/test/nested`);
28+
29+
const reorderHandle = page.locator('app-reorder ion-reorder');
30+
const items = page.locator('app-reorder');
31+
const ionItemReorderComplete = await page.spyOnEvent('ionItemReorderComplete');
32+
33+
await expect(items).toContainText(['Item 1', 'Item 2', 'Item 3', 'Item 4']);
34+
35+
await dragElementBy(reorderHandle.nth(0), page, 0, 300);
36+
await ionItemReorderComplete.next();
37+
38+
await expect(items).toContainText(['Item 2', 'Item 3', 'Item 4', 'Item 1']);
39+
});
40+
});

‎core/src/components/reorder-group/test/scroll-target/e2e.ts‎

Lines changed: 0 additions & 49 deletions
This file was deleted.

0 commit comments

Comments
 (0)