react-paper-ripple/dist/react-paper-ripple.min.js

Paper ripple animations inspired by Google Material Design.

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("prop-types"),require("react-motion")):"function"==typeof define&&define.amd?define(["react","prop-types","react-motion"],t):"object"==typeof exports?exports.ReactPaperRipple=t(require("react"),require("prop-types"),require("react-motion")):e.ReactPaperRipple=t(e.React,e.PropTypes,e.ReactMotion)}(this,function(e,t,n){return function(e){function t(o){if(n[o])return n[o].exports;var r=n[o]={exports:{},id:o,loaded:!1};return e[o].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="dist/",t(0)}([function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.default=void 0;var r=n(1),i=o(r);t.default=i.default},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{default:e}}function r(e,t){var n={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n}function i(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)}function a(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function u(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function c(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function l(e){var t=e.data,n=e.style,o=n.scale,r=n.opacity;return d.default.createElement("div",{className:"paper-ripple-wave",style:f({},t,{WebkitTransform:"scale("+o+", "+o+")",transform:"scale3d("+o+", "+o+", 1)",opacity:r})})}Object.defineProperty(t,"__esModule",{value:!0});var s=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),f=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},p=n(2),d=o(p),v=n(3),h=o(v),y=n(4),m=o(y),g=n(8),b={mousedown:"MouseDown",touchstart:"touchStart"},w={position:"absolute",top:0,right:0,bottom:0,left:0,overflow:"hidden"},_=function(e){function t(){var e,n,o,r;a(this,t);for(var c=arguments.length,l=Array(c),s=0;s<c;s++)l[s]=arguments[s];return n=o=u(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(l))),o.state={waves:[]},o._willLeave=function(){var e=o.props.rmConfig;return{scale:(0,g.spring)(1,e),opacity:(0,g.spring)(0,e)}},o._addWave=function(e){if(!o._waveAdded){var t=o.props,n=t.growRatio,r=t.center,a=t.color,u=t.rmConfig,c=Date.now().toString(),l=[].concat(i(o.state.waves)),s=o._parentNode.getBoundingClientRect(),f=s.top+(window?window.pageYOffset:0),p=s.left+(window?window.pageXOffset:0),d=Math.max(s.width,s.height)*n,v=d/2,h={width:d,height:d,backgroundColor:a,borderRadius:"100%",position:"absolute",pointerEvents:"none"};if(o._waveAdded=!0,o._currentKey=c,r)h.top=s.height/2,h.left=s.width/2,h.marginTop=-v,h.marginLeft=-v;else{var y=e.touches&&e.touches[0]||e,m=y.pageX,b=y.pageY;h.top=b-f-v,h.left=m-p-v}l.push({key:c,data:h,style:{scale:(0,g.spring)(1,u),opacity:(0,g.spring)(1,u)}}),o.setState({waves:l})}},o._removeWave=function(){o._waveAdded&&(o.setState({waves:o.state.waves.filter(function(e){return e.key!==o._currentKey})}),o._waveAdded=!1)},o._handleEvent=function(e){var t=b[e.type],n=o.props["on"+t];o._addWave(e),"function"==typeof n&&n(e)},o._handleRef=function(e){o._parentNode=e&&e.parentNode},r=n,u(o,r)}return c(t,e),s(t,[{key:"componentDidMount",value:function(){this.props.filled&&this._addWave()}},{key:"componentWillReceiveProps",value:function(e){!this.props.filled&&e.filled?this._addWave():this.props.filled&&!e.filled&&this._removeWave()}},{key:"_willEnter",value:function(){return{scale:0,opacity:1}}},{key:"render",value:function(){var e=this,t=this.props,n=(t.center,t.color,t.growRatio,t.opacity),o=(t.filled,t.rmConfig,r(t,["center","color","growRatio","opacity","filled","rmConfig"]));return d.default.createElement(g.TransitionMotion,{styles:this.state.waves,willEnter:this._willEnter,willLeave:this._willLeave},function(t){return d.default.createElement("div",f({ref:e._handleRef,className:"paper-ripple",style:f({},w,{opacity:n}),onMouseDown:e._handleEvent,onTouchStart:e._handleEvent},o),t.map(function(e){return d.default.createElement(l,e)}),d.default.createElement(m.default,{onMouseup:e._removeWave,onTouchEnd:e._removeWave,onTouchCancel:e._removeWave}))})}}]),t}(p.Component);_.propTypes={center:h.default.bool,color:h.default.string,opacity:h.default.number,growRatio:h.default.number,filled:h.default.bool,rmConfig:h.default.objectOf(h.default.number)},_.defaultProps={center:!1,color:"#fff",opacity:.25,growRatio:2.25,filled:null,rmConfig:{stiffness:100,damping:20}},t.default=_},function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t,n){e.exports=n(5)},function(e,t,n){(function(t){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function r(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function i(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}function a(e,t,n,o){return!e.addEventListener&&(t="on"+t),(e.addEventListener||e.attachEvent).call(e,t,n,o),n}function u(e,t,n,o){return!e.removeEventListener&&(t="on"+t),(e.removeEventListener||e.detachEvent).call(e,t,n,o),n}var c=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),React=n(2),l=n(3),s=t.env.NODE_ENV,f={};"production"!==s&&(f=n(7));var p=function(e){function t(){return o(this,t),r(this,(t.__proto__||Object.getPrototypeOf(t)).apply(this,arguments))}return i(t,e),c(t,[{key:"componentDidMount",value:function(){this.props.enabled&&this.bindHandlers()}},{key:"componentWillUnmount",value:function(){this.unbindHandlers()}},{key:"componentWillReceiveProps",value:function(e){this.props.enabled&&!e.enabled?this.unbindHandlers():!this.props.enabled&&e.enabled&&this.bindHandlers()}},{key:"getKeys",value:function(){var e=this.props.target===window;return Object.keys(this.props).filter(function(e){return"on"===e.slice(0,2)}).map(function(t){return"production"===s||f.windowEvents.indexOf(t)===-1||e||console.warn("You attached the handler "+t+", but this handler is only valid on the Window object."),[t,t.slice(2).toLowerCase()]})}},{key:"bindHandlers",value:function(){this._adjustHandlers(a)}},{key:"unbindHandlers",value:function(){this._adjustHandlers(u)}},{key:"_adjustHandlers",value:function(e){var t=this.props,n="function"==typeof t.target?t.target():t.target;if(n){var o=d?{passive:t.passive,capture:t.capture}:t.capture;this.getKeys().forEach(function(r){e(n,r[1],t[r[0]],o)})}}},{key:"render",value:function(){return null}}]),t}(React.Component);p.displayName="DocumentEvents",p.defaultProps={capture:!1,enabled:!0,passive:!1,target:t.browser?document:null};var d=function(){try{var e=!1;return document.createElement("div").addEventListener("test",function(){},{get passive(){e=!0}}),e}catch(e){return!1}}();if("production"!==s){var v=f.allEvents.reduce(function(e,t){return e[t]=l.func,e},{});v.enabled=l.bool,v.target=l.oneOfType([l.object,l.func]),v.passive=l.bool,v.capture=l.bool,p.propTypes=v}e.exports=p}).call(t,n(6))},function(e,t){function n(){throw new Error("setTimeout has not been defined")}function o(){throw new Error("clearTimeout has not been defined")}function r(e){if(s===setTimeout)return setTimeout(e,0);if((s===n||!s)&&setTimeout)return s=setTimeout,setTimeout(e,0);try{return s(e,0)}catch(t){try{return s.call(null,e,0)}catch(t){return s.call(this,e,0)}}}function i(e){if(f===clearTimeout)return clearTimeout(e);if((f===o||!f)&&clearTimeout)return f=clearTimeout,clearTimeout(e);try{return f(e)}catch(t){try{return f.call(null,e)}catch(t){return f.call(this,e)}}}function a(){h&&d&&(h=!1,d.length?v=d.concat(v):y=-1,v.length&&u())}function u(){if(!h){var e=r(a);h=!0;for(var t=v.length;t;){for(d=v,v=[];++y<t;)d&&d[y].run();y=-1,t=v.length}d=null,h=!1,i(e)}}function c(e,t){this.fun=e,this.array=t}function l(){}var s,f,p=e.exports={};!function(){try{s="function"==typeof setTimeout?setTimeout:n}catch(e){s=n}try{f="function"==typeof clearTimeout?clearTimeout:o}catch(e){f=o}}();var d,v=[],h=!1,y=-1;p.nextTick=function(e){var t=new Array(arguments.length-1);if(arguments.length>1)for(var n=1;n<arguments.length;n++)t[n-1]=arguments[n];v.push(new c(e,t)),1!==v.length||h||r(u)},c.prototype.run=function(){this.fun.apply(null,this.array)},p.title="browser",p.browser=!0,p.env={},p.argv=[],p.version="",p.versions={},p.on=l,p.addListener=l,p.once=l,p.off=l,p.removeListener=l,p.removeAllListeners=l,p.emit=l,p.prependListener=l,p.prependOnceListener=l,p.listeners=function(e){return[]},p.binding=function(e){throw new Error("process.binding is not supported")},p.cwd=function(){return"/"},p.chdir=function(e){throw new Error("process.chdir is not supported")},p.umask=function(){return 0}},function(e,t){"use strict";var n=["onAbort","onAnimationEnd","onAnimationIteration","onAnimationStart","onBlur","onCanPlay","onCanPlayThrough","onClick","onContextMenu","onCopy","onCut","onDoubleClick","onDrag","onDragEnd","onDragEnter","onDragExit","onDragLeave","onDragOver","onDragStart","onDrop","onDurationChange","onEmptied","onEncrypted","onEnded","onError","onFocus","onInput","onInvalid","onKeyDown","onKeyPress","onKeyUp","onLoad","onLoadedData","onLoadedMetadata","onLoadStart","onMouseDown","onMouseMove","onMouseOut","onMouseOver","onMouseUp","onPaste","onPause","onPlay","onPlaying","onProgress","onRateChange","onReset","onScroll","onSeeked","onSeeking","onStalled","onSubmit","onSuspend","onTimeUpdate","onTouchCancel","onTouchEnd","onTouchMove","onTouchStart","onTransitionEnd","onVolumeChange","onWaiting","onWheel"],o=["onAfterPrint","onBeforePrint","onBeforeUnload","onDeviceLight","onDeviceMotion","onDeviceOrientation","onDeviceProximity","onHashChange","onLanguageChange","onPopState","onRejectionHandled","onResize","onSelect","onStorage","onUnhandledRejection","onUnload","onUserProximity"],r=["onPointerCancel","onPointerDown","onPointerEnter","onPointerLeave","onPointerMove","onPointerOut","onPointerOver","onPointerUp"];e.exports={allEvents:n.concat(o).concat(r),documentEvents:n.concat(r),windowEvents:o}},function(e,t){e.exports=n}])});