fix(ripple): Use mdc-dom.matches instead of getMatchesProperty() (#706

)
material-components · Mar 18, 2019 · 74d07fd · 74d07fd
1 parent bfd2986
commit 74d07fd
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 23 deletions.
diff --git a/packages/ripple/index.tsx b/packages/ripple/index.tsx
@@ -25,9 +25,8 @@ 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';
-
-const HTMLElementShim: any = typeof HTMLElement === 'undefined' ? {} : HTMLElement;
-const MATCHES = util.getMatchesProperty(HTMLElementShim.prototype);
+// @ts-ignore no mdc .d.ts file
+import {matches} from '@material/dom/ponyfill';
 
 export interface RippledComponentProps<T> {
   unbounded?: boolean;
@@ -55,10 +54,6 @@ export interface InjectedProps<S, A = Element> extends RippledComponentProps<S>
   initRipple: React.Ref<S> | ((surface: S | null, activator?: A | null) => void);
 }
 
-function isElement(element: any): element is Element {
-  return element[MATCHES as 'matches'] !== undefined;
-}
-
 type ActivateEventTypes<S>
   = React.MouseEvent<S> | React.TouchEvent<S> | React.KeyboardEvent<S> | React.FocusEvent<S>;
 
@@ -158,16 +153,10 @@ export function withRipple <
       isUnbounded: () => this.props.unbounded,
       isSurfaceActive: () => {
         if (activator) {
-          if (isElement(activator)) {
-            return activator[MATCHES as 'matches'](':active');
-          }
-          return false;
+          return matches(activator, ':active');
         }
 
-        if (isElement(surface)) {
-          return surface[MATCHES as 'matches'](':active');
-        }
-        return false;
+        return matches(surface, ':active');
       },
       isSurfaceDisabled: () => this.props.disabled,
       addClass: (className: string) => {

diff --git a/packages/ripple/package.json b/packages/ripple/package.json
@@ -16,6 +16,7 @@
     "url": "https://github.com/material-components/material-components-web-react.git"
   },
   "dependencies": {
+    "@material/dom": "^0.41.0",
     "@material/ripple": "^0.41.0",
     "classnames": "^2.2.5",
     "react": "^16.4.2",

diff --git a/packages/tab-scroller/index.tsx b/packages/tab-scroller/index.tsx
@@ -27,6 +27,8 @@ import {
   util,
 // @ts-ignore no .d.ts file
 } from '@material/tab-scroller/dist/mdc.tabScroller';
+// @ts-ignore no mdc .d.ts file
+import {matches} from '@material/dom/ponyfill';
 
 const convertDashToCamelCase = (propName: string) =>
   propName.replace(/-(\w)/g, (_, v) => v.toUpperCase());
@@ -47,12 +49,6 @@ interface TabScrollerState {
 
 type ScrollerElementNames = 'scrollAreaStyleProperty' | 'scrollContentStyleProperty';
 
-const MATCHES = util.getMatchesProperty(HTMLElement.prototype);
-
-function isElement(element: any): element is Element {
-  return element[MATCHES as 'matches'] !== undefined;
-}
-
 export default class TabScroller extends React.Component<
   TabScrollerProps,
   TabScrollerState
@@ -120,8 +116,8 @@ export default class TabScroller extends React.Component<
   get adapter() {
     return {
       eventTargetMatchesSelector: (evtTarget: HTMLDivElement, selector: string) => {
-        if (selector && isElement(evtTarget)) {
-          return evtTarget[MATCHES as 'matches'](selector);
+        if (selector) {
+          return matches(evtTarget, selector);
         }
         return false;
       },

diff --git a/packages/tab-scroller/package.json b/packages/tab-scroller/package.json
@@ -18,6 +18,7 @@
     "url": "https://github.com/material-components/material-components-web-react.git"
   },
   "dependencies": {
+    "@material/dom": "^0.41.0",
     "@material/tab-scroller": "^0.41.0",
     "classnames": "^2.2.5",
     "react": "^16.4.2"