Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit ed7f8d7

Browse files
Matt Gooacdvorak
Matt Goo
authored andcommitted
feat(grid-list): ts conversion (#4337)
related #4225
1 parent 1c7335b commit ed7f8d7

File tree

6 files changed

+76
-27
lines changed

6 files changed

+76
-27
lines changed

packages/mdc-grid-list/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -275,5 +275,5 @@ functions, with correct signatures:
275275
| `getNumberOfTiles() => number` | Get the number of mdc-grid-tile elements contained within the grid list. |
276276
| `getOffsetWidthForTileAtIndex(index: number) => number` | Get offsetWidth of `mdc-grid-tile` at specified index. |
277277
| `setStyleForTilesElement(property: string, value: number) => void` | Set `mdc-grid-list__tiles` style property to provided value. |
278-
| `registerResizeHandler(handler: Function) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event. |
279-
| `deregisterResizeHandler(handler: Function) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event. |
278+
| `registerResizeHandler(handler: EventListener) => void` | Registers a handler to be called when the surface (or its viewport) resizes. Our default implementation adds the handler as a listener to the window's `resize()` event. |
279+
| `deregisterResizeHandler(handler: EventListener) => void` | Unregisters a handler to be called when the surface (or its viewport) resizes. Our default implementation removes the handler as a listener to the window's `resize()` event. |

packages/mdc-grid-list/adapter.ts

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
/**
2+
* @license
3+
* Copyright 2019 Google Inc.
4+
*
5+
* Permission is hereby granted, free of charge, to any person obtaining a copy
6+
* of this software and associated documentation files (the "Software"), to deal
7+
* in the Software without restriction, including without limitation the rights
8+
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
* copies of the Software, and to permit persons to whom the Software is
10+
* furnished to do so, subject to the following conditions:
11+
*
12+
* The above copyright notice and this permission notice shall be included in
13+
* all copies or substantial portions of the Software.
14+
*
15+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21+
* THE SOFTWARE.
22+
*/
23+
24+
interface MDCGridListAdapter {
25+
deregisterResizeHandler(handler: EventListener): void;
26+
getNumberOfTiles(): number;
27+
getOffsetWidth(): number;
28+
getOffsetWidthForTileAtIndex(index: number): number;
29+
registerResizeHandler(handler: EventListener): void;
30+
setStyleForTilesElement(
31+
property: Exclude<keyof CSSStyleDeclaration, ('length' | 'parentRule')>, value: string | null,
32+
): void;
33+
}
34+
35+
export {MDCGridListAdapter as default, MDCGridListAdapter};

packages/mdc-grid-list/constants.js renamed to packages/mdc-grid-list/constants.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
2121
* THE SOFTWARE.
2222
*/
23+
2324
export const strings = {
2425
TILES_SELECTOR: '.mdc-grid-list__tiles',
2526
TILE_SELECTOR: '.mdc-grid-tile',

packages/mdc-grid-list/foundation.js renamed to packages/mdc-grid-list/foundation.ts

Lines changed: 23 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -22,35 +22,42 @@
2222
*/
2323

2424
import {MDCFoundation} from '@material/base/foundation';
25+
import {MDCGridListAdapter} from './adapter';
2526
import {strings} from './constants';
2627

27-
export default class MDCGridListFoundation extends MDCFoundation {
28+
class MDCGridListFoundation extends MDCFoundation<MDCGridListAdapter> {
2829
static get strings() {
2930
return strings;
3031
}
3132

32-
static get defaultAdapter() {
33+
static get defaultAdapter(): MDCGridListAdapter {
3334
return {
34-
getOffsetWidth: () => /* number */ 0,
35-
getNumberOfTiles: () => /* number */ 0,
36-
getOffsetWidthForTileAtIndex: (/* index: number */) => /* number */ 0,
37-
setStyleForTilesElement: (/* property: string, value: string */) => {},
38-
registerResizeHandler: (/* handler: EventListener */) => {},
39-
deregisterResizeHandler: (/* handler: EventListener */) => {},
35+
deregisterResizeHandler: () => undefined,
36+
getNumberOfTiles: () => 0,
37+
getOffsetWidth: () => 0,
38+
getOffsetWidthForTileAtIndex: () => 0,
39+
registerResizeHandler: () => undefined,
40+
setStyleForTilesElement: () => undefined,
4041
};
4142
}
42-
constructor(adapter) {
43+
44+
private readonly resizeHandler_: EventListener;
45+
private resizeFrame_ = 0;
46+
47+
constructor(adapter: MDCGridListAdapter) {
4348
super(Object.assign(MDCGridListFoundation.defaultAdapter, adapter));
44-
this.resizeHandler_ = () => this.alignCenter();
45-
this.resizeFrame_ = 0;
49+
this.resizeHandler_ = this.alignCenter.bind(this);
4650
}
51+
4752
init() {
4853
this.alignCenter();
4954
this.adapter_.registerResizeHandler(this.resizeHandler_);
5055
}
56+
5157
destroy() {
5258
this.adapter_.deregisterResizeHandler(this.resizeHandler_);
5359
}
60+
5461
alignCenter() {
5562
if (this.resizeFrame_ !== 0) {
5663
cancelAnimationFrame(this.resizeFrame_);
@@ -60,8 +67,9 @@ export default class MDCGridListFoundation extends MDCFoundation {
6067
this.resizeFrame_ = 0;
6168
});
6269
}
63-
alignCenter_() {
64-
if (this.adapter_.getNumberOfTiles() == 0) {
70+
71+
private alignCenter_() {
72+
if (this.adapter_.getNumberOfTiles() === 0) {
6573
return;
6674
}
6775
const gridWidth = this.adapter_.getOffsetWidth();
@@ -70,3 +78,5 @@ export default class MDCGridListFoundation extends MDCFoundation {
7078
this.adapter_.setStyleForTilesElement('width', `${tilesWidth}px`);
7179
}
7280
}
81+
82+
export {MDCGridListFoundation as default, MDCGridListFoundation};

packages/mdc-grid-list/index.js renamed to packages/mdc-grid-list/index.ts

Lines changed: 14 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -22,30 +22,33 @@
2222
*/
2323

2424
import {MDCComponent} from '@material/base/component';
25+
import {MDCGridListFoundation} from './foundation';
2526

26-
import MDCGridListFoundation from './foundation';
27-
28-
export {MDCGridListFoundation};
29-
30-
export class MDCGridList extends MDCComponent {
31-
static attachTo(root) {
27+
class MDCGridList extends MDCComponent<MDCGridListFoundation> {
28+
static attachTo(root: Element) {
3229
return new MDCGridList(root);
3330
}
3431

3532
getDefaultFoundation() {
3633
return new MDCGridListFoundation({
37-
getOffsetWidth: () => this.root_.offsetWidth,
34+
deregisterResizeHandler: (handler) => window.removeEventListener('resize', handler),
3835
getNumberOfTiles: () => {
3936
return this.root_.querySelectorAll(MDCGridListFoundation.strings.TILE_SELECTOR).length;
4037
},
38+
getOffsetWidth: () => (this.root_ as HTMLElement).offsetWidth,
4139
getOffsetWidthForTileAtIndex: (index) => {
42-
return this.root_.querySelectorAll(MDCGridListFoundation.strings.TILE_SELECTOR)[index].offsetWidth;
40+
const tileEl = this.root_.querySelectorAll<HTMLElement>(MDCGridListFoundation.strings.TILE_SELECTOR)[index];
41+
return tileEl.offsetWidth;
4342
},
43+
registerResizeHandler: (handler) => window.addEventListener('resize', handler),
4444
setStyleForTilesElement: (property, value) => {
45-
this.root_.querySelector(MDCGridListFoundation.strings.TILES_SELECTOR).style[property] = value;
45+
const tilesEl = this.root_.querySelector<HTMLElement>(MDCGridListFoundation.strings.TILES_SELECTOR);
46+
tilesEl!.style[property] = value;
4647
},
47-
registerResizeHandler: (handler) => window.addEventListener('resize', handler),
48-
deregisterResizeHandler: (handler) => window.removeEventListener('resize', handler),
4948
});
5049
}
5150
}
51+
52+
export {MDCGridList as default, MDCGridList};
53+
export * from './adapter';
54+
export * from './foundation';

scripts/webpack/js-bundle-factory.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ class JsBundleFactory {
162162
drawer: getAbsolutePath('/packages/mdc-drawer/index.js'),
163163
floatingLabel: getAbsolutePath('/packages/mdc-floating-label/index.js'),
164164
formField: getAbsolutePath('/packages/mdc-form-field/index.ts'),
165-
gridList: getAbsolutePath('/packages/mdc-grid-list/index.js'),
165+
gridList: getAbsolutePath('/packages/mdc-grid-list/index.ts'),
166166
iconButton: getAbsolutePath('/packages/mdc-icon-button/index.ts'),
167167
iconToggle: getAbsolutePath('/packages/mdc-icon-toggle/index.js'),
168168
list: getAbsolutePath('/packages/mdc-list/index.ts'),

0 commit comments

Comments
 (0)