Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 16, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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},
Expand All @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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},
Expand All @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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"',
};
Original file line number Diff line number Diff line change
Expand Up @@ -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},
Expand All @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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},
Expand All @@ -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,
Expand Down
2 changes: 0 additions & 2 deletions src/cdk-experimental/column-resize/column-resize.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions src/material-experimental/column-resize/_column-resize.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
*/

import {Directive, ElementRef, NgZone} from '@angular/core';
import {Directionality} from '@angular/cdk/bidi';
import {
ColumnResize,
ColumnResizeNotifier,
Expand All @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
*/

import {Directive, ElementRef, NgZone} from '@angular/core';
import {Directionality} from '@angular/cdk/bidi';
import {
ColumnResize,
ColumnResizeNotifier,
Expand All @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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',
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
*/

import {Directive, ElementRef, NgZone} from '@angular/core';
import {Directionality} from '@angular/cdk/bidi';
import {
ColumnResize,
ColumnResizeNotifier,
Expand All @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
*/

import {Directive, ElementRef, NgZone} from '@angular/core';
import {Directionality} from '@angular/cdk/bidi';
import {
ColumnResize,
ColumnResizeNotifier,
Expand All @@ -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,
Expand Down