refactor(animation): Replace enums with string literal type aliases (#4287)

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

Author: acdvorak

packages/mdc-animation/README.md

@@ -95,54 +95,12 @@ Function | Description
 These functions handle prefixing across various browsers
 
 ```js
-import {getCorrectEventName, StandardJsEventType} from '@material/animation';
+import {getCorrectEventName} from '@material/animation';
 
-const eventToListenFor = getCorrectEventName(window, StandardJsEventType.ANIMATION_START);
+const eventToListenFor = getCorrectEventName(window, 'animationstart');
 ```
 
 Method Signature | Description
 --- | ---
-`getCorrectEventName(windowObj: Window, eventType: StandardJsEventType) => StandardJsEventType \| PrefixedJsEventType` | Returns a JavaScript event name, prefixed if necessary
-`getCorrectPropertyName(windowObj: Window, cssProperty: StandardCssPropertyName) => StandardCssPropertyName \| PrefixedCssPropertyName` | Returns a CSS property name, prefixed if necessary
-
-#### `StandardCssPropertyName`
-
-Enum passed to and returned by `getCorrectPropertyName()`.
-
-Key | Value
---- | ---
-`ANIMATION` | `animation`
-`TRANSFORM` | `transform`
-`TRANSITION` | `transition`
-
-#### `PrefixedCssPropertyName`
-
-Enum returned by `getCorrectPropertyName()`.
-
-Key | Value
---- | ---
-`WEBKIT_ANIMATION` | `-webkit-animation`
-`WEBKIT_TRANSFORM` | `-webkit-transform`
-`WEBKIT_TRANSITION` | `-webkit-transition`
-
-#### `StandardJsEventType`
-
-Enum passed to and returned by `getCorrectEventName()`.
-
-Key | Value
---- | ---
-`ANIMATION_END` | `animationend`
-`ANIMATION_ITERATION` | `animationiteration`
-`ANIMATION_START` | `animationstart`
-`TRANSITION_END` | `transitionend`
-
-#### `PrefixedJsEventType`
-
-Enum returned by `getCorrectEventName()`.
-
-Key | Value
---- | ---
-`WEBKIT_ANIMATION_END` | `webkitAnimationEnd`
-`WEBKIT_ANIMATION_ITERATION` | `webkitAnimationIteration`
-`WEBKIT_ANIMATION_START` | `webkitAnimationStart`
-`WEBKIT_TRANSITION_END` | `webkitTransitionEnd`
+`getCorrectEventName(windowObj: Window, eventType: StandardJsEventType) => StandardJsEventType \| PrefixedJsEventType` | Returns a JavaScript event name, prefixed if necessary. See [index.ts](index.ts) for supported values.
+`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

@@ -21,39 +21,21 @@
  * THE SOFTWARE.
  */
 
-enum StandardCssPropertyName {
-  ANIMATION = 'animation',
-  TRANSFORM = 'transform',
-  TRANSITION = 'transition',
-}
-
-enum PrefixedCssPropertyName {
-  WEBKIT_ANIMATION = '-webkit-animation',
-  WEBKIT_TRANSFORM = '-webkit-transform',
-  WEBKIT_TRANSITION = '-webkit-transition',
-}
+type StandardCssPropertyName = (
+    'animation' | 'transform' | 'transition'
+);
+type PrefixedCssPropertyName = (
+    '-webkit-animation' | '-webkit-transform' | '-webkit-transition'
+);
+type StandardJsEventType = (
+    'animationend' | 'animationiteration' | 'animationstart' | 'transitionend'
+);
+type PrefixedJsEventType = (
+    'webkitAnimationEnd' | 'webkitAnimationIteration' | 'webkitAnimationStart' | 'webkitTransitionEnd'
+);
 
-enum StandardJsEventType {
-  ANIMATION_END = 'animationend',
-  ANIMATION_ITERATION = 'animationiteration',
-  ANIMATION_START = 'animationstart',
-  TRANSITION_END = 'transitionend',
-}
-
-enum PrefixedJsEventType {
-  WEBKIT_ANIMATION_END = 'webkitAnimationEnd',
-  WEBKIT_ANIMATION_ITERATION = 'webkitAnimationIteration',
-  WEBKIT_ANIMATION_START = 'webkitAnimationStart',
-  WEBKIT_TRANSITION_END = 'webkitTransitionEnd',
-}
-
-interface CssVendorPropertyMap {
-  [key: string]: CssVendorProperty;
-}
-
-interface JsVendorPropertyMap {
-  [key: string]: JsVendorProperty;
-}
+type CssVendorPropertyMap = { [K in StandardCssPropertyName]: CssVendorProperty };
+type JsVendorPropertyMap = { [K in StandardJsEventType]: JsVendorProperty };
 
 interface CssVendorProperty {
   prefixed: PrefixedCssPropertyName;
@@ -66,52 +48,41 @@ interface JsVendorProperty {
   standard: StandardJsEventType;
 }
 
-// Destructure enum members to make their usages more readable.
-const {WEBKIT_ANIMATION, WEBKIT_TRANSFORM, WEBKIT_TRANSITION} = PrefixedCssPropertyName;
-const {ANIMATION, TRANSFORM, TRANSITION} = StandardCssPropertyName;
-const {
-  WEBKIT_ANIMATION_END,
-  WEBKIT_ANIMATION_ITERATION,
-  WEBKIT_ANIMATION_START,
-  WEBKIT_TRANSITION_END,
-} = PrefixedJsEventType;
-const {ANIMATION_END, ANIMATION_ITERATION, ANIMATION_START, TRANSITION_END} = StandardJsEventType;
-
 const cssPropertyNameMap: CssVendorPropertyMap = {
-  [ANIMATION]: {
-    prefixed: WEBKIT_ANIMATION,
-    standard: ANIMATION,
+  animation: {
+    prefixed: '-webkit-animation',
+    standard: 'animation',
   },
-  [TRANSFORM]: {
-    prefixed: WEBKIT_TRANSFORM,
-    standard: TRANSFORM,
+  transform: {
+    prefixed: '-webkit-transform',
+    standard: 'transform',
   },
-  [TRANSITION]: {
-    prefixed: WEBKIT_TRANSITION,
-    standard: TRANSITION,
+  transition: {
+    prefixed: '-webkit-transition',
+    standard: 'transition',
   },
 };
 
 const jsEventTypeMap: JsVendorPropertyMap = {
-  [ANIMATION_END]: {
-    cssProperty: ANIMATION,
-    prefixed: WEBKIT_ANIMATION_END,
-    standard: ANIMATION_END,
+  animationend: {
+    cssProperty: 'animation',
+    prefixed: 'webkitAnimationEnd',
+    standard: 'animationend',
   },
-  [ANIMATION_ITERATION]: {
-    cssProperty: ANIMATION,
-    prefixed: WEBKIT_ANIMATION_ITERATION,
-    standard: ANIMATION_ITERATION,
+  animationiteration: {
+    cssProperty: 'animation',
+    prefixed: 'webkitAnimationIteration',
+    standard: 'animationiteration',
   },
-  [ANIMATION_START]: {
-    cssProperty: ANIMATION,
-    prefixed: WEBKIT_ANIMATION_START,
-    standard: ANIMATION_START,
+  animationstart: {
+    cssProperty: 'animation',
+    prefixed: 'webkitAnimationStart',
+    standard: 'animationstart',
   },
-  [TRANSITION_END]: {
-    cssProperty: TRANSITION,
-    prefixed: WEBKIT_TRANSITION_END,
-    standard: TRANSITION_END,
+  transitionend: {
+    cssProperty: 'transition',
+    prefixed: 'webkitTransitionEnd',
+    standard: 'transitionend',
   },
 };
 

packages/mdc-checkbox/index.js

@@ -21,7 +21,7 @@
  * THE SOFTWARE.
  */
 
-import {StandardJsEventType, getCorrectEventName} from '@material/animation/index.ts';
+import {getCorrectEventName} from '@material/animation/index.ts';
 import MDCComponent from '@material/base/component';
 /* eslint-disable no-unused-vars */
 import {MDCSelectionControlState, MDCSelectionControl} from '@material/selection-control/index';
@@ -33,8 +33,6 @@ import {getMatchesProperty} from '@material/ripple/util';
 /** @const {!Array<string>} */
 const CB_PROTO_PROPS = ['checked', 'indeterminate'];
 
-const {ANIMATION_END} = StandardJsEventType;
-
 /**
  * @extends MDCComponent<!MDCCheckboxFoundation>
  * @implements {MDCSelectionControl}
@@ -71,7 +69,7 @@ class MDCCheckbox extends MDCComponent {
     this.handleChange_ = () => this.foundation_.handleChange();
     this.handleAnimationEnd_= () => this.foundation_.handleAnimationEnd();
     this.nativeCb_.addEventListener('change', this.handleChange_);
-    this.listen(getCorrectEventName(window, ANIMATION_END), this.handleAnimationEnd_);
+    this.listen(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd_);
     this.installPropertyChangeHooks_();
   }
 
@@ -193,7 +191,7 @@ class MDCCheckbox extends MDCComponent {
   destroy() {
     this.ripple_.destroy();
     this.nativeCb_.removeEventListener('change', this.handleChange_);
-    this.unlisten(getCorrectEventName(window, ANIMATION_END), this.handleAnimationEnd_);
+    this.unlisten(getCorrectEventName(window, 'animationend'), this.handleAnimationEnd_);
     this.uninstallPropertyChangeHooks_();
     super.destroy();
   }

packages/mdc-linear-progress/foundation.ts

@@ -21,13 +21,11 @@
  * THE SOFTWARE.
  */
 
-import {getCorrectPropertyName, StandardCssPropertyName} from '@material/animation/index';
+import {getCorrectPropertyName} from '@material/animation/index';
 import MDCFoundation from '@material/base/foundation';
 import {MDCLinearProgressAdapter} from './adapter';
 import {cssClasses, strings} from './constants';
 
-const {TRANSFORM} = StandardCssPropertyName;
-
 export default class MDCLinearProgressFoundation extends MDCFoundation<MDCLinearProgressAdapter> {
   static get cssClasses() {
     return cssClasses;
@@ -39,12 +37,12 @@ export default class MDCLinearProgressFoundation extends MDCFoundation<MDCLinear
 
   static get defaultAdapter(): MDCLinearProgressAdapter {
     return {
-      addClass: (_className: string) => undefined,
+      addClass: () => undefined,
       getBuffer: () => null,
       getPrimaryBar: () => null,
-      hasClass: (_className: string) => false,
-      removeClass: (_className: string) => undefined,
-      setStyle: (_el: HTMLElement, _styleProperty: string, _value: string) => undefined,
+      hasClass: () => false,
+      removeClass: () => undefined,
+      setStyle: () => undefined,
     };
   }
 
@@ -105,6 +103,6 @@ export default class MDCLinearProgressFoundation extends MDCFoundation<MDCLinear
       return;
     }
     const value = `scaleX(${scaleValue})`;
-    this.adapter_.setStyle(el, getCorrectPropertyName(window, TRANSFORM), value);
+    this.adapter_.setStyle(el, getCorrectPropertyName(window, 'transform'), value);
   }
 }

packages/mdc-slider/foundation.js

@@ -25,12 +25,8 @@ import {cssClasses, strings, numbers} from './constants';
 import MDCSliderAdapter from './adapter';
 
 import {getCorrectEventName, getCorrectPropertyName} from '@material/animation/index.ts';
-import {StandardCssPropertyName, StandardJsEventType} from '@material/animation/index.ts';
 import MDCFoundation from '@material/base/foundation';
 
-const {TRANSFORM} = StandardCssPropertyName;
-const {TRANSITION_END} = StandardJsEventType;
-
 /** @enum {string} */
 const KEY_IDS = {
   ARROW_LEFT: 'ArrowLeft',
@@ -151,7 +147,7 @@ class MDCSliderFoundation extends MDCFoundation {
     this.adapter_.registerResizeHandler(this.resizeHandler_);
     this.layout();
     // At last step, provide a reasonable default value to discrete slider
-    if (this.isDiscrete_ && this.getStep() == 0) {
+    if (this.isDiscrete_ && this.getStep() === 0) {
       this.step_ = 1;
     }
   }
@@ -524,8 +520,8 @@ class MDCSliderFoundation extends MDCFoundation {
       translatePx = this.rect_.width - translatePx;
     }
 
-    const transformProp = getCorrectPropertyName(window, TRANSFORM);
-    const transitionendEvtName = getCorrectEventName(window, TRANSITION_END);
+    const transformProp = getCorrectPropertyName(window, 'transform');
+    const transitionendEvtName = getCorrectEventName(window, 'transitionend');
 
     if (this.inTransit_) {
       const onTransitionEnd = () => {

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

@@ -21,16 +21,14 @@
  * THE SOFTWARE.
  */
 
-import {StandardCssPropertyName, getCorrectPropertyName} from '@material/animation/index.ts';
+import {getCorrectPropertyName} from '@material/animation/index.ts';
 import MDCComponent from '@material/base/component';
 
 import {MDCTabBar} from '../tab-bar/index';
 import MDCTabBarScrollerFoundation from './foundation';
 
 export {MDCTabBarScrollerFoundation};
 
-const {TRANSFORM} = StandardCssPropertyName;
-
 export class MDCTabBarScroller extends MDCComponent {
   static attachTo(root) {
     return new MDCTabBarScroller(root);
@@ -83,7 +81,7 @@ export class MDCTabBarScroller extends MDCComponent {
       setScrollLeftForScrollFrame: (scrollLeftAmount) => this.scrollFrame_.scrollLeft = scrollLeftAmount,
       getOffsetWidthForTabBar: () => this.tabBarEl_.offsetWidth,
       setTransformStyleForTabBar: (value) => {
-        this.tabBarEl_.style.setProperty(getCorrectPropertyName(window, TRANSFORM), value);
+        this.tabBarEl_.style.setProperty(getCorrectPropertyName(window, 'transform'), value);
       },
       getOffsetLeftForEventTarget: (target) => target.offsetLeft,
       getOffsetWidthForEventTarget: (target) => target.offsetWidth,

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

@@ -22,12 +22,10 @@
  */
 
 import MDCFoundation from '@material/base/foundation';
-import {StandardCssPropertyName, getCorrectPropertyName} from '@material/animation/index.ts';
+import {getCorrectPropertyName} from '@material/animation/index.ts';
 
 import {cssClasses, strings} from './constants';
 
-const {TRANSFORM} = StandardCssPropertyName;
-
 export default class MDCTabBarFoundation extends MDCFoundation {
   static get cssClasses() {
     return cssClasses;
@@ -107,7 +105,7 @@ export default class MDCTabBarFoundation extends MDCFoundation {
       this.adapter_.getComputedWidthForTabAtIndex(this.activeTabIndex_) / this.adapter_.getOffsetWidth();
 
     const transformValue = `translateX(${translateAmtForActiveTabLeft}px) scale(${scaleAmtForActiveTabWidth}, 1)`;
-    this.adapter_.setStyleForIndicator(getCorrectPropertyName(window, TRANSFORM), transformValue);
+    this.adapter_.setStyleForIndicator(getCorrectPropertyName(window, 'transform'), transformValue);
 
     if (isIndicatorFirstRender) {
       // Force layout so that transform styles to take effect.