react-colorful/hsl/index.umd.js

A tiny color picker component for modern React apps

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