javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(): deprecate web component controllers (#19109)

Browse Source
This commit is contained in:
Manu MA
2019-08-27 14:00:45 +02:00
committed by GitHub
parent 3e63b3c2c4
commit a65d897214
71 changed files with 1446 additions and 1472 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
core/src/components/action-sheet/action-sheet.tsx
View File

@ -2,7 +2,7 @@ import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Meth
import { getIonMode } from '../../global/ionic-global';
import { ActionSheetButton, AnimationBuilder, CssClassMap, OverlayEventDetail, OverlayInterface } from '../../interface';
import { BACKDROP, dismiss, eventMethod, isCancel, present, safeCall } from '../../utils/overlays';
import { BACKDROP, dismiss, eventMethod, isCancel, prepareOverlay, present, safeCall } from '../../utils/overlays';
import { getClassMap } from '../../utils/theme';
import { iosEnterAnimation } from './animations/ios.enter';
@ -27,7 +27,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
animation?: any;
mode = getIonMode(this);
@Element() el!: HTMLElement;
@Element() el!: HTMLIonActionSheetElement;
/** @internal */
@Prop() overlayIndex!: number;
@ -113,6 +113,10 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
return present(this, 'actionSheetEnter', iosEnterAnimation, mdEnterAnimation);
}
constructor() {
prepareOverlay(this.el);
}
/**
* Dismiss the action sheet overlay after it has been presented.
*

78
core/src/components/action-sheet/readme.md
View File

@ -79,45 +79,45 @@ export class ActionSheetExample {
```javascript
async function presentActionSheet() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
const actionSheet = await actionSheetController.create({
header: "Albums",
buttons: [{
text: 'Delete',
role: 'destructive',
icon: 'trash',
handler: () => {
console.log('Delete clicked');
}
}, {
text: 'Share',
icon: 'share',
handler: () => {
console.log('Share clicked');
}
}, {
text: 'Play (open modal)',
icon: 'arrow-dropright-circle',
handler: () => {
console.log('Play clicked');
}
}, {
text: 'Favorite',
icon: 'heart',
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Cancel',
icon: 'close',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}]
});
await actionSheet.present();
const actionSheet = document.createElement('ion-action-sheet');
actionSheet.header = "Albums";
actionSheet.buttons = [{
text: 'Delete',
role: 'destructive',
icon: 'trash',
handler: () => {
console.log('Delete clicked');
}
}, {
text: 'Share',
icon: 'share',
handler: () => {
console.log('Share clicked');
}
}, {
text: 'Play (open modal)',
icon: 'arrow-dropright-circle',
handler: () => {
console.log('Play clicked');
}
}, {
text: 'Favorite',
icon: 'heart',
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Cancel',
icon: 'close',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}];
document.body.appendChild(actionSheet);
return actionSheet.present();
}
```

41
core/src/components/action-sheet/test/basic/index.html
View File

@ -13,9 +13,6 @@
<body>
<ion-app>
<ion-action-sheet-controller></ion-action-sheet-controller>
<ion-alert-controller></ion-alert-controller>
<ion-header>
<ion-toolbar>
<ion-title>Action Sheet - Basic</ion-title>
@ -59,8 +56,7 @@
async function presentBasic() {
const mode = Ionic.mode;
const actionSheetController = document.querySelector('ion-action-sheet-controller');
const actionSheetElement = await actionSheetController.create({
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
header: "Albums",
buttons: [{
text: 'Delete',
@ -97,17 +93,16 @@
}
}]
});
document.body.append(actionSheetElement);
await actionSheetElement.present();
}
async function presentAlert() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
const actionSheetElement = await actionSheetController.create({
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
buttons: [{
text: 'Open Alert',
handler: async () => {
const alertController = document.querySelector('ion-alert-controller');
const alert = await alertController.create({
const alert = Object.assign(document.createElement('ion-alert'), {
header: 'Alert from Action Sheet',
subHeader: 'Subtitle',
message: 'This is an alert message.',
@ -119,6 +114,7 @@
}
}]
});
document.body.appendChild(alert);
await alert.present();
return false;
}
@ -130,12 +126,12 @@
}
}]
});
document.body.append(actionSheetElement);
await actionSheetElement.present();
}
async function presentCancelOnly() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
const actionSheetElement = await actionSheetController.create({
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
buttons: [
{
text: 'Cancel',
@ -146,12 +142,12 @@
}
]
});
document.body.append(actionSheetElement);
await actionSheetElement.present();
}
async function presentWithCssClass() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
const actionSheetElement = await actionSheetController.create({
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
header: "Custom Css Class",
cssClass: "my-color-class my-custom-class",
buttons: [
@ -194,14 +190,14 @@
}
]
});
document.body.append(actionSheetElement);
await actionSheetElement.present();
}
async function presentIcons() {
const mode = Ionic.mode;
const actionSheetController = document.querySelector('ion-action-sheet-controller');
const actionSheetElement = await actionSheetController.create({
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
header: "Albums",
buttons: [{
text: 'Delete',
@ -237,13 +233,13 @@
console.log('Cancel clicked');
}
}]
})
});
document.body.append(actionSheetElement);
await actionSheetElement.present();
}
async function presentNoBackdropDismiss() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
const actionSheetElement = await actionSheetController.create({
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
backdropDismiss: false,
buttons: [{
text: 'Archive',
@ -264,12 +260,12 @@
}
}]
});
document.body.append(actionSheetElement);
await actionSheetElement.present();
}
async function presentScroll() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
const actionSheetElement = await actionSheetController.create({
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
buttons: [
{
text: 'Add Reaction',
@ -357,12 +353,12 @@
}
]
});
document.body.append(actionSheetElement);
await actionSheetElement.present();
}
async function presentScrollNoCancel() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
const actionSheetElement = await actionSheetController.create({
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
buttons: [
{
text: 'Add Reaction',
@ -428,6 +424,7 @@
}
]
});
document.body.append(actionSheetElement);
await actionSheetElement.present();
}
</script>

6
core/src/components/action-sheet/test/spec/index.html
View File

@ -21,8 +21,6 @@
</ion-header>
<ion-content class="ion-padding">
<ion-action-sheet-controller></ion-action-sheet-controller>
<ion-button expand="block" id="spec" onclick="presentSpec()">Spec</ion-button>
</ion-content>
@ -34,8 +32,7 @@
async function presentSpec() {
const mode = Ionic.mode;
const actionSheetController = document.querySelector('ion-action-sheet-controller');
const actionSheetElement = await actionSheetController.create({
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
header: "Open in",
buttons: [{
text: 'Item 1',
@ -69,6 +66,7 @@
}
}]
});
document.body.appendChild(actionSheetElement);
await actionSheetElement.present();
}
</script>

70
core/src/components/action-sheet/test/standalone/index.html
View File

@ -21,8 +21,6 @@
<button id="icons" onclick="presentIcons()">Icons</button>
<button id="cssClass" onclick="presentWithCssClass()">Custom CSS Class</button>
<ion-action-sheet-controller></ion-action-sheet-controller>
<style>
body > button {
display: block;
@ -39,9 +37,8 @@
<script>
window.addEventListener('ionActionSheetDidDismiss', function(e){console.log('didDismiss', e)})
async function presentBasic() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
const actionSheetElement = await actionSheetController.create({
function presentBasic() {
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
header: "Albums",
buttons: [{
text: 'Delete',
@ -76,15 +73,15 @@
console.log('Cancel clicked');
}
}]
})
await actionSheetElement.present();
});
document.body.appendChild(actionSheetElement);
return actionSheetElement.present();
}
async function presentIcons() {
function presentIcons() {
const mode = Ionic.mode;
const actionSheetController = document.querySelector('ion-action-sheet-controller');
const actionSheetElement = await actionSheetController.create({
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
header: "Albums",
buttons: [{
text: 'Delete',
@ -119,13 +116,13 @@
console.log('Cancel clicked');
}
}]
})
await actionSheetElement.present();
});
document.body.appendChild(actionSheetElement);
return actionSheetElement.present();
}
async function presentNoBackdropDismiss() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
const actionSheetElement = await actionSheetController.create({
function presentNoBackdropDismiss() {
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
buttons: [{
text: 'Archive',
handler: () => {
@ -145,12 +142,12 @@
}
}]
});
await actionSheetElement.present();
document.body.appendChild(actionSheetElement);
return actionSheetElement.present();
}
async function presentAlert() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
const actionSheetElement = await actionSheetController.create({
function presentAlert() {
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
buttons: [{
text: 'Open Alert',
handler: () => {
@ -164,12 +161,12 @@
}
}]
});
await actionSheetElement.present();
document.body.appendChild(actionSheetElement);
return actionSheetElement.present();
}
async function presentScroll() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
const actionSheetElement = await actionSheetController.create({
function presentScroll() {
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
buttons: [
{
text: 'Add Reaction',
@ -241,12 +238,12 @@
}
]
});
await actionSheetElement.present();
document.body.appendChild(actionSheetElement);
return actionSheetElement.present();
}
async function presentScrollNoCancel() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
const actionSheetElement = await actionSheetController.create({
function presentScrollNoCancel() {
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
buttons: [
{
text: 'Add Reaction',
@ -312,12 +309,12 @@
}
]
});
await actionSheetElement.present();
document.body.appendChild(actionSheetElement);
return actionSheetElement.present();
}
async function presentCancelOnly() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
const actionSheetElement = await actionSheetController.create({
function presentCancelOnly() {
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
buttons: [
{
text: 'Cancel',
@ -328,12 +325,12 @@
}
]
});
await actionSheetElement.present();
document.body.append(actionSheetElement);
return actionSheetElement.present();
}
async function presentWithCssClass() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
const actionSheetElement = await actionSheetController.create({
function presentWithCssClass() {
const actionSheetElement = Object.assign(document.createElement('ion-action-sheet'), {
header: "Custom Css Class",
cssClass: "my-class my-custom-class",
buttons: [
@ -347,7 +344,8 @@
}
]
});
await actionSheetElement.present();
document.body.appendChild(actionSheetElement);
return actionSheetElement.present();
}
</script>

20
core/src/components/action-sheet/test/test.utils.ts
View File

@ -66,19 +66,15 @@ export const testActionSheetAlert = async (
page: any,
screenshotCompares: any
) => {
try {
const openAlertBtn = await page.find({ text: 'Open Alert' });
await openAlertBtn.click();
const openAlertBtn = await page.find({ text: 'Open Alert' });
await openAlertBtn.click();
const alert = await page.find('ion-alert');
await alert.waitForVisible();
await page.waitFor(250);
const alert = await page.find('ion-alert');
await alert.waitForVisible();
await page.waitFor(250);
screenshotCompares.push(await page.compareScreenshot(`alert open`));
screenshotCompares.push(await page.compareScreenshot(`alert open`));
const alertOkayBtn = await page.find({ contains: 'Okay' });
await alertOkayBtn.click();
} catch (err) {
throw err;
}
const alertOkayBtn = await page.find({ contains: 'Okay' });
await alertOkayBtn.click();
};

56
core/src/components/action-sheet/test/translucent/index.html
View File

@ -14,37 +14,35 @@
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Action Sheet - Translucent</ion-title>
</ion-toolbar>
</ion-header>
<ion-header>
<ion-toolbar>
<ion-title>Action Sheet - Translucent</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<ion-action-sheet-controller></ion-action-sheet-controller>
<ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
<ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</ion-button>
<ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</ion-button>
<ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
<ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</ion-button>
<ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>
<ion-grid>
<ion-row>
<ion-col size="4"><f class="red"></f></ion-col>
<ion-col size="4"><f class="green"></f></ion-col>
<ion-col size="4"><f class="blue"></f></ion-col>
<ion-col size="4"><f class="yellow"></f></ion-col>
<ion-col size="4"><f class="pink"></f></ion-col>
<ion-col size="4"><f class="purple"></f></ion-col>
<ion-col size="4"><f class="black"></f></ion-col>
<ion-col size="4"><f class="fuchsia"></f></ion-col>
<ion-col size="4"><f class="orange"></f></ion-col>
</ion-row>
</ion-grid>
</ion-content>
<ion-content class="ion-padding">
<ion-button expand="block" id="basic" onclick="presentBasic()">Basic</ion-button>
<ion-button expand="block" id="noBackdropDismiss" onclick="presentNoBackdropDismiss()">No Backdrop Dismiss</ion-button>
<ion-button expand="block" id="alertFromActionSheet" onclick="presentAlert()">Alert from Action Sheet</ion-button>
<ion-button expand="block" id="scrollableOptions" onclick="presentScroll()">Scrollable Options</ion-button>
<ion-button expand="block" id="scrollWithoutCancel" onclick="presentScrollNoCancel()">Scroll Without Cancel</ion-button>
<ion-button expand="block" id="cancelOnly" onclick="presentCancelOnly()">Cancel Only</ion-button>
<ion-grid>
<ion-row>
<ion-col size="4"><f class="red"></f></ion-col>
<ion-col size="4"><f class="green"></f></ion-col>
<ion-col size="4"><f class="blue"></f></ion-col>
<ion-col size="4"><f class="yellow"></f></ion-col>
<ion-col size="4"><f class="pink"></f></ion-col>
<ion-col size="4"><f class="purple"></f></ion-col>
<ion-col size="4"><f class="black"></f></ion-col>
<ion-col size="4"><f class="fuchsia"></f></ion-col>
<ion-col size="4"><f class="orange"></f></ion-col>
</ion-row>
</ion-grid>
</ion-content>
<ion-action-sheet-controller></ion-action-sheet-controller>
</ion-app>
<script>

76
core/src/components/action-sheet/usage/javascript.md
View File

@ -1,43 +1,43 @@
```javascript
async function presentActionSheet() {
const actionSheetController = document.querySelector('ion-action-sheet-controller');
const actionSheet = await actionSheetController.create({
header: "Albums",
buttons: [{
text: 'Delete',
role: 'destructive',
icon: 'trash',
handler: () => {
console.log('Delete clicked');
}
}, {
text: 'Share',
icon: 'share',
handler: () => {
console.log('Share clicked');
}
}, {
text: 'Play (open modal)',
icon: 'arrow-dropright-circle',
handler: () => {
console.log('Play clicked');
}
}, {
text: 'Favorite',
icon: 'heart',
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Cancel',
icon: 'close',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}]
});
await actionSheet.present();
const actionSheet = document.createElement('ion-action-sheet');
actionSheet.header = "Albums";
actionSheet.buttons = [{
text: 'Delete',
role: 'destructive',
icon: 'trash',
handler: () => {
console.log('Delete clicked');
}
}, {
text: 'Share',
icon: 'share',
handler: () => {
console.log('Share clicked');
}
}, {
text: 'Play (open modal)',
icon: 'arrow-dropright-circle',
handler: () => {
console.log('Play clicked');
}
}, {
text: 'Favorite',
icon: 'heart',
handler: () => {
console.log('Favorite clicked');
}
}, {
text: 'Cancel',
icon: 'close',
role: 'cancel',
handler: () => {
console.log('Cancel clicked');
}
}];
document.body.appendChild(actionSheet);
return actionSheet.present();
}
```