Skip to content

Commit

Permalink
fix(module:tabs): fix the pagnation padding-right when scrolling (#3539…
Browse files Browse the repository at this point in the history 
…) (#3709)

* fix(module:tabs): fix the pagnation padding-right when scrolling (#3539)

close #3539
  • Loading branch information
@chensimeng
Nearzxh authored and chensimeng committed Jul 28, 2019
1 parent b758572 commit 9a4df38
Show file tree
Hide file tree
Showing 4 changed files with 86 additions and 9 deletions.
2 changes: 1 addition & 1 deletion components/core/util/text-measure.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const wrapperStyle = {
lineHeight: 'inherit'
};

function pxToNumber(value: string | null): number {
export function pxToNumber(value: string | null): number {
if (!value) {
return 0;
}
Expand Down
25 changes: 22 additions & 3 deletions components/tabs/nz-tabs-nav.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@

/** code from https://github.com/angular/material2 */
import { Direction, Directionality } from '@angular/cdk/bidi';
import { Platform } from '@angular/cdk/platform';
import {
AfterContentChecked,
AfterContentInit,
Expand All @@ -28,11 +29,10 @@ import {
ViewChild,
ViewEncapsulation
} from '@angular/core';
import { pxToNumber, InputBoolean, NzDomEventService } from 'ng-zorro-antd/core';
import { merge, of as observableOf, Subject, Subscription } from 'rxjs';
import { finalize, startWith, takeUntil } from 'rxjs/operators';

import { InputBoolean, NzDomEventService } from 'ng-zorro-antd/core';

import { NzTabLabelDirective } from './nz-tab-label.directive';
import { NzTabsInkBarDirective } from './nz-tabs-ink-bar.directive';
import { NzTabPositionMode } from './nz-tabset.component';
Expand Down Expand Up @@ -105,6 +105,7 @@ export class NzTabsNavComponent implements AfterContentChecked, AfterContentInit
private ngZone: NgZone,
private renderer: Renderer2,
private cdr: ChangeDetectorRef,
private platform: Platform,
private nzDomEventService: NzDomEventService,
@Optional() private dir: Directionality
) {}
Expand All @@ -115,6 +116,7 @@ export class NzTabsNavComponent implements AfterContentChecked, AfterContentInit
// will fire even if the text content didn't change which is inefficient and is prone
// to infinite loops if a poorly constructed expression is passed in (see #14249).
if (textContent !== this.currentTextContent) {
this.currentTextContent = textContent;
this.ngZone.run(() => {
if (this.nzShowPagination) {
this.updatePagination();
Expand Down Expand Up @@ -287,7 +289,7 @@ export class NzTabsNavComponent implements AfterContentChecked, AfterContentInit
get viewWidthHeightPix(): number {
let PAGINATION_PIX = 0;
if (this.showPaginationControls) {
PAGINATION_PIX = 64;
PAGINATION_PIX = this.navContainerScrollPaddingPix;
}
if (this.nzPositionMode === 'horizontal') {
return this.navContainerElement.nativeElement.offsetWidth - PAGINATION_PIX;
Expand All @@ -296,6 +298,23 @@ export class NzTabsNavComponent implements AfterContentChecked, AfterContentInit
}
}

get navContainerScrollPaddingPix(): number {
if (this.platform.isBrowser) {
const navContainer = this.navContainerElement.nativeElement;
// tslint:disable: no-any
const originStyle: CSSStyleDeclaration = window.getComputedStyle
? window.getComputedStyle(navContainer)
: (navContainer as any).currentStyle; // currentStyle for IE < 9
if (this.nzPositionMode === 'horizontal') {
return pxToNumber(originStyle.paddingLeft) + pxToNumber(originStyle.paddingRight);
} else {
return pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom);
}
} else {
return 0;
}
}

get tabListScrollWidthHeightPix(): number {
if (this.nzPositionMode === 'horizontal') {
return this.navListElement.nativeElement.scrollWidth;
Expand Down
64 changes: 61 additions & 3 deletions components/tabs/nz-tabs-nav.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { dispatchFakeEvent } from 'ng-zorro-antd/core';

import { NzTabsNavComponent } from './nz-tabs-nav.component';
import { NzTabsModule } from './nz-tabs.module';
import { NzTabPositionMode } from './nz-tabset.component';

describe('tabs nav', () => {
let dir: Direction = 'ltr';
Expand Down Expand Up @@ -56,7 +57,7 @@ describe('tabs nav', () => {
fixture.detectChanges();
expect(appComponent.onNextClick).toHaveBeenCalledTimes(1);
});
it('should scroll to show the focused tab label', () => {
it('should scroll to show the focused tab label in ltr direction', () => {
appComponent.addTabsForScrolling();
fixture.detectChanges();
expect(appComponent.nzTabsNavComponent.scrollDistance).toBe(0);
Expand All @@ -73,6 +74,61 @@ describe('tabs nav', () => {
fixture.detectChanges();
expect(appComponent.nzTabsNavComponent.scrollDistance).toBe(0);
});
it('should has no padding right at the last tab in horizontal', () => {
const _padding = 100;
// Add Enough Tab
const nav = fixture.debugElement.query(By.directive(NzTabsNavComponent));
appComponent.addTabsForScrolling();
fixture.detectChanges();
// Modify nav container padding left and padding right
const navContainer = fixture.debugElement.query(By.css('.ant-tabs-nav-container')).nativeElement;
// The transition must be set to none, or the calculate of getComputedStyle() will equal to 0
navContainer.style.transition = 'none';
navContainer.style.paddingLeft = `${_padding}px`;
navContainer.style.paddingRight = `${_padding}px`;
// Focus on the last tab, expect the last tab offset right to be the nav container offset right.
appComponent.nzTabsNavComponent.selectedIndex = appComponent.tabs.length - 1;
fixture.detectChanges();
// Caculate the scrolling element position right
// Format: translate3d(xxxpx, 0px, 0px)
const transformedNav: HTMLElement = nav.nativeElement.querySelector('.ant-tabs-nav');
const transformedNavStyle = transformedNav.style.transform + '';
const transformedNavTransformPix = parseInt(transformedNavStyle.split(',')[0].slice(12, -2), 10);
const lastTabOffsetRight = transformedNav.clientLeft + transformedNav.clientWidth + transformedNavTransformPix;
// Caculate the nav container element position right
const navContainerOffsetRight = navContainer.clientLeft + navContainer.clientWidth - _padding * 2;
expect(lastTabOffsetRight).toBe(navContainerOffsetRight);
});
it('should has no padding bottom at the last tab in vertical', () => {
appComponent.tabPositionMode = 'vertical';
fixture.detectChanges();
const _padding = 100;
// Add Enough Tab
const nav = fixture.debugElement.query(By.directive(NzTabsNavComponent));
appComponent.addTabsForScrolling();
fixture.detectChanges();
// Mock add vertical related class
(nav.nativeElement as HTMLElement).classList.add('ant-tabs-left-bar');
fixture.detectChanges();
// Modify nav container padding top and padding bottom
const navContainer = fixture.debugElement.query(By.css('.ant-tabs-nav-container')).nativeElement as HTMLElement;
// The transition must be set to none, or the calculate of getComputedStyle() will equal to 0
navContainer.style.transition = 'none';
navContainer.style.paddingTop = `${_padding}px`;
navContainer.style.paddingBottom = `${_padding}px`;
// Focus on the last tab, expect the last tab offset bottom to be the nav container offset bottom.
appComponent.nzTabsNavComponent.selectedIndex = appComponent.tabs.length - 1;
fixture.detectChanges();
// Caculate the scrolling element position bottom
// Format: translate3d(0px, xxxpx, 0px)
const transformedNav: HTMLElement = nav.nativeElement.querySelector('.ant-tabs-nav');
const transformedNavStyle = transformedNav.style.transform + '';
const transformedNavTransformPix = parseInt(transformedNavStyle.split(',')[1].slice(0, -2), 10);
const lastTabOffsetBottom = transformedNav.clientTop + transformedNav.clientHeight + transformedNavTransformPix;
// Caculate the nav container element position bottom
const navContainerOffsetBottom = navContainer.clientTop + navContainer.clientHeight - _padding * 2;
expect(lastTabOffsetBottom).toBe(navContainerOffsetBottom);
});
});

describe('rtl', () => {
Expand All @@ -85,7 +141,7 @@ describe('tabs nav', () => {
fixture.detectChanges();
});

it('should scroll to show the focused tab label', () => {
it('should scroll to show the focused tab label in rtl direction', () => {
appComponent.addTabsForScrolling();
fixture.detectChanges();
expect(appComponent.nzTabsNavComponent.scrollDistance).toBe(0);
Expand Down Expand Up @@ -154,12 +210,13 @@ describe('tabs nav', () => {

@Component({
template: `
<div [dir]="dir" style="width: 130px;">
<div [dir]="dir" style="width: 300px; height: 300px;" class="ant-tabs">
<div
nz-tabs-nav
role="tablist"
tabindex="0"
[selectedIndex]="selectedIndex"
[nzPositionMode]="tabPositionMode"
(nzOnNextClick)="onNextClick()"
(nzOnPrevClick)="onPrevClick()"
>
Expand All @@ -176,6 +233,7 @@ class NzTestTabNavComponent {
selectedIndex: number = 0;
tabs = [{ label: 'tab one' }, { label: 'tab one' }, { label: 'tab one' }, { label: 'tab one' }];
dir: Direction = 'ltr';
tabPositionMode: NzTabPositionMode = 'horizontal';
onNextClick = jasmine.createSpy('next click change');
onPrevClick = jasmine.createSpy('pre click change');

Expand Down
4 changes: 2 additions & 2 deletions components/tabs/nz-tabs.module.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,8 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
*/

import { ObserversModule } from '@angular/cdk/observers';
import { PlatformModule } from '@angular/cdk/platform';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { NzAddOnModule } from 'ng-zorro-antd/core';
Expand Down Expand Up @@ -42,6 +42,6 @@ import { NzTabSetComponent } from './nz-tabset.component';
NzTabBodyComponent,
NzTabLinkDirective
],
imports: [CommonModule, ObserversModule, NzIconModule, NzAddOnModule]
imports: [CommonModule, ObserversModule, NzIconModule, NzAddOnModule, PlatformModule]
})
export class NzTabsModule {}

0 comments on commit 9a4df38

Please sign in to comment.