diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 39b5d21163..3ea66529b1 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -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. */ diff --git a/core/src/components/reorder-group/reorder-group.tsx b/core/src/components/reorder-group/reorder-group.tsx index dae3231e1a..8058da8739 100644 --- a/core/src/components/reorder-group/reorder-group.tsx +++ b/core/src/components/reorder-group/reorder-group.tsx @@ -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; diff --git a/core/src/components/reorder-group/test/long-press/index.html b/core/src/components/reorder-group/test/long-press/index.html index 00bded3851..43d89245a3 100644 --- a/core/src/components/reorder-group/test/long-press/index.html +++ b/core/src/components/reorder-group/test/long-press/index.html @@ -25,7 +25,7 @@

Reorder with icons

- + Item 1 (default ion-reorder) @@ -49,7 +49,7 @@

Reorder with wrapper

- + Item 1 @@ -57,29 +57,20 @@ - - Item 2 - + + + Item 2 (default ion-reorder with ion-item-sliding) + + + Favorite + Share + + + + Unread + + - - - - Item 3 - - - - - - Item 4 - - - - - - Item 5 - - -