Skip to content

Commit

Permalink
feat(reorder): add applyTo method to ionItemReorder event
Browse files Browse the repository at this point in the history
This allows to apply reordering inside template without importing any other helper functions
  • Loading branch information
stalniy committed Oct 22, 2016
1 parent 0005e34 commit 7e6d73b
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 7 deletions.
22 changes: 16 additions & 6 deletions src/components/item/item-reorder.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@ import { Content } from '../content/content';
import { CSS, zoneRafFrames } from '../../util/dom';
import { Item } from './item';
import { ItemReorderGesture } from '../item/item-reorder-gesture';
import { isTrueProperty } from '../../util/util';
import { isTrueProperty, reorderArray } from '../../util/util';


export interface ReorderIndexes {
from: number;
to: number;
applyTo: Function;
}

/**
Expand Down Expand Up @@ -118,6 +119,16 @@ export interface ReorderIndexes {
* }
* }
* ```
* Alternatevely you can execute helper function inside template:
*
* ```html
* <ion-list>
* <ion-list-header>Header</ion-list-header>
* <ion-item-group reorder="true" (ionItemReorder)="$event.applyTo(items)">
* <ion-item *ngFor="let item of items">{% raw %}{{ item }}{% endraw %}</ion-item>
* </ion-item-group>
* </ion-list>
* ```
*
* @demo /docs/v2/demos/src/item-reorder/
* @see {@link /docs/v2/components#lists List Component Docs}
Expand Down Expand Up @@ -223,10 +234,10 @@ export class ItemReorder {
this.reorderReset();
if (fromIndex !== toIndex) {
this._zone.run(() => {
this.ionItemReorder.emit({
from: fromIndex,
to: toIndex,
});
const indexes = { from: fromIndex, to: toIndex };
this.ionItemReorder.emit(Object.assign({
applyTo: (array) => reorderArray(array, indexes)
}, indexes));
});
}
}
Expand Down Expand Up @@ -368,4 +379,3 @@ export function indexForItem(element: any): number {
export function reorderListForItem(element: any): any {
return element['$ionReorderList'];
}

2 changes: 1 addition & 1 deletion src/components/item/test/reorder/main.html
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
</button>
</ion-list>

<ion-list [reorder]="isReordering" (ionItemReorder)="reorder($event)">
<ion-list [reorder]="isReordering" (ionItemReorder)="$event.applyTo(items)">
<ion-item-sliding *ngFor="let item of items">
<button ion-item (click)="clickedButton(item)">
<h2>Sliding item {{item}}</h2>
Expand Down

0 comments on commit 7e6d73b

Please sign in to comment.