@coffee-shope/ripple
Version:
2 lines (1 loc) • 3.54 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("core-decorators"),require("@coffee-shope/merge-event-handlers"),require("@emotion/core"),require("@emotion/styled")):"function"==typeof define&&define.amd?define(["exports","react","core-decorators","@coffee-shope/merge-event-handlers","@emotion/core","@emotion/styled"],t):t((e=e||self).ripple={},e.React,e.coreDecorators,e.mergeEventHandlers,e.core,e.styled)}(this,function(e,t,n,o,r,i){"use strict";var p="default"in t?t.default:t;o=o&&o.hasOwnProperty("default")?o.default:o,i=i&&i.hasOwnProperty("default")?i.default:i;var a=function(e,t){return(a=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var n in t)t.hasOwnProperty(n)&&(e[n]=t[n])})(e,t)};function s(e,t){return Object.defineProperty?Object.defineProperty(e,"raw",{value:t}):e.raw=t,e}var c,l,f=r.keyframes(c||(c=s(["\n 0% {\n opacity: .5;\n transform: scale(1);\n }\n 100% {\n opacity: 0;\n transform: scale(50);\n }\n"],["\n 0% {\n opacity: .5;\n transform: scale(1);\n }\n 100% {\n opacity: 0;\n transform: scale(50);\n }\n"]))),u=i.span(l||(l=s(["\n position: absolute !important;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n opacity: 0;\n pointer-events: none;\n animation: "," 1.2s ease;\n left: ",";\n top: ",";\n background-color: ",";\n"],["\n position: absolute !important;\n width: 30px;\n height: 30px;\n border-radius: 50%;\n opacity: 0;\n pointer-events: none;\n animation: "," 1.2s ease;\n left: ",";\n top: ",";\n background-color: ",";\n"])),f,function(e){return e.left+"px"},function(e){return e.top+"px"},function(e){return e.dark?"rgba(0,0,0,.5)!important":"#fff!important"}),d=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={ripple:null},t.isRippleMounted=!1,t}return function(e,t){function n(){this.constructor=e}a(e,t),e.prototype=null===t?Object.create(t):(n.prototype=t.prototype,new n)}(t,e),t.prototype.componentDidMount=function(){if("function"!=typeof this.props.children)throw new Error("Ripple takes a function as children.");this.isRippleMounted=!0},t.prototype.componentWillUnmount=function(){this.isRippleMounted=!1},t.prototype.Ripple=function(){var e=this.state.ripple,t=this.props.dark;if(!e)return null;var n=e.id,o=e.left,r=e.top;return p.createElement("span",{key:n},p.createElement(u,{dark:t,left:o,top:r}))},t.prototype.removeRipple=function(e){var t=this;setTimeout(function(){var n=t.state.ripple;t.isRippleMounted&&n&&n.id===e&&t.setState({ripple:null})},1500)},t.prototype.onClick=function(e){var t=this,n=Date.now();this.setState({ripple:{id:n,left:e.nativeEvent.offsetX-e.target.offsetLeft,top:e.nativeEvent.offsetY-e.target.offsetTop}},function(){return t.removeRipple(n)})},t.prototype.getEventHandlers=function(){return{onClick:this.onClick}},t.prototype.render=function(){var e=p.createElement(this.Ripple,null),t=this.getEventHandlers();return p.createElement("div",null,this.props.children({ripple:e,eventHandlers:t,mergeEventHandlers:o(t)}))},t=function(e,t,n,o){var r,i=arguments.length,p=i<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,n):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)p=Reflect.decorate(e,t,n,o);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(p=(i<3?r(p):i>3?r(t,n,p):r(t,n))||p);return i>3&&p&&Object.defineProperty(t,n,p),p}([n.autobind],t)}(t.Component);e.Ripple=d,Object.defineProperty(e,"__esModule",{value:!0})});