react-colorful/rgb/index.module.js

A tiny color picker component for modern React apps

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