From b1d1eae7322ff439a61ba4728d2ad47e647752c7 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Sun, 15 Mar 2020 17:00:48 +0100 Subject: [PATCH] refactor(column-resize): simplify RTL handling The various column resize components had a ton of boilerplate just to apply an ltr/rtl class. We can avoid it altogether by using `[dir='rtl']` like we do in all of the other components. --- .../column-resize-directives/column-resize-flex.ts | 5 +---- .../column-resize/column-resize-directives/column-resize.ts | 5 +---- .../column-resize/column-resize-directives/constants.ts | 3 --- .../default-enabled-column-resize-flex.ts | 5 +---- .../default-enabled-column-resize.ts | 5 +---- src/cdk-experimental/column-resize/column-resize.ts | 2 -- src/material-experimental/column-resize/_column-resize.scss | 4 ++-- .../column-resize-directives/column-resize-flex.ts | 2 -- .../column-resize/column-resize-directives/column-resize.ts | 2 -- .../column-resize/column-resize-directives/common.ts | 5 ----- .../default-enabled-column-resize-flex.ts | 2 -- .../default-enabled-column-resize.ts | 2 -- 12 files changed, 6 insertions(+), 36 deletions(-) diff --git a/src/cdk-experimental/column-resize/column-resize-directives/column-resize-flex.ts b/src/cdk-experimental/column-resize/column-resize-directives/column-resize-flex.ts index 0bcd573541e4..85b16e16e3bc 100644 --- a/src/cdk-experimental/column-resize/column-resize-directives/column-resize-flex.ts +++ b/src/cdk-experimental/column-resize/column-resize-directives/column-resize-flex.ts @@ -7,12 +7,11 @@ */ import {Directive, ElementRef, NgZone} from '@angular/core'; -import {Directionality} from '@angular/cdk/bidi'; import {ColumnResize} from '../column-resize'; import {ColumnResizeNotifier, ColumnResizeNotifierSource} from '../column-resize-notifier'; import {HeaderRowEventDispatcher} from '../event-dispatcher'; -import {HOST_BINDINGS, FLEX_PROVIDERS} from './constants'; +import {FLEX_PROVIDERS} from './constants'; /** * Explicitly enables column resizing for a flexbox-based cdk-table. @@ -20,7 +19,6 @@ import {HOST_BINDINGS, FLEX_PROVIDERS} from './constants'; */ @Directive({ selector: 'cdk-table[columnResize]', - host: HOST_BINDINGS, providers: [ ...FLEX_PROVIDERS, {provide: ColumnResize, useExisting: CdkColumnResizeFlex}, @@ -29,7 +27,6 @@ import {HOST_BINDINGS, FLEX_PROVIDERS} from './constants'; export class CdkColumnResizeFlex extends ColumnResize { constructor( readonly columnResizeNotifier: ColumnResizeNotifier, - readonly directionality: Directionality, protected readonly elementRef: ElementRef, protected readonly eventDispatcher: HeaderRowEventDispatcher, protected readonly ngZone: NgZone, diff --git a/src/cdk-experimental/column-resize/column-resize-directives/column-resize.ts b/src/cdk-experimental/column-resize/column-resize-directives/column-resize.ts index f9097c2549d0..e30a49f9d473 100644 --- a/src/cdk-experimental/column-resize/column-resize-directives/column-resize.ts +++ b/src/cdk-experimental/column-resize/column-resize-directives/column-resize.ts @@ -7,12 +7,11 @@ */ import {Directive, ElementRef, NgZone} from '@angular/core'; -import {Directionality} from '@angular/cdk/bidi'; import {ColumnResize} from '../column-resize'; import {ColumnResizeNotifier, ColumnResizeNotifierSource} from '../column-resize-notifier'; import {HeaderRowEventDispatcher} from '../event-dispatcher'; -import {HOST_BINDINGS, TABLE_PROVIDERS} from './constants'; +import {TABLE_PROVIDERS} from './constants'; /** * Explicitly enables column resizing for a table-based cdk-table. @@ -20,7 +19,6 @@ import {HOST_BINDINGS, TABLE_PROVIDERS} from './constants'; */ @Directive({ selector: 'table[cdk-table][columnResize]', - host: HOST_BINDINGS, providers: [ ...TABLE_PROVIDERS, {provide: ColumnResize, useExisting: CdkColumnResize}, @@ -29,7 +27,6 @@ import {HOST_BINDINGS, TABLE_PROVIDERS} from './constants'; export class CdkColumnResize extends ColumnResize { constructor( readonly columnResizeNotifier: ColumnResizeNotifier, - readonly directionality: Directionality, protected readonly elementRef: ElementRef, protected readonly eventDispatcher: HeaderRowEventDispatcher, protected readonly ngZone: NgZone, diff --git a/src/cdk-experimental/column-resize/column-resize-directives/constants.ts b/src/cdk-experimental/column-resize/column-resize-directives/constants.ts index ef884b567456..46e35155e37a 100644 --- a/src/cdk-experimental/column-resize/column-resize-directives/constants.ts +++ b/src/cdk-experimental/column-resize/column-resize-directives/constants.ts @@ -25,6 +25,3 @@ export const TABLE_PROVIDERS: Provider[] = [ TABLE_LAYOUT_FIXED_RESIZE_STRATEGY_PROVIDER, ]; export const FLEX_PROVIDERS: Provider[] = [...PROVIDERS, FLEX_RESIZE_STRATEGY_PROVIDER]; -export const HOST_BINDINGS = { - '[class.cdk-column-resize-rtl]': 'directionality.value === "rtl"', -}; diff --git a/src/cdk-experimental/column-resize/column-resize-directives/default-enabled-column-resize-flex.ts b/src/cdk-experimental/column-resize/column-resize-directives/default-enabled-column-resize-flex.ts index b4d24f29cd71..1c6d1a891c0f 100644 --- a/src/cdk-experimental/column-resize/column-resize-directives/default-enabled-column-resize-flex.ts +++ b/src/cdk-experimental/column-resize/column-resize-directives/default-enabled-column-resize-flex.ts @@ -7,12 +7,11 @@ */ import {Directive, ElementRef, NgZone} from '@angular/core'; -import {Directionality} from '@angular/cdk/bidi'; import {ColumnResize} from '../column-resize'; import {ColumnResizeNotifier, ColumnResizeNotifierSource} from '../column-resize-notifier'; import {HeaderRowEventDispatcher} from '../event-dispatcher'; -import {HOST_BINDINGS, FLEX_PROVIDERS} from './constants'; +import {FLEX_PROVIDERS} from './constants'; /** * Implicitly enables column resizing for a flex cdk-table. @@ -20,7 +19,6 @@ import {HOST_BINDINGS, FLEX_PROVIDERS} from './constants'; */ @Directive({ selector: 'cdk-table', - host: HOST_BINDINGS, providers: [ ...FLEX_PROVIDERS, {provide: ColumnResize, useExisting: CdkDefaultEnabledColumnResizeFlex}, @@ -29,7 +27,6 @@ import {HOST_BINDINGS, FLEX_PROVIDERS} from './constants'; export class CdkDefaultEnabledColumnResizeFlex extends ColumnResize { constructor( readonly columnResizeNotifier: ColumnResizeNotifier, - readonly directionality: Directionality, protected readonly elementRef: ElementRef, protected readonly eventDispatcher: HeaderRowEventDispatcher, protected readonly ngZone: NgZone, diff --git a/src/cdk-experimental/column-resize/column-resize-directives/default-enabled-column-resize.ts b/src/cdk-experimental/column-resize/column-resize-directives/default-enabled-column-resize.ts index e0c71d89a520..c42be3d80b59 100644 --- a/src/cdk-experimental/column-resize/column-resize-directives/default-enabled-column-resize.ts +++ b/src/cdk-experimental/column-resize/column-resize-directives/default-enabled-column-resize.ts @@ -7,12 +7,11 @@ */ import {Directive, ElementRef, NgZone} from '@angular/core'; -import {Directionality} from '@angular/cdk/bidi'; import {ColumnResize} from '../column-resize'; import {ColumnResizeNotifier, ColumnResizeNotifierSource} from '../column-resize-notifier'; import {HeaderRowEventDispatcher} from '../event-dispatcher'; -import {HOST_BINDINGS, TABLE_PROVIDERS} from './constants'; +import {TABLE_PROVIDERS} from './constants'; /** * Implicitly enables column resizing for a table-based cdk-table. @@ -20,7 +19,6 @@ import {HOST_BINDINGS, TABLE_PROVIDERS} from './constants'; */ @Directive({ selector: 'table[cdk-table]', - host: HOST_BINDINGS, providers: [ ...TABLE_PROVIDERS, {provide: ColumnResize, useExisting: CdkDefaultEnabledColumnResize}, @@ -29,7 +27,6 @@ import {HOST_BINDINGS, TABLE_PROVIDERS} from './constants'; export class CdkDefaultEnabledColumnResize extends ColumnResize { constructor( readonly columnResizeNotifier: ColumnResizeNotifier, - readonly directionality: Directionality, protected readonly elementRef: ElementRef, protected readonly eventDispatcher: HeaderRowEventDispatcher, protected readonly ngZone: NgZone, diff --git a/src/cdk-experimental/column-resize/column-resize.ts b/src/cdk-experimental/column-resize/column-resize.ts index af9d5a405a6a..6a8f4321d55a 100644 --- a/src/cdk-experimental/column-resize/column-resize.ts +++ b/src/cdk-experimental/column-resize/column-resize.ts @@ -7,7 +7,6 @@ */ import {AfterViewInit, Directive, ElementRef, NgZone, OnDestroy} from '@angular/core'; -import {Directionality} from '@angular/cdk/bidi'; import {fromEvent, merge, ReplaySubject} from 'rxjs'; import {filter, map, mapTo, pairwise, startWith, take, takeUntil} from 'rxjs/operators'; @@ -33,7 +32,6 @@ export abstract class ColumnResize implements AfterViewInit, OnDestroy { /* Publicly accessible interface for triggering and being notified of resizes. */ abstract readonly columnResizeNotifier: ColumnResizeNotifier; - abstract readonly directionality: Directionality; protected abstract readonly elementRef: ElementRef; protected abstract readonly eventDispatcher: HeaderRowEventDispatcher; protected abstract readonly ngZone: NgZone; diff --git a/src/material-experimental/column-resize/_column-resize.scss b/src/material-experimental/column-resize/_column-resize.scss index 932a736ac27f..692882d5c42f 100644 --- a/src/material-experimental/column-resize/_column-resize.scss +++ b/src/material-experimental/column-resize/_column-resize.scss @@ -51,8 +51,8 @@ right: 0; } - .mat-column-resize-rtl .mat-header-cell:not(.mat-resizable)::after, - .mat-column-resize-rtl .mat-resizable-handle { + [dir='rtl'] .mat-header-cell:not(.mat-resizable)::after, + [dir='rtl'] .mat-resizable-handle { left: 0; right: auto; } diff --git a/src/material-experimental/column-resize/column-resize-directives/column-resize-flex.ts b/src/material-experimental/column-resize/column-resize-directives/column-resize-flex.ts index f2dfa93b6fb8..1e8c5292781a 100644 --- a/src/material-experimental/column-resize/column-resize-directives/column-resize-flex.ts +++ b/src/material-experimental/column-resize/column-resize-directives/column-resize-flex.ts @@ -7,7 +7,6 @@ */ import {Directive, ElementRef, NgZone} from '@angular/core'; -import {Directionality} from '@angular/cdk/bidi'; import { ColumnResize, ColumnResizeNotifier, @@ -32,7 +31,6 @@ import {AbstractMatColumnResize, FLEX_HOST_BINDINGS, FLEX_PROVIDERS} from './com export class MatColumnResizeFlex extends AbstractMatColumnResize { constructor( readonly columnResizeNotifier: ColumnResizeNotifier, - readonly directionality: Directionality, protected readonly elementRef: ElementRef, protected readonly eventDispatcher: HeaderRowEventDispatcher, protected readonly ngZone: NgZone, diff --git a/src/material-experimental/column-resize/column-resize-directives/column-resize.ts b/src/material-experimental/column-resize/column-resize-directives/column-resize.ts index a36c14d396cf..f7402d72139d 100644 --- a/src/material-experimental/column-resize/column-resize-directives/column-resize.ts +++ b/src/material-experimental/column-resize/column-resize-directives/column-resize.ts @@ -7,7 +7,6 @@ */ import {Directive, ElementRef, NgZone} from '@angular/core'; -import {Directionality} from '@angular/cdk/bidi'; import { ColumnResize, ColumnResizeNotifier, @@ -32,7 +31,6 @@ import {AbstractMatColumnResize, TABLE_HOST_BINDINGS, TABLE_PROVIDERS} from './c export class MatColumnResize extends AbstractMatColumnResize { constructor( readonly columnResizeNotifier: ColumnResizeNotifier, - readonly directionality: Directionality, protected readonly elementRef: ElementRef, protected readonly eventDispatcher: HeaderRowEventDispatcher, protected readonly ngZone: NgZone, diff --git a/src/material-experimental/column-resize/column-resize-directives/common.ts b/src/material-experimental/column-resize/column-resize-directives/common.ts index 961f63f8f2dc..046b7eb5e610 100644 --- a/src/material-experimental/column-resize/column-resize-directives/common.ts +++ b/src/material-experimental/column-resize/column-resize-directives/common.ts @@ -31,15 +31,10 @@ export const TABLE_PROVIDERS: Provider[] = [ ]; export const FLEX_PROVIDERS: Provider[] = [...PROVIDERS, FLEX_RESIZE_STRATEGY_PROVIDER]; -const HOST_BINDINGS = { - '[class.mat-column-resize-rtl]': 'directionality.value === "rtl"', -}; export const TABLE_HOST_BINDINGS = { - ...HOST_BINDINGS, 'class': 'mat-column-resize-table', }; export const FLEX_HOST_BINDINGS = { - ...HOST_BINDINGS, 'class': 'mat-column-resize-flex', }; diff --git a/src/material-experimental/column-resize/column-resize-directives/default-enabled-column-resize-flex.ts b/src/material-experimental/column-resize/column-resize-directives/default-enabled-column-resize-flex.ts index fb42cec509fa..08bf3375b655 100644 --- a/src/material-experimental/column-resize/column-resize-directives/default-enabled-column-resize-flex.ts +++ b/src/material-experimental/column-resize/column-resize-directives/default-enabled-column-resize-flex.ts @@ -7,7 +7,6 @@ */ import {Directive, ElementRef, NgZone} from '@angular/core'; -import {Directionality} from '@angular/cdk/bidi'; import { ColumnResize, ColumnResizeNotifier, @@ -32,7 +31,6 @@ import {AbstractMatColumnResize, FLEX_HOST_BINDINGS, FLEX_PROVIDERS} from './com export class MatDefaultEnabledColumnResizeFlex extends AbstractMatColumnResize { constructor( readonly columnResizeNotifier: ColumnResizeNotifier, - readonly directionality: Directionality, protected readonly elementRef: ElementRef, protected readonly eventDispatcher: HeaderRowEventDispatcher, protected readonly ngZone: NgZone, diff --git a/src/material-experimental/column-resize/column-resize-directives/default-enabled-column-resize.ts b/src/material-experimental/column-resize/column-resize-directives/default-enabled-column-resize.ts index 750423ceca1d..a9804c5d40ef 100644 --- a/src/material-experimental/column-resize/column-resize-directives/default-enabled-column-resize.ts +++ b/src/material-experimental/column-resize/column-resize-directives/default-enabled-column-resize.ts @@ -7,7 +7,6 @@ */ import {Directive, ElementRef, NgZone} from '@angular/core'; -import {Directionality} from '@angular/cdk/bidi'; import { ColumnResize, ColumnResizeNotifier, @@ -32,7 +31,6 @@ import {AbstractMatColumnResize, TABLE_HOST_BINDINGS, TABLE_PROVIDERS} from './c export class MatDefaultEnabledColumnResize extends AbstractMatColumnResize { constructor( readonly columnResizeNotifier: ColumnResizeNotifier, - readonly directionality: Directionality, protected readonly elementRef: ElementRef, protected readonly eventDispatcher: HeaderRowEventDispatcher, protected readonly ngZone: NgZone,