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

fix(segment): handle change of direction scrolling

Browse Source
This commit is contained in:
Tanner Reits
2024-09-27 18:34:19 -04:00
parent 0a13ab449a
commit 0fa5c99d99
5 changed files with 28 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
core/src/components.d.ts vendored
View File

@ -4442,8 +4442,13 @@ declare global {
new (): HTMLIonSegmentContentElement;
};
interface HTMLIonSegmentViewElementEventMap {
"ionSegmentViewScroll": { scrollDirection: string; scrollDistancePercentage: number };
"ionSegmentViewScrollEnd": void;
"ionSegmentViewScroll": {
scrollDirection: string;
scrollDistance: number;
scrollDistancePercentage: number;
};
"ionSegmentViewScrollEnd": { activeContentId: string };
"ionSegmentViewScrollStart": void;
}
interface HTMLIonSegmentViewElement extends Components.IonSegmentView, HTMLStencilElement {
addEventListener<K extends keyof HTMLIonSegmentViewElementEventMap>(type: K, listener: (this: HTMLIonSegmentViewElement, ev: IonSegmentViewCustomEvent<HTMLIonSegmentViewElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@ -7538,11 +7543,16 @@ declare namespace LocalJSX {
/**
* Emitted when the segment view is scrolled.
*/
"onIonSegmentViewScroll"?: (event: IonSegmentViewCustomEvent<{ scrollDirection: string; scrollDistancePercentage: number }>) => void;
"onIonSegmentViewScroll"?: (event: IonSegmentViewCustomEvent<{
scrollDirection: string;
scrollDistance: number;
scrollDistancePercentage: number;
}>) => void;
/**
* Emitted when the segment view scroll has ended.
*/
"onIonSegmentViewScrollEnd"?: (event: IonSegmentViewCustomEvent<void>) => void;
"onIonSegmentViewScrollEnd"?: (event: IonSegmentViewCustomEvent<{ activeContentId: string }>) => void;
"onIonSegmentViewScrollStart"?: (event: IonSegmentViewCustomEvent<void>) => void;
}
interface IonSelect {
/**

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

@ -368,15 +368,13 @@ export class Segment implements ComponentInterface {
const indicatorEl = this.getIndicator(current);
this.scrolledIndicator = indicatorEl;
const { scrollDirection, scrollDistancePercentage, scrollDistance } = ev.detail;
console.log('scroll', scrollDistancePercentage, scrollDistance);
const { scrollDistancePercentage, scrollDistance: evScrollDistance } = ev.detail;
if (indicatorEl && !isNaN(scrollDistancePercentage)) {
indicatorEl.style.transition = 'transform 0.3s ease-out';
const scrollDistance = scrollDistancePercentage * current.getBoundingClientRect().width;
const transformValue = scrollDirection === 'left' ? -scrollDistance : scrollDistance;
const transformValue = evScrollDistance < 0 ? -scrollDistance : scrollDistance;
// Calculate total width of buttons to the left of the current button
const totalButtonWidthBefore = buttons

8
packages/angular/src/directives/proxies.ts
View File

@ -2043,7 +2043,7 @@ export class IonSegmentView {
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
proxyOutputs(this, this.el, ['ionSegmentViewScroll', 'ionSegmentViewScrollEnd']);
proxyOutputs(this, this.el, ['ionSegmentViewScroll', 'ionSegmentViewScrollEnd', 'ionSegmentViewScrollStart']);
}
}
@ -2052,11 +2052,13 @@ export declare interface IonSegmentView extends Components.IonSegmentView {
/**
* Emitted when the segment view is scrolled.
*/
ionSegmentViewScroll: EventEmitter<CustomEvent<{ scrollDirection: string; scrollDistancePercentage: number }>>;
ionSegmentViewScroll: EventEmitter<CustomEvent<{ scrollDirection: string; scrollDistance: number; scrollDistancePercentage: number; }>>;
/**
* Emitted when the segment view scroll has ended.
*/
ionSegmentViewScrollEnd: EventEmitter<CustomEvent<void>>;
ionSegmentViewScrollEnd: EventEmitter<CustomEvent<{ activeContentId: string }>>;
ionSegmentViewScrollStart: EventEmitter<CustomEvent<void>>;
}

8
packages/angular/standalone/src/directives/proxies.ts
View File

@ -1882,7 +1882,7 @@ export class IonSegmentView {
constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
c.detach();
this.el = r.nativeElement;
proxyOutputs(this, this.el, ['ionSegmentViewScroll', 'ionSegmentViewScrollEnd']);
proxyOutputs(this, this.el, ['ionSegmentViewScroll', 'ionSegmentViewScrollEnd', 'ionSegmentViewScrollStart']);
}
}
@ -1891,11 +1891,13 @@ export declare interface IonSegmentView extends Components.IonSegmentView {
/**
* Emitted when the segment view is scrolled.
*/
ionSegmentViewScroll: EventEmitter<CustomEvent<{ scrollDirection: string; scrollDistancePercentage: number }>>;
ionSegmentViewScroll: EventEmitter<CustomEvent<{ scrollDirection: string; scrollDistance: number; scrollDistancePercentage: number; }>>;
/**
* Emitted when the segment view scroll has ended.
*/
ionSegmentViewScrollEnd: EventEmitter<CustomEvent<void>>;
ionSegmentViewScrollEnd: EventEmitter<CustomEvent<{ activeContentId: string }>>;
ionSegmentViewScrollStart: EventEmitter<CustomEvent<void>>;
}

3
packages/vue/src/proxies.ts
View File

@ -763,7 +763,8 @@ export const IonSegmentContent = /*@__PURE__*/ defineContainer<JSX.IonSegmentCon
export const IonSegmentView = /*@__PURE__*/ defineContainer<JSX.IonSegmentView>('ion-segment-view', defineIonSegmentView, [
'disabled',
'ionSegmentViewScroll',
'ionSegmentViewScrollEnd'
'ionSegmentViewScrollEnd',
'ionSegmentViewScrollStart'
]);