@mankibusiness/react-custom-roulette/dist/react-custom-roulette.umd.js

Customizable React roulette wheel with spinning animation

!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports.ReactCustomRoulette=t(require("react")):e.ReactCustomRoulette=t(e.react)}(this,function(r){return n=[function(e,t){e.exports=r},function(e,t,r){var n=r(9),o=r(10),i=r(3),a=r(11);e.exports=function(e,t){return n(e)||o(e,t)||i(e,t)||a()},e.exports.default=e.exports,e.exports.__esModule=!0},function(e,t){e.exports=function(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n},e.exports.default=e.exports,e.exports.__esModule=!0},function(e,t,r){var n=r(2);e.exports=function(e,t){if(e){if("string"==typeof e)return n(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Map"===(r="Object"===r&&e.constructor?e.constructor.name:r)||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?n(e,t):void 0}},e.exports.default=e.exports,e.exports.__esModule=!0},function(e,t){e.exports=function(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e},e.exports.default=e.exports,e.exports.__esModule=!0},function(e,t,r){var n=r(6),o=r(7),i=r(3),a=r(8);e.exports=function(e){return n(e)||o(e)||i(e)||a()},e.exports.default=e.exports,e.exports.__esModule=!0},function(e,t,r){var n=r(2);e.exports=function(e){if(Array.isArray(e))return n(e)},e.exports.default=e.exports,e.exports.__esModule=!0},function(e,t){e.exports=function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)},e.exports.default=e.exports,e.exports.__esModule=!0},function(e,t){e.exports=function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")},e.exports.default=e.exports,e.exports.__esModule=!0},function(e,t){e.exports=function(e){if(Array.isArray(e))return e},e.exports.default=e.exports,e.exports.__esModule=!0},function(e,t){e.exports=function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,i=[],a=!0,c=!1;try{for(r=r.call(e);!(a=(n=r.next()).done)&&(i.push(n.value),!t||i.length!==t);a=!0);}catch(e){c=!0,o=e}finally{try{a||null==r.return||r.return()}finally{if(c)throw o}}return i}},e.exports.default=e.exports,e.exports.__esModule=!0},function(e,t){e.exports=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.")},e.exports.default=e.exports,e.exports.__esModule=!0},function(e,t,r){"use strict";r.r(t),r.d(t,"Wheel",function(){return i});function T(e,t,r){return Math.min(Math.max(e,+r),t)}function G(e){var t=e.data,r=e.initialRotation,n=e.outerBorderColor,o=e.outerBorderWidth,i=e.innerRadius,a=e.innerBorderColor,c=e.innerBorderWidth,u=e.radiusLineColor,s=e.radiusLineWidth,l=e.fontSize,d=e.fontFamily,f=e.perpendicularText,p=e.textDistance,e=e.textWrapDistance,h=Object(J.createRef)(),b={initialRotation:r,outerBorderColor:n,outerBorderWidth:o,innerRadius:i,innerBorderColor:a,innerBorderWidth:c,radiusLineColor:u,radiusLineWidth:s,fontSize:l,fontFamily:d,perpendicularText:f,textDistance:p,textWrapDistance:e};return Object(J.useEffect)(function(){!function(e,t,r){var n=t.length,o=r.initialRotation,i=r.outerBorderColor,a=r.outerBorderWidth,c=r.innerRadius,u=r.innerBorderColor,s=r.innerBorderWidth,l=r.radiusLineColor,d=r.radiusLineWidth,f=r.fontSize,p=r.fontFamily,h=r.perpendicularText,b=r.textDistance,y=r.textWrapDistance;a*=2,s*=2,d*=2,f*=2;var x=e.current;if(null!=x&&x.getContext("2d")){var m=x.getContext("2d");m.clearRect(0,0,x.width,x.height),m.strokeStyle="transparent",m.lineWidth=0;var g=Math.PI/(n/2),v=(o-45)*(Math.PI/180),O=x.width/2-10,S=O*T(0,100,b)/100,A=O*T(0,100,c)/100,W=x.width/2,j=x.height/2;m.font="bold ".concat(f,"px ").concat(p);for(var C=0;C<t.length;C++){var P=v+C*g,L=t[C].style;m.fillStyle=L&&L.backgroundColor,m.beginPath(),m.arc(W,j,O,P,P+g,!1),m.arc(W,j,A,P+g,P,!0),m.stroke(),m.fill(),m.save(),m.strokeStyle=d<=0?"transparent":l,m.lineWidth=d;for(var w=0;w<t.length;w++){var M=v+w*g;m.beginPath(),m.moveTo(W+(1+A)*Math.cos(M),j+(1+A)*Math.sin(M)),m.lineTo(W+(O-1)*Math.cos(M),j+(O-1)*Math.sin(M)),m.closePath(),m.stroke()}m.strokeStyle=a<=0?"transparent":i,m.lineWidth=a,m.beginPath(),m.arc(W,j,O-m.lineWidth/2,0,2*Math.PI),m.closePath(),m.stroke(),m.strokeStyle=s<=0?"transparent":u,m.lineWidth=s,m.beginPath(),m.arc(W,j,A+m.lineWidth/2-1,0,2*Math.PI),m.closePath(),m.stroke();var R=function(e,t,r){for(var n=t.split(" "),o=[],i=n[0],a=1;a<n.length;a++){var c=n[a];e.measureText(i+" "+c).width<r?i+=" "+c:(o.push(i),i=c)}return o.push(i),o}(m,t[C].text,y||.6*W),E=-.1*(R.length-1)+.05*(t[C].subtext?1:0);m.translate(W+Math.cos(P+(g+E)/2)*S,j+Math.sin(P+(g+E)/2)*S);P=h?P+g/2+Math.PI/2:P+g/2;m.rotate(P),m.fillStyle=L&&L.textColor,m.textAlign="right";for(var k=0;k<R.length;k++)m.fillText(R[k],x.width/7,f/2.7+k*f);t[C].subtext&&(P=t[C].subtext,m.fillStyle=L&&L.subtextColor,m.font="bold ".concat(f/1.5,"px ").concat(p),m.fillText(P,x.width/7,-f/2.7-10)),m.restore()}}}(h,t,b)},[h,t,b]),U.a.createElement("canvas",{className:"rcr-canvas",ref:h,width:"900",height:"900"})}var t=r(4),n=r.n(t),t=r(5),z=r.n(t),t=r(1),F=r.n(t),J=r(0),U=r.n(J),X=["darkgrey","lightgrey"],q=["black"];function o(t,e){var r,n=Object.keys(t);return Object.getOwnPropertySymbols&&(r=Object.getOwnPropertySymbols(t),e&&(r=r.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),n.push.apply(n,r)),n}function Q(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?o(Object(r),!0).forEach(function(e){n()(t,e,r[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):o(Object(r)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))})}return t}var i=function(e){var r=e.mustStartSpinning,n=e.prizeNumber,o=e.data,t=e.onStopSpinning,i=void 0===t?function(){return null}:t,a=e.initialRotation,c=void 0===a?45:a,u=e.cursorOffset,s=void 0===u?43:u,l=e.width,d=void 0===l?"500px":l,f=e.height,p=void 0===f?"500px":f,h=e.customSelectorImage,b=void 0===h?"":h,y=e.backgroundColors,x=void 0===y?X:y,m=e.textColors,g=void 0===m?q:m,v=e.outerBorderColor,O=void 0===v?"black":v,S=e.outerBorderWidth,A=void 0===S?5:S,W=e.innerRadius,j=void 0===W?0:W,C=e.innerBorderColor,t=void 0===C?"black":C,a=e.innerBorderWidth,u=void 0===a?0:a,l=e.radiusLineColor,f=void 0===l?"black":l,h=e.radiusLineWidth,y=void 0===h?5:h,m=e.fontSize,v=void 0===m?20:m,S=e.fontFamily,W=void 0===S?"Helvetica, Arial":S,C=e.perpendicularText,a=void 0!==C&&C,l=e.textDistance,h=void 0===l?60:l,m=e.textWrapDistance,S=Object(J.useState)(z()(o)),C=F()(S,2),l=C[0],P=C[1],e=Object(J.useState)(0),S=F()(e,2),C=S[0],L=S[1],e=Object(J.useState)(0),S=F()(e,2),w=S[0],M=S[1],e=Object(J.useState)(!1),S=F()(e,2),R=S[0],E=S[1],e=Object(J.useState)(!1),S=F()(e,2),k=S[0],T=S[1],e=Object(J.useState)(!1),S=F()(e,2),B=S[0],K=S[1],e=Object(J.useState)(!1),S=F()(e,2),e=S[0],N=S[1],D=Object(J.useRef)(!1);Object(J.useEffect)(function(){for(var e,t=o.length,r=[{text:"",subtext:""}],n=0;n<t;n++)r[n]=Q(Q({},o[n]),{},{style:{backgroundColor:(null===(e=o[n].style)||void 0===e?void 0:e.backgroundColor)||x[n%x.length],textColor:(null===(e=o[n].style)||void 0===e?void 0:e.textColor)||g[n%g.length],subtextColor:(null===(e=o[n].style)||void 0===e?void 0:e.subtextColor)||(null===(e=o[n].style)||void 0===e?void 0:e.textColor)||g[n%g.length]}});P([].concat(r)),N(!0)},[o,x,g]),Object(J.useEffect)(function(){var e,t;r&&!B&&(K(!0),H(),e=o.length,t=(t=360/e)*(e-n)-(s+t/2)+t/2,M(e/2<e-n?t-360:t))},[r]),Object(J.useEffect)(function(){k&&(K(!1),L(w))},[k]);var H=function(){E(!0),T(!1),D.current=!0,setTimeout(function(){D.current&&(D.current=!1,E(!1),T(!0),i())},6350)};return e?U.a.createElement("div",{className:"rcr-roulette-container",style:{width:d,height:p}},U.a.createElement("div",{className:"rcr-aspect-container"},U.a.createElement("div",{className:["rcr-rotation-container",R?"rcr-started-spinning":""].join(" ")},U.a.createElement(G,{data:l,initialRotation:c,outerBorderColor:O,outerBorderWidth:A,innerRadius:j,innerBorderColor:t,innerBorderWidth:u,radiusLineColor:f,radiusLineWidth:y,fontSize:v,fontFamily:W,perpendicularText:a,textDistance:h,textWrapDistance:m})),U.a.createElement("img",{className:"rcr-roulette-selector-image",src:b||"data:image/png;base64,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",alt:"roulette-static"})),U.a.createElement("style",null,"\n        .rcr-rotation-container {\n          transform: rotate(".concat(C,"deg);\n        }\n\n        .rcr-rotation-container.rcr-started-spinning {\n          animation: \n            rcr-spin ").concat(2.65,"s\n              cubic-bezier(0.71, -0.29, 0.96, 0.9) 0s 1 normal forwards running,\n            rcr-stop-spin ").concat(4,"s\n              cubic-bezier(.4, .42, .02, 1.03)\n              ").concat(2.65,"s\n              1 normal forwards running;\n        }\n      \n        @keyframes rcr-spin {\n          from {\n            transform: rotate(").concat(C,"deg);\n          }\n          to {\n            transform: rotate(").concat(C+360,"deg);\n          }\n        }\n        @keyframes rcr-stop-spin {\n          from {\n            transform: rotate(").concat(C,"deg);\n          }\n          to {\n            transform: rotate(").concat(1440+w,"deg);\n          }\n        }\n      "))):null}}],i={},o.m=n,o.c=i,o.d=function(e,t,r){o.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(t,e){if(1&e&&(t=o(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(o.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var n in t)o.d(r,n,function(e){return t[e]}.bind(null,n));return r},o.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(t,"a",t),t},o.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},o.p="",o(o.s=12);function o(e){if(i[e])return i[e].exports;var t=i[e]={i:e,l:!1,exports:{}};return n[e].call(t.exports,t,t.exports,o),t.l=!0,t.exports}var n,i});