ripple-button
Version:
ripple-button
1 lines • 8.8 kB
JavaScript
!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"));else if("function"==typeof define&&define.amd)define(["react"],t);else{var n="object"==typeof exports?t(require("react")):t(e.React);for(var i in n)("object"==typeof exports?exports:e)[i]=n[i]}}(window,function(n){return o={},r.m=i={"./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./node_modules/style-resources-loader/lib/index.js?!./src/components/Ripple/index.less":function(e,t,n){(t=n("./node_modules/css-loader/dist/runtime/api.js")(!1)).push([e.i,".react-ripple-wrapper {\n position: relative;\n overflow: hidden;\n user-select: none;\n -webkit-text-size-adjust: 100%;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.react-ripple-wrapper .react-ripple {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n.react-ripple-container {\n position: relative;\n -webkit-tap-highlight-color: rgba(0, 0, 0, 0);\n}\n",""]),e.exports=t},"./node_modules/css-loader/dist/runtime/api.js":function(e,t,n){"use strict";e.exports=function(n){var l=[];return l.toString=function(){return this.map(function(e){var t=function(e,t){var n=e[1]||"",i=e[3];if(!i)return n;if(t&&"function"==typeof btoa){var r=function(e){var t=btoa(unescape(encodeURIComponent(JSON.stringify(e)))),n="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(t);return"/*# ".concat(n," */")}(i),o=i.sources.map(function(e){return"/*# sourceURL=".concat(i.sourceRoot||"").concat(e," */")});return[n].concat(o).concat([r]).join("\n")}return[n].join("\n")}(e,n);return e[2]?"@media ".concat(e[2]," {").concat(t,"}"):t}).join("")},l.i=function(e,t,n){"string"==typeof e&&(e=[[null,e,""]]);var i={};if(n)for(var r=0;r<this.length;r++){var o=this[r][0];null!=o&&(i[o]=!0)}for(var s=0;s<e.length;s++){var a=[].concat(e[s]);n&&i[a[0]]||(t&&(a[2]?a[2]="".concat(t," and ").concat(a[2]):a[2]=t),l.push(a))}},l}},"./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js":function(e,t,o){"use strict";var n,i,r=function(){return void 0===n&&(n=Boolean(window&&document&&document.all&&!window.atob)),n},s=(i={},function(e){if(void 0===i[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}i[e]=t}return i[e]}),a={};function l(e,t,n){for(var i=0;i<t.length;i++){var r={css:t[i][1],media:t[i][2],sourceMap:t[i][3]};a[e][i]?a[e][i](r):a[e].push(m(r,n))}}function c(e){var t=document.createElement("style"),n=e.attributes||{};if(void 0===n.nonce){var i=o.nc;i&&(n.nonce=i)}if(Object.keys(n).forEach(function(e){t.setAttribute(e,n[e])}),"function"==typeof e.insert)e.insert(t);else{var r=s(e.insert||"head");if(!r)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");r.appendChild(t)}return t}var u,d=(u=[],function(e,t){return u[e]=t,u.filter(Boolean).join("\n")});function p(e,t,n,i){var r=n?"":i.css;if(e.styleSheet)e.styleSheet.cssText=d(t,r);else{var o=document.createTextNode(r),s=e.childNodes;s[t]&&e.removeChild(s[t]),s.length?e.insertBefore(o,s[t]):e.appendChild(o)}}var f=null,h=0;function m(t,e){var n,i,r;if(e.singleton){var o=h++;n=f=f||c(e),i=p.bind(null,n,o,!1),r=p.bind(null,n,o,!0)}else n=c(e),i=function(e,t,n){var i=n.css,r=n.media,o=n.sourceMap;if(r?e.setAttribute("media",r):e.removeAttribute("media"),o&&btoa&&(i+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),e.styleSheet)e.styleSheet.cssText=i;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(i))}}.bind(null,n,e),r=function(){var e;null!==(e=n).parentNode&&e.parentNode.removeChild(e)};return i(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;i(t=e)}else r()}}e.exports=function(n,e,i){return(i=i||{}).singleton||"boolean"==typeof i.singleton||(i.singleton=r()),n=i.base?n+i.base:n,e=e||[],a[n]||(a[n]=[]),l(n,e,i),function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){a[n]||(a[n]=[]),l(n,e,i);for(var t=e.length;t<a[n].length;t++)a[n][t]();a[n].length=e.length,0===a[n].length&&delete a[n]}}}},"./src/components/Ripple/index.less":function(e,t,n){var i=n("./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js"),r=n("./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js!./node_modules/style-resources-loader/lib/index.js?!./src/components/Ripple/index.less");"string"==typeof(r=r.__esModule?r.default:r)&&(r=[[e.i,r,""]]);var o={insert:"head",singleton:!1},s=(i(e.i,r,o),r.locals?r.locals:{});e.exports=s},"./src/components/Ripple/index.tsx":function(e,t,n){"use strict";n.r(t);var r=n("react"),o=n.n(r);function i(e,t,n,i,r){void 0===i&&(i=a),void 0===r&&(r=s),this.x=e,this.r=n,this.y=t,this.color=i,this.duration=r,this.initRipple()}var b=(i.prototype.initRipple=function(){this.rippleEle=document.createElementNS("http://www.w3.org/2000/svg","svg"),this.rippleEle.setAttribute("class","react-ripple"),this.circleEle=document.createElementNS("http://www.w3.org/2000/svg","circle"),this.circleEle.setAttribute("cx",this.x.toString()),this.circleEle.setAttribute("cy",this.y.toString()),this.circleEle.setAttribute("r","0"),this.circleEle.setAttribute("fill",this.color),this.animateEle=document.createElementNS("http://www.w3.org/2000/svg","animate"),this.animateEle.setAttribute("attributeName","r"),this.animateEle.setAttribute("dur",this.duration+"ms"),this.animateEle.setAttribute("fill","freeze"),this.animateEle.setAttribute("begin","indefinite"),this.animateEle.setAttribute("to",this.r.toString()),this.fadeoutAnimateEle=document.createElementNS("http://www.w3.org/2000/svg","animate"),this.fadeoutAnimateEle.setAttribute("attributeName","opacity"),this.fadeoutAnimateEle.setAttribute("dur",this.duration+"ms"),this.fadeoutAnimateEle.setAttribute("fill","freeze"),this.fadeoutAnimateEle.setAttribute("begin","indefinite"),this.fadeoutAnimateEle.setAttribute("to","0"),this.circleEle.appendChild(this.animateEle),this.circleEle.appendChild(this.fadeoutAnimateEle),this.rippleEle.appendChild(this.circleEle)},i);function g(e,t){return e.classList.contains(t)}var s=800,a="rgba(33, 33, 33, 0.3)";function l(f,h,m){void 0===h&&(h="rgba(0, 0, 0, 0.1)"),void 0===m&&(m=s);var v=0;f&&f.addEventListener("mousedown",function(e){var n;if(f){var t,i;t=f,i="react-ripple-wrapper",Array.isArray(i)?i.forEach(function(e){g(t,e)||t.classList.add(e)}):g(t,i)||t.classList.add(i);var r=f.getBoundingClientRect(),o=r.top,s=r.left,a=r.width,l=r.height,c=e.clientX-s,u=e.clientY-o,d=Math.ceil(Math.sqrt(Math.pow(a,2)+Math.pow(l,2)));n=new b(c,u,d,h,m),v++,f.appendChild(n.rippleEle),n.animateEle.beginElement();var p=function e(){f&&(f.removeEventListener("mouseup",e,!0),f.removeEventListener("mouseout",e,!0),n.fadeoutAnimateEle.beginElement(),setTimeout(function(){var t,e;v--,f.removeChild(n.rippleEle),0===v&&(t=f,e="react-ripple-wrapper",Array.isArray(e)?e.forEach(function(e){g(t,e)&&t.classList.remove(e)}):g(t,e)&&t.classList.remove(e))},m))};f.addEventListener("mouseup",p,!0),f.addEventListener("mouseout",p,!0)}})}n("./src/components/Ripple/index.less");function c(){return(c=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var i in n)Object.prototype.hasOwnProperty.call(n,i)&&(e[i]=n[i])}return e}).apply(this,arguments)}n.d(t,"useRipple",function(){return d});function u(e){var t=e.color,n=e.duration,i=Object(r.useRef)(null);return Object(r.useEffect)(function(){l(i.current,t,n)},[i]),o.a.createElement("div",c({className:"react-ripple-container",ref:i},e),e.children)}u.defaultProps={color:a,duration:s};var d=l;t.default=u},react:function(e,t){e.exports=n}},r.c=o,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var i in t)r.d(n,i,function(e){return t[e]}.bind(null,i));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="./",r(r.s="./src/components/Ripple/index.tsx");function r(e){if(o[e])return o[e].exports;var t=o[e]={i:e,l:!1,exports:{}};return i[e].call(t.exports,t,t.exports,r),t.l=!0,t.exports}var i,o});