react-dust-effect/dist/index.js

image dust effect for react

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):(e=e||self).reactDustEffect=t(e.React,e.PropTypes)}(this,function(d,e){"use strict";var h="default"in d?d.default:d;function v(){return(v=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function t(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),r.push.apply(r,n)}return r}function g(a){for(var e=1;e<arguments.length;e++){var o=null!=arguments[e]?arguments[e]:{};e%2?t(Object(o),!0).forEach(function(e){var t,r,n;t=a,n=o[r=e],r in t?Object.defineProperty(t,r,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[r]=n}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(o)):t(Object(o)).forEach(function(e){Object.defineProperty(a,e,Object.getOwnPropertyDescriptor(o,e))})}return a}function D(e,t){if(null==e)return{};var r,n,a=function(e,t){if(null==e)return{};var r,n,a={},o=Object.keys(e);for(n=0;n<o.length;n++)r=o[n],0<=t.indexOf(r)||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(n=0;n<o.length;n++)r=o[n],0<=t.indexOf(r)||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}function w(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(!(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)))return;var r=[],n=!0,a=!1,o=void 0;try{for(var i,c=e[Symbol.iterator]();!(n=(i=c.next()).done)&&(r.push(i.value),!t||r.length!==t);n=!0);}catch(e){a=!0,o=e}finally{try{n||null==c.return||c.return()}finally{if(a)throw o}}return r}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}function O(t,r,n,a){return function(e){for(var t=e.reduce(function(e,t){return e+t},0),r=Math.random()*t,n=0,a=0;a<e.length;a+=1)if(r<(n+=e[a]))return a;throw new RangeError("Random value:".concat(r," is over the total Weight:").concat(n))}(Array.from(Array(n).keys()).map(function(e){return a(t,r,e,n)}))}function T(a,e){Object.entries(e).forEach(function(e){var t=w(e,2),r=t[0],n=t[1];Array.isArray(n)?a.style[r]=n.join(", "):a.style[r]=n})}e=e&&e.hasOwnProperty("default")?e.default:e;var E="DustEffect_wrapper__1Ej4k",j="DustEffect_partialCanvas__GJ6X8",P="DustEffect_hide__34c9T";!function(e,t){void 0===t&&(t={});var r=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===r&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}(".DustEffect_wrapper__1Ej4k {\n  position: relative;\n  display: inline-block; }\n\n.DustEffect_partialCanvas__GJ6X8 {\n  position: absolute;\n  top: 0;\n  left: 0;\n  pointer-events: none;\n  width: 100%;\n  height: 100%; }\n\n.DustEffect_hide__34c9T {\n  display: none; }\n");var x=4,_={canvasNum:25,baseDuration:800,outerTimeoutDelay:70,innerTimeoutDelay:110,translateX:100,translateY:-100,rotateMin:-15,rotateMax:15,blur:1,distributionFunc:function(e,t,r,n){return Math.pow(n-Math.abs(t*n-r),3)}};function M(e,t,r){for(var n=t.length,a=e.getContext("2d"),i=e.width,c=e.height,o=a.getImageData(0,0,i,c),u=o.data,s=function(e,t){for(var r=[],n=0;n<t;n+=1){for(var a=new Uint8ClampedArray(e.data),o=0;o<a.length;o+=1)a[o]=0;r.push(a)}return r}(o,n),l=0;l<u.length;l+=x)for(var f=Math.floor(l/x),m=(f%i+1)/i,p=(Math.floor(f/i)+1)/c,b=s[O(m,p,n,r)],y=0;y<x;y+=1)b[l+y]=u[l+y];t.forEach(function(e,t){var r,n,a,o;r=e.current,n=s[t],a=i,o=c,r&&(r.width=a,r.height=o,r.getContext("2d").putImageData(new window.ImageData(n,a,o),0,0))})}function r(e){var t=e.src,r=e.show,a=e.option,n=e.imgProps,o=D(e,["src","show","option","imgProps"]);a=g({},_,{},a);var i=w(d.useState(!1),2),c=i[0],u=i[1],s=d.useRef(null),l=d.useRef(null),f=d.useRef(null),m=d.useRef(Array.from({length:a.canvasNum},function(){return h.createRef()})),p=d.useCallback(function(){f.current&&T(f.current,{transition:["opacity ".concat(a.baseDuration,"ms cubic-bezier(0.55, 0.085, 0.68, 0.53)"),"filter ".concat(a.baseDuration,"ms cubic-bezier(0.55, 0.085, 0.68, 0.53)")],filter:"blur(".concat(a.blur,"px)"),opacity:"0",pointerEvents:"none"}),m.current.forEach(function(e,t){var r=a.outerTimeoutDelay*t,n=a.canvasNum-t-1;e.current&&T(e.current,{transition:["filter ".concat(a.baseDuration,"ms cubic-bezier(0.25, 0.46, 0.45, 0.94) ").concat(r,"ms"),"transform ".concat(a.baseDuration+a.innerTimeoutDelay*t,"ms cubic-bezier(0.55, 0.085, 0.68, 0.53) ").concat(r,"ms"),"opacity ".concat(a.baseDuration+a.innerTimeoutDelay*t,"ms cubic-bezier(0.755, 0.05, 0.855, 0.06) ").concat(r,"ms")],filter:"blur(".concat(a.blur,"px)"),opacity:"0",transform:"rotate(".concat(function(e,t){var r=1<arguments.length&&void 0!==t?t:0;return Math.floor(Math.random()*(e-r+1)+r)}(a.rotateMax*Math.pow(n/(a.canvasNum-1),.5),a.rotateMin*Math.pow(n/(a.canvasNum-1),.5)),"deg) translate(").concat(a.translateX,"px, ").concat(a.translateY,"px)")})})},[a.baseDuration,a.innerTimeoutDelay,a.outerTimeoutDelay,a.innerTimeoutDelay]),b=d.useCallback(function(){if(f.current){var e=a.innerTimeoutDelay*(a.canvasNum-1);T(f.current,{transition:["opacity ".concat(a.baseDuration,"ms cubic-bezier(0.25, 0.46, 0.45, 0.94) ").concat(e,"ms"),"filter ".concat(a.baseDuration,"ms cubic-bezier(0.25, 0.46, 0.45, 0.94) ").concat(e,"ms")],filter:"",opacity:"1",pointerEvents:"auto"})}m.current.forEach(function(e,t){var r=a.canvasNum-t-1;e.current&&T(e.current,{transition:["filter ".concat(a.baseDuration,"ms cubic-bezier(0.55, 0.085, 0.68, 0.53) ").concat(a.innerTimeoutDelay*r+(a.innerTimeoutDelay-a.outerTimeoutDelay)*t,"ms"),"transform ".concat(a.baseDuration+(a.innerTimeoutDelay-a.outerTimeoutDelay)*t,"ms cubic-bezier(0.25, 0.46, 0.45, 0.94) ").concat(a.innerTimeoutDelay*r,"ms"),"opacity ".concat(a.baseDuration+(a.innerTimeoutDelay-a.outerTimeoutDelay)*t,"ms cubic-bezier(0.23, 1, 0.32, 1) ").concat(a.innerTimeoutDelay*r,"ms")],filter:"",opacity:"1",transform:""})})},[a.baseDuration,a.innerTimeoutDelay,a.outerTimeoutDelay,a.innerTimeoutDelay]),y=d.useCallback(function(e){var t=l.current;t&&(t.width=e.target.clientWidth,t.height=e.target.clientHeight,t.getContext("2d").drawImage(e.target,0,0,t.width,t.height),M(t,m.current,a.distributionFunc),u(!0));n.onLoad&&n.onLoad(e)},[n.onLoad]);return d.useEffect(function(){c&&(r?b():p())},[r]),h.createElement(h.Fragment,null,h.createElement("div",v({className:E,ref:s},o),h.createElement("img",v({src:t,crossOrigin:"Anonymous",ref:f,alt:"DustEffectBaseImage"},n,{onLoad:y})),!c&&h.createElement("canvas",{ref:l,className:P}),m.current.map(function(e,t){return h.createElement("canvas",{className:j,key:"partialCavans".concat(t),ref:e})})))}return r.defaultProps={imgProps:{},option:_},r.propTypes={show:e.bool.isRequired,src:e.string.isRequired,imgProps:e.object,option:e.shape({canvasNum:e.number,baseDuration:e.number,outerTimeoutDelay:e.number,innerTimeoutDelay:e.number,translateX:e.number,translateY:e.number,rotateMin:e.number,rotateMax:e.number,blur:e.number,distributionFunc:e.func})},r});