react-colorful/dist/index.esmodule.js

🎨 A tiny color picker component for modern React apps. Fast, well-tested, dependency-free, mobile-friendly and accessible

import e,{useCallback as t,useRef as r,useEffect as o,useState as a,useLayoutEffect as l}from"react";function n(){return(n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}function s(e,t){if(null==e)return{};var r,o,a={},l=Object.keys(e);for(o=0;o<l.length;o++)t.indexOf(r=l[o])>=0||(a[r]=e[r]);return a}function c(e){const a=r(e);return o(()=>{a.current=e}),t(e=>a.current&&a.current(e),[])}const u=(e,t=0,r=1)=>e>r?r:e<t?t:e,v=e=>"touches"in e,h=(e,t)=>{const r=e.getBoundingClientRect(),o=v(t)?t.touches[0]:t;return{left:u((o.pageX-(r.left+window.pageXOffset))/r.width),top:u((o.pageY-(r.top+window.pageYOffset))/r.height)}},m=e.memo(o=>{let{onMove:u,onKey:m}=o,f=s(o,["onMove","onKey"]);const d=r(null),i=r(!1),[g,b]=a(!1),p=c(u),E=c(m),C=t(e=>{e.preventDefault(),d.current&&p(h(d.current,e))},[p]),N=t(({nativeEvent:e})=>{e.preventDefault(),(e=>!(i.current&&!v(e)||(i.current||(i.current=v(e)),0)))(e)&&(p(h(d.current,e)),b(!0))},[p]),H=t(e=>{const t=e.which||e.keyCode;t<37||t>40||(e.preventDefault(),E({left:39===t?.05:37===t?-.05:0,top:40===t?.05:38===t?-.05:0}))},[E]),$=t(()=>b(!1),[]),M=t(e=>{const t=e?window.addEventListener:window.removeEventListener;t(i.current?"touchmove":"mousemove",C),t(i.current?"touchend":"mouseup",$)},[C,$]);return l(()=>(M(g),()=>{g&&M(!1)}),[g,M]),e.createElement("div",n({},f,{className:"react-colorful__interactive",ref:d,onTouchStart:N,onMouseDown:N,onKeyDown:H,tabIndex:0,role:"slider"}))}),f=e=>e.filter(Boolean).join(" "),d=({className:t,color:r,left:o,top:a=.5})=>{const l=f(["react-colorful__pointer",t]);return e.createElement("div",{className:l,style:{top:100*a+"%",left:100*o+"%"}},e.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:r}}))},i=(e,t=0,r=Math.pow(10,t))=>Math.round(r*e)/r,g=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),a:1}:{r:parseInt(e.substr(0,2),16),g:parseInt(e.substr(2,2),16),b:parseInt(e.substr(4,2),16),a:1}),b=e=>{const t=/hsla?\((\d+\.?\d*),\s*(\d+\.?\d*)%?,\s*(\d+\.?\d*)%?,?\s*(\d+\.?\d*)?\)/.exec(e);return t?E({h:Number(t[1]),s:Number(t[2]),l:Number(t[3]),a:void 0===t[4]?1:Number(t[4])}):{h:0,s:0,v:0,a:1}},p=b,E=({h:e,s:t,l:r,a:o})=>({h:e,s:(t*=(r<50?r:100-r)/100)>0?2*t/(r+t)*100:0,v:r+t,a:o}),C=({h:e,s:t,v:r,a:o})=>{const a=(200-t)*r/100;return{h:i(e),s:i(a>0&&a<200?t*r/100/(a<=100?a:200-a)*100:0),l:i(a/2),a:i(o,2)}},N=e=>{const{h:t,s:r,l:o}=C(e);return`hsl(${t}, ${r}%, ${o}%)`},H=e=>{const{h:t,s:r,l:o,a}=C(e);return`hsla(${t}, ${r}%, ${o}%, ${a})`},$=({h:e,s:t,v:r,a:o})=>{e=e/360*6,t/=100,r/=100;const a=Math.floor(e),l=r*(1-t),n=r*(1-(e-a)*t),s=r*(1-(1-e+a)*t),c=a%6;return{r:i(255*[r,n,l,l,s,r][c]),g:i(255*[s,r,r,n,l,l][c]),b:i(255*[l,l,s,r,r,n][c]),a:i(o,2)}},M=e=>{const t=/hsva?\((\d+\.?\d*),\s*(\d+\.?\d*)%?,\s*(\d+\.?\d*)%?,?\s*(\d+\.?\d*)?\)/.exec(e);return t?O({h:Number(t[1]),s:Number(t[2]),v:Number(t[3]),a:void 0===t[4]?1:Number(t[4])}):{h:0,s:0,v:0,a:1}},_=M,w=e=>{const t=/rgba?\((\d+),\s*(\d+),\s*(\d+),?\s*(\d+\.?\d*)?\)/.exec(e);return t?x({r:Number(t[1]),g:Number(t[2]),b:Number(t[3]),a:void 0===t[4]?1:Number(t[4])}):{h:0,s:0,v:0,a:1}},q=w,y=e=>{const t=e.toString(16);return t.length<2?"0"+t:t},x=({r:e,g:t,b:r,a:o})=>{const a=Math.max(e,t,r),l=a-Math.min(e,t,r),n=l?a===e?(t-r)/l:a===t?2+(r-e)/l:4+(e-t)/l:0;return{h:i(60*(n<0?n+6:n)),s:i(a?l/a*100:0),v:i(a/255*100),a:o}},O=e=>({h:i(e.h),s:i(e.s),v:i(e.v),a:i(e.a,2)}),I=e.memo(({className:t,hue:r,onChange:o})=>{const a=f(["react-colorful__hue",t]);return e.createElement("div",{className:a},e.createElement(m,{onMove:e=>{o({h:360*e.left})},onKey:e=>{o({h:u(r+360*e.left,0,360)})},"aria-label":"Hue","aria-valuetext":i(r)},e.createElement(d,{className:"react-colorful__hue-pointer",left:r/360,color:N({h:r,s:100,v:100,a:1})})))}),j=e.memo(({hsva:t,onChange:r})=>{const o={backgroundColor:N({h:t.h,s:100,v:100,a:1})};return e.createElement("div",{className:"react-colorful__saturation",style:o},e.createElement(m,{onMove:e=>{r({s:100*e.left,v:100-100*e.top})},onKey:e=>{r({s:u(t.s+100*e.left,0,100),v:u(t.v-100*e.top,0,100)})},"aria-label":"Color","aria-valuetext":`Saturation ${i(t.s)}%, Brightness ${i(t.v)}%`},e.createElement(d,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:N(t)})))}),k=(e,t)=>{if(e===t)return!0;for(const r in e)if(e[r]!==t[r])return!1;return!0},B=(e,t)=>e.replace(/\s/g,"")===t.replace(/\s/g,"");function K(e,l,n){const s=c(n),[u,v]=a(()=>e.toHsva(l)),h=r({color:l,hsva:u});o(()=>{if(!e.equal(l,h.current.color)){const t=e.toHsva(l);h.current={hsva:t,color:l},v(t)}},[l,e]),o(()=>{let t;k(u,h.current.hsva)||e.equal(t=e.fromHsva(u),h.current.color)||(h.current={hsva:u,color:t},s(t))},[u,e,s]);const m=t(e=>{v(t=>Object.assign({},t,e))},[]);return[u,m]}const D=({className:t,colorModel:r,color:o=r.defaultColor,onChange:a})=>{const[l,n]=K(r,o,a),s=f(["react-colorful",t]);return e.createElement("div",{className:s},e.createElement(j,{hsva:l,onChange:n}),e.createElement(I,{hue:l.h,onChange:n,className:"react-colorful__last-control"}))},A={defaultColor:"000",toHsva:e=>x(g(e)),fromHsva:e=>(({r:e,g:t,b:r})=>"#"+y(e)+y(t)+y(r))($(e)),equal:(e,t)=>e.toLowerCase()===t.toLowerCase()||k(g(e),g(t))},L=t=>e.createElement(D,n({},t,{colorModel:A})),F=({className:t,hsva:r,onChange:o})=>{const a={backgroundImage:`linear-gradient(90deg, ${H(Object.assign({},r,{a:0}))}, ${H(Object.assign({},r,{a:1}))})`},l=f(["react-colorful__alpha",t]);return e.createElement("div",{className:l},e.createElement("div",{className:"react-colorful__alpha-gradient",style:a}),e.createElement(m,{onMove:e=>{o({a:e.left})},onKey:e=>{o({a:u(r.a+e.left)})},"aria-label":"Alpha","aria-valuetext":i(100*r.a)+"%"},e.createElement(d,{className:"react-colorful__alpha-pointer",left:r.a,color:H(r)})))},S=({className:t,colorModel:r,color:o=r.defaultColor,onChange:a})=>{const[l,n]=K(r,o,a),s=f(["react-colorful",t]);return e.createElement("div",{className:s},e.createElement(j,{hsva:l,onChange:n}),e.createElement(I,{hue:l.h,onChange:n}),e.createElement(F,{hsva:l,onChange:n,className:"react-colorful__last-control"}))},X={defaultColor:{h:0,s:0,l:0,a:1},toHsva:E,fromHsva:C,equal:k},Y=t=>e.createElement(S,n({},t,{colorModel:X})),P={defaultColor:"hsla(0, 0%, 0%, 1)",toHsva:b,fromHsva:H,equal:B},R=t=>e.createElement(S,n({},t,{colorModel:P})),T={defaultColor:{h:0,s:0,l:0},toHsva:({h:e,s:t,l:r})=>E({h:e,s:t,l:r,a:1}),fromHsva:e=>(({h:e,s:t,l:r})=>({h:e,s:t,l:r}))(C(e)),equal:k},z=t=>e.createElement(D,n({},t,{colorModel:T})),G={defaultColor:"hsl(0, 0%, 0%)",toHsva:p,fromHsva:N,equal:B},J=t=>e.createElement(D,n({},t,{colorModel:G})),Q={defaultColor:{h:0,s:0,v:0,a:1},toHsva:e=>e,fromHsva:O,equal:k},U=t=>e.createElement(S,n({},t,{colorModel:Q})),V={defaultColor:"hsva(0, 0%, 0%, 1)",toHsva:M,fromHsva:e=>{const{h:t,s:r,v:o,a}=O(e);return`hsva(${t}, ${r}%, ${o}%, ${a})`},equal:B},W=t=>e.createElement(S,n({},t,{colorModel:V})),Z={defaultColor:{h:0,s:0,v:0},toHsva:({h:e,s:t,v:r})=>({h:e,s:t,v:r,a:1}),fromHsva:e=>{const{h:t,s:r,v:o}=O(e);return{h:t,s:r,v:o}},equal:k},ee=t=>e.createElement(D,n({},t,{colorModel:Z})),te={defaultColor:"hsv(0, 0%, 0%)",toHsva:_,fromHsva:e=>{const{h:t,s:r,v:o}=O(e);return`hsv(${t}, ${r}%, ${o}%)`},equal:B},re=t=>e.createElement(D,n({},t,{colorModel:te})),oe={defaultColor:{r:0,g:0,b:0,a:1},toHsva:x,fromHsva:$,equal:k},ae=t=>e.createElement(S,n({},t,{colorModel:oe})),le={defaultColor:"rgba(0, 0, 0, 1)",toHsva:w,fromHsva:e=>{const{r:t,g:r,b:o,a}=$(e);return`rgba(${t}, ${r}, ${o}, ${a})`},equal:B},ne=t=>e.createElement(S,n({},t,{colorModel:le})),se={defaultColor:{r:0,g:0,b:0},toHsva:({r:e,g:t,b:r})=>x({r:e,g:t,b:r,a:1}),fromHsva:e=>(({r:e,g:t,b:r})=>({r:e,g:t,b:r}))($(e)),equal:k},ce=t=>e.createElement(D,n({},t,{colorModel:se})),ue={defaultColor:"rgb(0, 0, 0)",toHsva:q,fromHsva:e=>{const{r:t,g:r,b:o}=$(e);return`rgb(${t}, ${r}, ${o})`},equal:B},ve=t=>e.createElement(D,n({},t,{colorModel:ue})),he=/^#?[0-9A-F]{3}$/i,me=/^#?[0-9A-F]{6}$/i,fe=e=>me.test(e)||he.test(e),de=e=>e.replace(/([^0-9A-F]+)/gi,"").substr(0,6),ie=r=>{const{color:l="",onChange:u,onBlur:v}=r,h=s(r,["color","onChange","onBlur"]),[m,f]=a(()=>de(l)),d=c(u),i=c(v),g=t(e=>{const t=de(e.target.value);f(t),fe(t)&&d("#"+t)},[d]),b=t(e=>{fe(e.target.value)||f(de(l)),i(e)},[l,i]);return o(()=>{f(de(l))},[l]),e.createElement("input",n({},h,{value:m,spellCheck:"false",onChange:g,onBlur:b}))};export{ie as HexColorInput,L as HexColorPicker,z as HslColorPicker,J as HslStringColorPicker,Y as HslaColorPicker,R as HslaStringColorPicker,ee as HsvColorPicker,re as HsvStringColorPicker,U as HsvaColorPicker,W as HsvaStringColorPicker,ce as RgbColorPicker,ve as RgbStringColorPicker,ae as RgbaColorPicker,ne as RgbaStringColorPicker};
//# sourceMappingURL=index.esmodule.js.map