Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(datetime): pass roles to overlay when dismissing #29221

Merged
merged 7 commits into from
Apr 3, 2024
Merged

feat(datetime): pass roles to overlay when dismissing #29221

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3a2ca5a
feat(date-time): add Overlay roles
Rahul-28 Mar 23, 2024
672be04
Merge branch 'ionic-team:main' into fix#28298
Rahul-28 Mar 28, 2024
d8bb1a1
"Refactor: Remove redundant styles and disable dark mode"
Rahul-28 Mar 28, 2024
73377e1
Merge branch 'ionic-team:main' into fix#28298
Rahul-28 Apr 2, 2024
ea29cb6
lint fix
Rahul-28 Apr 2, 2024
4d1f046
Merge branch 'feature-8.1' into fix#28298
liamdebeasi Apr 3, 2024
12ee13b
Update datetime.tsx
liamdebeasi Apr 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions core/src/components/datetime/datetime.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -541,7 +541,7 @@ export class Datetime implements ComponentInterface {
}

if (closeOverlay) {
this.closeParentOverlay();
this.closeParentOverlay(CONFIRM_ROLE);
}
}

Expand All @@ -566,7 +566,7 @@ export class Datetime implements ComponentInterface {
this.ionCancel.emit();

if (closeOverlay) {
this.closeParentOverlay();
this.closeParentOverlay(CANCEL_ROLE);
}
}

Expand Down Expand Up @@ -616,13 +616,13 @@ export class Datetime implements ComponentInterface {
return Array.isArray(activeParts) ? activeParts[0] : activeParts;
};

private closeParentOverlay = () => {
private closeParentOverlay = (role: string) => {
const popoverOrModal = this.el.closest('ion-modal, ion-popover') as
| HTMLIonModalElement
| HTMLIonPopoverElement
| null;
if (popoverOrModal) {
popoverOrModal.dismiss();
popoverOrModal.dismiss(undefined, role);
}
};

Expand Down Expand Up @@ -2645,5 +2645,7 @@ export class Datetime implements ComponentInterface {
}

let datetimeIds = 0;
const CANCEL_ROLE = 'datetime-cancel';
const CONFIRM_ROLE = 'datetime-confirm';
const WHEEL_ITEM_PART = 'wheel-item';
const WHEEL_ITEM_ACTIVE_PART = `active`;
41 changes: 41 additions & 0 deletions core/src/components/datetime/test/overlay-roles/datetime.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { expect } from '@playwright/test';
import { configs, test } from '@utils/test/playwright';

configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ config, title }) => {
test.describe(title('datetime: overlay roles'), () => {
test.beforeEach(async ({ page }) => {
await page.setContent(
`
<ion-modal>
<ion-datetime></ion-datetime>
</ion-modal>
`,
config
);
});
test('should pass role to overlay when calling confirm method', async ({ page }) => {
const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
const modal = page.locator('ion-modal');
const datetime = page.locator('ion-datetime');

await modal.evaluate((el: HTMLIonModalElement) => el.present());

await datetime.evaluate((el: HTMLIonDatetimeElement) => el.confirm(true));

await ionModalDidDismiss.next();
expect(ionModalDidDismiss).toHaveReceivedEventDetail({ data: undefined, role: 'datetime-confirm' });
});
test('should pass role to overlay when calling cancel method', async ({ page }) => {
const ionModalDidDismiss = await page.spyOnEvent('ionModalDidDismiss');
const modal = page.locator('ion-modal');
const datetime = page.locator('ion-datetime');

await modal.evaluate((el: HTMLIonModalElement) => el.present());

await datetime.evaluate((el: HTMLIonDatetimeElement) => el.cancel(true));

await ionModalDidDismiss.next();
expect(ionModalDidDismiss).toHaveReceivedEventDetail({ data: undefined, role: 'datetime-cancel' });
});
});
});
66 changes: 66 additions & 0 deletions core/src/components/datetime/test/overlay-roles/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Datetime - Overlay Roles</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
<script src="../../../../../scripts/testing/scripts.js"></script>
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
<style>
ion-modal.ios,
ion-popover.datetime-popover.ios {
--width: 350px;
--height: 420px;
}

ion-modal.md,
ion-popover.datetime-popover.md {
--width: 350px;
--height: 450px;
}

ion-datetime {
width: 350px;
}
</style>
</head>
<body>
<ion-app>
<ion-header translucent="true">
<ion-toolbar>
<ion-title>Datetime - Overlay Roles</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-button onclick="presentModal()">Present Modal</ion-button>
</ion-content>
</ion-app>
<script>
const presentModal = async () => {
const modal = await createModal();

await modal.present();
console.log(await modal.onDidDismiss());
};

const createModal = () => {
// create component to open
const element = document.createElement('div');
element.innerHTML = `
<ion-datetime show-default-buttons="true"></ion-datetime>
`;

// present the modal
const modalElement = Object.assign(document.createElement('ion-modal'), {
component: element,
});

const app = document.querySelector('ion-app');
app.appendChild(modalElement);
return modalElement;
};
</script>
</body>
</html>
Loading