From 66e649b63871510a62f0d8f5d3b73203992234ba Mon Sep 17 00:00:00 2001 From: sfinktah Date: Tue, 6 Jun 2023 21:31:24 +1000 Subject: [PATCH] tidying --- angular/src/directives/proxies.ts | 5 ++++- core/api.txt | 1 + core/src/components.d.ts | 5 +++-- .../reorder-group/reorder-group-interface.ts | 11 +++++++++++ core/src/components/reorder-group/reorder-group.tsx | 11 ++++++++++- core/src/interface.d.ts | 2 +- packages/vue/src/proxies.ts | 3 ++- 7 files changed, 32 insertions(+), 6 deletions(-) diff --git a/angular/src/directives/proxies.ts b/angular/src/directives/proxies.ts index e7e8a469505..b1fd1862218 100644 --- a/angular/src/directives/proxies.ts +++ b/angular/src/directives/proxies.ts @@ -1780,12 +1780,13 @@ export class IonReorderGroup { constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) { c.detach(); this.el = r.nativeElement; - proxyOutputs(this, this.el, ['ionItemReorder']); + proxyOutputs(this, this.el, ['ionItemReorder', 'ionItemMove']); } } import type { ItemReorderEventDetail as IIonReorderGroupItemReorderEventDetail } from '@ionic/core'; +import type { ItemMoveEventDetail as IIonReorderGroupItemMoveEventDetail } from '@ionic/core'; export declare interface IonReorderGroup extends Components.IonReorderGroup { /** @@ -1794,6 +1795,8 @@ Once the event has been emitted, the `complete()` method then needs to be called in order to finalize the reorder action. */ ionItemReorder: EventEmitter>; + + ionItemMove: EventEmitter>; } diff --git a/core/api.txt b/core/api.txt index f25a05b6427..4d26c347f36 100644 --- a/core/api.txt +++ b/core/api.txt @@ -1092,6 +1092,7 @@ ion-reorder,part,icon ion-reorder-group,none ion-reorder-group,prop,disabled,boolean,true,false,false ion-reorder-group,method,complete,complete(listOrReorder?: boolean | any[]) => Promise +ion-reorder-group,event,ionItemMove,ItemMoveEventDetail,true ion-reorder-group,event,ionItemReorder,ItemReorderEventDetail,true ion-ripple-effect,shadow diff --git a/core/src/components.d.ts b/core/src/components.d.ts index b61bac1a575..5c3427c8221 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -30,7 +30,7 @@ import { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAct import { RadioGroupChangeEventDetail } from "./components/radio-group/radio-group-interface"; import { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface"; import { RefresherEventDetail } from "./components/refresher/refresher-interface"; -import { ItemReorderEventDetail } from "./components/reorder-group/reorder-group-interface"; +import { ItemMoveEventDetail, ItemReorderEventDetail } from "./components/reorder-group/reorder-group-interface"; import { NavigationHookCallback } from "./components/route/route-interface"; import { SearchbarChangeEventDetail, SearchbarInputEventDetail } from "./components/searchbar/searchbar-interface"; import { SegmentChangeEventDetail } from "./components/segment/segment-interface"; @@ -66,7 +66,7 @@ export { PopoverSize, PositionAlign, PositionReference, PositionSide, TriggerAct export { RadioGroupChangeEventDetail } from "./components/radio-group/radio-group-interface"; export { PinFormatter, RangeChangeEventDetail, RangeKnobMoveEndEventDetail, RangeKnobMoveStartEventDetail, RangeValue } from "./components/range/range-interface"; export { RefresherEventDetail } from "./components/refresher/refresher-interface"; -export { ItemReorderEventDetail } from "./components/reorder-group/reorder-group-interface"; +export { ItemMoveEventDetail, ItemReorderEventDetail } from "./components/reorder-group/reorder-group-interface"; export { NavigationHookCallback } from "./components/route/route-interface"; export { SearchbarChangeEventDetail, SearchbarInputEventDetail } from "./components/searchbar/searchbar-interface"; export { SegmentChangeEventDetail } from "./components/segment/segment-interface"; @@ -6444,6 +6444,7 @@ declare namespace LocalJSX { * If `true`, the reorder will be hidden. */ "disabled"?: boolean; + "onIonItemMove"?: (event: IonReorderGroupCustomEvent) => void; /** * Event that needs to be listened to in order to complete the reorder action. Once the event has been emitted, the `complete()` method then needs to be called in order to finalize the reorder action. */ diff --git a/core/src/components/reorder-group/reorder-group-interface.ts b/core/src/components/reorder-group/reorder-group-interface.ts index d76af54d6bd..681386582c7 100644 --- a/core/src/components/reorder-group/reorder-group-interface.ts +++ b/core/src/components/reorder-group/reorder-group-interface.ts @@ -4,7 +4,18 @@ export interface ItemReorderEventDetail { complete: (data?: boolean | any[]) => any; } +export interface ItemMoveEventDetail { + from: number; + lastTo: number; + to: number; +} + export interface ItemReorderCustomEvent extends CustomEvent { detail: ItemReorderEventDetail; target: HTMLIonReorderGroupElement; } + +export interface ItemMoveCustomEvent extends CustomEvent { + detail: ItemReorderEventDetail; + target: HTMLIonReorderGroupElement; +} diff --git a/core/src/components/reorder-group/reorder-group.tsx b/core/src/components/reorder-group/reorder-group.tsx index db6272f22e3..b0dad8dd363 100644 --- a/core/src/components/reorder-group/reorder-group.tsx +++ b/core/src/components/reorder-group/reorder-group.tsx @@ -7,7 +7,7 @@ import { findClosestIonContent, getScrollElement } from '../../utils/content'; import { raf } from '../../utils/helpers'; import { hapticSelectionChanged, hapticSelectionEnd, hapticSelectionStart } from '../../utils/native/haptic'; -import type { ItemReorderEventDetail } from './reorder-group-interface'; +import type { ItemReorderEventDetail, ItemMoveEventDetail } from './reorder-group-interface'; // TODO(FW-2832): types @@ -58,6 +58,8 @@ export class ReorderGroup implements ComponentInterface { */ @Event() ionItemReorder!: EventEmitter; + @Event() ionItemMove!: EventEmitter; + async connectedCallback() { const contentEl = findClosestIonContent(this.el); if (contentEl) { @@ -183,6 +185,13 @@ export class ReorderGroup implements ComponentInterface { const toIndex = this.itemIndexForTop(normalizedY); if (toIndex !== this.lastToIndex) { const fromIndex = indexForItem(selectedItem); + + this.ionItemMove.emit({ + from: fromIndex, + lastTo: this.lastToIndex, + to: toIndex, + }); + this.lastToIndex = toIndex; hapticSelectionChanged(); diff --git a/core/src/interface.d.ts b/core/src/interface.d.ts index b7bd05415e8..97314a8987d 100644 --- a/core/src/interface.d.ts +++ b/core/src/interface.d.ts @@ -24,7 +24,7 @@ export { RadioGroupCustomEvent } from './components/radio-group/radio-group-inte export { RangeCustomEvent, PinFormatter } from './components/range/range-interface'; export { HTMLStencilElement, RouterCustomEvent } from './components/router/utils/interface'; export { RefresherCustomEvent } from './components/refresher/refresher-interface'; -export { ItemReorderCustomEvent } from './components/reorder-group/reorder-group-interface'; +export { ItemMoveEventDetail, ItemReorderCustomEvent } from './components/reorder-group/reorder-group-interface'; export { SearchbarCustomEvent } from './components/searchbar/searchbar-interface'; export { SegmentCustomEvent } from './components/segment/segment-interface'; export { SelectCustomEvent, SelectCompareFn } from './components/select/select-interface'; diff --git a/packages/vue/src/proxies.ts b/packages/vue/src/proxies.ts index f4cae3f9a90..dd3d74cebaa 100644 --- a/packages/vue/src/proxies.ts +++ b/packages/vue/src/proxies.ts @@ -656,7 +656,8 @@ export const IonReorder = /*@__PURE__*/ defineContainer('ion-reo export const IonReorderGroup = /*@__PURE__*/ defineContainer('ion-reorder-group', defineIonReorderGroup, [ 'disabled', - 'ionItemReorder' + 'ionItemReorder', + 'ionItemMove' ]);