fix(toggle): animation in IE11 (#2062)

akveo · Nov 14, 2019 · 1d52a20 · 1d52a20
1 parent 147ec2e
commit 1d52a20
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 12 deletions.
diff --git a/src/framework/theme/components/toggle/_toggle.component.theme.scss b/src/framework/theme/components/toggle/_toggle.component.theme.scss
@@ -14,6 +14,29 @@
       border-radius: nb-theme(toggle-border-radius);
       cursor: nb-theme(toggle-cursor);
 
+      /*
+        We need to set initial positions as Angular animations won't work in IE11 if positions have no initial value.
+        Setting it in SCSS as we don't have access to theme variables from TS.
+      */
+      @include nb-ltr() {
+        &.checked .toggle-switcher {
+          left: calc(100% - #{nb-theme(toggle-switcher-size)} - #{nb-theme(toggle-border-width)});
+        }
+
+        &:not(.checked) .toggle-switcher {
+          right: 0;
+        }
+      }
+
+      @include nb-rtl() {
+        &.checked .toggle-switcher {
+          right: calc(100% - #{nb-theme(toggle-switcher-size)} - #{nb-theme(toggle-border-width)});
+        }
+
+        &:not(.checked) .toggle-switcher {
+          left: 0;
+        }
+      }
     }
 
     .native-input:enabled:focus + .toggle {

diff --git a/src/framework/theme/components/toggle/toggle.component.ts b/src/framework/theme/components/toggle/toggle.component.ts
@@ -20,7 +20,7 @@ import { trigger, state, style, animate, transition } from '@angular/animations'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { NbLayoutDirectionService, NbLayoutDirection } from '../../services/direction.service';
+import { NbLayoutDirectionService } from '../../services/direction.service';
 import { NbComponentStatus } from '../component-status';
 
 import { convertToBoolProperty, emptyStatusWarning } from '../helpers';
@@ -253,11 +253,11 @@ import { convertToBoolProperty, emptyStatusWarning } from '../helpers';
 @Component({
   selector: 'nb-toggle',
   animations: [
-    trigger('onOff', [
-      state('ltrOn', style({ right: 0 })),
-      state('rtlOn', style({ left: 0 })),
+    trigger('position', [
+      state('right', style({ right: 0, left: '*' })),
+      state('left', style({ left: 0, right: '*' })),
       transition(':enter', [animate(0)]),
-      transition('* <=> *', [animate('0.15s')]),
+      transition('right <=> left', [animate('0.15s')]),
     ]),
   ],
   template: `
@@ -272,7 +272,7 @@ import { convertToBoolProperty, emptyStatusWarning } from '../helpers';
              (blur)="onTouched()"
              (click)="onInputClick($event)">
       <div class="toggle" [class.checked]="checked">
-        <span [@onOff]="checkState()" class="toggle-switcher">
+        <span [@position]="checkState()" class="toggle-switcher">
           <nb-icon *ngIf="checked" icon="checkmark-bold-outline" pack="nebular-essentials"></nb-icon>
         </span>
       </div>
@@ -423,12 +423,10 @@ export class NbToggleComponent implements OnInit, OnDestroy, ControlValueAccesso
 
   checkState(): string {
     if (this.checked) {
-      if (this.layoutDirection.getDirection() === NbLayoutDirection.LTR) {
-        return 'ltrOn';
-      } else {
-        return 'rtlOn';
-      }
+      return this.layoutDirection.isLtr() ? 'right' : 'left';
     }
+
+    return this.layoutDirection.isLtr() ? 'left' : 'right';
   }
 
   registerOnChange(fn: any) {

diff --git a/src/framework/theme/components/toggle/toggle.spec.ts b/src/framework/theme/components/toggle/toggle.spec.ts
@@ -5,7 +5,7 @@ import { Component, DebugElement } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { ReactiveFormsModule, FormControl } from '@angular/forms';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NbLayoutDirectionService } from '../../services/direction.service';
+import { NbLayoutDirectionService, NbLayoutDirection } from '../../services/direction.service';
 
 
 describe('Component: NbToggle', () => {
@@ -80,6 +80,39 @@ describe('Component: NbToggle', () => {
     fixture.detectChanges();
     expect(testContainerEl.classList.contains('status-info')).toBeTruthy();
   });
+
+  describe('state animation', () => {
+
+    beforeEach(() => {
+      TestBed.get(NbLayoutDirectionService).setDirection(NbLayoutDirection.LTR);
+    });
+
+    afterAll(() => {
+      TestBed.get(NbLayoutDirectionService).setDirection(NbLayoutDirection.LTR);
+    });
+
+    it(`should has 'left' position when unchecked in LTR`, () => {
+      expect(toggle.checkState()).toEqual('left');
+    });
+
+    it(`should has 'right' position when checked in LTR`, () => {
+      toggle.checked = true;
+      expect(toggle.checkState()).toEqual('right');
+    });
+
+    it(`should has 'right' position when unchecked in RTL`, () => {
+      const directionService: NbLayoutDirectionService = TestBed.get(NbLayoutDirectionService);
+      directionService.setDirection(NbLayoutDirection.RTL);
+      expect(toggle.checkState()).toEqual('right');
+    });
+
+    it(`should has 'left' position when checked in RTL`, () => {
+      const directionService: NbLayoutDirectionService = TestBed.get(NbLayoutDirectionService);
+      directionService.setDirection(NbLayoutDirection.RTL);
+      toggle.checked = true;
+      expect(toggle.checkState()).toEqual('left');
+    });
+  });
 });
 
 // Test component with reactive forms