react-color-picker-wheel/lib/ColorPicker.js

Color picker component for React.js using color wheel

module.exports=function(e){var r={};function t(n){if(r[n])return r[n].exports;var a=r[n]={i:n,l:!1,exports:{}};return e[n].call(a.exports,a,a.exports,t),a.l=!0,a.exports}return t.m=e,t.c=r,t.d=function(e,r,n){t.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:n})},t.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.t=function(e,r){if(1&r&&(e=t(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(t.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var a in e)t.d(n,a,function(r){return e[r]}.bind(null,a));return n},t.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return t.d(r,"a",r),r},t.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},t.p="",t(t.s=7)}([function(e,r,t){"use strict";e.exports=function(e){var r=[];return r.toString=function(){return this.map((function(r){var t=function(e,r){var t=e[1]||"",n=e[3];if(!n)return t;if(r&&"function"==typeof btoa){var a=(i=n,l=btoa(unescape(encodeURIComponent(JSON.stringify(i)))),s="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(l),"/*# ".concat(s," */")),o=n.sources.map((function(e){return"/*# sourceURL=".concat(n.sourceRoot||"").concat(e," */")}));return[t].concat(o).concat([a]).join("\n")}var i,l,s;return[t].join("\n")}(r,e);return r[2]?"@media ".concat(r[2]," {").concat(t,"}"):t})).join("")},r.i=function(e,t,n){"string"==typeof e&&(e=[[null,e,""]]);var a={};if(n)for(var o=0;o<this.length;o++){var i=this[o][0];null!=i&&(a[i]=!0)}for(var l=0;l<e.length;l++){var s=[].concat(e[l]);n&&a[s[0]]||(t&&(s[2]?s[2]="".concat(t," and ").concat(s[2]):s[2]=t),r.push(s))}},r}},function(e,r){e.exports=require("react")},function(e,r,t){"use strict";var n,a=function(){return void 0===n&&(n=Boolean(window&&document&&document.all&&!window.atob)),n},o=function(){var e={};return function(r){if(void 0===e[r]){var t=document.querySelector(r);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}e[r]=t}return e[r]}}(),i=[];function l(e){for(var r=-1,t=0;t<i.length;t++)if(i[t].identifier===e){r=t;break}return r}function s(e,r){for(var t={},n=[],a=0;a<e.length;a++){var o=e[a],s=r.base?o[0]+r.base:o[0],u=t[s]||0,c="".concat(s," ").concat(u);t[s]=u+1;var d=l(c),f={css:o[1],media:o[2],sourceMap:o[3]};-1!==d?(i[d].references++,i[d].updater(f)):i.push({identifier:c,updater:p(f,r),references:1}),n.push(c)}return n}function u(e){var r=document.createElement("style"),n=e.attributes||{};if(void 0===n.nonce){var a=t.nc;a&&(n.nonce=a)}if(Object.keys(n).forEach((function(e){r.setAttribute(e,n[e])})),"function"==typeof e.insert)e.insert(r);else{var i=o(e.insert||"head");if(!i)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");i.appendChild(r)}return r}var c,d=(c=[],function(e,r){return c[e]=r,c.filter(Boolean).join("\n")});function f(e,r,t,n){var a=t?"":n.media?"@media ".concat(n.media," {").concat(n.css,"}"):n.css;if(e.styleSheet)e.styleSheet.cssText=d(r,a);else{var o=document.createTextNode(a),i=e.childNodes;i[r]&&e.removeChild(i[r]),i.length?e.insertBefore(o,i[r]):e.appendChild(o)}}function h(e,r,t){var n=t.css,a=t.media,o=t.sourceMap;if(a?e.setAttribute("media",a):e.removeAttribute("media"),o&&btoa&&(n+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(o))))," */")),e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}var g=null,b=0;function p(e,r){var t,n,a;if(r.singleton){var o=b++;t=g||(g=u(r)),n=f.bind(null,t,o,!1),a=f.bind(null,t,o,!0)}else t=u(r),n=h.bind(null,t,r),a=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(t)};return n(e),function(r){if(r){if(r.css===e.css&&r.media===e.media&&r.sourceMap===e.sourceMap)return;n(e=r)}else a()}}e.exports=function(e,r){(r=r||{}).singleton||"boolean"==typeof r.singleton||(r.singleton=a());var t=s(e=e||[],r);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var n=0;n<t.length;n++){var a=l(t[n]);i[a].references--}for(var o=s(e,r),u=0;u<t.length;u++){var c=l(t[u]);0===i[c].references&&(i[c].updater(),i.splice(c,1))}t=o}}}},function(e,r,t){e.exports=t(10)()},function(e,r,t){"use strict";Object.defineProperty(r,"__esModule",{value:!0});r.hsToCoordinates=function(e,r){return{x:(Math.cos((e-90)*(Math.PI/180))*(r/100)+1)/2,y:(1-Math.sin((e-90)*(Math.PI/180))*(r/100)*-1)/2}},r.coordinatesToHS=function(e,r){var t=Math.atan2(2*r-1,2*e-1)*(180/Math.PI)+90;return t<0&&(t+=360),{h:t,s:Math.min(100,100*Math.sqrt(Math.pow(1-2*r,2)+Math.pow(2*e-1,2)))}},r.hexToRGB=function(e){var r=/^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(e);return r?{r:parseInt(r[1],16),g:parseInt(r[2],16),b:parseInt(r[3],16)}:null},r.rgbToHex=function(e,r,t){var n=function(e){var r=e.toString(16).toUpperCase();return 1===r.length?"0"+r:r};return"#"+n(e)+n(r)+n(t)},r.rgbToHsl=function(e,r,t){var n=e/255,a=r/255,o=t/255,i=Math.max(n,a,o),l=Math.min(n,a,o),s=0,u=0,c=(i+l)/2;if(i!==l){var d=i-l;switch(u=c>.5?d/(2-i-l):d/(i+l),i){case n:s=(a-o)/d+(a<o?6:0);break;case a:s=(o-n)/d+2;break;case o:s=(n-a)/d+4}}return s/=6,s*=360,u*=100,c*=100,{h:parseFloat(s.toFixed(2)),s:parseFloat(u.toFixed(2)),l:parseFloat(c.toFixed(2))}},r.hslToRgb=function(e,r,t){var n=r/100,a=t/100,o=(1-Math.abs(2*a-1))*n,i=o*(1-Math.abs(e/60%2-1)),l=a-o/2,s=0,u=0,c=0;return e>=0&&e<60?(s=o,u=i,c=0):e>=60&&e<120?(s=i,u=o,c=0):e>=120&&e<180?(s=0,u=o,c=i):e>=180&&e<240?(s=0,u=i,c=o):e>=240&&e<300?(s=i,u=0,c=o):e>=300&&e<360&&(s=o,u=0,c=i),{r:s=Math.abs(Math.round(255*(s+l))),g:u=Math.abs(Math.round(255*(u+l))),b:c=Math.abs(Math.round(255*(c+l)))}}},function(e,r,t){"use strict";e.exports=function(e,r){return r||(r={}),"string"!=typeof(e=e&&e.__esModule?e.default:e)?e:(/^['"].*['"]$/.test(e)&&(e=e.slice(1,-1)),r.hash&&(e+=r.hash),/["'() \t\n]/.test(e)||r.needQuotes?'"'.concat(e.replace(/"/g,'\\"').replace(/\n/g,"\\n"),'"'):e)}},function(e,r){e.exports="data:image/svg+xml,%3Csvg width='539' height='1728' viewBox='0 0 539 1728' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0 864C0 1208.07 164.948 1516.91 426.474 1728H521.959C265.33 1517.11 103.928 1211.23 103.928 870.877C103.928 523.05 272.496 211.227 539 0H426.474C164.948 211.088 0 519.929 0 864Z' fill='white'/%3E %3C/svg%3E"},function(e,r,t){"use strict";Object.defineProperty(r,"__esModule",{value:!0});var n=function(e,r){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,r){var t=[],n=!0,a=!1,o=void 0;try{for(var i,l=e[Symbol.iterator]();!(n=(i=l.next()).done)&&(t.push(i.value),!r||t.length!==r);n=!0);}catch(e){a=!0,o=e}finally{try{!n&&l.return&&l.return()}finally{if(a)throw o}}return t}(e,r);throw new TypeError("Invalid attempt to destructure non-iterable instance")},a=t(1),o=u(a);t(8);var i=u(t(3)),l=u(t(12)),s=t(4);function u(e){return e&&e.__esModule?e:{default:e}}var c=function(e){var r=e.size,t=e.initialColor,i=e.onChange,u=(0,a.useState)({hex:"#FF0000",rgb:{r:255,g:0,b:0},hsl:{h:0,s:100,l:50}}),c=n(u,2),d=c[0],f=c[1];(0,a.useEffect)((function(){if(/^#[0-9A-F]{6}$/i.test(t)){var e=t.toUpperCase(),r=(0,s.hexToRGB)(t),n=(0,s.rgbToHsl)(r.r,r.g,r.b);f({hex:e,rgb:r,hsl:n})}else if(Number.isInteger(t.r)&&Number.isInteger(t.g)&&Number.isInteger(t.b)){var a=(0,s.rgbToHex)(t.r,t.g,t.b),o=t,i=(0,s.rgbToHsl)(t.r,t.g,t.b);f({hex:a,rgb:o,hsl:i})}else f({hex:"#FF0000",rgb:{r:255,g:0,b:0},hsl:{h:0,s:100,l:50}})}),[]);var h=(0,a.useCallback)((function(e){var r=parseFloat((void 0===e.h?d.hsl.h:e.h).toFixed(2)),t=parseFloat((void 0===e.s?d.hsl.s:e.s).toFixed(2)),n=parseFloat((void 0===e.l?d.hsl.l:e.l).toFixed(2)),a=(0,s.hslToRgb)(r,t,n),o=(0,s.rgbToHex)(a.r,a.g,a.b);f({hex:o,rgb:a,hsl:{h:r,s:t,l:n}}),i({hex:o,rgb:a,hsl:{h:r,s:t,l:n}})}),[i,d.hsl]);return o.default.createElement("div",null,o.default.createElement("div",{className:"outerContainer",style:{height:r,width:r}},o.default.createElement(l.default,{color:d.hsl,size:r*(5/6),setColor:h}),o.default.createElement("div",{className:"pickedColorContainer"},o.default.createElement("div",{className:"pickedColor",style:{backgroundColor:d.hex}},o.default.createElement("div",{className:"hexValue",style:{fontSize:r/12,color:d.hsl.l>70?"black":"white"}},d.hex)))))};c.propTypes={size:i.default.number,initialColor:i.default.oneOfType([i.default.string,i.default.shape({h:i.default.number,s:i.default.number,l:i.default.number}),i.default.shape({r:i.default.number,g:i.default.number,b:i.default.number})]),onChange:i.default.func},c.defaultProps={size:100,initialColor:"#FF0000",onChange:function(){}},r.default=c},function(e,r,t){var n=t(2),a=t(9);"string"==typeof(a=a.__esModule?a.default:a)&&(a=[[e.i,a,""]]);var o={insert:"head",singleton:!1};n(a,o);e.exports=a.locals||{}},function(e,r,t){"use strict";t.r(r);var n=t(0),a=t.n(n)()(!1);a.push([e.i,".outerContainer{\r\n  display: flex;\r\n  flex-direction: column;\r\n  background-color: white;\r\n}\r\n\r\n.pickedColorContainer{\r\n  flex: 1;\r\n}\r\n\r\n.pickedColor{\r\n  border: 1px solid black;\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: 500px;\r\n  height: calc(88% - 2px);\r\n  margin: 2% 8.33% 0 8.33%;\r\n  background-color: red;\r\n}\r\n\r\n.hexValue{\r\n  font-family: serif;\r\n  font-weight: bold;\r\n  transition: color 0.5s;\r\n}\r\n",""]),r.default=a},function(e,r,t){"use strict";var n=t(11);function a(){}function o(){}o.resetWarningCache=a,e.exports=function(){function e(e,r,t,a,o,i){if(i!==n){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function r(){return e}e.isRequired=e;var t={array:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:r,element:e,elementType:e,instanceOf:r,node:e,objectOf:r,oneOf:r,oneOfType:r,shape:r,exact:r,checkPropTypes:o,resetWarningCache:a};return t.PropTypes=t,t}},function(e,r,t){"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},function(e,r,t){"use strict";Object.defineProperty(r,"__esModule",{value:!0});var n=function(e,r){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,r){var t=[],n=!0,a=!1,o=void 0;try{for(var i,l=e[Symbol.iterator]();!(n=(i=l.next()).done)&&(t.push(i.value),!r||t.length!==r);n=!0);}catch(e){a=!0,o=e}finally{try{!n&&l.return&&l.return()}finally{if(a)throw o}}return t}(e,r);throw new TypeError("Invalid attempt to destructure non-iterable instance")},a=t(1),o=u(a),i=u(t(3));t(13);var l=t(4),s=u(t(15));function u(e){return e&&e.__esModule?e:{default:e}}var c=function(e){var r=e.color,t=e.size,i=e.setColor,u=(0,a.useRef)(null),c=(0,a.useState)(!1),d=n(c,2),f=d[0],h=d[1];(0,a.useEffect)((function(){var e=function(e){u.current.contains(e.target)&&h(!0)},r=function(){h(!1)},n=function(e){f&&i((0,l.coordinatesToHS)((e.clientX-u.current.getBoundingClientRect().x)/t,(e.clientY-u.current.getBoundingClientRect().y)/t))};return window.addEventListener("mousemove",n),window.addEventListener("mousedown",e),window.addEventListener("mouseup",r),function(){window.removeEventListener("mousedown",e),window.removeEventListener("mouseup",r),window.removeEventListener("mousemove",n)}}),[f,i,t]);var g=(0,l.hsToCoordinates)(r.h,r.s),b=g.x,p=g.y,v=(0,a.useCallback)((function(e){i((0,l.coordinatesToHS)((e.clientX-e.currentTarget.getBoundingClientRect().x)/t,(e.clientY-e.currentTarget.getBoundingClientRect().y)/t))}),[i,t]);return o.default.createElement("div",{className:"colorWheel"},o.default.createElement(s.default,{className:"saturationBar",size:t,background:"linear-gradient(hsl("+r.h+",100%,"+r.l+"%),hsl("+r.h+",0%,"+r.l+"%))",onChange:function(e){return i({s:e})},value:r.s}),o.default.createElement("div",{ref:u,className:"wheel",onMouseDown:v,role:"button",tabIndex:-5,style:{margin:"0 "+t/10+"px"}},o.default.createElement("div",{className:"handle",style:{top:p*t,left:b*t,width:t/15,height:t/15,border:t/150+"px solid black"}})),o.default.createElement(s.default,{alignRight:!0,className:"lightnessBar",size:t,background:"linear-gradient(white,hsl("+r.h+","+r.s+"%,50%), black)",onChange:function(e){return i({l:e})},value:r.l}))};c.propTypes={color:i.default.shape({h:i.default.number,s:i.default.number,l:i.default.number}),size:i.default.number.isRequired,setColor:i.default.func.isRequired},c.defaultProps={color:{h:0,s:100,l:50}},r.default=c},function(e,r,t){var n=t(2),a=t(14);"string"==typeof(a=a.__esModule?a.default:a)&&(a=[[e.i,a,""]]);var o={insert:"head",singleton:!1};n(a,o);e.exports=a.locals||{}},function(e,r,t){"use strict";t.r(r);var n=t(0),a=t.n(n)()(!1);a.push([e.i,".colorWheel{\r\n  display: flex;\r\n  position: relative;\r\n  height: 83.33%;\r\n}\r\n\r\n.wheel{\r\n  cursor: pointer;\r\n  z-index: 1;\r\n  position: relative;\r\n  flex: 1;\r\n  height: 100%;\r\n  border-radius: 100%;\r\n  outline: none;\r\n  background: radial-gradient(circle at 50% 0,red,rgba(242,13,13,.8) 10%,rgba(230,26,26,.6) 20%,rgba(204,51,51,.4) 30%,rgba(166,89,89,.2) 40%,hsla(0,0%,50%,0) 50%),\r\n  radial-gradient(circle at 85.35533905932738% 14.644660940672622%,#ffbf00,rgba(242,185,13,.8) 10%,rgba(230,179,26,.6) 20%,rgba(204,166,51,.4) 30%,rgba(166,147,89,.2) 40%,hsla(45,0%,50%,0) 50%),\r\n  radial-gradient(circle at 100% 50%,#80ff00,rgba(128,242,13,.8) 10%,rgba(128,230,26,.6) 20%,rgba(128,204,51,.4) 30%,rgba(128,166,89,.2) 40%,hsla(90,0%,50%,0) 50%),\r\n  radial-gradient(circle at 85.35533905932738% 85.35533905932738%,#00ff40,rgba(13,242,70,.8) 10%,rgba(26,230,77,.6) 20%,rgba(51,204,89,.4) 30%,rgba(89,166,108,.2) 40%,hsla(135,0%,50%,0) 50%),\r\n  radial-gradient(circle at 50.00000000000001% 100%,#0ff,rgba(13,242,242,.8) 10%,rgba(26,230,230,.6) 20%,rgba(51,204,204,.4) 30%,rgba(89,166,166,.2) 40%,hsla(180,0%,50%,0) 50%),\r\n  radial-gradient(circle at 14.64466094067263% 85.35533905932738%,#0040ff,rgba(13,70,242,.8) 10%,rgba(26,77,230,.6) 20%,rgba(51,89,204,.4) 30%,rgba(89,108,166,.2) 40%,hsla(225,0%,50%,0) 50%),\r\n  radial-gradient(circle at 0 50.00000000000001%,#7f00ff,rgba(128,13,242,.8) 10%,rgba(128,26,230,.6) 20%,rgba(128,51,204,.4) 30%,rgba(128,89,166,.2) 40%,hsla(270,0%,50%,0) 50%),\r\n  radial-gradient(circle at 14.644660940672615% 14.64466094067263%,#ff00bf,rgba(242,13,185,.8) 10%,rgba(230,26,179,.6) 20%,rgba(204,51,166,.4) 30%,rgba(166,89,147,.2) 40%,hsla(315,0%,50%,0) 50%);\r\n}\r\n\r\n.handle{\r\n  border-radius: 100%;\r\n  background-color: white;\r\n  position: absolute;\r\n  transform: translate(-50%, -50%);\r\n}\r\n\r\n.saturationBar-level{\r\n  position: absolute;\r\n  height: 20px;\r\n  width: 20px;\r\n  border-radius: 100%;\r\n  transform: translate(0, -50%);\r\n  background-color: black;\r\n}\r\n\r\n.lightnessBar{\r\n  right: 0;\r\n}\r\n\r\n.lightnessBar-level{\r\n  position: absolute;\r\n  height: 20px;\r\n  width: 20px;\r\n  border-radius: 100%;\r\n  transform: translate(0, -50%);\r\n  background-color: black;\r\n}\r\n\r\n",""]),r.default=a},function(e,r,t){"use strict";Object.defineProperty(r,"__esModule",{value:!0});var n=function(e,r){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,r){var t=[],n=!0,a=!1,o=void 0;try{for(var i,l=e[Symbol.iterator]();!(n=(i=l.next()).done)&&(t.push(i.value),!r||t.length!==r);n=!0);}catch(e){a=!0,o=e}finally{try{!n&&l.return&&l.return()}finally{if(a)throw o}}return t}(e,r);throw new TypeError("Invalid attempt to destructure non-iterable instance")},a=t(1),o=l(a),i=l(t(3));function l(e){return e&&e.__esModule?e:{default:e}}t(16);var s=function(e){var r=e.alignRight,t=e.className,i=e.handleClassName,l=e.size,s=e.background,u=e.onChange,c=e.value,d=(0,a.useRef)(null),f=(0,a.useState)(!1),h=n(f,2),g=h[0],b=h[1];(0,a.useEffect)((function(){var e=function(e){d.current.contains(e.target)&&b(!0)},r=function(e){if(g){var r=e.clientY-d.current.getBoundingClientRect().y,t=100*(1-Math.min(l,Math.max(0,r))/l);u(parseFloat(t.toFixed(2)))}},t=function(){return b(!1)};return window.addEventListener("mousedown",e),window.addEventListener("mousemove",r),window.addEventListener("mouseup",t),function(){window.removeEventListener("mousedown",e),window.removeEventListener("mousemove",r),window.removeEventListener("mouseup",t)}}),[g,u,l]);var p=(0,a.useMemo)((function(){return{top:l*(.6*(1-Math.sin(Math.asin(3/4)*(c/50-1)))-.1),horizontal:.65*l*(1-Math.cos(Math.asin(3/4)*(c/50-1)))}}),[c,l]);return o.default.createElement("div",{ref:d,className:t,style:{position:"absolute",height:l,width:.281*l,transform:r?"scaleX(-1)":"",cursor:"grab"}},o.default.createElement("div",{className:"barBackground",style:{background:s,marginTop:l/20}}),o.default.createElement("div",{className:i,style:{top:p.top,left:p.horizontal,width:.05*l,height:.05*l,border:.005*l+"px solid black"}}))};s.propTypes={alignRight:i.default.bool,className:i.default.string,handleClassName:i.default.string,background:i.default.string,size:i.default.number.isRequired,onChange:i.default.func,value:i.default.number},s.defaultProps={alignRight:!1,className:"levelBar",handleClassName:"defaultHandle",background:"black",onChange:function(){},value:100},r.default=s},function(e,r,t){var n=t(2),a=t(17);"string"==typeof(a=a.__esModule?a.default:a)&&(a=[[e.i,a,""]]);var o={insert:"head",singleton:!1};n(a,o);e.exports=a.locals||{}},function(e,r,t){"use strict";t.r(r);var n=t(0),a=t.n(n),o=t(5),i=t.n(o),l=t(6),s=t.n(l),u=a()(!1),c=i()(s.a);u.push([e.i,".defaultHandle{\r\n    position: absolute;\r\n    box-sizing: border-box;\r\n    background-color: white;\r\n    border-radius: 100%;\r\n    transform: translate(0,-50%);\r\n}\r\n\r\n.barBackground{\r\n    height: 90%;\r\n    width: 100%;\r\n    mask-image: url("+c+");\r\n    -webkit-mask-image: url("+c+");\r\n    mask-size: contain;\r\n    -webkit-mask-size: contain;\r\n}\r\n",""]),r.default=u}]);