Skip to content

ion-item-move (altering items while re-ordering)#27603

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
sfinktah wants to merge 1 commit into from
Closed

ion-item-move (altering items while re-ordering) #27603

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion angular/src/directives/proxies.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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 {
/**
Expand All@@ -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<CustomEvent<IIonReorderGroupItemReorderEventDetail>>;

ionItemMove: EventEmitter<CustomEvent<IIonReorderGroupItemMoveEventDetail>>;
}


Expand Down
1 change: 1 addition & 0 deletions core/api.txt
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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<any>
ion-reorder-group,event,ionItemMove,ItemMoveEventDetail,true
ion-reorder-group,event,ionItemReorder,ItemReorderEventDetail,true

ion-ripple-effect,shadow
Expand Down
5 changes: 3 additions & 2 deletions core/src/components.d.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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";
Expand DownExpand Up@@ -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";
Expand DownExpand Up@@ -6444,6 +6444,7 @@ declare namespace LocalJSX {
* If `true`, the reorder will be hidden.
*/
"disabled"?: boolean;
"onIonItemMove"?: (event: IonReorderGroupCustomEvent<ItemMoveEventDetail>) => 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.
*/
Expand Down
11 changes: 11 additions & 0 deletions core/src/components/reorder-group/reorder-group-interface.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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;
}
11 changes: 10 additions & 1 deletion core/src/components/reorder-group/reorder-group.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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

Expand DownExpand Up@@ -58,6 +58,8 @@ export class ReorderGroup implements ComponentInterface {
*/
@Event() ionItemReorder!: EventEmitter<ItemReorderEventDetail>;

@Event() ionItemMove!: EventEmitter<ItemMoveEventDetail>;

async connectedCallback() {
const contentEl = findClosestIonContent(this.el);
if (contentEl) {
Expand DownExpand Up@@ -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();
Expand Down
2 changes: 1 addition & 1 deletion core/src/interface.d.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -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';
Expand Down
3 changes: 2 additions & 1 deletion packages/vue/src/proxies.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -656,7 +656,8 @@ export const IonReorder = /*@__PURE__*/ defineContainer<JSX.IonReorder>('ion-reo

export const IonReorderGroup = /*@__PURE__*/ defineContainer<JSX.IonReorderGroup>('ion-reorder-group', defineIonReorderGroup, [
'disabled',
'ionItemReorder'
'ionItemReorder',
'ionItemMove'
]);


Expand Down