Add hide-single-page prop to paginateLinks (#34)

TahaSh · Jan 16, 2017 · 5295a5e · 5295a5e
1 parent a884202
commit 5295a5e
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 4 deletions.
diff --git a/src/components/PaginateLinks.js b/src/components/PaginateLinks.js
@@ -36,14 +36,18 @@ export default {
     showStepLinks: {
       type: Boolean
     },
+    hideSinglePage: {
+      type: Boolean
+    },
     classes: {
       type: Object,
       default: null
     }
   },
   data () {
     return {
-      listOfPages: []
+      listOfPages: [],
+      numberOfPages: 0
     }
   },
   computed: {
@@ -96,8 +100,8 @@ export default {
         warn(`<paginate-links for="${this.for}"> can't be used without its companion <paginate name="${this.for}">`, this.$parent)
         return
       }
-      const numberOfPages = Math.ceil(target.list.length / target.per)
-      this.listOfPages = getListOfPageNumbers(numberOfPages)
+      this.numberOfPages = Math.ceil(target.list.length / target.per)
+      this.listOfPages = getListOfPageNumbers(this.numberOfPages)
     }
   },
   render (h) {
@@ -107,6 +111,10 @@ export default {
       ? getLimitedLinks(this, h)
       : getFullLinks(this, h)
 
+    if (this.hideSinglePage && this.numberOfPages <= 1) {
+      return null
+    }
+
     const el = h('ul', {
       class: ['paginate-links', this.for]
     }, links)
@@ -116,7 +124,6 @@ export default {
         addAdditionalClasses(el.elm, this.classes)
       })
     }
-
     return el
   }
 }

diff --git a/test/PaginateLinks.js b/test/PaginateLinks.js
@@ -252,4 +252,46 @@ describe('PaginateLinks.vue', () => {
 
   })
 
+  describe('all types', () => {
+    it('can be hidden if it contains a single page', (done) => {
+      vm = new Vue({
+        template:
+          `<div>
+            <paginate name="langs" :list="langs" :per="8"></paginate>
+            <paginate-links for="langs" :hide-single-page="true"></paginate-links>
+          </div>`,
+        data: {
+          langs: LANGS,
+          paginate: {langs: { list: [], page: 0 }}
+        },
+        components: { Paginate, PaginateLinks }
+      }).$mount()
+
+      Vue.nextTick(() => {
+        expect(vm.$el.querySelector('.paginate-links')).to.be.null
+        done()
+      })
+    })
+
+    it('should not be hidden if it contains a single page and hide-single-page=false', (done) => {
+      vm = new Vue({
+        template:
+          `<div>
+            <paginate name="langs" :list="langs" :per="8"></paginate>
+            <paginate-links for="langs" :hide-single-page="false"></paginate-links>
+          </div>`,
+        data: {
+          langs: LANGS,
+          paginate: {langs: { list: [], page: 0 }}
+        },
+        components: { Paginate, PaginateLinks }
+      }).$mount()
+
+      Vue.nextTick(() => {
+        expect(vm.$el.querySelector('.paginate-links')).to.be.not.null
+        done()
+      })
+    })
+  })
+
 })