feat(ripple-effect): add option to disable ripple-effect (#16393)

fixes #16379

Author: manucorporat

core/src/components/app/app.tsx

@@ -21,7 +21,7 @@ export class App implements ComponentInterface {
       const { win, config, queue } = this;
 
       if (!config.getBoolean('_testing')) {
-        importTapClick(win);
+        importTapClick(win, config);
       }
 
       importInputShims(win, config);
@@ -54,8 +54,8 @@ function importStatusTap(win: Window, config: Config, queue: QueueApi) {
   }
 }
 
-function importTapClick(win: Window) {
-  import('../../utils/tap-click').then(module => module.startTapClick(win.document));
+function importTapClick(win: Window, config: Config) {
+  import('../../utils/tap-click').then(module => module.startTapClick(win.document, config));
 }
 
 function importInputShims(win: Window, config: Config) {

core/src/components/ripple-effect/ripple-effect.tsx

@@ -1,7 +1,5 @@
 import { Component, ComponentInterface, Element, Method, Prop, QueueApi } from '@stencil/core';
 
-import { Config } from '../../interface';
-
 @Component({
   tag: 'ion-ripple-effect',
   styleUrl: 'ripple-effect.scss',
@@ -13,20 +11,12 @@ export class RippleEffect implements ComponentInterface {
 
   @Prop({ context: 'queue' }) queue!: QueueApi;
   @Prop({ context: 'window' }) win!: Window;
-  @Prop({ context: 'config' }) config!: Config;
 
   /**
    * Adds the ripple effect to the parent element
    */
   @Method()
   async addRipple(pageX: number, pageY: number) {
-    if (this.config.getBoolean('animated', true)) {
-      return this.prepareRipple(pageX, pageY);
-    }
-    return () => { return; };
-  }
-
-  private prepareRipple(pageX: number, pageY: number) {
     return new Promise<() => void>(resolve => {
       this.queue.read(() => {
         const rect = this.el.getBoundingClientRect();

core/src/utils/config.ts

@@ -7,6 +7,12 @@ export interface IonicConfig {
    */
   animated?: boolean;
 
+  /**
+   * When it's set to `false`, it disables all material-design ripple-effects across the app.
+   * Defaults to `true`.
+   */
+  rippleEffect?: boolean;
+
   /**
    * The mode determines which platform styles to use for the whole application.
    */

core/src/utils/tap-click.ts

@@ -1,7 +1,8 @@
+import { Config } from '../interface';
 
 import { now, pointerCoord } from './helpers';
 
-export function startTapClick(doc: Document) {
+export function startTapClick(doc: Document, config: Config) {
   let lastTouch = -MOUSE_WAIT * 10;
   let lastActivated = 0;
   let cancelled = false;
@@ -11,6 +12,7 @@ export function startTapClick(doc: Document) {
   let activeRipple: Promise<() => void> | undefined;
   let activeDefer: any;
 
+  const useRippleEffect = config.getBoolean('animated', true) && config.getBoolean('rippleEffect', true);
   const clearDefers = new WeakMap<HTMLElement, any>();
 
   function onBodyClick(ev: Event) {
@@ -116,7 +118,7 @@ export function startTapClick(doc: Document) {
     lastActivated = Date.now();
     el.classList.add(ACTIVATED);
 
-    const rippleEffect = getRippleEffect(el);
+    const rippleEffect = useRippleEffect && getRippleEffect(el);
     if (rippleEffect && rippleEffect.addRipple) {
       activeRipple = rippleEffect.addRipple(x, y);
     }