Skip to content

Commit

Permalink
Merge branch 'feat/typescript' of github.com:material-components/mate…
Browse files Browse the repository at this point in the history
…rial-components-web into feat/typescript
  • Loading branch information
acdvorak committed Feb 11, 2019
2 parents 6fce645 + b859440 commit 9526da2
Show file tree
Hide file tree
Showing 40 changed files with 226 additions and 236 deletions.
1 change: 1 addition & 0 deletions packages/mdc-base/component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ class MDCComponent<FoundationType extends MDCFoundation> {
this.initialSyncWithDOM();
}

/* istanbul ignore next: method param only exists for typing purposes; it does not need to be unit tested */
// tslint:disable-next-line:no-any a component can pass in anything it needs to initialize
initialize(..._args: any[]) {
// Subclasses can override this to do any additional setup work that would be considered part of a
Expand Down
4 changes: 2 additions & 2 deletions packages/mdc-checkbox/foundation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@ class MDCCheckboxFoundation extends MDCFoundation<MDCCheckboxAdapter> {
private animEndLatchTimer_ = 0;
private enableAnimationEndHandler_ = false;

constructor(adapter: MDCCheckboxAdapter) {
super(Object.assign(MDCCheckboxFoundation.defaultAdapter, adapter));
constructor(adapter?: Partial<MDCCheckboxAdapter>) {
super({...MDCCheckboxFoundation.defaultAdapter, ...adapter});
}

init() {
Expand Down
21 changes: 9 additions & 12 deletions packages/mdc-checkbox/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,11 @@
import {getCorrectEventName} from '@material/animation/index';
import {MDCComponent} from '@material/base/component';
import {EventType, SpecificEventListener} from '@material/base/index';
import {MDCRipple, MDCRippleFoundation, RippleCapableSurface, util} from '@material/ripple/index';
import {ponyfill} from '@material/dom/index';
import {MDCRipple, MDCRippleFoundation, RippleCapableSurface} from '@material/ripple/index';
import {MDCSelectionControl} from '@material/selection-control/index';
import {MDCCheckboxFoundation} from './foundation';

const {getMatchesProperty} = util;
const CB_PROTO_PROPS = ['checked', 'indeterminate'];

class MDCCheckbox extends MDCComponent<MDCCheckboxFoundation> implements MDCSelectionControl, RippleCapableSurface {
Expand Down Expand Up @@ -87,18 +87,15 @@ class MDCCheckbox extends MDCComponent<MDCCheckboxFoundation> implements MDCSele
}

private initRipple_(): MDCRipple {
const MATCHES = getMatchesProperty(HTMLElement.prototype);
const adapter = Object.assign(MDCRipple.createAdapter(this), {
deregisterInteractionHandler:
<K extends EventType>(type: K, handler: SpecificEventListener<K>) =>
this.nativeCb_.removeEventListener(type, handler),
isSurfaceActive: () => this.nativeCb_[MATCHES as 'matches'](':active'),
const foundation = new MDCRippleFoundation({
...MDCRipple.createAdapter(this),
deregisterInteractionHandler: <K extends EventType>(evtType: K, handler: SpecificEventListener<K>) =>
this.nativeCb_.removeEventListener(evtType, handler),
isSurfaceActive: () => ponyfill.matches(this.nativeCb_, ':active'),
isUnbounded: () => true,
registerInteractionHandler:
<K extends EventType>(type: K, handler: SpecificEventListener<K>) =>
this.nativeCb_.addEventListener(type, handler),
registerInteractionHandler: <K extends EventType>(evtType: K, handler: SpecificEventListener<K>) =>
this.nativeCb_.addEventListener(evtType, handler),
});
const foundation = new MDCRippleFoundation(adapter);
return new MDCRipple(this.root_, foundation);
}

Expand Down
1 change: 1 addition & 0 deletions packages/mdc-checkbox/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"dependencies": {
"@material/animation": "^0.41.0",
"@material/base": "^0.41.0",
"@material/dom": "^0.41.0",
"@material/feature-targeting": "^0.44.0",
"@material/ripple": "^0.44.0",
"@material/rtl": "^0.42.0",
Expand Down
4 changes: 2 additions & 2 deletions packages/mdc-chips/chip-set/foundation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@ class MDCChipSetFoundation extends MDCFoundation<MDCChipSetAdapter> {
*/
private selectedChipIds_: string[] = [];

constructor(adapter: MDCChipSetAdapter) {
super(Object.assign(MDCChipSetFoundation.defaultAdapter, adapter));
constructor(adapter?: Partial<MDCChipSetAdapter>) {
super({...MDCChipSetFoundation.defaultAdapter, ...adapter});
}

/**
Expand Down
7 changes: 3 additions & 4 deletions packages/mdc-chips/chip/foundation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,8 @@ class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {
*/
private shouldRemoveOnTrailingIconClick_ = true;

constructor(adapter: MDCChipAdapter) {
super(Object.assign(MDCChipFoundation.defaultAdapter, adapter));
constructor(adapter?: Partial<MDCChipAdapter>) {
super({...MDCChipFoundation.defaultAdapter, ...adapter});
}

isSelected() {
Expand Down Expand Up @@ -103,7 +103,7 @@ class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {
// The checkmark's width is initially set to 0, so use the checkmark's height as a proxy since the checkmark
// should always be square.
const width = rootRect.width + checkmarkRect.height;
return Object.assign({}, rootRect, {width});
return {...rootRect, width};
} else {
return rootRect;
}
Expand Down Expand Up @@ -172,7 +172,6 @@ class MDCChipFoundation extends MDCFoundation<MDCChipAdapter> {
/**
* Handles an interaction event on the trailing icon element. This is used to
* prevent the ripple from activating on interaction with the trailing icon.
* @param {!Event} evt
*/
handleTrailingIconInteraction(evt: MouseEvent | KeyboardEvent) {
const isEnter = (evt as KeyboardEvent).key === 'Enter' || (evt as KeyboardEvent).keyCode === 13;
Expand Down
6 changes: 3 additions & 3 deletions packages/mdc-chips/chip/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -95,10 +95,10 @@ class MDCChip extends MDCComponent<MDCChipFoundation> implements RippleCapableSu
this.trailingIcon_ = this.root_.querySelector(strings.TRAILING_ICON_SELECTOR);
this.checkmark_ = this.root_.querySelector(strings.CHECKMARK_SELECTOR);

const adapter = Object.assign(MDCRipple.createAdapter(this), {
this.ripple_ = rippleFactory(this.root_, new MDCRippleFoundation({
...MDCRipple.createAdapter(this),
computeBoundingRect: () => this.foundation_.getDimensions(),
});
this.ripple_ = rippleFactory(this.root_, new MDCRippleFoundation(adapter));
}));
}

initialSyncWithDOM() {
Expand Down
2 changes: 1 addition & 1 deletion packages/mdc-dialog/adapter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ interface MDCDialogAdapter {

isContentScrollable(): boolean;
areButtonsStacked(): boolean;
getActionFromEvent(event: Event): string | null;
getActionFromEvent(evt: Event): string | null;

trapFocus(): void;
releaseFocus(): void;
Expand Down
4 changes: 2 additions & 2 deletions packages/mdc-dialog/foundation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,8 @@ class MDCDialogFoundation extends MDCFoundation<MDCDialogAdapter> {
private autoStackButtons_ = true;
private areButtonsStacked_ = false;

constructor(adapter: MDCDialogAdapter) {
super(Object.assign(MDCDialogFoundation.defaultAdapter, adapter));
constructor(adapter?: Partial<MDCDialogAdapter>) {
super({...MDCDialogFoundation.defaultAdapter, ...adapter});
}

init() {
Expand Down
10 changes: 5 additions & 5 deletions packages/mdc-dialog/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -110,11 +110,11 @@ class MDCDialog extends MDCComponent<MDCDialogFoundation> {

const LAYOUT_EVENTS = ['resize', 'orientationchange'];
this.handleOpening_ = () => {
LAYOUT_EVENTS.forEach((type) => window.addEventListener(type, this.handleLayout_));
LAYOUT_EVENTS.forEach((evtType) => window.addEventListener(evtType, this.handleLayout_));
document.addEventListener('keydown', this.handleDocumentKeydown_);
};
this.handleClosing_ = () => {
LAYOUT_EVENTS.forEach((type) => window.removeEventListener(type, this.handleLayout_));
LAYOUT_EVENTS.forEach((evtType) => window.removeEventListener(evtType, this.handleLayout_));
document.removeEventListener('keydown', this.handleDocumentKeydown_);
};

Expand Down Expand Up @@ -154,11 +154,11 @@ class MDCDialog extends MDCComponent<MDCDialogFoundation> {
areButtonsStacked: () => util.areTopsMisaligned(this.buttons_),
clickDefaultButton: () => this.defaultButton_ && this.defaultButton_.click(),
eventTargetMatches: (target, selector) => target ? matches(target as Element, selector) : false,
getActionFromEvent: (event: Event) => {
if (!event.target) {
getActionFromEvent: (evt: Event) => {
if (!evt.target) {
return '';
}
const element = closest(event.target as Element, `[${strings.ACTION_ATTRIBUTE}]`);
const element = closest(evt.target as Element, `[${strings.ACTION_ATTRIBUTE}]`);
return element && element.getAttribute(strings.ACTION_ATTRIBUTE);
},
hasClass: (className) => this.root_.classList.contains(className),
Expand Down
6 changes: 3 additions & 3 deletions packages/mdc-floating-label/adapter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
* THE SOFTWARE.
*/

import {EventType, SpecificEventListener} from '@material/base';
import {EventType, SpecificEventListener} from '@material/base/index';

/**
* Defines the shape of the adapter expected by the foundation.
Expand Down Expand Up @@ -49,12 +49,12 @@ interface MDCFloatingLabelAdapter {
/**
* Registers an event listener on the root element for a given event.
*/
registerInteractionHandler<E extends EventType>(evtType: E, handler: SpecificEventListener<E>): void;
registerInteractionHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;

/**
* Deregisters an event listener on the root element for a given event.
*/
deregisterInteractionHandler<E extends EventType>(evtType: E, handler: SpecificEventListener<E>): void;
deregisterInteractionHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
}

export {MDCFloatingLabelAdapter as default, MDCFloatingLabelAdapter};
4 changes: 2 additions & 2 deletions packages/mdc-floating-label/foundation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
* THE SOFTWARE.
*/

import {SpecificEventListener} from '@material/base';
import {MDCFoundation} from '@material/base/foundation';
import {SpecificEventListener} from '@material/base/index';
import {MDCFloatingLabelAdapter} from './adapter';
import {cssClasses} from './constants';

Expand All @@ -48,7 +48,7 @@ class MDCFloatingLabelFoundation extends MDCFoundation<MDCFloatingLabelAdapter>

private readonly shakeAnimationEndHandler_: SpecificEventListener<'animationend'>;

constructor(adapter: Partial<MDCFloatingLabelAdapter> = {}) {
constructor(adapter?: Partial<MDCFloatingLabelAdapter>) {
super({...MDCFloatingLabelFoundation.defaultAdapter, ...adapter});

this.shakeAnimationEndHandler_ = () => this.handleShakeAnimationEnd_();
Expand Down
15 changes: 5 additions & 10 deletions packages/mdc-form-field/adapter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,10 @@
* THE SOFTWARE.
*/

import {EventType, SpecificEventListener} from '@material/base/index';

/**
* Adapter for MDC Form Field. Provides an interface for managing
* - event handlers
* - ripple activation
*
* Defines the shape of the adapter expected by the foundation.
* Implement this adapter for your framework of choice to delegate updates to
* the component in your framework of choice. See architecture documentation
* for more details.
Expand All @@ -34,12 +33,8 @@
interface MDCFormFieldAdapter {
activateInputRipple(): void;
deactivateInputRipple(): void;
deregisterInteractionHandler<K extends keyof GlobalEventHandlersEventMap>(
type: K, handler: (evt: GlobalEventHandlersEventMap[K],
) => void): void;
registerInteractionHandler<K extends keyof GlobalEventHandlersEventMap>(
type: K, handler: (evt: GlobalEventHandlersEventMap[K],
) => void): void;
deregisterInteractionHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
registerInteractionHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
}

export {MDCFormFieldAdapter as default, MDCFormFieldAdapter};
7 changes: 3 additions & 4 deletions packages/mdc-form-field/foundation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,12 +43,11 @@ class MDCFormFieldFoundation extends MDCFoundation<MDCFormFieldAdapter> {
};
}

private clickHandler_: () => void;
private readonly clickHandler_: () => void;

constructor(adapter: MDCFormFieldAdapter) {
super(Object.assign(MDCFormFieldFoundation.defaultAdapter, adapter));
constructor(adapter?: Partial<MDCFormFieldAdapter>) {
super({...MDCFormFieldFoundation.defaultAdapter, ...adapter});

/** @private {!EventListener} */
this.clickHandler_ = () => this.handleClick_();
}

Expand Down
12 changes: 10 additions & 2 deletions packages/mdc-form-field/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -57,8 +57,16 @@ class MDCFormField extends MDCComponent<MDCFormFieldFoundation> {
this.input_.ripple.deactivate();
}
},
deregisterInteractionHandler: (type, handler) => this.label_ && this.label_.removeEventListener(type, handler),
registerInteractionHandler: (type, handler) => this.label_ && this.label_.addEventListener(type, handler),
deregisterInteractionHandler: (evtType, handler) => {
if (this.label_) {
this.label_.removeEventListener(evtType, handler);
}
},
registerInteractionHandler: (evtType, handler) => {
if (this.label_) {
this.label_.addEventListener(evtType, handler);
}
},
});
}
}
Expand Down
6 changes: 4 additions & 2 deletions packages/mdc-grid-list/foundation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,10 @@ class MDCGridListFoundation extends MDCFoundation<MDCGridListAdapter> {
private readonly resizeHandler_: EventListener;
private resizeFrame_ = 0;

constructor(adapter: MDCGridListAdapter) {
super(Object.assign(MDCGridListFoundation.defaultAdapter, adapter));
/* istanbul ignore next: optional argument is not a branch statement */
constructor(adapter?: Partial<MDCGridListAdapter>) {
super({...MDCGridListFoundation.defaultAdapter, ...adapter});

this.resizeHandler_ = this.alignCenter.bind(this);
}

Expand Down
4 changes: 2 additions & 2 deletions packages/mdc-icon-button/foundation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -44,8 +44,8 @@ class MDCIconButtonToggleFoundation extends MDCFoundation<MDCIconButtonToggleAda
};
}

constructor(adapter: MDCIconButtonToggleAdapter) {
super(Object.assign(MDCIconButtonToggleFoundation.defaultAdapter, adapter));
constructor(adapter?: Partial<MDCIconButtonToggleAdapter>) {
super({...MDCIconButtonToggleFoundation.defaultAdapter, ...adapter});
}

init() {
Expand Down
4 changes: 2 additions & 2 deletions packages/mdc-line-ripple/adapter.ts
Original file line number Diff line number Diff line change
Expand Up @@ -51,12 +51,12 @@ interface MDCLineRippleAdapter {
/**
* Registers an event listener on the line ripple element for a given event.
*/
registerEventHandler<E extends EventType>(evtType: E, handler: SpecificEventListener<E>): void;
registerEventHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;

/**
* Deregisters an event listener on the line ripple element for a given event.
*/
deregisterEventHandler<E extends EventType>(evtType: E, handler: SpecificEventListener<E>): void;
deregisterEventHandler<K extends EventType>(evtType: K, handler: SpecificEventListener<K>): void;
}

export {MDCLineRippleAdapter as default, MDCLineRippleAdapter};
4 changes: 2 additions & 2 deletions packages/mdc-line-ripple/foundation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
* THE SOFTWARE.
*/

import {SpecificEventListener} from '@material/base';
import {MDCFoundation} from '@material/base/foundation';
import {SpecificEventListener} from '@material/base/index';
import {MDCLineRippleAdapter} from './adapter';
import {cssClasses} from './constants';

Expand All @@ -49,7 +49,7 @@ class MDCLineRippleFoundation extends MDCFoundation<MDCLineRippleAdapter> {

private readonly transitionEndHandler_: SpecificEventListener<'transitionend'>;

constructor(adapter: Partial<MDCLineRippleAdapter> = {}) {
constructor(adapter?: Partial<MDCLineRippleAdapter>) {
super({...MDCLineRippleFoundation.defaultAdapter, ...adapter});

this.transitionEndHandler_ = (evt) => this.handleTransitionEnd(evt);
Expand Down
4 changes: 2 additions & 2 deletions packages/mdc-list/foundation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -69,8 +69,8 @@ class MDCListFoundation extends MDCFoundation<MDCListAdapter> {
private isCheckboxList_ = false;
private isRadioList_ = false;

constructor(adapter: MDCListAdapter) {
super(Object.assign(MDCListFoundation.defaultAdapter, adapter));
constructor(adapter?: Partial<MDCListAdapter>) {
super({...MDCListFoundation.defaultAdapter, ...adapter});
}

layout() {
Expand Down
2 changes: 1 addition & 1 deletion packages/mdc-list/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@

import {MDCComponent} from '@material/base/component';
import {SpecificEventListener} from '@material/base/index';
import * as ponyfill from '@material/dom/ponyfill';
import {ponyfill} from '@material/dom/index';
import {cssClasses, strings} from './constants';
import {MDCListFoundation} from './foundation';
import {ListActionEventDetail, ListIndex} from './types';
Expand Down
4 changes: 2 additions & 2 deletions packages/mdc-menu-surface/foundation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -105,8 +105,8 @@ class MDCMenuSurfaceFoundation extends MDCFoundation<MDCMenuSurfaceAdapter> {
private dimensions_!: MenuDimensions; // assigned in open()
private measurements_!: AutoLayoutMeasurements; // assigned in open()

constructor(adapter: MDCMenuSurfaceAdapter) {
super(Object.assign(MDCMenuSurfaceFoundation.defaultAdapter, adapter));
constructor(adapter?: Partial<MDCMenuSurfaceAdapter>) {
super({...MDCMenuSurfaceFoundation.defaultAdapter, ...adapter});
}

init() {
Expand Down
4 changes: 3 additions & 1 deletion packages/mdc-menu-surface/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -132,7 +132,9 @@ class MDCMenuSurface extends MDCComponent<MDCMenuSurfaceFoundation> {
this.setIsHoisted(true);
}

/** @param corner Default anchor corner alignment of top-left surface corner. */
/**
* @param corner Default anchor corner alignment of top-left surface corner.
*/
setAnchorCorner(corner: Corner) {
this.foundation_.setAnchorCorner(corner);
}
Expand Down
4 changes: 2 additions & 2 deletions packages/mdc-menu/foundation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -58,8 +58,8 @@ class MDCMenuFoundation extends MDCFoundation<MDCMenuAdapter> {
// tslint:enable:object-literal-sort-keys
}

constructor(adapter: MDCMenuAdapter) {
super(Object.assign(MDCMenuFoundation.defaultAdapter, adapter));
constructor(adapter?: Partial<MDCMenuAdapter>) {
super({...MDCMenuFoundation.defaultAdapter, ...adapter});
}

destroy() {
Expand Down
2 changes: 1 addition & 1 deletion packages/mdc-notched-outline/foundation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ class MDCNotchedOutlineFoundation extends MDCFoundation<MDCNotchedOutlineAdapter
// tslint:enable:object-literal-sort-keys
}

constructor(adapter: Partial<MDCNotchedOutlineAdapter> = {}) {
constructor(adapter?: Partial<MDCNotchedOutlineAdapter>) {
super({...MDCNotchedOutlineFoundation.defaultAdapter, ...adapter});
}

Expand Down
Loading

0 comments on commit 9526da2

Please sign in to comment.