feat: added Array type to navigateTo prop type check (#366)

Updated readme.md; Added example usage to Vue play file
SSENSE · Mar 21, 2019 · ae4abad · ae4abad
1 parent 0714379
commit ae4abad
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -73,7 +73,7 @@ export default {
 | loop                        | Boolean | false   | Flag to make the carousel loop around when it reaches the end.                                                                                                                                                                                                                        |
 | minSwipeDistance            | Number  | 8       | Minimum distance for the swipe to trigger a slide advance.                                                                                                                                                                                                                            |
 | mouseDrag                   | Boolean | true    | Flag to toggle mouse dragging.                                                                                                                                                                                                                                                        |
-| navigateTo                  | Number  | 0       | Listen for an external navigation request using this prop.                                                                                                                                                                                                                            |
+| navigateTo                  | Number, Array  | 0       | Listen for an external navigation request using this prop. When the supplied prop is of type Number the slide with the matching index is animated into view, however you can disable this animation by supplying an Array consisting of exactly two element: the new slide index and a boolean indication whether the change should be animated or not (eg. [3, false] would mean "go to the slide with index 3 without animation").                                                                                                                                                                                                                            |
 | navigationClickTargetSize   | Number  | 8       | Amount of padding to apply around the label in pixels.                                                                                                                                                                                                                                |
 | navigationEnabled           | Boolean | false   | Flag to render the navigation component (next/prev buttons).                                                                                                                                                                                                                          |
 | navigationNextLabel         | String  | ▶       | Text content of the navigation next button.                                                                                                                                                                                                                                           |

diff --git a/play/index.js b/play/index.js
@@ -312,15 +312,15 @@ play("Carousel", module)
   .add("NavigateTo slides", {
     template:
       `<div style="width: 100%; display: flex; justify-content: center; margin-top: 40px;">
-        <carousel style="width: 500px;" :navigateTo="newSlide" :scrollPerPage=false v-on:pagechange="pageChanged">
+        <carousel style="width: 500px;" :navigateTo="navigateTo" :scrollPerPage=false v-on:pagechange="pageChanged">
           <slide v-for="slide in slides" :key="slide.src">
             <img style="width: 100%;" :src= slide />
           </slide>
         </carousel>
         <div style="float: left; z-index: 1000">
-          <button style="position: absolute; bottom: 20px; right: 250px" v-on:click="gotoSlide(0)">Goto slide 1</button>
-          <button style="position: absolute; bottom: 20px; right: 150px" v-on:click="gotoSlide(1)">Goto slide 2</button>
-          <button style="position: absolute; bottom: 20px; right: 50px" v-on:click="gotoSlide(5)">Goto slide 5</button>
+          <button style="position: absolute; bottom: 20px; right: 350px" v-on:click="gotoSlide(0)">Goto slide 1</button>
+          <button style="position: absolute; bottom: 20px; right: 250px" v-on:click="gotoSlide(1)">Goto slide 2</button>
+          <button style="position: absolute; bottom: 20px; right: 50px" v-on:click="gotoSlide(4, false)">Goto slide 5 without animation</button>
         </div>
       </div>`,
     components: {
@@ -330,11 +330,22 @@ play("Carousel", module)
     data(){
       return {
         newSlide: 0,
+        newSlideAnimation: true,
         slides: images
       }
     },
+    computed: {
+      navigateTo() {
+        if (this.newSlideAnimation)
+          return this.newSlide
+
+        else
+          return [this.newSlide, false]
+      }
+    },
     methods: {
-      gotoSlide(val) {
+      gotoSlide(val, animation) {
+        this.newSlideAnimation = (animation === false ? false : true);
         this.newSlide = val;
       },
       pageChanged(val) {

diff --git a/src/Carousel.vue b/src/Carousel.vue
@@ -184,7 +184,7 @@ export default {
      * Listen for an external navigation request using this prop.
      */
     navigateTo: {
-      type: Number,
+      type: [Number, Array],
       default: 0
     },
     /**