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