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

fix(segment): segment functions properly on android 5 (#20554)

Browse Source 
fixes #20466
This commit is contained in:
Liam DeBeasi
2020-02-24 13:41:49 -05:00
committed by GitHub
parent cefb08fe32
commit 0224bed0c9
2 changed files with 19 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -171,9 +171,10 @@ export class Segment implements ComponentInterface {
if (!useRippleEffect) { return; } if (!useRippleEffect) { return; }
const buttons = this.getButtons(); const buttons = this.getButtons();
const checked = buttons.find(button => button.value === this.value); const checked = buttons.find(button => button.value === this.value)!;
const ripple = checked!.shadowRoot!.querySelector('ion-ripple-effect'); const root = checked.shadowRoot || checked;
const ripple = root.querySelector('ion-ripple-effect');
if (!ripple) { return; } if (!ripple) { return; }
@ -223,7 +224,8 @@ export class Segment implements ComponentInterface {
} }
private getIndicator(button: HTMLIonSegmentButtonElement): HTMLDivElement | null { private getIndicator(button: HTMLIonSegmentButtonElement): HTMLDivElement | null {
return button.shadowRoot && button.shadowRoot.querySelector('.segment-button-indicator'); const root = button.shadowRoot || button;
return root.querySelector('.segment-button-indicator');
} }
private checkButton(previous: HTMLIonSegmentButtonElement, current: HTMLIonSegmentButtonElement) { private checkButton(previous: HTMLIonSegmentButtonElement, current: HTMLIonSegmentButtonElement) {
@ -302,7 +304,8 @@ export class Segment implements ComponentInterface {
// gesture event and the Y coordinate of the starting element, since the gesture // gesture event and the Y coordinate of the starting element, since the gesture
// can move up and down off of the segment // can move up and down off of the segment
const currentX = detail.currentX; const currentX = detail.currentX;
const previousY = rect.y;
const previousY = rect.top + (rect.height / 2);
const nextEl = document.elementFromPoint(currentX, previousY) as HTMLIonSegmentButtonElement; const nextEl = document.elementFromPoint(currentX, previousY) as HTMLIonSegmentButtonElement;
const decreaseIndex = isRTL ? currentX > (left + width) : currentX < left; const decreaseIndex = isRTL ? currentX > (left + width) : currentX < left;

12
core/src/components/segment/test/basic/index.html
View File

@ -75,6 +75,18 @@
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-segment value="segment">
<ion-segment-button value="segment">
Segment
</ion-segment-button>
<ion-segment-button value="outside">
Outside
</ion-segment-button>
<ion-segment-button value="content">
Content
</ion-segment-button>
</ion-segment>
<ion-content> <ion-content>
<div class="ion-padding"> <div class="ion-padding">
<ion-segment> <ion-segment>