@material/react-ripple - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

index.js

@@ -37,6 +37,8 @@ import React, {Component} from 'react';
     createAdapter_ = (instance) => {
+      const MATCHES = util.getMatchesProperty(HTMLElement.prototype);
+
       return {
         browserSupportsCssVars: () => util.supportsCssVariables(window),
         isUnbounded: () => this.props.unbounded,
-        isSurfaceActive: () => this.state.isActivated,
+        isSurfaceActive: () => instance[MATCHES](':active'),
         isSurfaceDisabled: () => this.props.disabled,
@@ -70,3 +72,2 @@ addClass: (className) =>
       this.props.onMouseDown(e);
-      this.setState({isActivated: true});
       this.activateRipple(e);
@@ -77,3 +78,3 @@ }
       this.props.onMouseUp(e);
-      this.setState({isActivated: false});
+      this.deactivateRipple(e);
     }
@@ -86,2 +87,7 @@
 
+    handleTouchEnd = (e) => {
+      this.props.onTouchEnd(e);
+      this.deactivateRipple(e);
+    }
+
     handleKeyDown = (e) => {
@@ -92,8 +98,19 @@ this.props.onKeyDown(e);
 
+    handleKeyUp = (e) => {
+      this.props.onKeyUp(e);
+      this.deactivateRipple(e);
+    }
+
     activateRipple = (e) => {
       // https://reactjs.org/docs/events.html#event-pooling
       e.persist();
-      this.foundation_.activate(e);
+      requestAnimationFrame(() => {
+        this.foundation_.activate(e);
+      });
     }
 
+    deactivateRipple = (e) => {
+      this.foundation_.deactivate(e);
+    }
+
     updateCssVariable = (varName, value) => {
@@ -121,3 +138,5 @@ const updatedStyle = Object.assign({}, this.state.style);
         onTouchStart,
+        onTouchEnd,
         onKeyDown,
+        onKeyUp,
         /* eslint-enable */
@@ -132,3 +151,5 @@ /* end black list of otherprops */
         onTouchStart: this.handleTouchStart,
+        onTouchEnd: this.handleTouchEnd,
         onKeyDown: this.handleKeyDown,
+        onKeyUp: this.handleKeyUp,
         // call initRipple on ref on root element that needs ripple
@@ -152,3 +173,5 @@ initRipple: this.initializeFoundation_,
     onTouchStart: PropTypes.func,
+    onTouchEnd: PropTypes.func,
     onKeyDown: PropTypes.func,
+    onKeyUp: PropTypes.func,
   }, WrappedComponent.propTypes);
@@ -164,3 +187,5 @@
     onTouchStart: () => {},
+    onTouchEnd: () => {},
     onKeyDown: () => {},
+    onKeyUp: () => {},
   }, WrappedComponent.defaultProps);
@@ -167,0 +192,0 @@

package.json

 {
   "name": "@material/react-ripple",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Material Components React Ripple",
@@ -17,7 +17,10 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@material/ripple": "^0.34.1",
+    "@material/ripple": "^0.35.0",
     "classnames": "^2.2.5",
     "prop-types": "^15.6.1",
     "react": "^16.3.2"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

514504

increased by7036.97%

Number of package files

7

increased by133.33%

Lines of code

4601

increased by3163.12%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@material/base@0.35.0(transitive)

• + Added@material/ripple@0.35.0(transitive)

• + Added@material/theme@0.35.0(transitive)

• - Removed@material/base@0.34.0(transitive)

• - Removed@material/ripple@0.34.1(transitive)

• - Removed@material/theme@0.34.0(transitive)

• Updated@material/ripple@^0.35.0