react-colorful/dist/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 a=e.memo(({children:a,onMove:l})=>{const c=t(),[u,h]=o(!1),m=r(e=>{const t=c.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(),c.current&&l(m(e))},[l,m]),f=r(e=>{l(m(e)),h(!0)},[l,m]),i=r(()=>h(!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:c,onTouchStart:f,onMouseDown:f},a)});const l=e=>e.filter(Boolean).join(" "),c=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:c({h:t,s:100,v:100})},u=l(["react-colorful__hue","_3stiW"]),h=l(["react-colorful__hue-pointer","_2h5tq"]);return e.createElement("div",{className:u},e.createElement(a,{onMove:n},e.createElement("div",{className:h,style:s})))}),h=e.memo(({hsv:t,onChange:o})=>{const n=r(e=>{o({s:100*e.left,v:100-100*e.top})},[o]),s={backgroundColor:c({h:t.h,s:100,v:100})},u={top:100-t.v+"%",left:t.s+"%",backgroundColor:c(t)},h=l(["react-colorful__saturation","_2Pjk1"]),m=l(["react-colorful__saturation-pointer","_2h5tq"]);return e.createElement("div",{className:h,style:s},e.createElement(a,{onMove:n},e.createElement("div",{className:m,style:u})))});const m=(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:a,color:c=a.defaultColor,onChange:v})=>{const[f,i]=o(()=>a.toHsv(c)),d=t({color:c,hsv:f});n(()=>{if(!a.equal(c,d.current.color)){const e=a.toHsv(c);d.current={hsv:e,color:c},i(e)}},[c,a]),n(()=>{if(!m(f,d.current.hsv)){const e=a.fromHsv(f);d.current={hsv:f,color:e},v&&v(e)}},[f,a,v]);const p=r(e=>{i(t=>Object.assign({},t,e))},[]),g=l(["react-colorful","_2pRR5",s]);return e.createElement("div",{className:g},e.createElement(h,{hsv:f,onChange:p}),e.createElement(u,{hue:f.h,onChange:p}))},f=e=>("#"===e[0]&&(e=e.substr(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16)}:{r:parseInt(e.substr(0,2),16),g:parseInt(e.substr(2,2),16),b:parseInt(e.substr(4,2),16)}),i=e=>{const t=e.toString(16);return t.length<2?"0"+t:t};v.defaultProps={colorModel:{defaultColor:"000",toHsv:e=>(({r:e,g:t,b:o})=>{let r=Math.max(e,t,o),n=r-Math.min(e,t,o),s=n?r===e?(t-o)/n:r===t?2+(o-e)/n:4+(e-t)/n:0;return{h:Math.round(60*(s<0?s+6:s)),s:Math.round(r?n/r*100:0),v:Math.round(r/255*100)}})(f(e)),fromHsv:e=>(({r:e,g:t,b:o})=>"#"+i(e)+i(t)+i(o))((({h:e,s:t,v:o})=>{e=e/360*6,t/=100,o/=100;let r=Math.floor(e),n=o*(1-t),s=o*(1-(e-r)*t),a=o*(1-(1-e+r)*t),l=r%6;return{r:Math.round(255*[o,s,n,n,a,o][l]),g:Math.round(255*[a,o,o,s,n,n][l]),b:Math.round(255*[n,n,a,o,o,s][l])}})(e)),equal:(e,t)=>e.toLowerCase()===t.toLowerCase()||m(f(e),f(t))}};var d=e.memo(v);export default d;
//# sourceMappingURL=index.esmodule.js.map