react-colorful/dist/index.module.js

A tiny color picker component for modern React apps

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