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