javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 03:00:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(segment): remove duplicate ripple effect on pointerup (#27448)

Browse Source 
Issue number: resolves #27338

---------

## What is the current behavior?
Segment button on `md` mode shows two ripple effects: once on
pointerdown and again on pointerup

## What is the new behavior?
Segment button on `md` mode only shows a ripple effect on pointerdown

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

---------

Co-authored-by: Brandy Carney <brandy@ionic.io>
This commit is contained in:
GlenOttley
2023-05-24 10:44:37 -04:00
committed by GitHub
parent 02678f3652
commit 01f99597f7
1 changed files with 1 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
core/src/components/segment/segment.tsx
View File

@ -1,11 +1,9 @@
import type { ComponentInterface, EventEmitter } from '@stencil/core'; import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Listen, Prop, State, Watch, h, writeTask } from '@stencil/core'; import { Component, Element, Event, Host, Listen, Prop, State, Watch, h, writeTask } from '@stencil/core';
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global'; import { getIonMode } from '../../global/ionic-global';
import type { Color, StyleEventDetail } from '../../interface'; import type { Color, StyleEventDetail } from '../../interface';
import type { Gesture, GestureDetail } from '../../utils/gesture'; import type { Gesture, GestureDetail } from '../../utils/gesture';
import { pointerCoord } from '../../utils/helpers';
import { isRTL } from '../../utils/rtl'; import { isRTL } from '../../utils/rtl';
import { createColorClasses, hostContext } from '../../utils/theme'; import { createColorClasses, hostContext } from '../../utils/theme';
@ -194,14 +192,10 @@ export class Segment implements ComponentInterface {
onEnd(detail: GestureDetail) { onEnd(detail: GestureDetail) {
this.setActivated(false); this.setActivated(false);
const checkedValidButton = this.setNextIndex(detail, true); this.setNextIndex(detail, true);
detail.event.stopImmediatePropagation(); detail.event.stopImmediatePropagation();
if (checkedValidButton) {
this.addRipple(detail);
}
const value = this.value; const value = this.value;
if (value !== undefined) { if (value !== undefined) {
if (this.valueBeforeGesture !== value) { if (this.valueBeforeGesture !== value) {
@ -230,32 +224,6 @@ export class Segment implements ComponentInterface {
return this.getButtons().find((button) => button.value === this.value); return this.getButtons().find((button) => button.value === this.value);
} }
/**
* The gesture blocks the segment button ripple. This
* function adds the ripple based on the checked segment
* and where the cursor ended.
*/
private addRipple(detail: GestureDetail) {
const useRippleEffect = config.getBoolean('animated', true) && config.getBoolean('rippleEffect', true);
if (!useRippleEffect) {
return;
}
const buttons = this.getButtons();
const checked = buttons.find((button) => button.value === this.value)!;
const root = checked.shadowRoot || checked;
const ripple = root.querySelector('ion-ripple-effect');
if (!ripple) {
return;
}
const { x, y } = pointerCoord(detail.event);
ripple.addRipple(x, y).then((remove) => remove());
}
/* /*
* Activate both the segment and the buttons * Activate both the segment and the buttons
* due to a bug with ::slotted in Safari * due to a bug with ::slotted in Safari