fix: rtl tokenizer (#2335)

* fix rtl tokenizer * provide RtlService * add case for when no RtlService is provided * unsubscribe
SAP · Apr 14, 2020 · 3365021 · 3365021
1 parent 509db78
commit 3365021
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 13 deletions.
diff --git a/libs/core/src/lib/token/tokenizer.component.scss b/libs/core/src/lib/token/tokenizer.component.scss
@@ -12,6 +12,11 @@ input {
 
 .fd-tokenizer-more {
     padding-right: .5rem;
+    [dir="rtl"] &,
+    &[dir="rtl"] {
+        padding-left: .5rem;
+        padding-right: 0;
+    }
 }
 
 .fd-input-group__addon--button .fd-input-group__button {
@@ -22,5 +27,3 @@ input {
         height: 1.625rem;
     }
 }
-
-
diff --git a/libs/core/src/lib/token/tokenizer.component.spec.ts b/libs/core/src/lib/token/tokenizer.component.spec.ts
@@ -2,8 +2,7 @@ import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { TokenizerComponent } from './tokenizer.component';
 import { Component } from '@angular/core';
-import { TokenComponent } from '@fundamental-ngx/core';
-import { FormControlDirective } from '@fundamental-ngx/core';
+import { RtlService, TokenComponent, TokenizerInputDirective, FormControlDirective } from '@fundamental-ngx/core';
 
 async function whenStable(fixture) {
   fixture.detectChanges();
@@ -17,7 +16,7 @@ async function whenStable(fixture) {
             <fd-token>Token 1</fd-token>
             <fd-token>Token 2</fd-token>
             <fd-token>Token 3</fd-token>
-            <input fd-form-control>
+            <input fd-tokenizer-input fd-form-control>
         </fd-tokenizer>
     `
 })
@@ -29,7 +28,8 @@ describe('TokenizerComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [TokenizerComponent, TokenComponent, TokenizerWrapperComponent, FormControlDirective]
+      declarations: [TokenizerComponent, TokenComponent, TokenizerWrapperComponent, FormControlDirective, TokenizerInputDirective],
+      providers: [RtlService]
     })
       .compileComponents();
   }));

diff --git a/libs/core/src/lib/token/tokenizer.component.ts b/libs/core/src/lib/token/tokenizer.component.ts
@@ -7,13 +7,15 @@ import {
     ContentChild,
     ContentChildren, ElementRef,
     forwardRef, HostListener,
-    Input,
+    Input, OnDestroy, Optional,
     QueryList,
     ViewChild,
     ViewEncapsulation
 } from '@angular/core';
 import { FormControlDirective } from '../form/form-control/form-control.directive';
 import { TokenComponent } from './token.component';
+import { RtlService } from '../utils/services/rtl.service';
+import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'fd-tokenizer',
@@ -22,7 +24,7 @@ import { TokenComponent } from './token.component';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class TokenizerComponent implements AfterViewInit, AfterContentInit {
+export class TokenizerComponent implements AfterViewInit, AfterContentInit, OnDestroy {
 
     /** @hidden */
     @ContentChildren(forwardRef(() => TokenComponent))
@@ -80,6 +82,9 @@ export class TokenizerComponent implements AfterViewInit, AfterContentInit {
     /** @hidden */
     previousTokenCount: number;
 
+    /** @hidden */
+    tokenListChangesSubscription: Subscription;
+
     /** @hidden */
     ngAfterViewInit(): void {
         if (this.input && this.input.elementRef()) {
@@ -92,7 +97,7 @@ export class TokenizerComponent implements AfterViewInit, AfterContentInit {
         }
         this.handleTokenClickSubscriptions();
         // watch for changes to the tokenList and attempt to expand/collapse tokens as needed
-        this.tokenList.changes.subscribe(() => {
+        this.tokenListChangesSubscription = this.tokenList.changes.subscribe(() => {
             this.previousTokenCount > this.tokenList.length ? this._expandTokens() : this._collapseTokens();
             this.previousTokenCount = this.tokenList.length;
             this.handleTokenClickSubscriptions();
@@ -110,7 +115,19 @@ export class TokenizerComponent implements AfterViewInit, AfterContentInit {
         this.onResize();
     }
 
-    constructor(public elementRef: ElementRef, private cdRef: ChangeDetectorRef) {}
+    /** @hidden */
+    ngOnDestroy(): void {
+        this.tokenList.forEach(token => {
+            if (token.onTokenClick) {
+                token.onTokenClick.unsubscribe();
+            }
+        });
+        if (this.tokenListChangesSubscription) {
+            this.tokenListChangesSubscription.unsubscribe();
+        }
+    }
+
+    constructor(public elementRef: ElementRef, private cdRef: ChangeDetectorRef, @Optional() private _rtlService: RtlService) {}
 
     /** @hidden */
     handleTokenClickSubscriptions(): void {
@@ -169,14 +186,15 @@ export class TokenizerComponent implements AfterViewInit, AfterContentInit {
     /** @hidden */
     handleKeyDown(event: KeyboardEvent, fromIndex: number): void {
         let newIndex: number;
-        if (event.code === 'ArrowLeft') {
+        const rtl = this._rtlService && this._rtlService.rtl ? this._rtlService.rtl.getValue() : false;
+        if (event.code === 'ArrowLeft' && !rtl || (event.code === 'ArrowRight' && rtl)) {
             this._handleArrowLeft(fromIndex);
             newIndex = fromIndex - 1;
-        } else if (event.code === 'ArrowRight') {
+        } else if (event.code === 'ArrowRight' && !rtl || (event.code === 'ArrowLeft' && rtl)) {
             this._handleArrowRight(fromIndex);
             newIndex = fromIndex + 1;
         }
-        if (newIndex === this.tokenList.length && event.code === 'ArrowRight') {
+        if (newIndex === this.tokenList.length && ((event.code === 'ArrowRight' && !rtl) || (event.code === 'ArrowLeft' && rtl))) {
             this.input.elementRef().nativeElement.focus();
         } else if (newIndex > this.tokenList.length - this.moreTokensRight.length &&
             document.activeElement === this.input.elementRef().nativeElement) {