diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index a380b74c24..4c56789964 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -340,7 +340,7 @@ export class InfiniteScroll { constructor(r: ElementRef) { const el = r.nativeElement; - proxyMethods(this, el, ['complete', 'waitFor']); + proxyMethods(this, el, ['complete']); proxyInputs(this, el, ['threshold', 'disabled', 'position']); proxyOutputs(this, el, ['ionInfinite']); } @@ -640,13 +640,12 @@ export class ReorderGroup { } export declare interface RippleEffect extends Promisify> {} -@Component({ selector: 'ion-ripple-effect', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '', inputs: ['parent', 'tapClick'] }) +@Component({ selector: 'ion-ripple-effect', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: '' }) export class RippleEffect { constructor(r: ElementRef) { const el = r.nativeElement; proxyMethods(this, el, ['addRipple']); - proxyInputs(this, el, ['parent', 'tapClick']); } } diff --git a/core/src/components.d.ts b/core/src/components.d.ts index f06dd8b724..01bf58a496 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -3517,19 +3517,8 @@ export namespace Components { * Adds the ripple effect to the parent element */ 'addRipple': (pageX: number, pageY: number) => void; - 'parent': HTMLElement | string; - /** - * If true, the ripple effect will listen to any click events and animate - */ - 'tapClick': boolean; - } - interface IonRippleEffectAttributes extends StencilHTMLAttributes { - 'parent'?: HTMLElement | string; - /** - * If true, the ripple effect will listen to any click events and animate - */ - 'tapClick'?: boolean; } + interface IonRippleEffectAttributes extends StencilHTMLAttributes {} interface IonRouteRedirect { /** diff --git a/core/src/components/alert/alert.tsx b/core/src/components/alert/alert.tsx index d5c677c1d9..5786b4f181 100644 --- a/core/src/components/alert/alert.tsx +++ b/core/src/components/alert/alert.tsx @@ -333,7 +333,7 @@ export class Alert implements OverlayInterface { {i.label} - { this.mode === 'md' && } + { this.mode === 'md' && } ))} @@ -362,7 +362,7 @@ export class Alert implements OverlayInterface { {i.label} - { this.mode === 'md' && } + { this.mode === 'md' && } ))} diff --git a/core/src/components/back-button/back-button.tsx b/core/src/components/back-button/back-button.tsx index df445f2c1d..b600601605 100644 --- a/core/src/components/back-button/back-button.tsx +++ b/core/src/components/back-button/back-button.tsx @@ -83,7 +83,7 @@ export class BackButton { { backButtonIcon && } { this.mode === 'ios' && backButtonText && {backButtonText} } - { this.mode === 'md' && } + { this.mode === 'md' && } ); diff --git a/core/src/components/button/button.tsx b/core/src/components/button/button.tsx index 82765c89be..5505ebc759 100644 --- a/core/src/components/button/button.tsx +++ b/core/src/components/button/button.tsx @@ -183,7 +183,7 @@ export class Button { - { this.mode === 'md' && } + { this.mode === 'md' && } ); } diff --git a/core/src/components/chip-button/chip-button.tsx b/core/src/components/chip-button/chip-button.tsx index 8d7b1d5d02..6642508fa5 100644 --- a/core/src/components/chip-button/chip-button.tsx +++ b/core/src/components/chip-button/chip-button.tsx @@ -62,7 +62,7 @@ export class ChipButton { - { this.mode === 'md' && } + { this.mode === 'md' && } ); } diff --git a/core/src/components/datetime/datetime.tsx b/core/src/components/datetime/datetime.tsx index 756a7d3135..6d440c3b85 100644 --- a/core/src/components/datetime/datetime.tsx +++ b/core/src/components/datetime/datetime.tsx @@ -537,7 +537,7 @@ export class Datetime { aria-disabled={this.disabled ? 'true' : null} onClick={this.open.bind(this)} class="datetime-cover"> - { this.mode === 'md' && } + { this.mode === 'md' && } ]; } diff --git a/core/src/components/fab-button/fab-button.tsx b/core/src/components/fab-button/fab-button.tsx index 07d7ce7266..5858c7c9a4 100755 --- a/core/src/components/fab-button/fab-button.tsx +++ b/core/src/components/fab-button/fab-button.tsx @@ -101,7 +101,7 @@ export class FabButton { - { this.mode === 'md' && } + { this.mode === 'md' && } ); } diff --git a/core/src/components/infinite-scroll/readme.md b/core/src/components/infinite-scroll/readme.md index b394ab3db3..e39964beb3 100644 --- a/core/src/components/infinite-scroll/readme.md +++ b/core/src/components/infinite-scroll/readme.md @@ -36,7 +36,6 @@ Separating the `ion-infinite-scroll` and `ion-infinite-scroll-content` component | Method | Description | | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `complete` | Call `complete()` within the `infinite` output event handler when your async operation has completed. For example, the `loading` state is while the app is performing an asynchronous operation, such as receiving more data from an AJAX request to add more items to a data list. Once the data has been received and UI updated, you then call this method to signify that the loading has completed. This method will change the infinite scroll's state from `loading` to `enabled`. | -| `waitFor` | Pass a promise inside `waitFor()` within the `infinite` output event handler in order to change state of infiniteScroll to "complete" | ---------------------------------------------- diff --git a/core/src/components/item/item.tsx b/core/src/components/item/item.tsx index 53aafd8def..72da3833ad 100644 --- a/core/src/components/item/item.tsx +++ b/core/src/components/item/item.tsx @@ -139,7 +139,7 @@ export class Item { } render() { - const { href, detail, mode, win, state, detailIcon, el, routerDirection, type } = this; + const { href, detail, mode, win, state, detailIcon, routerDirection, type } = this; const clickable = this.isClickable(); const TagType = clickable ? (href ? 'a' : 'button') : 'div'; @@ -161,7 +161,7 @@ export class Item { { showDetail && } { state &&
} - { clickable && mode === 'md' && } + { clickable && mode === 'md' && } ); } diff --git a/core/src/components/ripple-effect/readme.md b/core/src/components/ripple-effect/readme.md index aaa88785cc..05d888474a 100644 --- a/core/src/components/ripple-effect/readme.md +++ b/core/src/components/ripple-effect/readme.md @@ -6,14 +6,6 @@ The ripple effect component adds the [Material Design ink ripple interaction eff -## Properties - -| Property | Attribute | Description | Type | -| ---------- | ----------- | ---------------------------------------------------------------------- | ----------------------- | -| `parent` | `parent` | | `HTMLElement`, `string` | -| `tapClick` | `tap-click` | If true, the ripple effect will listen to any click events and animate | `boolean` | - - ## Methods | Method | Description | diff --git a/core/src/components/ripple-effect/ripple-effect.tsx b/core/src/components/ripple-effect/ripple-effect.tsx index c800232007..ace5646a4d 100644 --- a/core/src/components/ripple-effect/ripple-effect.tsx +++ b/core/src/components/ripple-effect/ripple-effect.tsx @@ -1,6 +1,4 @@ -import { Component, Element, EventListenerEnable, Listen, Method, Prop, QueueApi, Watch } from '@stencil/core'; - -import { now } from '../../utils/helpers'; +import { Component, Element, Method, Prop, QueueApi } from '@stencil/core'; @Component({ tag: 'ion-ripple-effect', @@ -9,48 +7,11 @@ import { now } from '../../utils/helpers'; }) export class RippleEffect { - private lastClick = -10000; @Element() el!: HTMLElement; @Prop({ context: 'queue' }) queue!: QueueApi; - @Prop({ context: 'enableListener' }) enableListener!: EventListenerEnable; @Prop({ context: 'window' }) win!: Window; - @Prop() parent?: HTMLElement | string = 'parent'; - - /** If true, the ripple effect will listen to any click events and animate */ - @Prop() tapClick = false; - @Watch('tapClick') - tapClickChanged(tapClick: boolean) { - this.enableListener(this, 'ionActivated', tapClick, this.parent); - this.enableListener(this, 'touchstart', !tapClick); - this.enableListener(this, 'mousedown', !tapClick); - } - - @Listen('ionActivated', { enabled: false }) - ionActivated(ev: CustomEvent) { - this.addRipple(ev.detail.x, ev.detail.y); - } - - @Listen('touchstart', { passive: true, enabled: false }) - touchStart(ev: TouchEvent) { - this.lastClick = now(ev); - const touches = ev.touches[0]; - this.addRipple(touches.clientX, touches.clientY); - } - - @Listen('mousedown', { passive: true, enabled: false }) - mouseDown(ev: MouseEvent) { - const timeStamp = now(ev); - if (this.lastClick < (timeStamp - 1000)) { - this.addRipple(ev.pageX, ev.pageY); - } - } - - componentDidLoad() { - this.tapClickChanged(this.tapClick); - } - /** * Adds the ripple effect to the parent element */ diff --git a/core/src/components/segment-button/segment-button.tsx b/core/src/components/segment-button/segment-button.tsx index 64c2e93d35..61852772b0 100644 --- a/core/src/components/segment-button/segment-button.tsx +++ b/core/src/components/segment-button/segment-button.tsx @@ -75,7 +75,7 @@ export class SegmentButton { disabled={this.disabled} onClick={() => this.checked = true }> - { this.mode === 'md' && } + { this.mode === 'md' && } ]; } diff --git a/core/src/components/select/select.tsx b/core/src/components/select/select.tsx index 780ec3847b..c57ac0399d 100644 --- a/core/src/components/select/select.tsx +++ b/core/src/components/select/select.tsx @@ -500,7 +500,7 @@ export class Select { onBlur={this.onBlur.bind(this)} class="select-cover"> - { this.mode === 'md' && } + { this.mode === 'md' && } ]; } diff --git a/core/src/components/tabbar/tabbar.tsx b/core/src/components/tabbar/tabbar.tsx index 2a165af8a4..82b9ec26e1 100644 --- a/core/src/components/tabbar/tabbar.tsx +++ b/core/src/components/tabbar/tabbar.tsx @@ -130,13 +130,12 @@ export class Tabbar { if (!tab.disabled) { this.ionTabbarClick.emit(tab); } - ev.stopPropagation(); ev.preventDefault(); }}> { icon && } { label && {label} } { badge && {badge} } - { this.mode === 'md' && } + { this.mode === 'md' && } ); } diff --git a/core/src/utils/tap-click.ts b/core/src/utils/tap-click.ts index 4410d76a6c..dd6f689920 100644 --- a/core/src/utils/tap-click.ts +++ b/core/src/utils/tap-click.ts @@ -109,11 +109,10 @@ export function startTapClick(doc: Document) { lastActivated = Date.now(); el.classList.add(ACTIVATED); - const event = new CustomEvent('ionActivated', { - bubbles: false, - detail: { x, y } - }); - el.dispatchEvent(event); + const rippleEffect = getRippleEffect(el); + if (rippleEffect && rippleEffect.addRipple) { + rippleEffect.addRipple(x, y); + } } function removeActivated(smooth: boolean) { @@ -159,6 +158,16 @@ function getActivatableTarget(ev: any): any { } } +function getRippleEffect(el: HTMLElement) { + if (el.shadowRoot) { + const ripple = el.shadowRoot.querySelector('ion-ripple-effect'); + if (ripple) { + return ripple; + } + } + return el.querySelector('ion-ripple-effect'); +} + const ACTIVATED = 'activated'; const ADD_ACTIVATED_DEFERS = 200; const CLEAR_STATE_DEFERS = 200;