react-color-selector
Version:
## **Description:** **react-color-selector** is a very useful and easy to use color picker, no external dependency is needed for this. You can chagne theme of it's color, by simply editing css variables. One of the best featur is you can use *any number
1 lines • 15.5 kB
JavaScript
module.exports=function(e){var t={};function r(n){if(t[n])return t[n].exports;var a=t[n]={i:n,l:!1,exports:{}};return e[n].call(a.exports,a,a.exports,r),a.l=!0,a.exports}return r.m=e,r.c=t,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(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var a in e)r.d(n,a,function(t){return e[t]}.bind(null,a));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=0)}([function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var n,a=function(e,t){if(Array.isArray(e))return e;if(Symbol.iterator in Object(e))return function(e,t){var r=[],n=!0,a=!1,o=void 0;try{for(var i,l=e[Symbol.iterator]();!(n=(i=l.next()).done)&&(r.push(i.value),!t||r.length!==t);n=!0);}catch(e){a=!0,o=e}finally{try{!n&&l.return&&l.return()}finally{if(a)throw o}}return r}(e,t);throw new TypeError("Invalid attempt to destructure non-iterable instance")},o=r(1),i=(n=o)&&n.__esModule?n:{default:n};r(2);t.default=function(e){var t=(0,o.useState)("#ffffff"),r=a(t,2),n=r[0],l=r[1],c=(0,o.useState)(n.substring(1)),s=a(c,2),u=s[0],p=s[1],d=(0,o.useRef)(null),f=(0,o.useState)(),h=a(f,2),x=h[0],b=h[1],g=(0,o.useState)(),m=a(g,2),v=m[0],y=m[1],_=(0,o.useState)(0),w=a(_,2),k=w[0],S=w[1],E=(0,o.useState)(0),C=a(E,2),M=C[0],N=C[1],j=(0,o.useState)([]),O=a(j,2),T=O[0],P=O[1],R=(0,o.useState)(0),I=a(R,2),A=I[0],L=I[1],U=(0,o.useState)(0),F=a(U,2),q=F[0],z=F[1],B=(0,o.useState)({w:0,h:0,t:0,l:0}),D=a(B,2),H=D[0],J=D[1],Y=e.pallet.view,W=(0,o.useState)(e.pallet.view),X=a(W,2),G=X[0],K=X[1],Q=(0,o.useState)(e.pallet.col),V=a(Q,2),Z=V[0],$=V[1],ee=(0,o.useState)(e.pallet.row),te=a(ee,2),re=te[0],ne=te[1];(0,o.useEffect)((function(){return b(x=d.current),y(v=x.getContext("2d")),le(G),function(){x.removeEventListener("click",ce,!1)}}),[]);var ae=function(e,t,r){return e=e.toString(16),t=t.toString(16),r=r.toString(16),1==e.length&&(e="0"+e),1==t.length&&(t="0"+t),1==r.length&&(r="0"+r),"#"+e+t+r},oe=function(e,t){return function(e,t,r){t/=100,r/=100;var n=(1-Math.abs(2*r-1))*t,a=n*(1-Math.abs(e/60%2-1)),o=r-n/2,i=0,l=0,c=0;return 0<=e&&e<60?(i=n,l=a,c=0):60<=e&&e<120?(i=a,l=n,c=0):120<=e&&e<180?(i=0,l=n,c=a):180<=e&&e<240?(i=0,l=a,c=n):240<=e&&e<300?(i=a,l=0,c=n):300<=e&&e<360&&(i=n,l=0,c=a),i=Math.round(255*(i+o)).toString(16),l=Math.round(255*(l+o)).toString(16),c=Math.round(255*(c+o)).toString(16),1==i.length&&(i="0"+i),1==l.length&&(l="0"+l),1==c.length&&(c="0"+c),"#"+i+l+c}(Math.floor(e/re*360),100,Math.floor(100*(1-(t+1)/(Z+1))))};function ie(e,t,r,n,a,o){var i=this;this.color=n,this.x=e*a,this.y=t*o,this.unit_x=a,this.unit_y=o,this.show=function(){if(r.beginPath(),r.fillStyle=n,r.fillRect(i.x,i.y+i.unit_y,i.unit_x,i.unit_y),0===i.y){var t=parseInt(255-255/Z*e);r.fillStyle="rgb("+t+", "+t+", "+t+")",r.fillRect(i.x,i.y,i.unit_x,i.unit_y)}},this.clicked=function(t,r){if(t>=i.x&&t<=i.x+i.unit_x&&r>=i.y+i.unit_y&&r<=i.y+2*i.unit_y)return{color:i.color,gs:!1};if(t>=i.x&&t<=i.x+i.unit_x&&r>=0&&r<=i.unit_y){var n=parseInt(255-255/Z*e);return{color:ae(n,n,n),gs:!0}}},this.hover=function(e,t){e>=i.x&&e<=i.x+i.unit_x&&t>=i.y+i.unit_y&&t<=i.y+i.unit_y&&(r.lineWidth="0.5",r.strokeStyle="#ffffff",r.strokeRect(i.x,i.y,i.unit_x,i.unit_y))}}var le=function(t){K(G="both"===t?"palette":t),"palette"===G||"both"===G?(x.width=e.pallet.width,x.height=e.pallet.height,S(k=e.pallet.width),N(M=e.pallet.height)):e.pallet.height<e.pallet.width?(x.width=e.pallet.height,x.height=e.pallet.height,S(k=e.pallet.height+30),N(M=e.pallet.height+30)):(x.width=e.pallet.width,x.height=e.pallet.width,S(k=e.pallet.width+30),N(M=e.pallet.width+30)),x.addEventListener("click",ce,!1),function(){if("palette"===G||"both"===G){P(T=[]);for(var e=[],t=(x.height,x.width/Z),r=x.height/re,n=0;n<re;n++)for(var a=0;a<Z;a++){var o=new ie(a,n,v,oe(a,n),t,r);e.push(o)}e.map((function(e){e.show()})),P(T=e)}else for(var i=x.width/2,l=x.height/2,c=i,s=l,u=0;u<360;u+=.1){var p=u*(2*Math.PI)/360;v.strokeStyle="hsla("+u+", 100%, 50%, 1.0)",v.beginPath(),v.moveTo(i,l),v.lineTo(i+c*Math.cos(p),l+s*Math.sin(p)),v.stroke()}}()},ce=function(t){if(se(t),"palette"===G||"both"===G){for(var r=void 0,a=void 0,o=0;o<T.length;o++)if(r=T[o].clicked(A,q)){a=T[o];break}l(n=r.color),p(u=r.color.substring(1));var i=void 0;i=!1===r.gs?a.y+a.unit_y:a.y,J(H={w:a.unit_x,h:a.unit_y,t:i,l:a.x})}else{console.log("sphere");var c=v.getImageData(A,q,1,1).data,s="#"+("000000"+ae(c[0],c[1],c[2])).slice(-6);l(n=s),p(u=s.substring(1))}e.selectedColor(n)},se=function(e){var t=x,r=0,n=0;if(t.offsetParent)do{r+=t.offsetLeft,n+=t.offsetTop}while(t=t.offsetParent);L(A=e.pageX-r),z(q=e.pageY-n)};return i.default.createElement(i.default.Fragment,null,i.default.createElement("div",{className:"dark"===e.pallet.theme?"dark-theme":"light-theme",style:{width:k+30+"px",height:M+140+"px"}},i.default.createElement("ul",{className:"picker_switch"},i.default.createElement("li",null,e.pallet.title),i.default.createElement("li",{style:{textAlign:"center"}},"palette"===G&&e.pallet.cellControl&&i.default.createElement("div",null,i.default.createElement("button",{type:"button",className:"tools",onClick:function(){return console.log("p_col ",Z),void(Z>e.pallet.col&&($(Z-=e.pallet.cellControl),ne(re-=e.pallet.cellControl),console.log("p_col ",Z,"p_rows",re),le(G)))}},"-"),i.default.createElement("button",{type:"button",className:"tools",onClick:function(){return $(Z+=e.pallet.cellControl),ne(re+=e.pallet.cellControl),console.log("p_col ",Z,"p_rows",re),void le(G)}},"+"))),i.default.createElement("li",{style:{textAlign:"right"}},"both"===Y&&i.default.createElement(i.default.Fragment,null,i.default.createElement("button",{type:"button",className:"picker-btn s_pallet "+("palette"===G||"both"===G?"active":""),onClick:function(){return le("palette")}},i.default.createElement("span",null),i.default.createElement("span",null),i.default.createElement("span",null),i.default.createElement("span",null)),i.default.createElement("button",{type:"button",className:"picker-btn s_sphear "+("sphere"===G?"active":""),onClick:function(){return le("sphere")}},i.default.createElement("span",null))))),i.default.createElement("div",{className:"canvas_holder "+("sphere"===G?"sphere_holder":""),style:{width:"sphere"===G?k-30:k+"px",height:"sphere"===G?M-30:M+"px",borderColor:n+"aa"}},i.default.createElement("canvas",{className:"sqr_canvas picker_area",ref:d,style:{borderRadius:"6px"}}),G,("palette"===G||"both"===G)&&i.default.createElement("div",{className:"indicator ",style:{width:H.w+"px",height:H.h+"px",top:H.t+"px",left:H.l+"px"}}),"sphere"===G&&i.default.createElement("div",{className:"indicator with_sphere",style:{top:q+"px",left:A+"px"}})),i.default.createElement("div",{className:"result_bar"},i.default.createElement("div",{className:"unit_section"},"#"),i.default.createElement("input",{className:"output_input",type:"text",value:u,onChange:function(t){p(u=t.target.value),l(n="#"+t.target.value),e.selectedColor("#"+t.target.value)}}),i.default.createElement("div",{className:"result_output ",style:{backgroundColor:n}}))))}},function(e,t){e.exports=require("react")},function(e,t,r){var n=r(3),a=r(4);"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,t,r){"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(t){if(void 0===e[t]){var r=document.querySelector(t);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(e){r=null}e[t]=r}return e[t]}}(),i=[];function l(e){for(var t=-1,r=0;r<i.length;r++)if(i[r].identifier===e){t=r;break}return t}function c(e,t){for(var r={},n=[],a=0;a<e.length;a++){var o=e[a],c=t.base?o[0]+t.base:o[0],s=r[c]||0,u="".concat(c," ").concat(s);r[c]=s+1;var p=l(u),d={css:o[1],media:o[2],sourceMap:o[3]};-1!==p?(i[p].references++,i[p].updater(d)):i.push({identifier:u,updater:b(d,t),references:1}),n.push(u)}return n}function s(e){var t=document.createElement("style"),n=e.attributes||{};if(void 0===n.nonce){var a=r.nc;a&&(n.nonce=a)}if(Object.keys(n).forEach((function(e){t.setAttribute(e,n[e])})),"function"==typeof e.insert)e.insert(t);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(t)}return t}var u,p=(u=[],function(e,t){return u[e]=t,u.filter(Boolean).join("\n")});function d(e,t,r,n){var a=r?"":n.media?"@media ".concat(n.media," {").concat(n.css,"}"):n.css;if(e.styleSheet)e.styleSheet.cssText=p(t,a);else{var o=document.createTextNode(a),i=e.childNodes;i[t]&&e.removeChild(i[t]),i.length?e.insertBefore(o,i[t]):e.appendChild(o)}}function f(e,t,r){var n=r.css,a=r.media,o=r.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 h=null,x=0;function b(e,t){var r,n,a;if(t.singleton){var o=x++;r=h||(h=s(t)),n=d.bind(null,r,o,!1),a=d.bind(null,r,o,!0)}else r=s(t),n=f.bind(null,r,t),a=function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(r)};return n(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;n(e=t)}else a()}}e.exports=function(e,t){(t=t||{}).singleton||"boolean"==typeof t.singleton||(t.singleton=a());var r=c(e=e||[],t);return function(e){if(e=e||[],"[object Array]"===Object.prototype.toString.call(e)){for(var n=0;n<r.length;n++){var a=l(r[n]);i[a].references--}for(var o=c(e,t),s=0;s<r.length;s++){var u=l(r[s]);0===i[u].references&&(i[u].updater(),i.splice(u,1))}r=o}}}},function(e,t,r){(t=r(5)(!1)).push([e.i,"\r\n.dark-theme {\r\n background-color: #0c0b14;\r\n border: 1px solid #454559;\r\n}\r\n.light-theme {\r\n background-color: #f6f5f5;\r\n border: 1px solid #e9e9e9;\r\n}\r\n.canvas_holder {\r\n margin: 20px auto 0;\r\n position: relative;\r\n overflow: hidden;\r\n}\r\n.canvas_holder.sphere_holder {\r\n box-shadow: 1px 2px 3px #aaa;\r\n border-radius: 100%;\r\n border-width: 15px;\r\n border-style: solid;\r\n \r\n}\r\n.dark-theme .canvas_holder.sphere_holder {\r\n box-shadow: 1px 2px 3px #454559;\r\n}\r\n\r\n.picker_area {\r\n cursor: crosshair;\r\n}\r\n.indicator {\r\n position: absolute;\r\n border: 2px solid #fff;\r\n border-radius: 4px;\r\n box-shadow: 1px 2px 3px #aaa;\r\n}\r\n.indicator.with_sphere {\r\n border-radius: 100%;\r\n width: 20px;\r\n height: 20px;\r\n margin-top:-20px;\r\n margin-left:-20px;\r\n \r\n}\r\n.result_bar {\r\n width: 150px;\r\n margin: 10px auto;\r\n height: 40px;\r\n padding-top: 5px;\r\n}\r\n\r\n.unit_section {\r\n width: 30px;\r\n height: 30px;\r\n background-color: #fff;\r\n text-align: center;\r\n line-height: 30px;\r\n font-weight: bold;\r\n color: #555555;\r\n float: left;\r\n border-radius: 4px;\r\n box-shadow: 1px 1px 2px #bfbfbf;\r\n font-size: 20px;\r\n}\r\n.dark-theme .unit_section {\r\n color:#bbbbd6;\r\n background-color: #1d1c29;\r\n box-shadow: 1px 1px 2px #0c0b14;\r\n}\r\n.output_input {\r\n width: 70px;\r\n float: left;\r\n margin-left: 5px;\r\n height: 30px;\r\n border: none;\r\n border-radius: 4px;\r\n box-shadow: 1px 1px 2px #bfbfbf;\r\n color: #6a6a6a;\r\n font-size: 14px;\r\n text-indent: 10px;\r\n letter-spacing: 1px;\r\n line-height: 30px;\r\n}\r\n.output_input:focus {\r\n outline: none;\r\n}\r\n\r\n.dark-theme .output_input {\r\n background-color: #1d1c29;\r\n color:#9090a1;\r\n box-shadow: 1px 1px 2px #0c0b14;\r\n}\r\n\r\n.result_output {\r\n width: 30px;\r\n height: 30px;\r\n\r\n float: left;\r\n border-radius: 40px;\r\n margin-left: 9px;\r\n box-shadow: 1px 1px 4px #818282;\r\n}\r\n\r\n.dark-theme .result_output {\r\n border: 1px solid #555;\r\n box-shadow: 0px 0px 0px #000;\r\n}\r\n\r\n.picker_switch {\r\n list-style: none;\r\n margin: 0;\r\n width: calc(100% - 40px);\r\n height: 40px;\r\n margin-top: 10px;\r\n box-shadow: 0px 1px 2px #bfbfbf;\r\n padding: 0 20px;\r\n}\r\n\r\n.picker_switch li {\r\n width: calc(100% / 3);\r\n height: inherit;\r\n line-height: 40px;\r\n font-size: 16px;\r\n color: #555555;\r\n font-weight: 600;\r\n text-align: left;\r\n float: left;\r\n}\r\n\r\n.dark-theme .picker_switch {\r\n box-shadow: 0px 1px 2px #3f3f3f;\r\n}\r\n.dark-theme .picker_switch li {\r\n color:#c1c1dc;\r\n}\r\n\r\n.picker_switch li .picker-btn {\r\n width: 25px;\r\n height: 25px;\r\n margin-top: 10px;\r\n padding: 0;\r\n border: 1px solid #d4d4d4;\r\n}\r\n.dark-theme .picker_switch li .picker-btn {\r\n border: 1px solid #555555;\r\n background-color: #0c0b14;\r\n}\r\n.picker_switch li .picker-btn:focus {\r\n outline: none;\r\n}\r\n.picker_switch li .picker-btn.s_pallet {\r\n margin-right: 10px;\r\n}\r\n.picker_switch li .picker-btn.s_pallet span {\r\n width: calc(50% - 2px);\r\n height: calc(50% - 2px);\r\n float: left;\r\n background: #d4d4d4;\r\n display: block;\r\n margin: 1px;\r\n}\r\n.dark-theme .picker_switch li .picker-btn.s_pallet span {\r\n background: #3f3f3f;\r\n}\r\n\r\n.picker_switch li .picker-btn.s_pallet.active{\r\n border: 1px solid var(--primary);\r\n}\r\n\r\n\r\n.picker_switch li .picker-btn.s_sphear {\r\n border-radius: 100%;\r\n}\r\n.picker_switch li .picker-btn.s_sphear span{\r\n border-radius: 100%;\r\n width: calc(100% - 4px);\r\n height: calc(100% - 4px);\r\n background: #d4d4d4;\r\n display: block;\r\n margin: 2px;\r\n}\r\n\r\n.dark-theme .picker_switch li .picker-btn.s_sphear span {\r\n background: #3f3f3f;\r\n}\r\n.picker_switch li .picker-btn.s_sphear.active {\r\n border:1px solid var(--primary);\r\n}\r\n\r\n.tools {\r\n border: 1px solid var(--primary);\r\n margin-left: 2px;\r\n background-color: transparent;\r\n color: var(--primary);\r\n cursor: pointer;\r\n /* transform: translateY(-6px); */\r\n}\r\n",""]),e.exports=t},function(e,t,r){"use strict";e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var r=function(e,t){var r=e[1]||"",n=e[3];if(!n)return r;if(t&&"function"==typeof btoa){var a=(i=n,l=btoa(unescape(encodeURIComponent(JSON.stringify(i)))),c="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(l),"/*# ".concat(c," */")),o=n.sources.map((function(e){return"/*# sourceURL=".concat(n.sourceRoot||"").concat(e," */")}));return[r].concat(o).concat([a]).join("\n")}var i,l,c;return[r].join("\n")}(t,e);return t[2]?"@media ".concat(t[2]," {").concat(r,"}"):r})).join("")},t.i=function(e,r,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 c=[].concat(e[l]);n&&a[c[0]]||(r&&(c[2]?c[2]="".concat(r," and ").concat(c[2]):c[2]=r),t.push(c))}},t}}]);