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

Commit 186f93e

Browse files
committed
refactor(animation): Replace enums with string literal type aliases
Refs #4225 IMO this makes the code a little easier to read/write. https://www.typescriptlang.org/docs/handbook/advanced-types.html#string-literal-types
1 parent 8addf4d commit 186f93e

File tree

10 files changed

+79
-170
lines changed

10 files changed

+79
-170
lines changed

packages/mdc-animation/README.md

Lines changed: 4 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -95,54 +95,12 @@ Function | Description
9595
These functions handle prefixing across various browsers
9696

9797
```js
98-
import {getCorrectEventName, StandardJsEventType} from '@material/animation';
98+
import {getCorrectEventName} from '@material/animation';
9999

100-
const eventToListenFor = getCorrectEventName(window, StandardJsEventType.ANIMATION_START);
100+
const eventToListenFor = getCorrectEventName(window, 'animationstart');
101101
```
102102

103103
Method Signature | Description
104104
--- | ---
105-
`getCorrectEventName(windowObj: Window, eventType: StandardJsEventType) => StandardJsEventType \| PrefixedJsEventType` | Returns a JavaScript event name, prefixed if necessary
106-
`getCorrectPropertyName(windowObj: Window, cssProperty: StandardCssPropertyName) => StandardCssPropertyName \| PrefixedCssPropertyName` | Returns a CSS property name, prefixed if necessary
107-
108-
#### `StandardCssPropertyName`
109-
110-
Enum passed to and returned by `getCorrectPropertyName()`.
111-
112-
Key | Value
113-
--- | ---
114-
`ANIMATION` | `animation`
115-
`TRANSFORM` | `transform`
116-
`TRANSITION` | `transition`
117-
118-
#### `PrefixedCssPropertyName`
119-
120-
Enum returned by `getCorrectPropertyName()`.
121-
122-
Key | Value
123-
--- | ---
124-
`WEBKIT_ANIMATION` | `-webkit-animation`
125-
`WEBKIT_TRANSFORM` | `-webkit-transform`
126-
`WEBKIT_TRANSITION` | `-webkit-transition`
127-
128-
#### `StandardJsEventType`
129-
130-
Enum passed to and returned by `getCorrectEventName()`.
131-
132-
Key | Value
133-
--- | ---
134-
`ANIMATION_END` | `animationend`
135-
`ANIMATION_ITERATION` | `animationiteration`
136-
`ANIMATION_START` | `animationstart`
137-
`TRANSITION_END` | `transitionend`
138-
139-
#### `PrefixedJsEventType`
140-
141-
Enum returned by `getCorrectEventName()`.
142-
143-
Key | Value
144-
--- | ---
145-
`WEBKIT_ANIMATION_END` | `webkitAnimationEnd`
146-
`WEBKIT_ANIMATION_ITERATION` | `webkitAnimationIteration`
147-
`WEBKIT_ANIMATION_START` | `webkitAnimationStart`
148-
`WEBKIT_TRANSITION_END` | `webkitTransitionEnd`
105+
`getCorrectEventName(windowObj: Window, eventType: StandardJsEventType) => StandardJsEventType \| PrefixedJsEventType` | Returns a JavaScript event name, prefixed if necessary. See [index.ts](index.ts) for supported values.
106+
`getCorrectPropertyName(windowObj: Window, cssProperty: StandardCssPropertyName) => StandardCssPropertyName \| PrefixedCssPropertyName` | Returns a CSS property name, prefixed if necessary. See [index.ts](index.ts) for supported values.

packages/mdc-animation/index.ts

Lines changed: 37 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -21,31 +21,18 @@
2121
* THE SOFTWARE.
2222
*/
2323

24-
enum StandardCssPropertyName {
25-
ANIMATION = 'animation',
26-
TRANSFORM = 'transform',
27-
TRANSITION = 'transition',
28-
}
29-
30-
enum PrefixedCssPropertyName {
31-
WEBKIT_ANIMATION = '-webkit-animation',
32-
WEBKIT_TRANSFORM = '-webkit-transform',
33-
WEBKIT_TRANSITION = '-webkit-transition',
34-
}
35-
36-
enum StandardJsEventType {
37-
ANIMATION_END = 'animationend',
38-
ANIMATION_ITERATION = 'animationiteration',
39-
ANIMATION_START = 'animationstart',
40-
TRANSITION_END = 'transitionend',
41-
}
42-
43-
enum PrefixedJsEventType {
44-
WEBKIT_ANIMATION_END = 'webkitAnimationEnd',
45-
WEBKIT_ANIMATION_ITERATION = 'webkitAnimationIteration',
46-
WEBKIT_ANIMATION_START = 'webkitAnimationStart',
47-
WEBKIT_TRANSITION_END = 'webkitTransitionEnd',
48-
}
24+
type StandardCssPropertyName = (
25+
'animation' | 'transform' | 'transition'
26+
);
27+
type PrefixedCssPropertyName = (
28+
'-webkit-animation' | '-webkit-transform' | '-webkit-transition'
29+
);
30+
type StandardJsEventType = (
31+
'animationend' | 'animationiteration' | 'animationstart' | 'transitionend'
32+
);
33+
type PrefixedJsEventType = (
34+
'webkitAnimationEnd' | 'webkitAnimationIteration' | 'webkitAnimationStart' | 'webkitTransitionEnd'
35+
);
4936

5037
interface CssVendorPropertyMap {
5138
[key: string]: CssVendorProperty;
@@ -68,52 +55,41 @@ interface JsVendorProperty {
6855

6956
const transformStyleProperties = ['transform', 'WebkitTransform', 'MozTransform', 'OTransform', 'MSTransform'];
7057

71-
// Destructure enum members to make their usages more readable.
72-
const {WEBKIT_ANIMATION, WEBKIT_TRANSFORM, WEBKIT_TRANSITION} = PrefixedCssPropertyName;
73-
const {ANIMATION, TRANSFORM, TRANSITION} = StandardCssPropertyName;
74-
const {
75-
WEBKIT_ANIMATION_END,
76-
WEBKIT_ANIMATION_ITERATION,
77-
WEBKIT_ANIMATION_START,
78-
WEBKIT_TRANSITION_END,
79-
} = PrefixedJsEventType;
80-
const {ANIMATION_END, ANIMATION_ITERATION, ANIMATION_START, TRANSITION_END} = StandardJsEventType;
81-
8258
const cssPropertyNameMap: CssVendorPropertyMap = {
83-
[ANIMATION]: {
84-
prefixed: WEBKIT_ANIMATION,
85-
standard: ANIMATION,
59+
animation: {
60+
prefixed: '-webkit-animation',
61+
standard: 'animation',
8662
},
87-
[TRANSFORM]: {
88-
prefixed: WEBKIT_TRANSFORM,
89-
standard: TRANSFORM,
63+
transform: {
64+
prefixed: '-webkit-transform',
65+
standard: 'transform',
9066
},
91-
[TRANSITION]: {
92-
prefixed: WEBKIT_TRANSITION,
93-
standard: TRANSITION,
67+
transition: {
68+
prefixed: '-webkit-transition',
69+
standard: 'transition',
9470
},
9571
};
9672

9773
const jsEventTypeMap: JsVendorPropertyMap = {
98-
[ANIMATION_END]: {
99-
cssProperty: ANIMATION,
100-
prefixed: WEBKIT_ANIMATION_END,
101-
standard: ANIMATION_END,
74+
animationend: {
75+
cssProperty: 'animation',
76+
prefixed: 'webkitAnimationEnd',
77+
standard: 'animationend',
10278
},
103-
[ANIMATION_ITERATION]: {
104-
cssProperty: ANIMATION,
105-
prefixed: WEBKIT_ANIMATION_ITERATION,
106-
standard: ANIMATION_ITERATION,
79+
animationiteration: {
80+
cssProperty: 'animation',
81+
prefixed: 'webkitAnimationIteration',
82+
standard: 'animationiteration',
10783
},
108-
[ANIMATION_START]: {
109-
cssProperty: ANIMATION,
110-
prefixed: WEBKIT_ANIMATION_START,
111-
standard: ANIMATION_START,
84+
animationstart: {
85+
cssProperty: 'animation',
86+
prefixed: 'webkitAnimationStart',
87+
standard: 'animationstart',
11288
},
113-
[TRANSITION_END]: {
114-
cssProperty: TRANSITION,
115-
prefixed: WEBKIT_TRANSITION_END,
116-
standard: TRANSITION_END,
89+
transitionend: {
90+
cssProperty: 'transition',
91+
prefixed: 'webkitTransitionEnd',
92+
standard: 'transitionend',
11793
},
11894
};
11995

packages/mdc-checkbox/index.js

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
* THE SOFTWARE.
2222
*/
2323

24-
import {StandardJsEventType, getCorrectEventName} from '@material/animation/index.ts';
24+
import {getCorrectEventName} from '@material/animation/index.ts';
2525
import MDCComponent from '@material/base/component';
2626
/* eslint-disable no-unused-vars */
2727
import {MDCSelectionControlState, MDCSelectionControl} from '@material/selection-control/index';
@@ -33,8 +33,6 @@ import {getMatchesProperty} from '@material/ripple/util';
3333
/** @const {!Array<string>} */
3434
const CB_PROTO_PROPS = ['checked', 'indeterminate'];
3535

36-
const {ANIMATION_END} = StandardJsEventType;
37-
3836
/**
3937
* @extends MDCComponent<!MDCCheckboxFoundation>
4038
* @implements {MDCSelectionControl}
@@ -71,7 +69,7 @@ class MDCCheckbox extends MDCComponent {
7169
this.handleChange_ = () => this.foundation_.handleChange();
7270
this.handleAnimationEnd_= () => this.foundation_.handleAnimationEnd();
7371
this.nativeCb_.addEventListener('change', this.handleChange_);
74-
this.listen(getCorrectEventName(window, ANIMATION_END), this.handleAnimationEnd_);
72+
this.listen(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd_);
7573
this.installPropertyChangeHooks_();
7674
}
7775

@@ -193,7 +191,7 @@ class MDCCheckbox extends MDCComponent {
193191
destroy() {
194192
this.ripple_.destroy();
195193
this.nativeCb_.removeEventListener('change', this.handleChange_);
196-
this.unlisten(getCorrectEventName(window, ANIMATION_END), this.handleAnimationEnd_);
194+
this.unlisten(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd_);
197195
this.uninstallPropertyChangeHooks_();
198196
super.destroy();
199197
}

packages/mdc-slider/foundation.js

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,8 @@ import {cssClasses, strings, numbers} from './constants';
2525
import MDCSliderAdapter from './adapter';
2626

2727
import {getCorrectEventName, getCorrectPropertyName} from '@material/animation/index.ts';
28-
import {StandardCssPropertyName, StandardJsEventType} from '@material/animation/index.ts';
2928
import MDCFoundation from '@material/base/foundation';
3029

31-
const {TRANSFORM} = StandardCssPropertyName;
32-
const {TRANSITION_END} = StandardJsEventType;
33-
3430
/** @enum {string} */
3531
const KEY_IDS = {
3632
ARROW_LEFT: 'ArrowLeft',
@@ -151,7 +147,7 @@ class MDCSliderFoundation extends MDCFoundation {
151147
this.adapter_.registerResizeHandler(this.resizeHandler_);
152148
this.layout();
153149
// At last step, provide a reasonable default value to discrete slider
154-
if (this.isDiscrete_ && this.getStep() == 0) {
150+
if (this.isDiscrete_ && this.getStep() === 0) {
155151
this.step_ = 1;
156152
}
157153
}
@@ -524,8 +520,8 @@ class MDCSliderFoundation extends MDCFoundation {
524520
translatePx = this.rect_.width - translatePx;
525521
}
526522

527-
const transformProp = getCorrectPropertyName(window, TRANSFORM);
528-
const transitionendEvtName = getCorrectEventName(window, TRANSITION_END);
523+
const transformProp = getCorrectPropertyName(window, 'transform');
524+
const transitionendEvtName = getCorrectEventName(window, 'transitionend');
529525

530526
if (this.inTransit_) {
531527
const onTransitionEnd = () => {

packages/mdc-tabs/tab-bar-scroller/index.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,16 +21,14 @@
2121
* THE SOFTWARE.
2222
*/
2323

24-
import {StandardCssPropertyName, getCorrectPropertyName} from '@material/animation/index.ts';
24+
import {getCorrectPropertyName} from '@material/animation/index.ts';
2525
import MDCComponent from '@material/base/component';
2626

2727
import {MDCTabBar} from '../tab-bar/index';
2828
import MDCTabBarScrollerFoundation from './foundation';
2929

3030
export {MDCTabBarScrollerFoundation};
3131

32-
const {TRANSFORM} = StandardCssPropertyName;
33-
3432
export class MDCTabBarScroller extends MDCComponent {
3533
static attachTo(root) {
3634
return new MDCTabBarScroller(root);
@@ -83,7 +81,7 @@ export class MDCTabBarScroller extends MDCComponent {
8381
setScrollLeftForScrollFrame: (scrollLeftAmount) => this.scrollFrame_.scrollLeft = scrollLeftAmount,
8482
getOffsetWidthForTabBar: () => this.tabBarEl_.offsetWidth,
8583
setTransformStyleForTabBar: (value) => {
86-
this.tabBarEl_.style.setProperty(getCorrectPropertyName(window, TRANSFORM), value);
84+
this.tabBarEl_.style.setProperty(getCorrectPropertyName(window, 'transform'), value);
8785
},
8886
getOffsetLeftForEventTarget: (target) => target.offsetLeft,
8987
getOffsetWidthForEventTarget: (target) => target.offsetWidth,

packages/mdc-tabs/tab-bar/foundation.js

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,12 +22,10 @@
2222
*/
2323

2424
import MDCFoundation from '@material/base/foundation';
25-
import {StandardCssPropertyName, getCorrectPropertyName} from '@material/animation/index.ts';
25+
import {getCorrectPropertyName} from '@material/animation/index.ts';
2626

2727
import {cssClasses, strings} from './constants';
2828

29-
const {TRANSFORM} = StandardCssPropertyName;
30-
3129
export default class MDCTabBarFoundation extends MDCFoundation {
3230
static get cssClasses() {
3331
return cssClasses;
@@ -107,7 +105,7 @@ export default class MDCTabBarFoundation extends MDCFoundation {
107105
this.adapter_.getComputedWidthForTabAtIndex(this.activeTabIndex_) / this.adapter_.getOffsetWidth();
108106

109107
const transformValue = `translateX(${translateAmtForActiveTabLeft}px) scale(${scaleAmtForActiveTabWidth}, 1)`;
110-
this.adapter_.setStyleForIndicator(getCorrectPropertyName(window, TRANSFORM), transformValue);
108+
this.adapter_.setStyleForIndicator(getCorrectPropertyName(window, 'transform'), transformValue);
111109

112110
if (isIndicatorFirstRender) {
113111
// Force layout so that transform styles to take effect.

0 commit comments

Comments
 (0)