mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
fix(status-tap): using ion-scroll API
This commit is contained in:
30
packages/core/src/components.d.ts
vendored
30
packages/core/src/components.d.ts
vendored
@ -2805,6 +2805,36 @@ declare global {
|
||||
}
|
||||
|
||||
|
||||
import {
|
||||
StatusTap as IonStatusTap
|
||||
} from './components/status-tap/status-tap';
|
||||
|
||||
declare global {
|
||||
interface HTMLIonStatusTapElement extends IonStatusTap, HTMLElement {
|
||||
}
|
||||
var HTMLIonStatusTapElement: {
|
||||
prototype: HTMLIonStatusTapElement;
|
||||
new (): HTMLIonStatusTapElement;
|
||||
};
|
||||
interface HTMLElementTagNameMap {
|
||||
"ion-status-tap": HTMLIonStatusTapElement;
|
||||
}
|
||||
interface ElementTagNameMap {
|
||||
"ion-status-tap": HTMLIonStatusTapElement;
|
||||
}
|
||||
namespace JSX {
|
||||
interface IntrinsicElements {
|
||||
"ion-status-tap": JSXElements.IonStatusTapAttributes;
|
||||
}
|
||||
}
|
||||
namespace JSXElements {
|
||||
export interface IonStatusTapAttributes extends HTMLAttributes {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
import {
|
||||
TabButton as IonTabButton
|
||||
} from './components/tab-button/tab-button';
|
||||
|
@ -131,12 +131,13 @@ export class App {
|
||||
}
|
||||
|
||||
render() {
|
||||
const dom = [<ion-tap-click />, <slot></slot>];
|
||||
if (this.useRouter) {
|
||||
|
||||
// dom.push(<ion-router-controller></ion-router-controller>);
|
||||
}
|
||||
return dom;
|
||||
const isDevice = true;
|
||||
return [
|
||||
isDevice && <ion-tap-click />,
|
||||
isDevice && <ion-status-tap />,
|
||||
// <ion-router-controller></ion-router-controller>
|
||||
<slot></slot>
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
|
16
packages/core/src/components/status-tap/readme.md
Normal file
16
packages/core/src/components/status-tap/readme.md
Normal file
@ -0,0 +1,16 @@
|
||||
# ion-status-tap
|
||||
|
||||
|
||||
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Methods
|
||||
|
||||
#### mockTap()
|
||||
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built by [StencilJS](https://stenciljs.com/)*
|
@ -1,7 +1,6 @@
|
||||
import { Component, Listen, Method, Prop } from '@stencil/core';
|
||||
import { DomController } from '../..';
|
||||
|
||||
import { domControllerAsync } from '../../utils/helpers';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-status-tap'
|
||||
@ -10,33 +9,30 @@ export class StatusTap {
|
||||
|
||||
@Prop({ context: 'dom' }) dom: DomController;
|
||||
|
||||
@Prop() duration = 300;
|
||||
|
||||
@Listen('window:statusTap')
|
||||
statusTap() {
|
||||
handleTap(this);
|
||||
this.tap();
|
||||
}
|
||||
|
||||
@Method()
|
||||
mockTap() {
|
||||
return handleTap(this);
|
||||
this.tap();
|
||||
}
|
||||
|
||||
private tap() {
|
||||
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;
|
||||
(scroll as any).componentOnReady().then(() => {
|
||||
this.dom.write(() => scroll.scrollToTop(this.duration));
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
export function handleTap(tap: StatusTap): Promise<any> {
|
||||
let width = 0;
|
||||
let height = 0;
|
||||
return domControllerAsync(tap.dom.read, () => {
|
||||
width = window.innerWidth;
|
||||
height = window.innerHeight;
|
||||
}).then(() => {
|
||||
const element = document.elementFromPoint(width / 2, height / 2);
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
const content = element.closest('.scroll-content');
|
||||
if (!content) {
|
||||
return;
|
||||
}
|
||||
|
||||
throw new Error('Manu going to take over here');
|
||||
});
|
||||
}
|
||||
|
@ -41,6 +41,7 @@ exports.config = {
|
||||
{ components: ['ion-tabs', 'ion-tab', 'ion-tabbar', 'ion-tab-button'] },
|
||||
{ components: ['ion-toggle'] },
|
||||
{ components: ['ion-toast', 'ion-toast-controller'] },
|
||||
{ components: ['ion-tap-click', 'ion-status-tap'] },
|
||||
],
|
||||
collections: [
|
||||
'ionicons'
|
||||
|
Reference in New Issue
Block a user