refactor(column-resize): simplify RTL handling (#18835)

crisbeto · web-flow · commit f9fffab5acc8 · 2020-03-16T15:42:43.000-07:00
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.
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
@@ -7,20 +7,18 @@
  */
 
 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.
  * Individual columns must be annotated specifically.
  */
 @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
@@ -7,20 +7,18 @@
  */
 
 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.
  * Individual columns must be annotated specifically.
  */
 @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
@@ -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
@@ -7,20 +7,18 @@
  */
 
 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.
  * Individual columns will be resizable unless opted out.
  */
 @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
@@ -7,20 +7,18 @@
  */
 
 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.
  * Individual columns will be resizable unless opted out.
  */
 @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
@@ -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<HTMLElement>;
   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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,

Original file line number	Diff line number	Diff line change
`@@ -51,8 +51,8 @@`
`51`	`51`	`right: 0;`
`52`	`52`	`}`
`53`	`53`
`54`		`- .mat-column-resize-rtl .mat-header-cell:not(.mat-resizable)::after,`
`55`		`- .mat-column-resize-rtl .mat-resizable-handle {`
	`54`	`+ [dir='rtl'] .mat-header-cell:not(.mat-resizable)::after,`
	`55`	`+ [dir='rtl'] .mat-resizable-handle {`
`56`	`56`	`left: 0;`
`57`	`57`	`right: auto;`
`58`	`58`	`}`