react-colorful/hsl/index.js

A tiny color picker component for modern React apps

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