react-colorful/hsv/index.module.js

A tiny color picker component for modern React apps

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