feat: update example to use delayUntil

mattrothenberg · Nov 9, 2019 · 768f401 · 768f401
1 parent acab245
commit 768f401
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 36 deletions.
diff --git a/package.json b/package.json
@@ -35,6 +35,6 @@
     "vue-template-compiler": "^2.6.10"
   },
   "dependencies": {
-    "flip-toolkit": "^7.0.6"
+    "flip-toolkit": "^7.0.7"
   }
 }
diff --git a/stories/Accordion.vue b/stories/Accordion.vue
@@ -3,43 +3,35 @@
     <div class="m-4">
       <div v-for="(num, index) in list" :key="index">
         <Flipped
-          :shouldInvert="shouldFlip(index)"
           :flipId="`card-${index}`"
-          v-if="index !== focused"
           stagger="card"
+          :shouldInvert="shouldFlip(index)"
+          v-if="index !== focused"
         >
-          <div
-            @click="toggleItem(index)"
-            role="button"
-            class="bg-grey h-8 my-4 flex items-center p-4"
-          >
-            <Flipped :inverseFlipId="`card-${index}`">
+          <div @click="toggleItem(index)" role="button" class="bg-grey my-4">
+            <Flipped class="min-h-4 p-4" :inverseFlipId="`card-${index}`">
               <div>
                 <Flipped
                   :delayUntil="`card-${index}`"
                   :shouldFlip="shouldFlip(index)"
                   :flipId="`avatar-card-${index}`"
                 >
-                  <div class="bg-grey-dark rounded-full w-3 h-3"></div>
+                  <div class="inline-block bg-grey-dark rounded-full w-3 h-3"></div>
                 </Flipped>
               </div>
             </Flipped>
           </div>
         </Flipped>
         <Flipped :flipId="`card-${index}`" v-else stagger="card">
-          <div
-            @click="toggleItem(index)"
-            role="button"
-            class="bg-grey h-32 my-4 flex items-center justify-center p-4"
-          >
-            <Flipped :inverseFlipId="`card-${index}`">
+          <div @click="toggleItem(index)" role="button" class="bg-grey my-4 text-center">
+            <Flipped class="h-32 p-4" :inverseFlipId="`card-${index}`">
               <div>
                 <Flipped
-                  delayUntil="foo"
+                  :delayUntil="`card-${index}`"
                   :shouldFlip="shouldFlip(index)"
                   :flipId="`avatar-card-${index}`"
                 >
-                  <div class="bg-grey-dark rounded-full w-12 h-12"></div>
+                  <div class="inline-block bg-grey-dark rounded-full w-12 h-12"></div>
                 </Flipped>
               </div>
             </Flipped>
@@ -65,18 +57,13 @@ export default {
       focused: null,
       list: Array(8)
         .fill()
-        .map(() => ({
-          open: false
+        .map((_, i) => ({
+          open: false,
+          label: `Card ${i + 1}`
         }))
     };
   },
   methods: {
-    handleStart({ el, id }) {
-      setTimeout(() => {
-        el.classList.add("animated-in");
-      }, 600);
-    },
-    handleComplete({ el, id }) {},
     shouldFlip(index) {
       return (prev, current) => {
         return index === prev || index === current;
@@ -96,7 +83,7 @@ export default {
       return {
         card: {
           reverse: this.focused === null,
-          speed: 0.1
+          speed: 1
         }
       };
     },

diff --git a/yarn.lock b/yarn.lock
@@ -3794,12 +3794,12 @@ find-up@^2.1.0:
   dependencies:
     locate-path "^2.0.0"
 
-flip-toolkit@^7.0.6:
-  version "7.0.6"
-  resolved "https://registry.yarnpkg.com/flip-toolkit/-/flip-toolkit-7.0.6.tgz#eec6fe8003334879dc7b129d1d9b557e407c8d21"
-  integrity sha512-BtL9dm4a0Oh+Q9a5JBfI+VaasjHjDdkuexV5Q6bAnFqnQU3KQrhgT2QLIAlVGf0xOMzsfGudOutTQgHOS2QyKA==
+flip-toolkit@^7.0.7:
+  version "7.0.7"
+  resolved "https://registry.yarnpkg.com/flip-toolkit/-/flip-toolkit-7.0.7.tgz#5cd71c0375ce189294b5ace0d7ec3569a1577b35"
+  integrity sha512-jqAqiJPlD0SqSFdnk0fhM4EMOt/JLCkyWaxv6aaDTGtnDioL3QwXPq0wQ4clxHLp2euOjCbegeGxbgsr3j/kXg==
   dependencies:
-    react-flip-toolkit "^7.0.6"
+    react-flip-toolkit "^7.0.7"
 
 flush-write-stream@^1.0.0:
   version "1.1.1"
@@ -6219,10 +6219,10 @@ react-fast-compare@^2.0.2:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
-react-flip-toolkit@^7.0.6:
-  version "7.0.6"
-  resolved "https://registry.yarnpkg.com/react-flip-toolkit/-/react-flip-toolkit-7.0.6.tgz#eb4b6f17c00f92084a817ce8b4f69dda2a11fdc3"
-  integrity sha512-zZpwNfAGS8/WRrHKOA224NP2aVG4ryVx9vkTkxFsU7tkGUpM5AvjsICYmOVDJhEl5wmR36SjMSmWFicloJVibA==
+react-flip-toolkit@^7.0.7:
+  version "7.0.7"
+  resolved "https://registry.yarnpkg.com/react-flip-toolkit/-/react-flip-toolkit-7.0.7.tgz#a50d455ff4f9f9961042a7a0eb23bd5a2154c963"
+  integrity sha512-1aORVOoaseauhoBg86P1qy4RgG0spzT50s2Ewiju20KtQjcNdkyqObyzOrl7ETd5fCkLV6uzgkJe8AEzuxYJBQ==
   dependencies:
     rematrix "0.2.2"