feat(ripple) mdc-web typescript conversion

package.json

@@ -60,6 +60,7 @@
   },
   "devDependencies": {
     "@google-cloud/storage": "^1.6.0",
+    "@material/base": "^1.0.0-0",
     "@material/button": "^0.43.0",
     "@material/card": "^0.41.0",
     "@material/checkbox": "^0.41.0",
@@ -77,7 +78,7 @@
     "@material/menu-surface": "^0.41.0",
     "@material/notched-outline": "^0.41.0",
     "@material/radio": "^0.41.0",
-    "@material/ripple": "^0.41.0",
+    "@material/ripple": "^1.0.0-0",
     "@material/select": "^0.40.1",
     "@material/snackbar": "^0.43.0",
     "@material/switch": "^0.41.0",

packages/icon-button/index.tsx

@@ -132,7 +132,8 @@ class IconButtonBase<T extends IconButtonTypes> extends React.Component<
   }
 }
 
-const IconButton = Ripple.withRipple<IconButtonProps<IconButtonTypes>, IconButtonTypes>(IconButtonBase);
+const IconButton =
+  Ripple.withRipple<IconButtonProps<IconButtonTypes>, IconButtonTypes>(IconButtonBase);
 
 export default IconButton;
 export {IconToggle, IconButtonBase};

packages/ripple/index.tsx

@@ -23,9 +23,10 @@ import * as React from 'react';
 import * as classnames from 'classnames';
 import {Subtract} from 'utility-types'; // eslint-disable-line no-unused-vars
 
-// @ts-ignore no mdc .d.ts file
-import {MDCRippleFoundation, MDCRippleAdapter, util} from '@material/ripple/dist/mdc.ripple';
-// @ts-ignore no mdc .d.ts file
+import {MDCRippleFoundation} from '@material/ripple/foundation';
+import {MDCRippleAdapter} from '@material/ripple/adapter';
+import * as util from '@material/ripple/util';
+import {SpecificEventListener} from '@material/base/types';
 import {matches} from '@material/dom/ponyfill';
 
 export interface RippledComponentProps<T> {
@@ -71,12 +72,12 @@ export interface RippledComponentInterface<Surface, Activator = Element> {
   handleKeyDown: React.KeyboardEventHandler<Surface>;
   handleKeyUp: React.KeyboardEventHandler<Surface>;
   activateRipple: (e: ActivateEventTypes<Surface>) => void;
-  deactivateRipple: (e: ActivateEventTypes<Surface>) => void;
+  deactivateRipple: () => void;
   classes: string;
   style: React.CSSProperties;
   displayName: string;
   createAdapter: (surface: Surface, activator?: Activator) => MDCRippleAdapter;
-  updateCssVariable: (varName: keyof React.CSSProperties, value: string | number) => void;
+  updateCssVariable: (varName: string, value: string | null) => void;
   componentDidMount: () => void;
   componentWillUnmount: () => void;
   render: () => JSX.Element;
@@ -87,7 +88,9 @@ export function withRipple <
   P extends InjectedProps<Surface, Activator>,
   Surface extends Element = Element,
   Activator extends Element = Element
->(WrappedComponent: React.ComponentType<P>) {
+>(WrappedComponent: React.ComponentType<P>):
+  React.ComponentType<Subtract<P, InjectedProps<Surface, Activator>>
+  & RippledComponentProps<Surface>> {
   return class RippledComponent extends React.Component<
   // Subtract removes any props "InjectedProps" if they are on "P"
   // This allows the developer to override any props
@@ -147,18 +150,18 @@ export function withRipple <
     this.foundation.init();
   };
 
-  createAdapter: MDCRippleAdapter = (surface: Surface, activator?: Activator) => {
+  createAdapter = (surface: Surface, activator?: Activator): MDCRippleAdapter => {
     return {
       browserSupportsCssVars: () => util.supportsCssVariables(window),
-      isUnbounded: () => this.props.unbounded,
+      isUnbounded: () => (this.props.unbounded || false) as boolean,
       isSurfaceActive: () => {
         if (activator) {
           return matches(activator, ':active');
         }
 
         return matches(surface, ':active');
       },
-      isSurfaceDisabled: () => this.props.disabled,
+      isSurfaceDisabled: () => (this.props.disabled || false) as boolean,
       addClass: (className: string) => {
         if (!this.isComponentMounted) {
           return;
@@ -185,21 +188,29 @@ export function withRipple <
           handler,
           util.applyPassive()
         ),
-      registerResizeHandler: (handler: EventListener) =>
+      registerResizeHandler: (handler: SpecificEventListener<'resize'>) =>
         window.addEventListener('resize', handler),
-      deregisterResizeHandler: (handler: EventListener) =>
+      deregisterResizeHandler: (handler: SpecificEventListener<'resize'>) =>
         window.removeEventListener('resize', handler),
       updateCssVariable: this.updateCssVariable,
       computeBoundingRect: () => {
         if (!this.isComponentMounted) {
           // need to return object since foundation expects it
-          return {};
+          return new ClientRect();
         }
         if (this.props.computeBoundingRect) {
           return this.props.computeBoundingRect(surface);
         }
         return surface.getBoundingClientRect();
       },
+      containsEventTarget: (target: EventTarget | null) => {
+        if (activator && target !== null) {
+          return activator.contains(target as Node);
+        }
+        return false;
+      },
+      registerInteractionHandler: () => null,
+      deregisterInteractionHandler: () => null,
       getWindowPageOffset: () => ({
         x: window.pageXOffset,
         y: window.pageYOffset,
@@ -209,12 +220,12 @@ export function withRipple <
 
   handleFocus = (e: React.FocusEvent<Surface>) => {
     this.props.onFocus && this.props.onFocus(e);
-    this.foundation.handleFocus();
+    this.foundation!.handleFocus();
   };
 
   handleBlur = (e: React.FocusEvent<Surface>) => {
     this.props.onBlur && this.props.onBlur(e);
-    this.foundation.handleBlur();
+    this.foundation!.handleBlur();
   };
 
   handleMouseDown = (e: React.MouseEvent<Surface>) => {
@@ -226,7 +237,7 @@ export function withRipple <
 
   handleMouseUp = (e: React.MouseEvent<Surface>) => {
     this.props.onMouseUp && this.props.onMouseUp(e);
-    this.deactivateRipple(e);
+    this.deactivateRipple();
   };
 
   handleTouchStart = (e: React.TouchEvent<Surface>) => {
@@ -237,7 +248,7 @@ export function withRipple <
 
   handleTouchEnd = (e: React.TouchEvent<Surface>) => {
     this.props.onTouchEnd && this.props.onTouchEnd(e);
-    this.deactivateRipple(e);
+    this.deactivateRipple();
   };
 
   handleKeyDown = (e: React.KeyboardEvent<Surface>) => {
@@ -247,26 +258,31 @@ export function withRipple <
 
   handleKeyUp = (e: React.KeyboardEvent<Surface>) => {
     this.props.onKeyUp && this.props.onKeyUp(e);
-    this.deactivateRipple(e);
+    this.deactivateRipple();
   };
 
   activateRipple = (e: ActivateEventTypes<Surface>) => {
     // https://reactjs.org/docs/events.html#event-pooling
     e.persist();
-    this.foundation.activate(e);
+    this.foundation!.activate(e.nativeEvent);
   };
 
-  deactivateRipple = (e: ActivateEventTypes<Surface>) => {
-    this.foundation.deactivate(e);
+  deactivateRipple = () => {
+    this.foundation!.deactivate();
   };
 
-  updateCssVariable = (varName: keyof React.CSSProperties, value: string | number) => {
+  updateCssVariable = (varName: string, value: string | null) => {
     if (!this.isComponentMounted) {
       return;
     }
     this.setState((prevState) => {
       const updatedStyle = Object.assign({}, this.state.style, prevState.style) as React.CSSProperties;
-      updatedStyle[varName] = value;
+      if (value === null) {
+        delete updatedStyle[varName as keyof React.CSSProperties];
+      } else {
+        updatedStyle[varName as keyof React.CSSProperties] = value;
+      }
+
       return Object.assign(prevState, {
         style: updatedStyle,
       });
@@ -326,7 +342,7 @@ export function withRipple <
       />
     );
   }
-  };
+  } as any;
 }
 
 function getDisplayName<P extends {}>(WrappedComponent: React.ComponentType<P>): string {

packages/ripple/package.json

@@ -16,8 +16,8 @@
     "url": "https://github.com/material-components/material-components-web-react.git"
   },
   "dependencies": {
-    "@material/dom": "^0.41.0",
-    "@material/ripple": "^0.41.0",
+    "@material/dom": "^1.0.0-0",
+    "@material/ripple": "^1.0.0-0",
     "classnames": "^2.2.5",
     "react": "^16.4.2",
     "utility-types": "^3.2.1"

packages/tab/TabRipple.tsx

@@ -30,6 +30,7 @@ import {
 
 export interface TabRippleProps extends React.HTMLAttributes<HTMLDivElement>, Ripple.InjectedProps<HTMLDivElement> {
   className: string;
+  ref?: React.RefObject<any>,
 }
 
 class TabRippleBase extends React.Component<TabRippleProps, {}> {

test/screenshot/stop.sh

@@ -1,3 +1,3 @@
 #!/bin/bash
 
-kill $(ps aux | grep 'webpack' | awk '{print $2}') || echo 'already stopped'
+kill $(ps aux | grep 'webpack' | grep 'screenshot' | awk '{print $2}') || echo 'already stopped'