Skip to content

Commit

Permalink
refactor(material/tabs): remove mixin function
Browse files Browse the repository at this point in the history 
Replaces a usage of a mixin function in the tabs with a base class.
  • Loading branch information
@crisbeto
crisbeto committed Feb 16, 2024
1 parent facd027 commit 7d90312
Show file tree
Hide file tree
Showing 4 changed files with 109 additions and 128 deletions.
206 changes: 101 additions & 105 deletions src/material/tabs/ink-bar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,17 @@
* found in the LICENSE file at https://angular.io/license
*/

import {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';
import {ElementRef, InjectionToken, OnDestroy, OnInit, QueryList} from '@angular/core';
import {
Directive,
ElementRef,
InjectionToken,
Input,
OnDestroy,
OnInit,
QueryList,
inject,
numberAttribute,
} from '@angular/core';

/**
* Item inside a tab header relative to which the ink bar can be aligned.
Expand Down Expand Up @@ -62,126 +71,113 @@ export class MatInkBar {
}
}

/**
* Mixin that can be used to apply the `MatInkBarItem` behavior to a class.
* Base on MDC's `MDCSlidingTabIndicatorFoundation`:
* https://github.com/material-components/material-components-web/blob/c0a11ef0d000a098fd0c372be8f12d6a99302855/packages/mdc-tab-indicator/sliding-foundation.ts
* @docs-private
*/
export function mixinInkBarItem<
T extends new (...args: any[]) => {elementRef: ElementRef<HTMLElement>},
>(base: T): T & (new (...args: any[]) => MatInkBarItem) {
return class extends base {
constructor(...args: any[]) {
super(...args);
}

private _inkBarElement: HTMLElement | null;
private _inkBarContentElement: HTMLElement | null;
private _fitToContent = false;

/** Whether the ink bar should fit to the entire tab or just its content. */
get fitInkBarToContent(): boolean {
return this._fitToContent;
}
set fitInkBarToContent(v: BooleanInput) {
const newValue = coerceBooleanProperty(v);

if (this._fitToContent !== newValue) {
this._fitToContent = newValue;
@Directive()
export abstract class InkBarItem implements OnInit, OnDestroy {
private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);
private _inkBarElement: HTMLElement | null;
private _inkBarContentElement: HTMLElement | null;
private _fitToContent = false;

/** Whether the ink bar should fit to the entire tab or just its content. */
@Input({transform: numberAttribute})
get fitInkBarToContent(): boolean {
return this._fitToContent;
}
set fitInkBarToContent(newValue: boolean) {
if (this._fitToContent !== newValue) {
this._fitToContent = newValue;

if (this._inkBarElement) {
this._appendInkBarElement();
}
if (this._inkBarElement) {
this._appendInkBarElement();
}
}
}

/** Aligns the ink bar to the current item. */
activateInkBar(previousIndicatorClientRect?: DOMRect) {
const element = this.elementRef.nativeElement;

// Early exit if no indicator is present to handle cases where an indicator
// may be activated without a prior indicator state
if (
!previousIndicatorClientRect ||
!element.getBoundingClientRect ||
!this._inkBarContentElement
) {
element.classList.add(ACTIVE_CLASS);
return;
}

// This animation uses the FLIP approach. You can read more about it at the link below:
// https://aerotwist.com/blog/flip-your-animations/

// Calculate the dimensions based on the dimensions of the previous indicator
const currentClientRect = element.getBoundingClientRect();
const widthDelta = previousIndicatorClientRect.width / currentClientRect.width;
const xPosition = previousIndicatorClientRect.left - currentClientRect.left;
element.classList.add(NO_TRANSITION_CLASS);
this._inkBarContentElement.style.setProperty(
'transform',
`translateX(${xPosition}px) scaleX(${widthDelta})`,
);

// Force repaint before updating classes and transform to ensure the transform properly takes effect
element.getBoundingClientRect();

element.classList.remove(NO_TRANSITION_CLASS);
/** Aligns the ink bar to the current item. */
activateInkBar(previousIndicatorClientRect?: DOMRect) {
const element = this._elementRef.nativeElement;

// Early exit if no indicator is present to handle cases where an indicator
// may be activated without a prior indicator state
if (
!previousIndicatorClientRect ||
!element.getBoundingClientRect ||
!this._inkBarContentElement
) {
element.classList.add(ACTIVE_CLASS);
this._inkBarContentElement.style.setProperty('transform', '');
return;
}

/** Removes the ink bar from the current item. */
deactivateInkBar() {
this.elementRef.nativeElement.classList.remove(ACTIVE_CLASS);
}
// This animation uses the FLIP approach. You can read more about it at the link below:
// https://aerotwist.com/blog/flip-your-animations/

// Calculate the dimensions based on the dimensions of the previous indicator
const currentClientRect = element.getBoundingClientRect();
const widthDelta = previousIndicatorClientRect.width / currentClientRect.width;
const xPosition = previousIndicatorClientRect.left - currentClientRect.left;
element.classList.add(NO_TRANSITION_CLASS);
this._inkBarContentElement.style.setProperty(
'transform',
`translateX(${xPosition}px) scaleX(${widthDelta})`,
);

// Force repaint before updating classes and transform to ensure the transform properly takes effect
element.getBoundingClientRect();

element.classList.remove(NO_TRANSITION_CLASS);
element.classList.add(ACTIVE_CLASS);
this._inkBarContentElement.style.setProperty('transform', '');
}

/** Initializes the foundation. */
ngOnInit() {
this._createInkBarElement();
}
/** Removes the ink bar from the current item. */
deactivateInkBar() {
this._elementRef.nativeElement.classList.remove(ACTIVE_CLASS);
}

/** Destroys the foundation. */
ngOnDestroy() {
this._inkBarElement?.remove();
this._inkBarElement = this._inkBarContentElement = null!;
}
/** Initializes the foundation. */
ngOnInit() {
this._createInkBarElement();
}

/** Creates and appends the ink bar element. */
private _createInkBarElement() {
const documentNode = this.elementRef.nativeElement.ownerDocument || document;
this._inkBarElement = documentNode.createElement('span');
this._inkBarContentElement = documentNode.createElement('span');
/** Destroys the foundation. */
ngOnDestroy() {
this._inkBarElement?.remove();
this._inkBarElement = this._inkBarContentElement = null!;
}

this._inkBarElement.className = 'mdc-tab-indicator';
this._inkBarContentElement.className =
'mdc-tab-indicator__content mdc-tab-indicator__content--underline';
/** Creates and appends the ink bar element. */
private _createInkBarElement() {
const documentNode = this._elementRef.nativeElement.ownerDocument || document;
const inkBarElement = (this._inkBarElement = documentNode.createElement('span'));
const inkBarContentElement = (this._inkBarContentElement = documentNode.createElement('span'));

this._inkBarElement.appendChild(this._inkBarContentElement);
this._appendInkBarElement();
}
inkBarElement.className = 'mdc-tab-indicator';
inkBarContentElement.className =
'mdc-tab-indicator__content mdc-tab-indicator__content--underline';

/**
* Appends the ink bar to the tab host element or content, depending on whether
* the ink bar should fit to content.
*/
private _appendInkBarElement() {
if (!this._inkBarElement && (typeof ngDevMode === 'undefined' || ngDevMode)) {
throw Error('Ink bar element has not been created and cannot be appended');
}
inkBarElement.appendChild(this._inkBarContentElement);
this._appendInkBarElement();
}

const parentElement = this._fitToContent
? this.elementRef.nativeElement.querySelector('.mdc-tab__content')
: this.elementRef.nativeElement;
/**
* Appends the ink bar to the tab host element or content, depending on whether
* the ink bar should fit to content.
*/
private _appendInkBarElement() {
if (!this._inkBarElement && (typeof ngDevMode === 'undefined' || ngDevMode)) {
throw Error('Ink bar element has not been created and cannot be appended');
}

if (!parentElement && (typeof ngDevMode === 'undefined' || ngDevMode)) {
throw Error('Missing element to host the ink bar');
}
const parentElement = this._fitToContent
? this._elementRef.nativeElement.querySelector('.mdc-tab__content')
: this._elementRef.nativeElement;

parentElement!.appendChild(this._inkBarElement!);
if (!parentElement && (typeof ngDevMode === 'undefined' || ngDevMode)) {
throw Error('Missing element to host the ink bar');
}
};

parentElement!.appendChild(this._inkBarElement!);
}
}

/**
Expand Down
14 changes: 3 additions & 11 deletions src/material/tabs/tab-label-wrapper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,7 @@
*/

import {Directive, ElementRef, Input, booleanAttribute} from '@angular/core';
import {mixinInkBarItem} from './ink-bar';

// Boilerplate for applying mixins to MatTabLabelWrapper.
/** @docs-private */
const _MatTabLabelWrapperMixinBase = mixinInkBarItem(
class {
elementRef: ElementRef;
},
);
import {InkBarItem} from './ink-bar';

/**
* Used in the `mat-tab-group` view to display tab labels.
Expand All @@ -30,12 +22,12 @@ const _MatTabLabelWrapperMixinBase = mixinInkBarItem(
},
standalone: true,
})
export class MatTabLabelWrapper extends _MatTabLabelWrapperMixinBase {
export class MatTabLabelWrapper extends InkBarItem {
/** Whether the tab is disabled. */
@Input({transform: booleanAttribute})
disabled: boolean = false;

constructor(override elementRef: ElementRef) {
constructor(public elementRef: ElementRef) {
super();
}

Expand Down
13 changes: 3 additions & 10 deletions src/material/tabs/tab-nav-bar/tab-nav-bar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ import {FocusableOption, FocusMonitor} from '@angular/cdk/a11y';
import {Directionality} from '@angular/cdk/bidi';
import {ViewportRuler} from '@angular/cdk/scrolling';
import {Platform} from '@angular/cdk/platform';
import {MatInkBar, mixinInkBarItem} from '../ink-bar';
import {MatInkBar, InkBarItem} from '../ink-bar';
import {BehaviorSubject, Subject} from 'rxjs';
import {startWith, takeUntil} from 'rxjs/operators';
import {ENTER, SPACE} from '@angular/cdk/keycodes';
Expand Down Expand Up @@ -228,13 +228,6 @@ export class MatTabNav
}
}

// Boilerplate for applying mixins to MatTabLink.
const _MatTabLinkMixinBase = mixinInkBarItem(
class {
elementRef: ElementRef;
},
);

/**
* Link inside a `mat-tab-nav-bar`.
*/
Expand Down Expand Up @@ -263,7 +256,7 @@ const _MatTabLinkMixinBase = mixinInkBarItem(
imports: [MatRipple],
})
export class MatTabLink
extends _MatTabLinkMixinBase
extends InkBarItem
implements AfterViewInit, OnDestroy, RippleTarget, FocusableOption
{
private readonly _destroyed = new Subject<void>();
Expand Down Expand Up @@ -323,7 +316,7 @@ export class MatTabLink

constructor(
private _tabNavBar: MatTabNav,
/** @docs-private */ override elementRef: ElementRef,
/** @docs-private */ public elementRef: ElementRef,
@Optional() @Inject(MAT_RIPPLE_GLOBAL_OPTIONS) globalRippleOptions: RippleGlobalOptions | null,
@Attribute('tabindex') tabIndex: string,
private _focusMonitor: FocusMonitor,
Expand Down
4 changes: 2 additions & 2 deletions tools/public_api_guard/material/tabs.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -380,7 +380,7 @@ export class MatTabLabel extends CdkPortal {
}

// @public
export class MatTabLabelWrapper extends _MatTabLabelWrapperMixinBase {
export class MatTabLabelWrapper extends InkBarItem {
constructor(elementRef: ElementRef);
disabled: boolean;
// (undocumented)
Expand All @@ -399,7 +399,7 @@ export class MatTabLabelWrapper extends _MatTabLabelWrapperMixinBase {
}

// @public
export class MatTabLink extends _MatTabLinkMixinBase implements AfterViewInit, OnDestroy, RippleTarget, FocusableOption {
export class MatTabLink extends InkBarItem implements AfterViewInit, OnDestroy, RippleTarget, FocusableOption {
constructor(_tabNavBar: MatTabNav,
elementRef: ElementRef, globalRippleOptions: RippleGlobalOptions | null, tabIndex: string, _focusMonitor: FocusMonitor, animationMode?: string);
get active(): boolean;
Expand Down

0 comments on commit 7d90312

Please sign in to comment.