react-colorful/dist/index.umd.js

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

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