mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 05:58:26 +08:00
refactor(status-tap): return promise from status tap for sake of testing, update lock file
This commit is contained in:
374
packages/core/package-lock.json
generated
374
packages/core/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
2
packages/core/src/components.d.ts
vendored
2
packages/core/src/components.d.ts
vendored
@ -2829,7 +2829,7 @@ declare global {
|
||||
}
|
||||
namespace JSXElements {
|
||||
export interface IonStatusTapAttributes extends HTMLAttributes {
|
||||
|
||||
duration?: number;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -5,6 +5,20 @@
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
#### duration
|
||||
|
||||
number
|
||||
|
||||
|
||||
## Attributes
|
||||
|
||||
#### duration
|
||||
|
||||
number
|
||||
|
||||
|
||||
## Methods
|
||||
|
||||
#### mockTap()
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { Component, Listen, Method, Prop } from '@stencil/core';
|
||||
import { DomController } from '../..';
|
||||
|
||||
import { domControllerAsync } from '../../utils/helpers';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-status-tap'
|
||||
@ -13,28 +13,29 @@ export class StatusTap {
|
||||
|
||||
@Listen('window:statusTap')
|
||||
statusTap() {
|
||||
this.tap();
|
||||
return this.tap();
|
||||
}
|
||||
|
||||
@Method()
|
||||
mockTap() {
|
||||
this.tap();
|
||||
return this.tap();
|
||||
}
|
||||
|
||||
private tap() {
|
||||
this.dom.read(() => {
|
||||
return domControllerAsync(this.dom.read, () => {
|
||||
const width = window.innerWidth;
|
||||
const height = window.innerWidth;
|
||||
const el = document.elementFromPoint(width / 2, height / 2);
|
||||
if (!el) {
|
||||
return;
|
||||
}
|
||||
const scroll = el.closest('ion-scroll') as HTMLIonScrollElement;
|
||||
if (scroll) {
|
||||
(scroll as any).componentOnReady().then(() => {
|
||||
this.dom.write(() => scroll.scrollToTop(this.duration));
|
||||
});
|
||||
return null;
|
||||
}
|
||||
return el.closest('ion-scroll');
|
||||
}).then(([scroll]: HTMLIonScrollElement[]) => {
|
||||
return (scroll as any).componentOnReady();
|
||||
}).then((scroll: HTMLIonScrollElement) => {
|
||||
return domControllerAsync(this.dom.write, () => {
|
||||
return scroll.scrollToTop(this.duration);
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Status Tap - Basic</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
</head>
|
||||
|
||||
<body onload="init()">
|
||||
<ion-app>
|
||||
<ion-status-tap></ion-status-tap>
|
||||
<ion-page>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Status Tap - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content padding>
|
||||
<div class="really-big">
|
||||
<ion-button class="shawty-got-low">Mock Status Tap</ion-button>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</ion-app>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
async function init() {
|
||||
const button = document.querySelector('ion-button');
|
||||
await button.componentOnReady();
|
||||
button.addEventListener('click', async () => {
|
||||
await doStatusTap();
|
||||
});
|
||||
}
|
||||
|
||||
async function doStatusTap() {
|
||||
const statusTap = document.querySelector('ion-status-tap');
|
||||
await statusTap.componentOnReady();
|
||||
return await statusTap.mockTap();
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.really-big {
|
||||
height: 5000px;
|
||||
background-color: blue;
|
||||
}
|
||||
|
||||
.shawty-got-low {
|
||||
margin-top: 4800px;
|
||||
}
|
||||
</style>
|
Reference in New Issue
Block a user