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