react-scratch-ticket/dist/index.esm.js

This is a scratch ticket component, basic on React

import*as e from"react";var t={d:(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},n={};t.d(n,{Y:()=>l});const r=(o={default:()=>e.default,forwardRef:()=>e.forwardRef,useCallback:()=>e.useCallback,useEffect:()=>e.useEffect,useImperativeHandle:()=>e.useImperativeHandle,useRef:()=>e.useRef,useState:()=>e.useState},a={},t.d(a,o),a);var o,a;function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=Array(t);n<t;n++)r[n]=e[n];return r}const s=function(e){var t,n,o=e.brushSize,a=e.brushType,s=e.finishPercent,l=e.maskingLayerImg,c=e.maskingLayerColor,u=e.animationDuration,d=e.onInitDone,f=e.onComplete,v=e.onResetDone,h=(0,r.useRef)(null),m=(0,r.useRef)(!1),p=(0,r.useRef)(!1),g=(t=(0,r.useState)(!1),n=2,function(e){if(Array.isArray(e))return e}(t)||function(e,t){var n=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=n){var r,o,a,i,s=[],l=!0,c=!1;try{if(a=(n=n.call(e)).next,0===t){if(Object(n)!==n)return;l=!1}else for(;!(l=(r=a.call(n)).done)&&(s.push(r.value),s.length!==t);l=!0);}catch(e){c=!0,o=e}finally{try{if(!l&&null!=n.return&&(i=n.return(),Object(i)!==i))return}finally{if(c)throw o}}return s}}(t,n)||function(e,t){if(e){if("string"==typeof e)return i(e,t);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?i(e,t):void 0}}(t,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()),y=g[0],C=g[1],b=(0,r.useCallback)((function(){var e=h.current;if(e){var t=e.getContext("2d");if(t){var n=e.width,r=e.height;if(u>0){var o=1,a=function(){t.clearRect(0,0,n,r),t.fillStyle="rgba(255, 255, 255, ".concat(o,")"),t.fillRect(0,0,n,r),(o-=.05)>0?requestAnimationFrame(a):(t.clearRect(0,0,n,r),t.fillStyle="transparent",t.fillRect(0,0,n,r))};a()}else t.clearRect(0,0,n,r),t.fillStyle="transparent",t.fillRect(0,0,n,r)}else console.error("Canvas 2d is not supported or not found")}else console.error("Canvas is not supported or not found")}),[u]),R=(0,r.useCallback)((function(e,t,n){if(!m.current){for(var r=e.getImageData(0,0,t,n),o=0,a=0;a<r.data.length;a+=4)0===r.data[a+3]&&o++;o/(t*n)*100>100-s&&(m.current=!0,b(),f())}}),[b,s,f]),I=(0,r.useCallback)((function(e){var t=e.e,n=e.canvas,r=e.ctx;r.beginPath();var i=n.getBoundingClientRect(),s=i.left,l=i.top,c=0,u=0;t instanceof TouchEvent?(c=t.touches[0].clientX-s,u=t.touches[0].clientY-l):(c=t.clientX-s,u=t.clientY-l),r.globalCompositeOperation="destination-out",r.closePath(),"circle"===a?r.arc(c,u,o,0,2*Math.PI):r.clearRect(c-o,u-o,2*o,2*o),r.fill(),R(r,n.width,n.height)}),[o,a,R]),E=(0,r.useCallback)((function(){var e=(arguments.length>0&&void 0!==arguments[0]?arguments[0]:{}).reset,t=void 0!==e&&e,n=h.current;if(n){var r=n.getContext("2d");if(r){var o=n.width,a=n.height;if(r.globalCompositeOperation="source-over",r.fillStyle=l?"#ddd":c,r.fillRect(0,0,o,a),l){var i=new Image;i.crossOrigin="anonymous",i.src=l,i.onload=function(){r.drawImage(i,0,0,o,a),C(!0)}}else r.fillStyle=c,r.fillRect(0,0,o,a),C(!0);t&&(m.current=!1,v())}else console.error("Canvas 2d is not supported or not found")}else console.error("Canvas is not supported or not found")}),[c,l]);return(0,r.useEffect)((function(){var e=h.current;if(e){var t=e.getContext("2d");if(t){E();var n=!1,r=function(){y&&(n=!0)},o=function(){return n=!1},a=function(r){n&&I({e:r,canvas:e,ctx:t})},i=function(r){n&&r.touches.length>0&&I({e:r.touches[0],canvas:e,ctx:t})};return e.addEventListener("mousedown",r),e.addEventListener("touchstart",r),e.addEventListener("mouseup",o),e.addEventListener("touchend",o),e.addEventListener("mousemove",a),e.addEventListener("touchmove",i),p.current||(d(),p.current=!0),function(){e.removeEventListener("mousedown",r),e.removeEventListener("touchstart",r),e.removeEventListener("mouseup",o),e.removeEventListener("touchend",o),e.removeEventListener("mousemove",a),e.removeEventListener("touchmove",i)}}console.error("Canvas 2d is not supported or not found")}else console.error("Canvas is not supported or not found")}),[E,c,l,I,d,y]),{isInitialized:y,reactScratchTicketRef:h,resetHandler:function(){h.current?y?(C(!1),E({reset:!0})):console.error("The scratch ticket is not initialized"):console.error("Canvas is not supported or not found")},cleanCardHandler:function(){h.current?y?b():console.error("The scratch ticket is not initialized"):console.error("Canvas is not supported or not found")}}},l=(0,r.forwardRef)((function(e,t){var n=e.width,o=e.height,a=e.children,i=e.brushType,l=void 0===i?"circle":i,c=e.brushSize,u=void 0===c?20:c,d=e.finishPercent,f=void 0===d?50:d,v=e.maskingLayerImg,h=e.maskingLayerColor,m=void 0===h?"#ddd":h,p=e.animationDuration,g=void 0===p?50:p,y=e.containerClassName,C=e.childrenCenter,b=void 0!==C&&C,R=e.onComplete,I=void 0===R?function(){}:R,E=e.onInitDone,S=void 0===E?function(){}:E,k=e.onResetDone,L=s({brushSize:u,brushType:l,finishPercent:f,maskingLayerImg:v,maskingLayerColor:m,animationDuration:g,onComplete:I,onInitDone:S,onResetDone:void 0===k?function(){}:k}),w=L.isInitialized,x=L.reactScratchTicketRef,D=L.resetHandler,T=L.cleanCardHandler;return(0,r.useImperativeHandle)(t,(function(){return{reset:D,clearCard:T}})),r.default.createElement("div",{className:y,style:{width:n,height:o,position:"relative",display:b?"flex":"block",alignItems:b?"center":"initial",justifyContent:b?"center":"initial"}},r.default.createElement("canvas",{ref:x,width:n,height:o,style:{position:"absolute",left:0,zIndex:1}}),w?a:null)}));var c=n.Y;export{c as ReactScratchTicket};