react-ink - npm Package Compare versions

Comparing version 3.3.0 to 3.3.1

dist/ink.js

@@ -1,1 +0,1 @@
-module.exports=function(t){function e(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return t[o].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";var o=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},r=n(4),i=n(6),s=n(1),a=n(5),u=0,c=i.PropTypes,p=i.createClass({displayName:"Ink",shouldComponentUpdate:function(t,e){return!!e.frame},propTypes:{background:c.bool,duration:c.number,opacity:c.number,radius:c.number,recenter:c.bool},getDefaultProps:function(){return{background:!0,duration:1500,fill:"currentColor",opacity:.2,radius:150,recenter:!0}},getInitialState:function(){return{store:a(this.tick),touchEvents:this.touchEvents()}},touchEvents:function(){return r?{onTouchStart:this._onPress,onTouchEnd:this._onRelease,onTouchCancel:this._onRelease,onTouchLeave:this._onRelease}:{onMouseDown:this._onPress,onMouseUp:this._onRelease,onMouseLeave:this._onRelease}},tick:function(t){this.setState({frame:t})},componentWillUnmount:function(){this.state.store.stop()},pushBlot:function(t,e,n){var o=this.getDOMNode().getBoundingClientRect(),r=o.top,i=o.bottom,s=o.left,a=o.right,u=i-r,c=a-s,p=Math.max(u,c);this.state.store.add({duration:this.props.duration,maxOpacity:this.props.opacity,mouseDown:t,mouseUp:0,radius:Math.min(p,this.props.radius),recenter:this.props.recenter,x:e-s,y:n-r,size:p,height:u,width:c})},popBlot:function(t){this.state.store.release(t)},makeBlot:function(t,e){var n=t.radius,o=t.opacity,r=t.transform;return i.createElement("circle",{key:e,r:n,fillOpacity:o,transform:r})},render:function(){var t=this.props.background,e=this.props.fill,n=this.props.style,r=this.state.store,a=this.state.touchEvents,u=o({},s,n);return i.createElement("svg",o({className:"ink",style:u,fill:e},a,{onDragOver:this._onRelease}),r.map(this.makeBlot),i.createElement("rect",{width:"100%",height:"100%",fillOpacity:t?this.state.store.getTotalOpacity():0}))},_onPress:function(t){var e=t.button,n=t.ctrlKey,o=t.clientX,r=t.clientY,i=t.changedTouches,s=t.timeStamp;if(i)for(var a=0;a<i.length;a++){var c=i[a].clientX,p=i[a].clientY;this.pushBlot(s,c,p)}else e!==u||n||this.pushBlot(s,o,r)},_onRelease:function(t){var e=t.timeStamp;this.popBlot(e)}});t.exports=p},function(t){"use strict";t.exports={borderRadius:"inherit",height:"100%",left:0,position:"absolute",top:0,width:"100%",willChange:"transform, opacity"}},function(t){"use strict";t.exports=function(t,e,n,o){return n*((t=t/o-1)*t*t*t*t+1)+e}},function(t,e,n){"use strict";function o(t){return a(t.duration,Date.now()-t.mouseDown)}function r(t){return t.mouseUp>0?Date.now()-t.mouseUp:0}function i(t){var e=.85*s(o(t),0,t.radius,t.duration),n=.15*s(r(t),0,t.radius,t.duration);return e+n}var s=n(2),a=Math.min,u=Math.sqrt(2);t.exports={getBlotOpacity:function(t){return s(r(t),t.maxOpacity,-t.maxOpacity,t.duration)},getBlotOuterOpacity:function(t){return a(t.opacity,s(o(t),0,.3,3*t.duration))},getBlotTransform:function(t){var e=t.recenter,n=t.x,o=t.y,r=t.size,s=t.width,c=t.height,p=i(t);if(e){var l=a(1,p/r*2/u);n+=l*(s/2-n),o+=l*(c/2-o)}var h=p/t.radius;return"translate("+n+","+o+") scale("+h+", "+h+") "}}},function(t){"use strict";var e=!1;"undefined"!=typeof window&&(e="ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch),t.exports=e},function(t,e,n){"use strict";var o=n(3);t.exports=function(t){var e=[],n=!1,r=void 0,i={map:function(t,n){return e.map(t,n)},play:function(){n||(n=!0,i.update())},stop:function(){n=!1,cancelAnimationFrame(r)},getTotalOpacity:function(){return e.reduce(function(t,e){return t+o.getBlotOuterOpacity(e)},0)},update:function(){i.prune(),t(r),e.length?r=requestAnimationFrame(i.update):i.stop()},shouldPrune:function(t){return t.opacity=o.getBlotOpacity(t),t.transform=o.getBlotTransform(t),t.opacity>=.01},prune:function(){e=e.filter(this.shouldPrune)},add:function(t){e.push(t),i.play()},release:function(t){for(var n=e.length-1;n>=0;n--)if(!e[n].mouseUp)return e[n].mouseUp=t}};return i}},function(t){t.exports=require("react")}]);
+module.exports=function(t){function e(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return t[o].call(r.exports,r,r.exports,e),r.loaded=!0,r.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";var o=Object.assign||function(t){for(var e=1;e<arguments.length;e++){var n=arguments[e];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t[o]=n[o])}return t},r=n(4),i=n(6),s=n(1),a=n(5),u=0,c=i.PropTypes,p=i.createClass({displayName:"Ink",shouldComponentUpdate:function(t,e){return!!e.frame},propTypes:{background:c.bool,duration:c.number,opacity:c.number,radius:c.number,recenter:c.bool},getDefaultProps:function(){return{background:!0,duration:1500,fill:"currentColor",opacity:.2,radius:150,recenter:!0}},getInitialState:function(){return{store:a(this.tick),touchEvents:this.touchEvents()}},touchEvents:function(){return r?{onTouchStart:this._onPress,onTouchEnd:this._onRelease,onTouchCancel:this._onRelease,onTouchLeave:this._onRelease}:{onMouseDown:this._onPress,onMouseUp:this._onRelease,onMouseLeave:this._onRelease}},tick:function(t){this.setState({frame:t})},componentWillUnmount:function(){this.state.store.stop()},pushBlot:function(t,e,n){var o=this.getDOMNode().getBoundingClientRect(),r=o.top,i=o.bottom,s=o.left,a=o.right,u=i-r,c=a-s,p=Math.max(u,c);this.state.store.add({duration:this.props.duration,maxOpacity:this.props.opacity,mouseDown:t,mouseUp:0,radius:Math.min(p,this.props.radius),recenter:this.props.recenter,x:e-s,y:n-r,size:p,height:u,width:c})},popBlot:function(t){this.state.store.release(t)},makeBlot:function(t,e){var n=t.radius,o=t.opacity,r=t.transform;return i.createElement("circle",{key:e,r:n,fillOpacity:o,transform:r})},render:function(){var t=this.props.background,e=this.props.fill,n=this.props.style,r=this.state.store,a=this.state.touchEvents,u=o({},s,n);return i.createElement("svg",o({className:"ink",style:u,fill:e},a,{onDragOver:this._onRelease}),r.map(this.makeBlot),i.createElement("rect",{width:"100%",height:"100%",fillOpacity:t?this.state.store.getTotalOpacity():0}))},_onPress:function(t){var e=t.button,n=t.ctrlKey,o=t.clientX,r=t.clientY,i=t.changedTouches,s=Date.now();if(i)for(var a=0;a<i.length;a++){var c=i[a].clientX,p=i[a].clientY;this.pushBlot(s,c,p)}else e!==u||n||this.pushBlot(s,o,r)},_onRelease:function(){this.popBlot(Date.now())}});t.exports=p},function(t){"use strict";t.exports={borderRadius:"inherit",height:"100%",left:0,position:"absolute",top:0,width:"100%",willChange:"transform, opacity"}},function(t){"use strict";t.exports=function(t,e,n,o){return n*((t=t/o-1)*t*t*t*t+1)+e}},function(t,e,n){"use strict";function o(t){return a(t.duration,Date.now()-t.mouseDown)}function r(t){return t.mouseUp>0?Date.now()-t.mouseUp:0}function i(t){var e=.85*s(o(t),0,t.radius,t.duration),n=.15*s(r(t),0,t.radius,t.duration);return e+n}var s=n(2),a=Math.min,u=Math.sqrt(2);t.exports={getBlotOpacity:function(t){return s(r(t),t.maxOpacity,-t.maxOpacity,t.duration)},getBlotOuterOpacity:function(t){return a(t.opacity,s(o(t),0,.3,3*t.duration))},getBlotTransform:function(t){var e=t.recenter,n=t.x,o=t.y,r=t.size,s=t.width,c=t.height,p=i(t);if(e){var l=a(1,p/r*2/u);n+=l*(s/2-n),o+=l*(c/2-o)}var h=p/t.radius;return"translate("+n+","+o+") scale("+h+", "+h+") "}}},function(t){"use strict";var e=!1;"undefined"!=typeof window&&(e="ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch),t.exports=e},function(t,e,n){"use strict";var o=n(3);t.exports=function(t){var e=[],n=!1,r=void 0,i={map:function(t,n){return e.map(t,n)},play:function(){n||(n=!0,i.update())},stop:function(){n=!1,cancelAnimationFrame(r)},getTotalOpacity:function(){return e.reduce(function(t,e){return t+o.getBlotOuterOpacity(e)},0)},update:function(){i.prune(),t(r),e.length?r=requestAnimationFrame(i.update):i.stop()},shouldPrune:function(t){return t.opacity=o.getBlotOpacity(t),t.transform=o.getBlotTransform(t),t.opacity>=.01},prune:function(){e=e.filter(this.shouldPrune)},add:function(t){e.push(t),i.play()},release:function(t){for(var n=e.length-1;n>=0;n--)if(!e[n].mouseUp)return e[n].mouseUp=t}};return i}},function(t){t.exports=require("react")}]);

package.json

 {
   "name": "react-ink",
-  "version": "3.3.0",
+  "version": "3.3.1",
   "description": "A React component for adding material design style ink.",
@@ -5,0 +5,0 @@ "main": "dist/ink.js",

src/index.jsx

@@ -116,3 +116,4 @@ /**
   _onPress(e) {
-    let { button, ctrlKey, clientX, clientY, changedTouches, timeStamp } = e
+    let { button, ctrlKey, clientX, clientY, changedTouches } = e
+    let timeStamp = Date.now()
 
@@ -129,4 +130,4 @@ if (changedTouches) {
 
-  _onRelease({ timeStamp }) {
-    this.popBlot(timeStamp)
+  _onRelease() {
+    this.popBlot(Date.now())
   }
@@ -133,0 +134,0 @@ })

No alert changes

Improved metrics

Lines of code

293

increased by0.34%

Worsened metrics

Total package byte prevSize

15033

decreased by-0.02%

No dependency changes