fix(module: tabs): fix tabs display error in macos safari (NG-ZORRO#106)

fisherspy · Nov 13, 2018 · ba9e43b · ba9e43b
1 parent 2aa43aa
commit ba9e43b
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 23 deletions.
diff --git a/components/checkbox/checkbox.component.ts b/components/checkbox/checkbox.component.ts
@@ -72,8 +72,8 @@ export class Checkbox implements OnInit, OnChanges, ControlValueAccessor {
   checkBoxWrapper: boolean = true;
 
   @HostListener('click', ['$event'])
-  onClick(e: TouchEvent): void {
-    e.preventDefault();
+  onClick(event): void {
+    event.preventDefault();
     if (!this._disabled) {
       this.updateValue(!this._checked);
     }

diff --git a/components/date-picker/date-picker.component.ts b/components/date-picker/date-picker.component.ts
@@ -170,7 +170,7 @@ export class DatePickerComponent implements OnInit, OnDestroy, AfterViewInit {
     public elementRef: ElementRef,
     public options: DatePickerOptions,
     public localeProviderService: LocaleProviderService
-  ) {}
+  ) { }
 
   init() {
     this.initResult();
@@ -384,12 +384,12 @@ export class DatePickerComponent implements OnInit, OnDestroy, AfterViewInit {
             case 2:
               this.localMinDate[_indexArrayIndex] = min_date[i] =
                 this.localMinDate[_indexArrayIndex] > 0 &&
-                this.localMinDate[_indexArrayIndex] <= new Date(min_date[0], min_date[1], 0).getDate()
+                  this.localMinDate[_indexArrayIndex] <= new Date(min_date[0], min_date[1], 0).getDate()
                   ? this.localMinDate[_indexArrayIndex]
                   : 1;
               this.localMaxDate[_indexArrayIndex] = max_date[i] =
                 this.localMaxDate[_indexArrayIndex] > 0 &&
-                this.localMaxDate[_indexArrayIndex] <= new Date(max_date[0], max_date[1], 0).getDate()
+                  this.localMaxDate[_indexArrayIndex] <= new Date(max_date[0], max_date[1], 0).getDate()
                   ? this.localMaxDate[_indexArrayIndex]
                   : new Date(max_date[0], max_date[1], 0).getDate();
               current_time[i] = this.currentTime[_indexArrayIndex];
@@ -642,8 +642,8 @@ export class DatePickerComponent implements OnInit, OnDestroy, AfterViewInit {
       this.dataWithStr[checkIdx] =
         this.options.locale.locale === 'zh_CN'
           ? arr.map(item => {
-              return item + str;
-            })
+            return item + str;
+          })
           : arr;
       setTimeout(() => {
         this.selectedTarget.forEach((item, i) => {

diff --git a/components/radio/radio.component.ts b/components/radio/radio.component.ts
@@ -70,8 +70,8 @@ export class Radio implements OnInit, OnChanges, ControlValueAccessor {
   radioWrapper: boolean = true;
 
   @HostListener('click', ['$event'])
-  onClick(e: TouchEvent): void {
-    e.preventDefault();
+  onClick(event): void {
+    event.preventDefault();
     if (!this._disabled && !this._checked) {
       this.updateValue(true);
     }

diff --git a/components/tabs/tab-pane.component.ts b/components/tabs/tab-pane.component.ts
@@ -20,6 +20,7 @@ export type TabPanelPositionState =
 @Component({
   selector: 'TabPane, nzm-tab-pane',
   templateUrl: './tab-pane.component.html',
+  styles: [`:host {touch-action: auto}`],
   host: {
     '[@translateTabPane]': 'position',
     '(@translateTabPane.start)': 'onTranslateTabStarted($event)',
@@ -30,7 +31,6 @@ export type TabPanelPositionState =
       state(
         'left-with-animation',
         style({
-          'touch-action': 'auto',
           transform: 'translate3d(-100%, 0, 0)',
           transition: '.3s cubic-bezier(0.35, 0, 0.25, 1)'
         })
@@ -39,16 +39,14 @@ export type TabPanelPositionState =
         'left-with-animation-with-higher-zindex',
         style({
           'z-index': 100,
-          'touch-action': 'auto',
           transform: 'translate3d(-100%, 0, 0)',
           transition: '.3s cubic-bezier(0.35, 0, 0.25, 1)'
         })
       ),
-      state('left-without-animation', style({ 'touch-action': 'auto', transform: 'translate3d(-100%, 0, 0)' })),
+      state('left-without-animation', style({transform: 'translate3d(-100%, 0, 0)' })),
       state(
         'right-with-animation',
         style({
-          'touch-action': 'auto',
           transform: 'translate3d(100%, 0, 0)',
           transition: '.3s cubic-bezier(0.35, 0, 0.25, 1)'
         })
@@ -57,16 +55,14 @@ export type TabPanelPositionState =
         'right-with-animation-with-higher-zindex',
         style({
           'z-index': 100,
-          'touch-action': 'auto',
           transform: 'translate3d(100%, 0, 0)',
           transition: '.3s cubic-bezier(0.35, 0, 0.25, 1)'
         })
       ),
-      state('right-without-animation', style({ 'touch-action': 'auto', transform: 'translate3d(100%, 0, 0)' })),
+      state('right-without-animation', style({transform: 'translate3d(100%, 0, 0)' })),
       state(
         'top-with-animation',
         style({
-          'touch-action': 'auto',
           transform: 'translate3d(0, -100%, 0)',
           transition: '.3s cubic-bezier(0.35, 0, 0.25, 1)'
         })
@@ -75,16 +71,14 @@ export type TabPanelPositionState =
         'top-with-animation-with-higher-zindex',
         style({
           'z-index': 100,
-          'touch-action': 'auto',
           transform: 'translate3d(0, -100%, 0)',
           transition: '.3s cubic-bezier(0.35, 0, 0.25, 1)'
         })
       ),
-      state('top-without-animation', style({ 'touch-action': 'auto', transform: 'translate3d(0, -100%, 0)' })),
+      state('top-without-animation', style({ transform: 'translate3d(0, -100%, 0)' })),
       state(
         'bottom-with-animation',
         style({
-          'touch-action': 'auto',
           transform: 'translate3d(0, 100%, 0)',
           transition: '.3s cubic-bezier(0.35, 0, 0.25, 1)'
         })
@@ -93,22 +87,20 @@ export type TabPanelPositionState =
         'bottom-with-animation-with-higher-zindex',
         style({
           'z-index': 100,
-          'touch-action': 'auto',
           transform: 'translate3d(0, 100%, 0)',
           transition: '.3s cubic-bezier(0.35, 0, 0.25, 1)'
         })
       ),
-      state('bottom-without-animation', style({ 'touch-action': 'auto', transform: 'translate3d(0, 100%, 0)' })),
+      state('bottom-without-animation', style({ transform: 'translate3d(0, 100%, 0)' })),
       state(
         'center-with-animation',
         style({
           'z-index': 100,
-          'touch-action': 'auto',
           transform: 'translate3d(0, 0, 0)',
           transition: '.3s cubic-bezier(0.35, 0, 0.25, 1)'
         })
       ),
-      state('center-without-animation', style({ 'touch-action': 'auto', transform: 'translate3d(0, 0, 0)' }))
+      state('center-without-animation', style({ transform: 'translate3d(0, 0, 0)' }))
     ])
   ]
 })