react-colorful/rgbString/index.js

A tiny color picker component for modern React apps

var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,n=function(e){return Math.min(Math.max(0,e),1)},o=r.memo(function(e){var o=e.children,u=e.onMove,a=t.useRef(),c=t.useState(!1),l=c[0],s=c[1],f=t.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=t.useCallback(function(e){e.preventDefault(),a.current&&u(f(e))},[u,f]),v=t.useCallback(function(e){u(f(e)),s(!0)},[u,f]),h=t.useCallback(function(){return s(!1)},[]),m=t.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 t.useEffect(function(){return m(l),function(){return l&&m(!1)}},[l,m]),r.createElement("div",{className:"_2mypZ",ref:a,onTouchStart:v,onMouseDown:v},o)}),u=function(e){return e.filter(Boolean).join(" ")},a=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+"%)"},c=r.memo(function(e){var n=e.hue,c=e.onChange,l=t.useCallback(function(e){c({h:360*e.left})},[c]),s={top:"50%",left:n/360*100+"%",backgroundColor:a({h:n,s:100,v:100})},f=u(["react-colorful__hue","_3stiW"]),i=u(["react-colorful__hue-pointer","_2h5tq"]);return r.createElement("div",{className:f},r.createElement(o,{onMove:l},r.createElement("div",{className:i,style:s})))}),l=r.memo(function(e){var n=e.hsv,c=e.onChange,l=t.useCallback(function(e){c({s:100*e.left,v:100-100*e.top})},[c]),s={backgroundColor:a({h:n.h,s:100,v:100})},f={top:100-n.v+"%",left:n.s+"%",backgroundColor:a(n)},i=u(["react-colorful__saturation","_2Pjk1"]),v=u(["react-colorful__saturation-pointer","_2h5tq"]);return r.createElement("div",{className:i,style:s},r.createElement(o,{onMove:l},r.createElement("div",{className:v,style:f})))}),s=function(e,t){if(e===t)return!0;for(var r in e)if(e[r]!==t[r])return!1;return!0},f=function(e){var n=e.className,o=e.colorModel,a=e.color,f=void 0===a?o.defaultColor:a,i=e.onChange,v=t.useState(function(){return o.toHsv(f)}),h=v[0],m=v[1],d=t.useRef({color:f,hsv:h});t.useEffect(function(){if(!o.equal(f,d.current.color)){var e=o.toHsv(f);d.current={hsv:e,color:f},m(e)}},[f,o]),t.useEffect(function(){if(!s(h,d.current.hsv)){var e=o.fromHsv(h);d.current={hsv:h,color:e},i&&i(e)}},[h,o,i]);var b=t.useCallback(function(e){m(function(t){return Object.assign({},t,e)})},[]),g=u(["react-colorful","_2pRR5",n]);return r.createElement("div",{className:g},r.createElement(l,{hsv:h,onChange:b}),r.createElement(c,{hue:h.h,onChange:b}))},i=/rgb\((\d+),\s*(\d+),\s*(\d+)\)/;f.defaultProps={colorModel:{defaultColor:"rgb(0, 0, 0)",toHsv:function(e){var t,r,n,o,u,a,c,l=i.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 v=r.memo(f);module.exports=v;
//# sourceMappingURL=index.js.map