feat: adds “order” to useTransition

Author: morgs32

.gitignore

@@ -10,3 +10,4 @@ $RECYCLE.BIN/
 .docz/
 package-lock.json
 coverage/
+.idea

.size-snapshot.json

@@ -19,16 +19,16 @@
     "gzipped": 1999
   },
   "dist/web.js": {
-    "bundled": 62572,
-    "minified": 29807,
-    "gzipped": 10770,
+    "bundled": 63145,
+    "minified": 29904,
+    "gzipped": 10821,
     "treeshaked": {
       "rollup": {
-        "code": 11662,
+        "code": 11570,
         "import_statements": 242
       },
       "webpack": {
-        "code": 12820
+        "code": 12729
       }
     }
   },
@@ -38,23 +38,23 @@
     "gzipped": 11641
   },
   "dist/native.js": {
-    "bundled": 59631,
-    "minified": 27780,
-    "gzipped": 9734,
+    "bundled": 60235,
+    "minified": 27907,
+    "gzipped": 9786,
     "treeshaked": {
       "rollup": {
-        "code": 8536,
+        "code": 8455,
         "import_statements": 180
       },
       "webpack": {
-        "code": 10132
+        "code": 10051
       }
     }
   },
   "dist/universal.js": {
-    "bundled": 47027,
-    "minified": 21018,
-    "gzipped": 6917,
+    "bundled": 47600,
+    "minified": 21121,
+    "gzipped": 6962,
     "treeshaked": {
       "rollup": {
         "code": 523,
@@ -66,16 +66,16 @@
     }
   },
   "dist/konva.js": {
-    "bundled": 58216,
-    "minified": 27035,
-    "gzipped": 9647,
+    "bundled": 58789,
+    "minified": 27138,
+    "gzipped": 9697,
     "treeshaked": {
       "rollup": {
-        "code": 9212,
+        "code": 9114,
         "import_statements": 242
       },
       "webpack": {
-        "code": 10368
+        "code": 10270
       }
     }
   },
@@ -202,14 +202,14 @@
     }
   },
   "dist/web.cjs.js": {
-    "bundled": 72193,
-    "minified": 34043,
-    "gzipped": 11352
+    "bundled": 72315,
+    "minified": 33923,
+    "gzipped": 11405
   },
   "dist/native.cjs.js": {
-    "bundled": 69762,
-    "minified": 32200,
-    "gzipped": 10323
+    "bundled": 69916,
+    "minified": 32097,
+    "gzipped": 10380
   },
   "dist/renderprops.cjs.js": {
     "bundled": 77632,
@@ -237,9 +237,9 @@
     "gzipped": 10452
   },
   "dist/universal.cjs.js": {
-    "bundled": 56293,
-    "minified": 25104,
-    "gzipped": 7490
+    "bundled": 56415,
+    "minified": 24980,
+    "gzipped": 7536
   },
   "dist/test.js": {
     "bundled": 32365,
@@ -261,8 +261,8 @@
     "gzipped": 5405
   },
   "dist/konva.cjs.js": {
-    "bundled": 67598,
-    "minified": 31193,
-    "gzipped": 10231
+    "bundled": 67720,
+    "minified": 31069,
+    "gzipped": 10288
   }
 }

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-spring",
+  "name": "@morgs32/react-spring",
   "version": "8.0.7",
   "description": "A set of spring-physics based animation primitives",
   "main": "web.cjs.js",

src/useTransition.js

@@ -160,6 +160,7 @@ function diffItems({ first, prevProps, ...state }, props) {
     trail = 0,
     unique,
     config,
+    order = ['added', 'removed', 'updated'],
   } = get(props)
   let { keys: _keys, items: _items } = get(prevProps)
   let current = { ...state.current }
@@ -174,62 +175,77 @@ function diffItems({ first, prevProps, ...state }, props) {
     .filter(item => !item.destroyed && !nextSet.has(item.originalKey))
     .map(i => i.originalKey)
   let updated = keys.filter(item => currentSet.has(item))
-  let delay = 0
+  let delay = -trail
 
-  added.forEach((key, index) => {
-    // In unique mode, remove fading out transitions if their key comes in again
-    if (unique && deleted.find(d => d.originalKey === key))
-      deleted = deleted.filter(t => t.originalKey !== key)
+  while (order.length) {
+    const changeType = order.shift()
 
-    // TODO: trail shouldn't apply to the first item, no matter if it's enter, leave or update!
-    const keyIndex = keys.indexOf(key)
-    const item = items[keyIndex]
-    const slot = first && initial !== void 0 ? 'initial' : 'enter'
-    current[key] = {
-      slot,
-      originalKey: key,
-      key: unique ? String(key) : guid++,
-      item,
-      trail: (delay = delay + (index > 0 ? trail : 0)),
-      config: callProp(config, item, slot),
-      from: callProp(
-        first ? (initial !== void 0 ? initial || {} : from) : from,
-        item
-      ),
-      to: callProp(enter, item),
-    }
-  })
+    switch (changeType) {
 
-  removed.forEach(key => {
-    const keyIndex = _keys.indexOf(key)
-    const item = _items[keyIndex]
-    const slot = 'leave'
-    deleted.unshift({
-      ...current[key],
-      slot,
-      destroyed: true,
-      left: _keys[Math.max(0, keyIndex - 1)],
-      right: _keys[Math.min(_keys.length, keyIndex + 1)],
-      trail: (delay = delay + trail),
-      config: callProp(config, item, slot),
-      to: callProp(leave, item),
-    })
-    delete current[key]
-  })
+      case 'added': {
+        added.forEach((key, index) => {
+          // In unique mode, remove fading out transitions if their key comes in again
+          if (unique && deleted.find(d => d.originalKey === key))
+            deleted = deleted.filter(t => t.originalKey !== key)
 
-  updated.forEach(key => {
-    const keyIndex = keys.indexOf(key)
-    const item = items[keyIndex]
-    const slot = 'update'
-    current[key] = {
-      ...current[key],
-      item,
-      slot,
-      trail: (delay = delay + trail),
-      config: callProp(config, item, slot),
-      to: callProp(update, item),
+          // TODO: trail shouldn't apply to the first item, no matter if it's enter, leave or update!
+          const keyIndex = keys.indexOf(key)
+          const item = items[keyIndex]
+          const slot = first && initial !== void 0 ? 'initial' : 'enter'
+          current[key] = {
+            slot,
+            originalKey: key,
+            key: unique ? String(key) : guid++,
+            item,
+            trail: (delay = delay + trail),
+            config: callProp(config, item, slot),
+            from: callProp(
+              first ? (initial !== void 0 ? initial || {} : from) : from,
+              item
+            ),
+            to: callProp(enter, item),
+          }
+        })
+        break
+      }
+      case 'removed': {
+        removed.forEach(key => {
+          const keyIndex = _keys.indexOf(key)
+          const item = _items[keyIndex]
+          const slot = 'leave'
+          deleted.unshift({
+            ...current[key],
+            slot,
+            destroyed: true,
+            left: _keys[Math.max(0, keyIndex - 1)],
+            right: _keys[Math.min(_keys.length, keyIndex + 1)],
+            trail: (delay = delay + trail),
+            config: callProp(config, item, slot),
+            to: callProp(leave, item),
+          })
+          delete current[key]
+        })
+        break
+      }
+      case 'updated': {
+        updated.forEach(key => {
+          const keyIndex = keys.indexOf(key)
+          const item = items[keyIndex]
+          const slot = 'update'
+          current[key] = {
+            ...current[key],
+            item,
+            slot,
+            trail: (delay = delay + trail),
+            config: callProp(config, item, slot),
+            to: callProp(update, item),
+          }
+        })
+        break
+      }
     }
-  })
+  }
+
 
   let out = keys.map(key => current[key])