react-colorful/dist/index.umd.js

A tiny color picker component for modern React apps

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):(e=e||self)["react-colorful-hex"]=t(e.react)}(this,function(e){var t="default"in e?e.default:e,n=function(e){return Math.min(Math.max(0,e),1)},r=t.memo(function(r){var o=r.children,u=r.onMove,a=e.useRef(),c=e.useState(!1),l=c[0],s=c[1],f=e.useCallback(function(e){var t=a.current.getBoundingClientRect(),r="number"==typeof e.pageX?e:e.touches[0];return{left:n((r.pageX-(t.left+window.pageXOffset))/t.width),top:n((r.pageY-(t.top+window.pageYOffset))/t.height)}},[]),i=e.useCallback(function(e){e.preventDefault(),a.current&&u(f(e))},[u,f]),v=e.useCallback(function(e){u(f(e)),s(!0)},[u,f]),h=e.useCallback(function(){return s(!1)},[]),m=e.useCallback(function(e){var t=e?document.addEventListener:document.removeEventListener;t("mousemove",i),t("touchmove",i),t("mouseup",h),t("touchend",h)},[i,h]);return e.useEffect(function(){return m(l),function(){return l&&m(!1)}},[l,m]),t.createElement("div",{className:"_2mypZ",ref:a,onTouchStart:v,onMouseDown:v},o)}),o=function(e){return e.filter(Boolean).join(" ")},u=function(e){var t,n,r,o;return"hsl("+(t=e).h+", "+((o=(200-(n=t.s))*(r=t.v)/100)>0&&o<200?n*r/100/(o<=100?o:200-o)*100:0)+"%, "+o/2+"%)"},a=t.memo(function(n){var a=n.hue,c=n.onChange,l=e.useCallback(function(e){c({h:360*e.left})},[c]),s={top:"50%",left:a/360*100+"%",backgroundColor:u({h:a,s:100,v:100})},f=o(["react-colorful__hue","_3stiW"]),i=o(["react-colorful__hue-pointer","_2h5tq"]);return t.createElement("div",{className:f},t.createElement(r,{onMove:l},t.createElement("div",{className:i,style:s})))}),c=t.memo(function(n){var a=n.hsv,c=n.onChange,l=e.useCallback(function(e){c({s:100*e.left,v:100-100*e.top})},[c]),s={backgroundColor:u({h:a.h,s:100,v:100})},f={top:100-a.v+"%",left:a.s+"%",backgroundColor:u(a)},i=o(["react-colorful__saturation","_2Pjk1"]),v=o(["react-colorful__saturation-pointer","_2h5tq"]);return t.createElement("div",{className:i,style:s},t.createElement(r,{onMove:l},t.createElement("div",{className:v,style:f})))}),l=function(e,t){if(e===t)return!0;for(var n in e)if(e[n]!==t[n])return!1;return!0},s=function(n){var r=n.className,u=n.colorModel,s=n.color,f=void 0===s?u.defaultColor:s,i=n.onChange,v=e.useState(function(){return u.toHsv(f)}),h=v[0],m=v[1],d=e.useRef({color:f,hsv:h});e.useEffect(function(){if(!u.equal(f,d.current.color)){var e=u.toHsv(f);d.current={hsv:e,color:f},m(e)}},[f,u]),e.useEffect(function(){if(!l(h,d.current.hsv)){var e=u.fromHsv(h);d.current={hsv:h,color:e},i&&i(e)}},[h,u,i]);var p=e.useCallback(function(e){m(function(t){return Object.assign({},t,e)})},[]),g=o(["react-colorful","_2pRR5",r]);return t.createElement("div",{className:g},t.createElement(c,{hsv:h,onChange:p}),t.createElement(a,{hue:h.h,onChange:p}))},f=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)}:{r:parseInt(e.substr(0,2),16),g:parseInt(e.substr(2,2),16),b:parseInt(e.substr(4,2),16)}},i=function(e){var t=e.toString(16);return t.length<2?"0"+t:t};return s.defaultProps={colorModel:{defaultColor:"000",toHsv:function(e){return n=(t=f(e)).r,r=t.g,o=t.b,c=(a=(u=Math.max(n,r,o))-Math.min(n,r,o))?u===n?(r-o)/a:u===r?2+(o-n)/a:4+(n-r)/a:0,{h:Math.round(60*(c<0?c+6:c)),s:Math.round(u?a/u*100:0),v:Math.round(u/255*100)};var t,n,r,o,u,a,c},fromHsv:function(e){return function(e){var t=e.g,n=e.b;return"#"+i(e.r)+i(t)+i(n)}(function(e){var t=e.h,n=e.s,r=e.v;t=t/360*6,n/=100,r/=100;var o=Math.floor(t),u=r*(1-n),a=r*(1-(t-o)*n),c=r*(1-(1-t+o)*n),l=o%6;return{r:Math.round(255*[r,a,u,u,c,r][l]),g:Math.round(255*[c,r,r,a,u,u][l]),b:Math.round(255*[u,u,c,r,r,a][l])}}(e))},equal:function(e,t){return e.toLowerCase()===t.toLowerCase()||l(f(e),f(t))}}},t.memo(s)});
//# sourceMappingURL=index.umd.js.map