react-colorful/hsv/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=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]),c={top:"50%",left:t/360*100+"%",backgroundColor:a({h:t,s:100,v:100})},u=s(["react-colorful__hue","_3stiW"]),m=s(["react-colorful__hue-pointer","_2h5tq"]);return e.createElement("div",{className:u},e.createElement(l,{onMove:n},e.createElement("div",{className:m,style:c})))}),m=e.memo(({hsv:t,onChange:o})=>{const n=r(e=>{o({s:100*e.left,v:100-100*e.top})},[o]),c={backgroundColor:a({h:t.h,s:100,v:100})},u={top:100-t.v+"%",left:t.s+"%",backgroundColor:a(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: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:c,colorModel:l,color:a=l.defaultColor,onChange:v})=>{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(!h(f,d.current.hsv)){const e=l.fromHsv(f);d.current={hsv:f,color:e},v&&v(e)}},[f,l,v]);const p=r(e=>{i(t=>Object.assign({},t,e))},[]),g=s(["react-colorful","_2pRR5",c]);return e.createElement("div",{className:g},e.createElement(m,{hsv:f,onChange:p}),e.createElement(u,{hue:f.h,onChange:p}))};v.defaultProps={colorModel:{defaultColor:{h:0,s:0,v:0},toHsv:e=>e,fromHsv:e=>e,equal:h}};var f=e.memo(v);export default f;
//# sourceMappingURL=index.esmodule.js.map