react-colorful/dist/index.module.js

🎨 A tiny color picker component for modern React apps. Fast, well-tested, dependency-free, mobile-friendly and accessible

import e,{useCallback as r,useRef as t,useEffect as n,useState as o,useLayoutEffect as a}from"react";function u(){return(u=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var n in t)Object.prototype.hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e}).apply(this,arguments)}function l(e,r){if(null==e)return{};var t,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r.indexOf(t=a[n])>=0||(o[t]=e[t]);return o}function c(e){var o=t(e);return n(function(){o.current=e}),r(function(e){return o.current&&o.current(e)},[])}var s=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=1),e>t?t:e<r?r:e},f=function(e){return"touches"in e},i=function(e,r){var t=e.getBoundingClientRect(),n=f(r)?r.touches[0]:r;return{left:s((n.pageX-(t.left+window.pageXOffset))/t.width),top:s((n.pageY-(t.top+window.pageYOffset))/t.height)}},v=e.memo(function(n){var s=n.onMove,v=n.onKey,h=l(n,["onMove","onKey"]),m=t(null),d=t(!1),g=o(!1),b=g[0],p=g[1],E=c(s),C=c(v),N=r(function(e){e.preventDefault(),m.current&&E(i(m.current,e))},[E]),H=r(function(e){var r=e.nativeEvent;r.preventDefault(),function(e){return!(d.current&&!f(e)||(d.current||(d.current=f(e)),0))}(r)&&(E(i(m.current,r)),p(!0))},[E]),M=r(function(e){var r=e.which||e.keyCode;r<37||r>40||(e.preventDefault(),C({left:39===r?.05:37===r?-.05:0,top:40===r?.05:38===r?-.05:0}))},[C]),_=r(function(){return p(!1)},[]),w=r(function(e){var r=e?window.addEventListener:window.removeEventListener;r(d.current?"touchmove":"mousemove",N),r(d.current?"touchend":"mouseup",_)},[N,_]);return a(function(){return w(b),function(){b&&w(!1)}},[b,w]),e.createElement("div",u({},h,{className:"react-colorful__interactive",ref:m,onTouchStart:H,onMouseDown:H,onKeyDown:M,tabIndex:0,role:"slider"}))}),h=function(e){return e.filter(Boolean).join(" ")},m=function(r){var t=r.color,n=r.left,o=r.top,a=void 0===o?.5:o,u=h(["react-colorful__pointer",r.className]);return e.createElement("div",{className:u,style:{top:100*a+"%",left:100*n+"%"}},e.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},d=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=Math.pow(10,r)),Math.round(t*e)/t},g=function(e){return"#"===e[0]&&(e=e.substr(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:1}:{r:parseInt(e.substr(0,2),16),g:parseInt(e.substr(2,2),16),b:parseInt(e.substr(4,2),16),a:1}},b=function(e){var r=/hsla?\((\d+\.?\d*),\s*(\d+\.?\d*)%?,\s*(\d+\.?\d*)%?,?\s*(\d+\.?\d*)?\)/.exec(e);return r?E({h:Number(r[1]),s:Number(r[2]),l:Number(r[3]),a:void 0===r[4]?1:Number(r[4])}):{h:0,s:0,v:0,a:1}},p=b,E=function(e){var r=e.s,t=e.l;return{h:e.h,s:(r*=(t<50?t:100-t)/100)>0?2*r/(t+r)*100:0,v:t+r,a:e.a}},C=function(e){var r=e.s,t=e.v,n=e.a,o=(200-r)*t/100;return{h:d(e.h),s:d(o>0&&o<200?r*t/100/(o<=100?o:200-o)*100:0),l:d(o/2),a:d(n,2)}},N=function(e){var r=C(e);return"hsl("+r.h+", "+r.s+"%, "+r.l+"%)"},H=function(e){var r=C(e);return"hsla("+r.h+", "+r.s+"%, "+r.l+"%, "+r.a+")"},M=function(e){var r=e.h,t=e.s,n=e.v,o=e.a;r=r/360*6,t/=100,n/=100;var a=Math.floor(r),u=n*(1-t),l=n*(1-(r-a)*t),c=n*(1-(1-r+a)*t),s=a%6;return{r:d(255*[n,l,u,u,c,n][s]),g:d(255*[c,n,n,l,u,u][s]),b:d(255*[u,u,c,n,n,l][s]),a:d(o,2)}},_=function(e){var r=/hsva?\((\d+\.?\d*),\s*(\d+\.?\d*)%?,\s*(\d+\.?\d*)%?,?\s*(\d+\.?\d*)?\)/.exec(e);return r?I({h:Number(r[1]),s:Number(r[2]),v:Number(r[3]),a:void 0===r[4]?1:Number(r[4])}):{h:0,s:0,v:0,a:1}},w=_,q=function(e){var r=/rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*(\d+\.?\d*)?\)/.exec(e);return r?O({r:Number(r[1]),g:Number(r[2]),b:Number(r[3]),a:void 0===r[4]?1:Number(r[4])}):{h:0,s:0,v:0,a:1}},y=q,x=function(e){var r=e.toString(16);return r.length<2?"0"+r:r},O=function(e){var r=e.r,t=e.g,n=e.b,o=e.a,a=Math.max(r,t,n),u=a-Math.min(r,t,n),l=u?a===r?(t-n)/u:a===t?2+(n-r)/u:4+(r-t)/u:0;return{h:d(60*(l<0?l+6:l)),s:d(a?u/a*100:0),v:d(a/255*100),a:o}},I=function(e){return{h:d(e.h),s:d(e.s),v:d(e.v),a:d(e.a,2)}},j=e.memo(function(r){var t=r.hue,n=r.onChange,o=h(["react-colorful__hue",r.className]);return e.createElement("div",{className:o},e.createElement(v,{onMove:function(e){n({h:360*e.left})},onKey:function(e){n({h:s(t+360*e.left,0,360)})},"aria-label":"Hue","aria-valuetext":d(t)},e.createElement(m,{className:"react-colorful__hue-pointer",left:t/360,color:N({h:t,s:100,v:100,a:1})})))}),k=e.memo(function(r){var t=r.hsva,n=r.onChange,o={backgroundColor:N({h:t.h,s:100,v:100,a:1})};return e.createElement("div",{className:"react-colorful__saturation",style:o},e.createElement(v,{onMove:function(e){n({s:100*e.left,v:100-100*e.top})},onKey:function(e){n({s:s(t.s+100*e.left,0,100),v:s(t.v-100*e.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+d(t.s)+"%, Brightness "+d(t.v)+"%"},e.createElement(m,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:N(t)})))}),B=function(e,r){if(e===r)return!0;for(var t in e)if(e[t]!==r[t])return!1;return!0},K=function(e,r){return e.replace(/\s/g,"")===r.replace(/\s/g,"")};function D(e,a,u){var l=c(u),s=o(function(){return e.toHsva(a)}),f=s[0],i=s[1],v=t({color:a,hsva:f});n(function(){if(!e.equal(a,v.current.color)){var r=e.toHsva(a);v.current={hsva:r,color:a},i(r)}},[a,e]),n(function(){var r;B(f,v.current.hsva)||e.equal(r=e.fromHsva(f),v.current.color)||(v.current={hsva:f,color:r},l(r))},[f,e,l]);var h=r(function(e){i(function(r){return Object.assign({},r,e)})},[]);return[f,h]}var A=function(r){var t=r.className,n=r.colorModel,o=r.color,a=D(n,void 0===o?n.defaultColor:o,r.onChange),u=a[0],l=a[1],c=h(["react-colorful",t]);return e.createElement("div",{className:c},e.createElement(k,{hsva:u,onChange:l}),e.createElement(j,{hue:u.h,onChange:l,className:"react-colorful__last-control"}))},L={defaultColor:"000",toHsva:function(e){return O(g(e))},fromHsva:function(e){return t=(r=M(e)).g,n=r.b,"#"+x(r.r)+x(t)+x(n);var r,t,n},equal:function(e,r){return e.toLowerCase()===r.toLowerCase()||B(g(e),g(r))}},F=function(r){return e.createElement(A,u({},r,{colorModel:L}))},S=function(r){var t=r.className,n=r.hsva,o=r.onChange,a={backgroundImage:"linear-gradient(90deg, "+H(Object.assign({},n,{a:0}))+", "+H(Object.assign({},n,{a:1}))+")"},u=h(["react-colorful__alpha",t]);return e.createElement("div",{className:u},e.createElement("div",{className:"react-colorful__alpha-gradient",style:a}),e.createElement(v,{onMove:function(e){o({a:e.left})},onKey:function(e){o({a:s(n.a+e.left)})},"aria-label":"Alpha","aria-valuetext":d(100*n.a)+"%"},e.createElement(m,{className:"react-colorful__alpha-pointer",left:n.a,color:H(n)})))},X=function(r){var t=r.className,n=r.colorModel,o=r.color,a=D(n,void 0===o?n.defaultColor:o,r.onChange),u=a[0],l=a[1],c=h(["react-colorful",t]);return e.createElement("div",{className:c},e.createElement(k,{hsva:u,onChange:l}),e.createElement(j,{hue:u.h,onChange:l}),e.createElement(S,{hsva:u,onChange:l,className:"react-colorful__last-control"}))},Y={defaultColor:{h:0,s:0,l:0,a:1},toHsva:E,fromHsva:C,equal:B},$=function(r){return e.createElement(X,u({},r,{colorModel:Y}))},P={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:b,fromHsva:H,equal:K},R=function(r){return e.createElement(X,u({},r,{colorModel:P}))},T={defaultColor:{h:0,s:0,l:0},toHsva:function(e){return E({h:e.h,s:e.s,l:e.l,a:1})},fromHsva:function(e){return{h:(r=C(e)).h,s:r.s,l:r.l};var r},equal:B},z=function(r){return e.createElement(A,u({},r,{colorModel:T}))},G={defaultColor:"hsl(0, 0%, 0%)",toHsva:p,fromHsva:N,equal:K},J=function(r){return e.createElement(A,u({},r,{colorModel:G}))},Q={defaultColor:{h:0,s:0,v:0,a:1},toHsva:function(e){return e},fromHsva:I,equal:B},U=function(r){return e.createElement(X,u({},r,{colorModel:Q}))},V={defaultColor:"hsva(0, 0%, 0%, 1)",toHsva:_,fromHsva:function(e){var r=I(e);return"hsva("+r.h+", "+r.s+"%, "+r.v+"%, "+r.a+")"},equal:K},W=function(r){return e.createElement(X,u({},r,{colorModel:V}))},Z={defaultColor:{h:0,s:0,v:0},toHsva:function(e){return{h:e.h,s:e.s,v:e.v,a:1}},fromHsva:function(e){var r=I(e);return{h:r.h,s:r.s,v:r.v}},equal:B},ee=function(r){return e.createElement(A,u({},r,{colorModel:Z}))},re={defaultColor:"hsv(0, 0%, 0%)",toHsva:w,fromHsva:function(e){var r=I(e);return"hsv("+r.h+", "+r.s+"%, "+r.v+"%)"},equal:K},te=function(r){return e.createElement(A,u({},r,{colorModel:re}))},ne={defaultColor:{r:0,g:0,b:0,a:1},toHsva:O,fromHsva:M,equal:B},oe=function(r){return e.createElement(X,u({},r,{colorModel:ne}))},ae={defaultColor:"rgba(0, 0, 0, 1)",toHsva:q,fromHsva:function(e){var r=M(e);return"rgba("+r.r+", "+r.g+", "+r.b+", "+r.a+")"},equal:K},ue=function(r){return e.createElement(X,u({},r,{colorModel:ae}))},le={defaultColor:{r:0,g:0,b:0},toHsva:function(e){return O({r:e.r,g:e.g,b:e.b,a:1})},fromHsva:function(e){return{r:(r=M(e)).r,g:r.g,b:r.b};var r},equal:B},ce=function(r){return e.createElement(A,u({},r,{colorModel:le}))},se={defaultColor:"rgb(0, 0, 0)",toHsva:y,fromHsva:function(e){var r=M(e);return"rgb("+r.r+", "+r.g+", "+r.b+")"},equal:K},fe=function(r){return e.createElement(A,u({},r,{colorModel:se}))},ie=/^#?[0-9A-F]{3}$/i,ve=/^#?[0-9A-F]{6}$/i,he=function(e){return ve.test(e)||ie.test(e)},me=function(e){return e.replace(/([^0-9A-F]+)/gi,"").substr(0,6)},de=function(t){var a=t.color,s=void 0===a?"":a,f=t.onChange,i=t.onBlur,v=l(t,["color","onChange","onBlur"]),h=o(function(){return me(s)}),m=h[0],d=h[1],g=c(f),b=c(i),p=r(function(e){var r=me(e.target.value);d(r),he(r)&&g("#"+r)},[g]),E=r(function(e){he(e.target.value)||d(me(s)),b(e)},[s,b]);return n(function(){d(me(s))},[s]),e.createElement("input",u({},v,{value:m,spellCheck:"false",onChange:p,onBlur:E}))};export{de as HexColorInput,F as HexColorPicker,z as HslColorPicker,J as HslStringColorPicker,$ as HslaColorPicker,R as HslaStringColorPicker,ee as HsvColorPicker,te as HsvStringColorPicker,U as HsvaColorPicker,W as HsvaStringColorPicker,ce as RgbColorPicker,fe as RgbStringColorPicker,oe as RgbaColorPicker,ue as RgbaStringColorPicker};
//# sourceMappingURL=index.module.js.map