react-colorful/rgbString/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,l=a.onMove,f=t(),i=r(!1),s=i[0],v=i[1],h=n(function(e){var t=f.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(),f.current&&l(h(e))},[l,h]),d=n(function(e){l(h(e)),v(!0)},[l,h]),g=n(function(){return v(!1)},[]),p=n(function(e){var t=e?document.addEventListener:document.removeEventListener;t("mousemove",m),t("touchmove",m),t("mouseup",g),t("touchend",g)},[m,g]);return o(function(){return p(s),function(){return s&&p(!1)}},[s,p]),e.createElement("div",{className:"_2mypZ",ref:f,onTouchStart:d,onMouseDown:d},c)}),c=function(e){return e.filter(Boolean).join(" ")},l=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+"%)"},f=e.memo(function(t){var r=t.hue,o=t.onChange,u=n(function(e){o({h:360*e.left})},[o]),f={top:"50%",left:r/360*100+"%",backgroundColor:l({h:r,s:100,v:100})},i=c(["react-colorful__hue","_3stiW"]),s=c(["react-colorful__hue-pointer","_2h5tq"]);return e.createElement("div",{className:i},e.createElement(a,{onMove:u},e.createElement("div",{className:s,style:f})))}),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]),f={backgroundColor:l({h:r.h,s:100,v:100})},i={top:100-r.v+"%",left:r.s+"%",backgroundColor:l(r)},s=c(["react-colorful__saturation","_2Pjk1"]),v=c(["react-colorful__saturation-pointer","_2h5tq"]);return e.createElement("div",{className:s,style:f},e.createElement(a,{onMove:u},e.createElement("div",{className:v,style:i})))}),s=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,l=u.colorModel,v=u.color,h=void 0===v?l.defaultColor:v,m=u.onChange,d=r(function(){return l.toHsv(h)}),g=d[0],p=d[1],M=t({color:h,hsv:g});o(function(){if(!l.equal(h,M.current.color)){var e=l.toHsv(h);M.current={hsv:e,color:h},p(e)}},[h,l]),o(function(){if(!s(g,M.current.hsv)){var e=l.fromHsv(g);M.current={hsv:g,color:e},m&&m(e)}},[g,l,m]);var b=n(function(e){p(function(t){return Object.assign({},t,e)})},[]),_=c(["react-colorful","_2pRR5",a]);return e.createElement("div",{className:_},e.createElement(i,{hsv:g,onChange:b}),e.createElement(f,{hue:g.h,onChange:b}))},h=/rgb\((\d+),\s*(\d+),\s*(\d+)\)/;v.defaultProps={colorModel:{defaultColor:"rgb(0, 0, 0)",toHsv:function(e){var t,r,n,o,u,a,c,l=h.exec(e);return r=(t={r:Number(l[1]),g:Number(l[2]),b:Number(l[3])}).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)}},fromHsv:function(e){var t=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),l=o%6;return{r:Math.round(255*[n,a,u,u,c,n][l]),g:Math.round(255*[c,n,n,a,u,u][l]),b:Math.round(255*[u,u,c,n,n,a][l])}}(e);return"rgb("+t.r+", "+t.g+", "+t.b+")"},equal:s}};var m=e.memo(v);export default m;
//# sourceMappingURL=index.module.js.map