Use prev/current decision data when updating (#4)

mattrothenberg · Apr 13, 2019 · 60bc386 · 60bc386
1 parent e910d63
commit 60bc386
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 43 deletions.
diff --git a/dist/vue-flip-toolkit.esm.js b/dist/vue-flip-toolkit.esm.js
@@ -1890,7 +1890,7 @@ var Flipper = /** @class */ (function () {
             inProgressAnimations: this.inProgressAnimations
         });
     };
-    Flipper.prototype.onUpdate = function () {
+    Flipper.prototype.onUpdate = function (prevDecisionData, currentDecisionData) {
         if (this.snapshot) {
             onFlipKeyUpdate({
                 flippedElementPositionsBeforeUpdate: this.snapshot
@@ -1904,7 +1904,11 @@ var Flipper = /** @class */ (function () {
                 debug: this.debug,
                 staggerConfig: this.staggerConfig,
                 handleEnterUpdateDelete: this.handleEnterUpdateDelete,
-                retainTransform: this.retainTransform
+                retainTransform: this.retainTransform,
+                decisionData: {
+                    prev: prevDecisionData,
+                    current: currentDecisionData
+                }
             });
             delete this.snapshot;
         }
@@ -2048,10 +2052,10 @@ var script$1 = {
     this.flipInstance.recordBeforeUpdate();
   },
   watch: {
-    flipKey(nv, ov) {
-      if (nv !== ov) {
+    flipKey(newKey, oldKey) {
+      if (newKey !== oldKey) {
         this.$nextTick(() => {
-          this.flipInstance.onUpdate();
+          this.flipInstance.onUpdate(oldKey, newKey);
         });
       }
     }

diff --git a/dist/vue-flip-toolkit.min.js b/dist/vue-flip-toolkit.min.js
@@ -1893,7 +1893,7 @@ var VueFlipToolkit = (function (exports) {
               inProgressAnimations: this.inProgressAnimations
           });
       };
-      Flipper.prototype.onUpdate = function () {
+      Flipper.prototype.onUpdate = function (prevDecisionData, currentDecisionData) {
           if (this.snapshot) {
               onFlipKeyUpdate({
                   flippedElementPositionsBeforeUpdate: this.snapshot
@@ -1907,7 +1907,11 @@ var VueFlipToolkit = (function (exports) {
                   debug: this.debug,
                   staggerConfig: this.staggerConfig,
                   handleEnterUpdateDelete: this.handleEnterUpdateDelete,
-                  retainTransform: this.retainTransform
+                  retainTransform: this.retainTransform,
+                  decisionData: {
+                      prev: prevDecisionData,
+                      current: currentDecisionData
+                  }
               });
               delete this.snapshot;
           }
@@ -2051,10 +2055,10 @@ var VueFlipToolkit = (function (exports) {
       this.flipInstance.recordBeforeUpdate();
     },
     watch: {
-      flipKey(nv, ov) {
-        if (nv !== ov) {
+      flipKey(newKey, oldKey) {
+        if (newKey !== oldKey) {
           this.$nextTick(() => {
-            this.flipInstance.onUpdate();
+            this.flipInstance.onUpdate(oldKey, newKey);
           });
         }
       }

diff --git a/dist/vue-flip-toolkit.umd.js b/dist/vue-flip-toolkit.umd.js
@@ -1896,7 +1896,7 @@
               inProgressAnimations: this.inProgressAnimations
           });
       };
-      Flipper.prototype.onUpdate = function () {
+      Flipper.prototype.onUpdate = function (prevDecisionData, currentDecisionData) {
           if (this.snapshot) {
               onFlipKeyUpdate({
                   flippedElementPositionsBeforeUpdate: this.snapshot
@@ -1910,7 +1910,11 @@
                   debug: this.debug,
                   staggerConfig: this.staggerConfig,
                   handleEnterUpdateDelete: this.handleEnterUpdateDelete,
-                  retainTransform: this.retainTransform
+                  retainTransform: this.retainTransform,
+                  decisionData: {
+                      prev: prevDecisionData,
+                      current: currentDecisionData
+                  }
               });
               delete this.snapshot;
           }
@@ -2054,10 +2058,10 @@
       this.flipInstance.recordBeforeUpdate();
     },
     watch: {
-      flipKey(nv, ov) {
-        if (nv !== ov) {
+      flipKey(newKey, oldKey) {
+        if (newKey !== oldKey) {
           this.$nextTick(() => {
-            this.flipInstance.onUpdate();
+            this.flipInstance.onUpdate(oldKey, newKey);
           });
         }
       }

diff --git a/src/Flipper.vue b/src/Flipper.vue
@@ -79,10 +79,10 @@ export default {
     this.flipInstance.recordBeforeUpdate();
   },
   watch: {
-    flipKey(nv, ov) {
-      if (nv !== ov) {
+    flipKey(newKey, oldKey) {
+      if (newKey !== oldKey) {
         this.$nextTick(() => {
-          this.flipInstance.onUpdate();
+          this.flipInstance.onUpdate(oldKey, newKey);
         });
       }
     }

diff --git a/stories/Accordion.vue b/stories/Accordion.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="staggered-list-content">
-    <Flipper :flipKey="key" :staggerConfig="staggerConfig" spring="gentle">
+    <Flipper :flipKey="focused" :staggerConfig="staggerConfig" spring="gentle">
       <ul class="list">
         <li @click="toggleItem(index)" v-for="(num,index) in list" :key="index">
           <Flipped
@@ -84,7 +84,6 @@ export default {
   },
   data() {
     return {
-      previouslyFocused: null,
       focused: null,
       list: [
         {
@@ -112,8 +111,8 @@ export default {
       console.log("Finished", el, id);
     },
     shouldFlip(index) {
-      return () => {
-        return index === this.previouslyFocused || index === this.focused;
+      return (prev, current) => {
+        return index === prev || index === current;
       };
     },
     toggleItem(index) {
@@ -137,11 +136,6 @@ export default {
     key() {
       return this.list.map(item => item.open.toString()).join("");
     }
-  },
-  watch: {
-    focused(nv, ov) {
-      this.previouslyFocused = ov;
-    }
   }
 };
 </script>

diff --git a/yarn.lock b/yarn.lock
@@ -1104,7 +1104,7 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
-"@types/node@*", "@types/node@^11.13.2":
+"@types/node@*", "@types/node@^11.13.4":
   version "11.13.4"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-11.13.4.tgz#f83ec3c3e05b174b7241fadeb6688267fe5b22ca"
   integrity sha512-+rabAZZ3Yn7tF/XPGHupKIL5EcAbrLxnTr/hgQICxbeuAfWtT0UZSfULE+ndusckBItcv4o6ZeOJplQikVcLvQ==
@@ -2079,7 +2079,7 @@ buffer@^4.3.0:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
-builtin-modules@^3.0.0:
+builtin-modules@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.1.0.tgz#aad97c15131eb76b65b50ef208e7584cd76a7484"
   integrity sha512-k0KL0aWZuBt2lrxrcASWDfwOLMnodeQjodT/1SxEQAXsHANgo6ZC/VEaSEHCXt7aSTZ4/4H5LKa+tBXmW7Vtvw==
@@ -5795,9 +5795,9 @@ react-fast-compare@^2.0.2:
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
 react-flip-toolkit@^6.5.8:
-  version "6.5.8"
-  resolved "https://registry.yarnpkg.com/react-flip-toolkit/-/react-flip-toolkit-6.5.8.tgz#577eeff6cb27582d9eea385f20409bc4f2dacf63"
-  integrity sha512-nfH/5xC0ehoD4UZ7yLRPueujmfMT5JLAI1i/tasteTiwJlTiChWA4glR4TMYX3AT4fdBYnRWplkPCpkQIygo3Q==
+  version "6.5.9"
+  resolved "https://registry.yarnpkg.com/react-flip-toolkit/-/react-flip-toolkit-6.5.9.tgz#c8ad78a8cf651f98526c15a51d2f4d63e722090e"
+  integrity sha512-0im7XXPBQIS4jiXQTfc5huDEYyNeWtCAZjkytJPMT3P8qroul/ii9SX5ijqHwPUIblttZUYrOSKkdFdPHHHZcw==
   dependencies:
     rematrix "0.2.2"
 
@@ -6208,12 +6208,12 @@ rollup-plugin-commonjs@^9.3.4:
     rollup-pluginutils "^2.6.0"
 
 rollup-plugin-node-resolve@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-4.2.2.tgz#590962b8568d8f7361c2b434e10bd8cb91556615"
-  integrity sha512-fkTHihF4Tzc95ZotKJNZZgxZPzslj+twk6UNWSBn3ln1mSV55atjsi7CDODdw/NNlteaf/jjjvrAj62p7OQjaQ==
+  version "4.2.3"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-4.2.3.tgz#638a373a54287d19fcc088fdd1c6fd8a58e4d90a"
+  integrity sha512-r+WaesPzdGEynpLZLALFEDugA4ACa5zn7bc/+LVX4vAXQQ8IgDHv0xfsSvJ8tDXUtprfBtrDtRFg27ifKjcJTg==
   dependencies:
     "@types/resolve" "0.0.8"
-    builtin-modules "^3.0.0"
+    builtin-modules "^3.1.0"
     is-module "^1.0.0"
     resolve "^1.10.0"
 
@@ -6241,12 +6241,12 @@ rollup-pluginutils@^2.0.1, rollup-pluginutils@^2.6.0:
     micromatch "^3.1.10"
 
 rollup@^1.9.3:
-  version "1.9.3"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-1.9.3.tgz#c898fd562dff3165470fc5de9b5e191d50f944b2"
-  integrity sha512-20iIOjee5n3H6W6CXsVdYs2xw86j4l+LQLM6yACynt+YJCwkqaYNHAjQ/dhVBIKsFpHwPqHamn/GHq+3Zp8ybQ==
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-1.10.0.tgz#91d594aa4386c51ca0883ad4ef2050b469d3e8aa"
+  integrity sha512-U9t/JaKtO0+X0pSmLVKMrAZEixrbVzITf193TiEhfoVKCnd7pDimIFo94IxUCgbn6+v5VmduHkubx2VV1s0Ftw==
   dependencies:
     "@types/estree" "0.0.39"
-    "@types/node" "^11.13.2"
+    "@types/node" "^11.13.4"
     acorn "^6.1.1"
 
 run-async@^2.2.0:
@@ -7229,9 +7229,9 @@ vue-loader@^15.7.0:
     vue-style-loader "^4.1.0"
 
 vue-router@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.3.tgz#370ca607475c45a1cfab2d9d2ac846feab1c534c"
-  integrity sha512-62rB6GjJuyklnLL+yKST469yCYj93SXEn8rpYjxgLwv0aH/Fd6OApD8Hgi9RlraZ1OOwv3jPQvZTtf1GixYW+g==
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-3.0.4.tgz#d6023e9db64d0b335771f0316c8bde8956f2d75d"
+  integrity sha512-wjirAFeMR53FFTRIM2ofLKH5BJte6Q9+MUiOj6fLzqhgerjVyQVeMmvgiQDslPJJHSqFfQ559EDvIi0lA1Lr6g==
 
 [email protected]:
   version "1.0.0"