refactor(status-tap): return promise from status tap for sake of testing, update lock file

This commit is contained in:
Dan Bucholtz
2018-02-01 16:10:28 -06:00
parent 665e7f36e0
commit 519ecddaf9
5 changed files with 213 additions and 256 deletions

File diff suppressed because it is too large Load Diff

View File

@ -2829,7 +2829,7 @@ declare global {
}
namespace JSXElements {
export interface IonStatusTapAttributes extends HTMLAttributes {
duration?: number;
}
}
}

View File

@ -5,6 +5,20 @@
<!-- Auto Generated Below -->
## Properties
#### duration
number
## Attributes
#### duration
number
## Methods
#### mockTap()

View File

@ -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);
});
});
}
}

View File

@ -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>