@kitten-team/react-native-sortable-grid - npm Package Compare versions

Comparing version 2.0.2 to 2.0.3

index.js

@@ -60,3 +60,3 @@ import * as React from 'react'
               <Block
-                key={itemIndex}
+                key={item.key}
                 style = { this._getBlockStyle(itemIndex) }
@@ -109,2 +109,5 @@ onLayout = { this.saveBlockPositions(itemIndex) }
     this.initialDragDone   = false
+    this.firstInitDone     = false
+    this.resetOrder        = false
+    this.hadInitNewPositionsWhenAddItems  = true
 
@@ -128,3 +131,4 @@ this.tapTimer          = null
       deleteBlockOpacity: new Animated.Value(1),
-      deletedItems: []
+      deletedItems: [],
+      hadInitNewPositionsWhenAddItems:true,
     }
@@ -143,2 +147,9 @@ }
 
+  shouldComponentUpdate = (nextProp, nextState) => {
+    if (!nextState.hadInitNewPositionsWhenAddItems) {
+      return false;
+    }
+    return true;
+  }
+
   componentWillUnmount = () => { if (this.tapTimer) clearTimeout(this.tapTimer) }
@@ -188,3 +199,3 @@
           && block.origin
-          && index != (this.state.blockPositions.length - 1)
+          && this.items[index].key != 'footer_button'
         ) {
@@ -209,17 +220,49 @@ let blockPosition = block.origin
       if (closest !== this.state.activeBlock) {
-        Animated.timing(
-          this._getBlock(closest).currentPosition,
-          {
-            toValue: this._getActiveBlock().origin,
-            duration: this.blockTransitionDuration
+        const activeOrder = this.itemOrder[this.state.activeBlock].order;
+        const closestOrder = this.itemOrder[closest].order;
+        const oldOrigins = this.state.blockPositions.map((item) => {
+          return {
+            x:item.origin.x,
+            y:item.origin.y
+          };
+        })
+        let blockPositions = this.state.blockPositions;
+        let nextPosition = oldOrigins[this.state.activeBlock];
+        if (activeOrder > closestOrder) {
+          for (let i = activeOrder - 1; i >= closestOrder; i--) {
+            let itemOrderIndex = this.itemOrder.findIndex((item) => item.order === i );
+            this.itemOrder[itemOrderIndex].order ++;
+            let tmpPosition = blockPositions[itemOrderIndex].origin;
+            blockPositions[itemOrderIndex].origin = nextPosition;
+            Animated.timing(
+              this.state.blockPositions[itemOrderIndex].currentPosition,
+              {
+                toValue:nextPosition,
+                duration:this.blockTransitionDuration,
+              }
+            ).start();
+            nextPosition = tmpPosition;
           }
-        ).start()
-        let blockPositions = this.state.blockPositions
-        this._getActiveBlock().origin = blockPositions[closest].origin
-        blockPositions[closest].origin = originalPosition
-        this.setState({ blockPositions })
-
-        var tempOrderIndex = this.itemOrder[this.state.activeBlock].order
-        this.itemOrder[this.state.activeBlock].order = this.itemOrder[closest].order
-        this.itemOrder[closest].order = tempOrderIndex
+          this.itemOrder[this.state.activeBlock].order = closestOrder;
+          blockPositions[this.state.activeBlock].origin = nextPosition;
+          this.setState({blockPositions});
+        } else {
+          for (let i = activeOrder + 1;i <= closestOrder; i++) {
+            let itemOrderIndex = this.itemOrder.findIndex((item) => item.order === i );
+            this.itemOrder[itemOrderIndex].order --;
+            let tmpPosition = blockPositions[itemOrderIndex].origin;
+            blockPositions[itemOrderIndex].origin = nextPosition;
+            Animated.timing(
+              this.state.blockPositions[itemOrderIndex].currentPosition,
+              {
+                toValue:nextPosition,
+                duration:this.blockTransitionDuration,
+              }
+            ).start();
+            nextPosition = tmpPosition;
+          }
+          this.itemOrder[this.state.activeBlock].order = closestOrder;
+          blockPositions[this.state.activeBlock].origin = nextPosition;
+          this.setState({blockPositions});
+        }
       }
@@ -336,2 +379,3 @@ }
         this.initialLayoutDone = true
+        this.firstInitDone = true
       }
@@ -389,17 +433,21 @@ }
   _saveItemOrder = (items) => {
+    const lastItemOrder = _.cloneDeep(this.itemOrder);
+    let hadInsert = false;
+    let hadInitNewPositionsWhenAddItems = true;
     items.forEach( (item, index) => {
       const foundKey = _.findKey(this.itemOrder, oldItem => oldItem.key === item.key);
       if (foundKey) {
+        if (this.firstInitDone) {
+          if (items.length === this.items.length) {
+            this.itemOrder[foundKey].order = index;
+          }
+        }
         this.items[foundKey] = item;
       }
       else {
-        if (this.itemOrder[this.itemOrder.length - 1] && this.itemOrder[this.itemOrder.length - 1].key === 'footer_button') {
-          this.itemOrder.splice(
-            this.itemOrder.length - 1,
-            0 ,
-            { key: item.key, ref: item.ref, order: this.items.length - 1 });
-          this.itemOrder[this.itemOrder.length - 1].order = this.items.length;
-        } else {
-          this.itemOrder.push({ key: item.key, ref: item.ref, order: this.items.length });
+        let order = this.items.length;
+        if (this.firstInitDone) {
+          order = index;
         }
+        this.itemOrder.push({ key: item.key, ref: item.ref, order});
         if (!this.initialLayoutDone) {
@@ -417,9 +465,52 @@ this.items.push(item);
           this.items.push(item);
-          this.setState({ blockPositions, blockPositionsSetCount });
+          if (this.firstInitDone) {
+            hadInitNewPositionsWhenAddItems = false;
+          }
+          this.setState({ blockPositions, blockPositionsSetCount, hadInitNewPositionsWhenAddItems});
           this.setGhostPositions()
         }
+        hadInsert = true;
       }
     })
+    if (this.firstInitDone && hadInsert) {
+      setTimeout(() => {
+        this.resetPositionsWhenResetItemOrder(lastItemOrder);
+      }, 0);
+    }
   }
 
+  resetPositionsWhenResetItemOrder = (lastItemOrder) => {
+    this.resetOrder = true;
+    const oldOrigins = this.state.blockPositions.map((item) => {
+      return {
+        x:item.origin.x,
+        y:item.origin.y,
+      };
+    });
+
+    let blockPositions = this.state.blockPositions;
+    let newOrigins = Array.from({length:this.itemOrder.length});
+    let hadInsertFoot = false;
+    let insertIndex = lastItemOrder.length;
+    this.itemOrder.forEach((item, itemOrderIndex) => {
+      const lastIndex = _.findIndex(lastItemOrder, (lastItem) => lastItem.order === item.order);
+      if (lastIndex != -1) {
+        newOrigins[itemOrderIndex] = oldOrigins[lastIndex];
+      } else {
+        if (!hadInsertFoot) {
+          newOrigins[itemOrderIndex] = oldOrigins[oldOrigins.length - 1];
+          hadInsertFoot = true;
+        } else {
+          newOrigins[itemOrderIndex] = oldOrigins[insertIndex];
+          insertIndex ++;
+        }
+      }
+    });
+    newOrigins.forEach((origin, index) => {
+      blockPositions[index].origin = origin;
+      blockPositions[index].currentPosition.setValue(origin);
+    });
+    this.setState({blockPositions,hadInitNewPositionsWhenAddItems:true});
+  }
+
   _removeDisappearedChildren = (items) => {
@@ -442,8 +533,3 @@ let deleteBlockIndices = []
       --blockPositionsSetCount
-      let order = this.itemOrder[index].order
-      let deletedPositions = blockPositions.splice(index, 1)
-      if (index === blockPositionsSetCount) {
-        this.itemOrder[index].order --
-        index --;
-      }
+      blockPositions.splice(index, 1)
       this._fixItemOrderOnDeletion(this.itemOrder[index])
@@ -615,3 +701,3 @@ this.itemOrder.splice(index, 1)
       },
-      this._blockPositionsSet() && (this.initialDragDone || this.state.deleteModeOn) &&
+      this._blockPositionsSet() && (this.initialDragDone || this.state.deleteModeOn || this.resetOrder) &&
       {
@@ -618,0 +704,0 @@ position: 'absolute',

package.json

@@ -8,3 +8,3 @@ {
   ],
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Drag-and-drop sortable grid view for React Native.",
@@ -11,0 +11,0 @@ "main": "index.js",

No alert changes

Improved metrics

Total package byte prevSize

205024

increased by1.56%

Lines of code

956

increased by9.63%

No dependency changes