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