react-colorful/hsl/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=e.s,n=e.v,o=(200-t)*n/100;return{h:e.h,s:o>0&&o<200?t*n/100/(o<=100?o:200-o)*100:0,l:o/2}},f=function(e){var t=l(e);return"hsl("+t.h+", "+t.s+"%, "+t.l+"%)"},i=e.memo(function(t){var n=t.hue,r=t.onChange,u=o(function(e){r({h:360*e.left})},[r]),l={top:"50%",left:n/360*100+"%",backgroundColor:f({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:l})))}),s=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]),l={backgroundColor:f({h:n.h,s:100,v:100})},i={top:100-n.v+"%",left:n.s+"%",backgroundColor:f(n)},s=a(["react-colorful__saturation","_2Pjk1"]),v=a(["react-colorful__saturation-pointer","_2h5tq"]);return e.createElement("div",{className:s,style:l},e.createElement(c,{onMove:u},e.createElement("div",{className:v,style:i})))}),v=function(e,t){if(e===t)return!0;for(var n in e)if(e[n]!==t[n])return!1;return!0},m=function(u){var c=u.className,l=u.colorModel,f=u.color,m=void 0===f?l.defaultColor:f,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(!v(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(s,{hsv:p,onChange:E}),e.createElement(i,{hue:p.h,onChange:E}))};m.defaultProps={colorModel:{defaultColor:{h:0,s:0,l:0},toHsv:function(e){var t=e.s,n=e.l;return{h:e.h,s:(t*=(n<50?n:100-n)/100)>0?2*t/(n+t)*100:0,v:n+t}},fromHsv:l,equal:v}};var h=e.memo(m);export default h;
//# sourceMappingURL=index.module.js.map