react-colorful/hsl/index.esmodule.js

A tiny color picker component for modern React apps

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