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

Merge branch 'feat/reorder' of https://github.com/stalniy/ionic

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2016-11-20 11:50:09 +01:00
parent 7150f84d68 7e6d73b9f8
commit 5cb7e0c7af
2 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/components/item/item-reorder.ts
View File

@ -4,12 +4,13 @@ import { Content } from '../content/content';
import { CSS, zoneRafFrames } from '../../util/dom'; import { CSS, zoneRafFrames } from '../../util/dom';
import { Item } from './item'; import { Item } from './item';
import { ItemReorderGesture } from '../item/item-reorder-gesture'; import { ItemReorderGesture } from '../item/item-reorder-gesture';
import { isTrueProperty } from '../../util/util'; import { isTrueProperty, reorderArray } from '../../util/util';
export interface ReorderIndexes { export interface ReorderIndexes {
from: number; from: number;
to: number; to: number;
applyTo: Function;
} }
/** /**
@ -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/ * @demo /docs/v2/demos/src/item-reorder/
* @see {@link /docs/v2/components#lists List Component Docs} * @see {@link /docs/v2/components#lists List Component Docs}
@ -205,10 +216,10 @@ export class ItemReorder {
this._reorderReset(); this._reorderReset();
if (fromIndex !== toIndex) { if (fromIndex !== toIndex) {
this._zone.run(() => { this._zone.run(() => {
this.ionItemReorder.emit({ const indexes = { from: fromIndex, to: toIndex };
from: fromIndex, this.ionItemReorder.emit(Object.assign({
to: toIndex, applyTo: (array) => reorderArray(array, indexes)
}); }, indexes));
}); });
} }
} }
@ -341,4 +352,3 @@ export function indexForItem(element: any): number {
export function reorderListForItem(element: any): any { export function reorderListForItem(element: any): any {
return element['$ionReorderList']; return element['$ionReorderList'];
} }

2
src/components/item/test/reorder/main.html
View File

@ -19,7 +19,7 @@
</button> </button>
</ion-list> </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"> <ion-item-sliding *ngFor="let item of items">
<button ion-item (click)="clickedButton(item)"> <button ion-item (click)="clickedButton(item)">
<h2>Sliding item {{item}}</h2> <h2>Sliding item {{item}}</h2>