fix(reorder): only move item if reorder happens (#19007)

ionic-team · Aug 6, 2019 · d237e80 · d237e80
1 parent e043ea9
commit d237e80
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 37 deletions.
diff --git a/core/src/components/item/test/reorder/index.html b/core/src/components/item/test/reorder/index.html
@@ -44,12 +44,10 @@
     .item {
       background-color: inherit;
     }
-
   </style>
 
   <script>
     var isReordering = false;
-
     var groups = [
       {
         id: 'reorderGroup',
@@ -64,68 +62,52 @@
         side: 'end'
       }
     ];
-
     for (var i = 0; i < groups.length; i++) {
       initGroup(groups[i]);
     }
-
     function clickedButton(number) {
       console.log('clicked', number);
     }
-
     function toggle() {
       isReordering = !isReordering;
-
       for (var i = 0; i < groups.length; i++) {
         var groupEl = document.getElementById(groups[i].id);
         groupEl.disabled = !isReordering;
       }
     }
-
-    // Reorder the items for a given list
-    function reorder(list, items, indexes) {
-      items = reorderArray(items, indexes);
-      renderGroup(list, items);
-    }
-
     function initGroup(group) {
       var groupEl = document.getElementById(group.id);
-
       groupEl.addEventListener('ionItemReorder', function (ev) {
-        reorder(groupEl, groupItems, indexes);
+        ev.detail.complete();
       });
-
       var groupItems = [];
       for (var i = 0; i < 5; i++) {
         groupItems.push(i);
       }
-
       if (group.sliding) {
         groupEl.side = group.side;
         renderSlidingGroup(group, groupEl, groupItems);
       } else {
-        renderGroup(group, groupEl, groupItems);
+        renderGroup(groupEl, groupItems);
       }
     }
-
-    function renderGroup(group, groupEl, items) {
-      groupEl.innerHTML = '';
-
+    function renderGroup(groupEl, items) {
+      let innerHTML = '';
       for (var i = 0; i < items.length; i++) {
-        groupEl.innerHTML += `
-          <ion-item onClick="clickedButton(${i})"
-            style="min-height: ${i * 2 + 35}px; --background: rgb(${255 - i * 4}, ${255 - i * 4}, ${255 - i * 4})">
-            ${i}
+        const index = items[i];
+        innerHTML += `
+          <ion-item onClick="clickedButton(${index})"
+            style="min-height: ${index * 2 + 35}px; --background: rgb(${255 - index * 4}, ${255 - index * 4}, ${255 - index * 4})">
+            ${index}
             <ion-reorder slot="end"></ion-reorder>
           </ion-item>`;
       }
+      groupEl.innerHTML = innerHTML;
     }
-
     function renderSlidingGroup(group, groupEl, items) {
-      groupEl.innerHTML = '';
-
+      let innerHTML = '';
       for (var i = 0; i < items.length; i++) {
-        groupEl.innerHTML += `
+        innerHTML += `
           <ion-item-sliding>
             <ion-item onclick="clickedButton(${i})">
               <ion-reorder slot="${group.side}"></ion-reorder>
@@ -142,6 +124,7 @@ <h2>Sliding item ${i}</h2>
             </ion-item-options>
           </ion-item-sliding>`;
       }
+      groupEl.innerHTML = innerHTML;
     }
   </script>
 

diff --git a/core/src/components/reorder-group/reorder-group.tsx b/core/src/components/reorder-group/reorder-group.tsx
@@ -43,8 +43,6 @@ export class ReorderGroup implements ComponentInterface {
     if (this.gesture) {
       this.gesture.setDisabled(this.disabled);
     }
-    const a = { a: 2 };
-    delete a.a;
   }
 
   /**
@@ -191,18 +189,20 @@ export class ReorderGroup implements ComponentInterface {
   }
 
   private onEnd() {
-    const selectedItem = this.selectedItemEl;
+    const selectedItemEl = this.selectedItemEl;
     this.state = ReorderGroupState.Complete;
-    if (!selectedItem) {
+    if (!selectedItemEl) {
       this.state = ReorderGroupState.Idle;
       return;
     }
 
     const toIndex = this.lastToIndex;
-    const fromIndex = indexForItem(selectedItem);
+    const fromIndex = indexForItem(selectedItemEl);
 
     if (toIndex === fromIndex) {
-      selectedItem.style.transition = 'transform 200ms ease-in-out';
+      selectedItemEl.style.transition = 'transform 200ms ease-in-out';
+      selectedItemEl.style.transform = '';
+      selectedItemEl.classList.remove(ITEM_REORDER_SELECTED);
       setTimeout(() => this.completeSync(), 200);
     } else {
       this.ionItemReorder.emit({
@@ -223,7 +223,7 @@ export class ReorderGroup implements ComponentInterface {
       const toIndex = this.lastToIndex;
       const fromIndex = indexForItem(selectedItemEl);
 
-      if (!listOrReorder || listOrReorder === true) {
+      if (toIndex !== fromIndex && (!listOrReorder || listOrReorder === true)) {
         const ref = (fromIndex < toIndex)
           ? children[toIndex + 1]
           : children[toIndex];