chore: don't accept string as number input

refs #550 BREAKING CHANGE: number inputs in pagination could previously be set as strings. The values passed were transformed to numbers if necessary and rounded to integers. This is not supported anymore. All number inputs should now consistently be set as number, using the syntax `[attr]="value"` (for example: `<ngb-pagination [pageSize]="20" ...></ngb-pagination>` instead of `<ngb-pagination pageSize="20" ...></ngb-pagination>`), and rounding is not applied anymore. Closes #560
ng-bootstrap · Aug 10, 2016 · f49fb08 · f49fb08
1 parent 0675e67
commit f49fb08
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 68 deletions.
diff --git a/demo/src/app/components/pagination/demos/advanced/pagination-advanced.html b/demo/src/app/components/pagination/demos/advanced/pagination-advanced.html
@@ -1,11 +1,11 @@
 <div>maxSize = 5, rotate = false</div>
-<ngb-pagination collectionSize="120" [(page)]="page" maxSize="5" [boundaryLinks]="true"></ngb-pagination>
+<ngb-pagination [collectionSize]="120" [(page)]="page" [maxSize]="5" [boundaryLinks]="true"></ngb-pagination>
 
 <div>maxSize = 5, rotate = true</div>
-<ngb-pagination collectionSize="120" [(page)]="page" maxSize="5" [rotate]="true" [boundaryLinks]="true"></ngb-pagination>
+<ngb-pagination [collectionSize]="120" [(page)]="page" [maxSize]="5" [rotate]="true" [boundaryLinks]="true"></ngb-pagination>
 
 <div>maxSize = 5, rotate = true, ellipses = false</div>
-<ngb-pagination collectionSize="120" [(page)]="page" maxSize="5" [rotate]="true" [ellipses]="false" [boundaryLinks]="true"></ngb-pagination>
+<ngb-pagination [collectionSize]="120" [(page)]="page" [maxSize]="5" [rotate]="true" [ellipses]="false" [boundaryLinks]="true"></ngb-pagination>
 
 <hr>
 

diff --git a/demo/src/app/components/pagination/demos/basic/pagination-basic.html b/demo/src/app/components/pagination/demos/basic/pagination-basic.html
@@ -1,11 +1,11 @@
 <div>Default pagination</div>
-<ngb-pagination collectionSize="70" [(page)]="page"></ngb-pagination>
+<ngb-pagination [collectionSize]="70" [(page)]="page"></ngb-pagination>
 
 <div>directionLinks = false</div>
-<ngb-pagination collectionSize="70" [(page)]="page" [directionLinks]="false"></ngb-pagination>
+<ngb-pagination [collectionSize]="70" [(page)]="page" [directionLinks]="false"></ngb-pagination>
 
 <div>boundaryLinks = true</div>
-<ngb-pagination collectionSize="70" [(page)]="page" [boundaryLinks]="true"></ngb-pagination>
+<ngb-pagination [collectionSize]="70" [(page)]="page" [boundaryLinks]="true"></ngb-pagination>
 
 <hr>
 

diff --git a/demo/src/app/components/progressbar/demos/basic/progressbar-basic.html b/demo/src/app/components/progressbar/demos/basic/progressbar-basic.html
@@ -1,4 +1,4 @@
-<ngb-progressbar type="success" value="25"></ngb-progressbar>
-<ngb-progressbar type="info" value="50"></ngb-progressbar>
-<ngb-progressbar type="warning" value="75"></ngb-progressbar>
-<ngb-progressbar type="danger" value="100"></ngb-progressbar>
+<ngb-progressbar type="success" [value]="25"></ngb-progressbar>
+<ngb-progressbar type="info" [value]="50"></ngb-progressbar>
+<ngb-progressbar type="warning" [value]="75"></ngb-progressbar>
+<ngb-progressbar type="danger" [value]="100"></ngb-progressbar>
diff --git a/demo/src/app/components/progressbar/demos/striped/progressbar-striped.html b/demo/src/app/components/progressbar/demos/striped/progressbar-striped.html
@@ -1,4 +1,4 @@
-<ngb-progressbar type="success" value="25" [striped]="true"></ngb-progressbar>
-<ngb-progressbar type="info" value="50" [striped]="true"></ngb-progressbar>
-<ngb-progressbar type="warning" value="75" [striped]="true"></ngb-progressbar>
-<ngb-progressbar type="danger" value="100" [striped]="true"></ngb-progressbar>
+<ngb-progressbar type="success" [value]="25" [striped]="true"></ngb-progressbar>
+<ngb-progressbar type="info" [value]="50" [striped]="true"></ngb-progressbar>
+<ngb-progressbar type="warning" [value]="75" [striped]="true"></ngb-progressbar>
+<ngb-progressbar type="danger" [value]="100" [striped]="true"></ngb-progressbar>
diff --git a/src/alert/alert.ts b/src/alert/alert.ts
@@ -15,7 +15,6 @@ import {
   TemplateRef
 } from '@angular/core';
 
-import {toInteger} from '../util/util';
 import {PopupService} from '../util/popup';
 
 /**
@@ -90,7 +89,7 @@ export class NgbDismissibleAlert implements OnInit, OnDestroy {
       this.close();
     });
     if (this.dismissOnTimeout) {
-      this._timeout = setTimeout(() => { this.close(); }, toInteger(this.dismissOnTimeout));
+      this._timeout = setTimeout(() => { this.close(); }, this.dismissOnTimeout);
     }
   }
 

diff --git a/src/pagination/pagination.spec.ts b/src/pagination/pagination.spec.ts
@@ -109,7 +109,7 @@ describe('ngb-pagination', () => {
   describe('UI logic', () => {
 
     it('should render and respond to collectionSize change', async(inject([TestComponentBuilder], (tcb) => {
-         const html = '<ngb-pagination [collectionSize]="collectionSize" page="1"></ngb-pagination>';
+         const html = '<ngb-pagination [collectionSize]="collectionSize" [page]="1"></ngb-pagination>';
 
          tcb.overrideTemplate(TestComponent, html).createAsync(TestComponent).then((fixture) => {
            fixture.componentInstance.collectionSize = 30;
@@ -124,7 +124,7 @@ describe('ngb-pagination', () => {
 
     it('should render and respond to pageSize change', async(inject([TestComponentBuilder], (tcb) => {
          const html =
-             '<ngb-pagination [collectionSize]="collectionSize" page="1" [pageSize]="pageSize"></ngb-pagination>';
+             '<ngb-pagination [collectionSize]="collectionSize" [page]="1" [pageSize]="pageSize"></ngb-pagination>';
 
          tcb.overrideTemplate(TestComponent, html).createAsync(TestComponent).then((fixture) => {
            fixture.componentInstance.collectionSize = 30;
@@ -252,7 +252,7 @@ describe('ngb-pagination', () => {
        })));
 
     it('should render and respond to size change', async(inject([TestComponentBuilder], (tcb) => {
-         const html = '<ngb-pagination collectionSize="20" page="1" [size]="size"></ngb-pagination>';
+         const html = '<ngb-pagination [collectionSize]="20" [page]="1" [size]="size"></ngb-pagination>';
 
          tcb.overrideTemplate(TestComponent, html).createAsync(TestComponent).then((fixture) => {
            fixture.detectChanges();
@@ -284,7 +284,7 @@ describe('ngb-pagination', () => {
 
     it('should render and respond to maxSize change correctly', async(inject([TestComponentBuilder], (tcb) => {
          const html =
-             '<ngb-pagination collectionSize="70" [page]="page" [maxSize]="maxSize" [ellipses]="ellipses"></ngb-pagination>';
+             '<ngb-pagination [collectionSize]="70" [page]="page" [maxSize]="maxSize" [ellipses]="ellipses"></ngb-pagination>';
 
          tcb.overrideTemplate(TestComponent, html).createAsync(TestComponent).then((fixture) => {
            fixture.detectChanges();
@@ -318,7 +318,7 @@ describe('ngb-pagination', () => {
        })));
 
     it('should render and rotate pages correctly', async(inject([TestComponentBuilder], (tcb) => {
-         const html = `<ngb-pagination collectionSize="70" [page]="page" [maxSize]="maxSize" [rotate]="rotate" 
+         const html = `<ngb-pagination [collectionSize]="70" [page]="page" [maxSize]="maxSize" [rotate]="rotate" 
         [ellipses]="ellipses"></ngb-pagination>`;
 
          tcb.overrideTemplate(TestComponent, html).createAsync(TestComponent).then((fixture) => {
@@ -362,7 +362,7 @@ describe('ngb-pagination', () => {
        })));
 
     it('should display ellipsis correctly', async(inject([TestComponentBuilder], (tcb) => {
-         const html = `<ngb-pagination collectionSize="70" [page]="page" 
+         const html = `<ngb-pagination [collectionSize]="70" [page]="page" 
         [maxSize]="maxSize" [rotate]="rotate" [ellipses]="ellipses"></ngb-pagination>`;
 
          tcb.overrideTemplate(TestComponent, html).createAsync(TestComponent).then((fixture) => {

diff --git a/src/pagination/pagination.ts b/src/pagination/pagination.ts
@@ -1,5 +1,5 @@
 import {Component, EventEmitter, Input, Output, OnChanges, ChangeDetectionStrategy} from '@angular/core';
-import {getValueInRange, toInteger} from '../util/util';
+import {getValueInRange} from '../util/util';
 
 /**
  * A directive that will take care of visualising a pagination bar and enable / disable buttons correctly!
@@ -48,19 +48,14 @@ import {getValueInRange, toInteger} from '../util/util';
   `
 })
 export class NgbPagination implements OnChanges {
-  private _maxSize = 0;
-  private _page = 0;
   private _pageCount = 0;
-  private _pageSize = 10;
   pages: number[] = [];
 
   /**
    *  Whether to show the "First" and "Last" page links
    */
   @Input() boundaryLinks = false;
 
-  private _collectionSize;
-
   /**
    *  Whether to show the "Next" and "Previous" page links
    */
@@ -80,42 +75,22 @@ export class NgbPagination implements OnChanges {
   /**
    *  Number of items in collection.
    */
-  @Input()
-  set collectionSize(value: number | string) {
-    this._collectionSize = toInteger(value);
-  }
-
-  get collectionSize(): number | string { return this._collectionSize; }
+  @Input() collectionSize: number;
 
   /**
-   *  Maximum number of pages to display
+   *  Maximum number of pages to display.
    */
-  @Input()
-  set maxSize(value: number | string) {
-    this._maxSize = toInteger(value);
-  }
-
-  get maxSize(): number | string { return this._maxSize; }
+  @Input() maxSize = 0;
 
   /**
    *  Current page.
    */
-  @Input()
-  set page(value: number | string) {
-    this._page = parseInt(`${value}`, 10);
-  }
-
-  get page(): number | string { return this._page; }
+  @Input() page = 0;
 
   /**
    *  Number of items per page.
    */
-  @Input()
-  set pageSize(value: number | string) {
-    this._pageSize = toInteger(value);
-  }
-
-  get pageSize(): number | string { return this._pageSize; }
+  @Input() pageSize = 10;
 
   /**
    *  An event fired when the page is changed.
@@ -134,7 +109,7 @@ export class NgbPagination implements OnChanges {
 
   selectPage(pageNumber: number): void {
     let prevPageNo = this.page;
-    this._page = this._getPageNoInRange(pageNumber);
+    this.page = this._getPageNoInRange(pageNumber);
 
     if (this.page !== prevPageNo) {
       this.pageChange.emit(this.page);
@@ -145,7 +120,7 @@ export class NgbPagination implements OnChanges {
 
   ngOnChanges(): void {
     // re-calculate new length of pages
-    this._pageCount = Math.ceil(this._collectionSize / this._pageSize);
+    this._pageCount = Math.ceil(this.collectionSize / this.pageSize);
 
     // fill-in model needed to render pages
     this.pages.length = 0;
@@ -154,10 +129,10 @@ export class NgbPagination implements OnChanges {
     }
 
     // get selected page
-    this._page = this._getPageNoInRange(this.page);
+    this.page = this._getPageNoInRange(this.page);
 
     // apply maxSize if necessary
-    if (this._maxSize > 0 && this._pageCount > this._maxSize) {
+    if (this.maxSize > 0 && this._pageCount > this.maxSize) {
       let start = 0;
       let end = this._pageCount;
 
@@ -202,19 +177,19 @@ export class NgbPagination implements OnChanges {
   private _applyRotation(): [number, number] {
     let start = 0;
     let end = this._pageCount;
-    let leftOffset = Math.floor(this._maxSize / 2);
-    let rightOffset = this._maxSize % 2 === 0 ? leftOffset - 1 : leftOffset;
+    let leftOffset = Math.floor(this.maxSize / 2);
+    let rightOffset = this.maxSize % 2 === 0 ? leftOffset - 1 : leftOffset;
 
-    if (this._page <= leftOffset) {
+    if (this.page <= leftOffset) {
       // very beginning, no rotation -> [0..maxSize]
-      end = this._maxSize;
-    } else if (this._pageCount - this._page < leftOffset) {
+      end = this.maxSize;
+    } else if (this._pageCount - this.page < leftOffset) {
       // very end, no rotation -> [len-maxSize..len]
-      start = this._pageCount - this._maxSize;
+      start = this._pageCount - this.maxSize;
     } else {
       // rotate
-      start = this._page - leftOffset - 1;
-      end = this._page + rightOffset;
+      start = this.page - leftOffset - 1;
+      end = this.page + rightOffset;
     }
 
     return [start, end];
@@ -224,9 +199,9 @@ export class NgbPagination implements OnChanges {
    * Paginates page numbers based on maxSize items per page
    */
   private _applyPagination(): [number, number] {
-    let page = Math.ceil(this._page / this._maxSize) - 1;
-    let start = page * this._maxSize;
-    let end = start + this._maxSize;
+    let page = Math.ceil(this.page / this.maxSize) - 1;
+    let start = page * this.maxSize;
+    let end = start + this.maxSize;
 
     return [start, end];
   }