javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(reorder-group): if else timeout

Browse Source
This commit is contained in:
Maria Hutt
2023-11-17 16:59:40 -08:00
parent 8d11b3eb3f
commit ea77945b1e
3 changed files with 39 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2407,6 +2407,7 @@ export namespace Components {
interface IonReorder {
}
interface IonReorderGroup {
"activate": 'tap' | 'press';
/**
* Completes the reorder operation. Must be called by the `ionItemReorder` event. If a list of items is passed, the list will be reordered and returned in the proper order. If no parameters are passed or if `true` is passed in, the reorder will complete and the item will remain in the position it was dragged to. If `false` is passed, the reorder will complete and the item will bounce back to its original position.
* @param listOrReorder A list of items to be sorted and returned in the new order or a boolean of whether or not the reorder should reposition the item.
@@ -2416,8 +2417,6 @@ export namespace Components {
* If `true`, the reorder will be hidden.
*/
"disabled": boolean;
"longPress": boolean;
"longPressDuration": number;
}
interface IonRippleEffect {
/**
@@ -7106,12 +7105,11 @@ declare namespace LocalJSX {
interface IonReorder {
}
interface IonReorderGroup {
"activate"?: 'tap' | 'press';
/**
* If `true`, the reorder will be hidden.
*/
"disabled"?: boolean;
"longPress"?: boolean;
"longPressDuration"?: number;
/**
* 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.
*/

31
core/src/components/reorder-group/reorder-group.tsx
View File

@@ -56,8 +56,10 @@ export class ReorderGroup implements ComponentInterface {
}
}
// boolean to enable/disable the long press gesture
@Prop() longPress = false;
// default is `tap` to maintain backwards compatibility
// `tap` will initiate the reorder immediately
// `press` will initiate the reorder after the `longPressDuration`
@Prop() activate: 'tap' | 'press' = 'tap'
/**
* Event that needs to be listened to in order to complete the reorder action.
@@ -133,11 +135,22 @@ export class ReorderGroup implements ComponentInterface {
private onStart(ev: GestureDetail) {
ev.event.preventDefault();
this.longPressTimeout = setTimeout(() => {
this.pressed = true;
this.clearGestureTimeout();
if (this.activate === 'press') {
this.longPressTimeout = setTimeout(() => {
this.pressed = true;
this.clearGestureTimeout();
console.log('hits')
this.selectingItem(ev);
}, this.longPressDuration);
} else {
console.log('nope')
this.selectingItem(ev);
}
}
const item = (this.selectedItemEl = ev.data);
private selectingItem(ev: GestureDetail) {
const item = (this.selectedItemEl = ev.data);
const heights = this.cachedHeights;
heights.length = 0;
const el = this.el;
@@ -176,7 +189,6 @@ export class ReorderGroup implements ComponentInterface {
item.classList.add(ITEM_REORDER_SELECTED);
hapticSelectionStart();
}, this.longPress ? this.longPressDuration : 0);
}
private clearGestureTimeout = () => {
@@ -192,7 +204,7 @@ export class ReorderGroup implements ComponentInterface {
return;
}
if (this.longPress && !this.pressed) {
if (this.activate === 'press' && !this.pressed) {
return;
}
// Scroll if we reach the scroll margins
@@ -242,7 +254,7 @@ export class ReorderGroup implements ComponentInterface {
hapticSelectionEnd();
if (this.longPress && !this.pressed) {
if (this.activate === 'press' && !this.pressed) {
return;
}
@@ -252,6 +264,7 @@ export class ReorderGroup implements ComponentInterface {
private completeReorder(listOrReorder?: boolean | any[]): any {
const selectedItemEl = this.selectedItemEl;
console.log('end')
if (selectedItemEl && this.state === ReorderGroupState.Complete) {
const children = this.el.children as any;
const len = children.length;

39
core/src/components/reorder-group/test/long-press/index.html
View File

@@ -25,7 +25,7 @@
<ion-content id="content">
<p>Reorder with icons</p>
<ion-list>
<ion-reorder-group id="reorder-icons" long-press="true" disabled="false">
<ion-reorder-group id="reorder-icons" activate="press" disabled="false">
<ion-item button>
<ion-label> Item 1 (default ion-reorder) </ion-label>
<ion-reorder slot="end"></ion-reorder>
@@ -49,7 +49,7 @@
</ion-list>
<p>Reorder with wrapper</p>
<ion-list>
<ion-reorder-group id="reorder-wrappers" disabled="false" long-press="true" long-press-duration="500">
<ion-reorder-group id="reorder-wrappers" disabled="false" activate="press" long-press-duration="5000">
<ion-reorder>
<ion-item>
<ion-label> Item 1 </ion-label>
@@ -57,29 +57,20 @@
</ion-reorder>
<ion-reorder>
<ion-item>
<ion-label> Item 2 </ion-label>
</ion-item>
<ion-item-sliding>
<ion-item button>
<ion-label> Item 2 (default ion-reorder with ion-item-sliding) </ion-label>
</ion-item>
<ion-item-options side="start">
<ion-item-option>Favorite</ion-item-option>
<ion-item-option color="danger">Share</ion-item-option>
</ion-item-options>
<ion-item-options side="end">
<ion-item-option>Unread</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-reorder>
<ion-reorder>
<ion-item>
<ion-label> Item 3 </ion-label>
</ion-item>
</ion-reorder>
<ion-reorder>
<ion-item>
<ion-label> Item 4 </ion-label>
</ion-item>
</ion-reorder>
<ion-reorder>
<ion-item>
<ion-label> Item 5 </ion-label>
</ion-item>
</ion-reorder>
</ion-reorder-group>
</ion-list>
</ion-content>
</ion-app>