react-colorify
Version:
A compact gradient and color picker library optimized for React, offering a fast and lag-free color selection experience with highly customizable options.
4 lines (3 loc) • 18 kB
JavaScript
'use client';
import e,{useRef as r,useLayoutEffect as t,useEffect as o,useState as n,useCallback as a,useMemo as c}from"react";import{createPortal as l}from"react-dom";import{jsx as i,Fragment as u,jsxs as s}from"react/jsx-runtime";function f(){return(f=Object.assign||function(e){for(var r=1;r<arguments.length;r++){var t=arguments[r];for(var o in t)Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o])}return e}).apply(this,arguments)}function d(e,r){if(null==e)return{};var t,o,n={},a=Object.keys(e);for(o=0;o<a.length;o++)r.indexOf(t=a[o])>=0||(n[t]=e[t]);return n}function p(e){var t=r(e),o=r((function(e){t.current&&t.current(e)}));return t.current=e,o.current}!function(e,r){void 0===r&&(r={});var t=r.insertAt;if("undefined"!=typeof document){var o=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===t&&o.firstChild?o.insertBefore(n,o.firstChild):o.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(".react-colorify-absolute{position:absolute}.react-colorify-z-100{z-index:100}.react-colorify .absolute{position:absolute}.react-colorify .unset{all:unset}.react-colorify .relative{position:relative}.react-colorify .z-50{z-index:50}.react-colorify button{cursor:pointer}.react-colorify .col-span-2{grid-column:span 2/span 2}.react-colorify .float-right{float:right}.react-colorify .mx-auto{margin-left:auto;margin-right:auto}.react-colorify .my-auto{margin-bottom:auto;margin-top:auto}.react-colorify .mb-2{margin-bottom:.5rem}.react-colorify .mb-3{margin-bottom:.75rem}.react-colorify .mt-3{margin-top:.75rem}.react-colorify .flex{display:flex}.react-colorify .size-4{width:1rem}.react-colorify .h-4,.react-colorify .size-4{height:1rem}.react-colorify .h-6{height:1.5rem}.react-colorify .w-1\\/2{width:50%}.react-colorify .w-4{width:1rem}.react-colorify .w-6{width:1.5rem}.react-colorify .w-full{width:100%}.react-colorify .flex-1{flex:1 1 0%}.react-colorify .cursor-pointer{cursor:pointer}.react-colorify .items-center{align-items:center}.react-colorify .justify-center{justify-content:center}.react-colorify .justify-between{justify-content:space-between}.react-colorify .gap-1{gap:.25rem}.react-colorify .rounded{border-radius:.25rem}.react-colorify .rounded-md{border-radius:.375rem}.react-colorify .rounded-sm{border-radius:.125rem}.react-colorify .rounded-r-none{border-bottom-right-radius:0;border-top-right-radius:0}.react-colorify .border{border:1px solid #d1d4d9}.react-colorify .border-color-200{border-color:#ced0d3}.react-colorify .border-b-2{border-bottom-width:2px}.react-colorify .border-none{border-style:none}.react-colorify .bg-slate-200{background-color:#e2e8f0}.react-colorify .bg-slate-300{background-color:#cbd5e1}.react-colorify .bg-transparent{background-color:transparent}.react-colorify .bg-white{background-color:#fff}.react-colorify .p-2{padding:.5rem}.react-colorify .p-4{padding:1rem}.react-colorify .px-3{padding-left:.75rem;padding-right:.75rem}.react-colorify .py-1{padding-bottom:.25rem;padding-top:.25rem}.react-colorify .py-2{padding-bottom:.5rem;padding-top:.5rem}.react-colorify .pt-4{padding-top:1rem}.react-colorify .text-left{text-align:left}.react-colorify .text-center{text-align:center}.react-colorify .text-sm{font-size:.875rem;line-height:1.25rem}.react-colorify .font-medium{font-weight:500}.react-colorify .font-semibold{font-weight:600}.react-colorify .uppercase{text-transform:uppercase}.react-colorify .text-gray-500{color:#6b7280}.react-colorify .text-gray-600{color:#4b5563}.react-colorify .shadow-md{box-shadow:0 0 transparent,0 0 transparent,0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1)}.react-colorify .outline-none{outline:2px solid transparent;outline-offset:2px}.react-colorful{height:200px!important;width:240px!important}.react-colorful__saturation{border-bottom:0 solid #000!important}.react-colorful>div>div>.react-colorful__pointer{height:18px!important;width:18px!important}.react-colorful>.react-colorful__alpha,.react-colorful>.react-colorful__hue{border-radius:.5rem!important;height:6px;margin-top:1rem}.react-colorful>.react-colorful__alpha{margin-bottom:.5rem}.react-colorful__pointer-fill{background-color:#000!important}.modal{opacity:1;transition:opacity .3s ease,visibility .3s ease;visibility:visible}.modal-hidden{opacity:0;visibility:hidden}");var m=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=1),e>t?t:e<r?r:e},h=function(e){return"touches"in e},g=function(e){return e&&e.ownerDocument.defaultView||self},b=function(e,r,t){var o=e.getBoundingClientRect(),n=h(r)?function(e,r){for(var t=0;t<e.length;t++)if(e[t].identifier===r)return e[t];return e[0]}(r.touches,t):r;return{left:m((n.pageX-(o.left+g(e).pageXOffset))/o.width),top:m((n.pageY-(o.top+g(e).pageYOffset))/o.height)}},v=function(e){!h(e)&&e.preventDefault()},y=e.memo((function(t){var n=t.onMove,a=t.onKey,l=d(t,["onMove","onKey"]),i=r(null),u=p(n),s=p(a),m=r(null),y=r(!1),x=c((function(){var e=function(e){v(e),(h(e)?e.touches.length>0:e.buttons>0)&&i.current?u(b(i.current,e,m.current)):t(!1)},r=function(){return t(!1)};function t(t){var o=y.current,n=g(i.current),a=t?n.addEventListener:n.removeEventListener;a(o?"touchmove":"mousemove",e),a(o?"touchend":"mouseup",r)}return[function(e){var r=e.nativeEvent,o=i.current;if(o&&(v(r),!function(e,r){return r&&!h(e)}(r,y.current)&&o)){if(h(r)){y.current=!0;var n=r.changedTouches||[];n.length&&(m.current=n[0].identifier)}o.focus(),u(b(o,r,m.current)),t(!0)}},function(e){var r=e.which||e.keyCode;r<37||r>40||(e.preventDefault(),s({left:39===r?.05:37===r?-.05:0,top:40===r?.05:38===r?-.05:0}))},t]}),[s,u]),w=x[0],_=x[1],N=x[2];return o((function(){return N}),[N]),e.createElement("div",f({},l,{onTouchStart:w,onMouseDown:w,className:"react-colorful__interactive",ref:i,onKeyDown:_,tabIndex:0,role:"slider"}))})),x=function(e){return e.filter(Boolean).join(" ")},w=function(r){var t=r.color,o=r.left,n=r.top,a=void 0===n?.5:n,c=x(["react-colorful__pointer",r.className]);return e.createElement("div",{className:c,style:{top:100*a+"%",left:100*o+"%"}},e.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},_=function(e,r,t){return void 0===r&&(r=0),void 0===t&&(t=Math.pow(10,r)),Math.round(t*e)/t},N=function(e){return"#"===e[0]&&(e=e.substring(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:4===e.length?_(parseInt(e[3]+e[3],16)/255,2):1}:{r:parseInt(e.substring(0,2),16),g:parseInt(e.substring(2,4),16),b:parseInt(e.substring(4,6),16),a:8===e.length?_(parseInt(e.substring(6,8),16)/255,2):1}},k=function(e){var r=e.s,t=e.v,o=e.a,n=(200-r)*t/100;return{h:_(e.h),s:_(n>0&&n<200?r*t/100/(n<=100?n:200-n)*100:0),l:_(n/2),a:_(o,2)}},C=function(e){var r=k(e);return"hsl("+r.h+", "+r.s+"%, "+r.l+"%)"},E=function(e){var r=k(e);return"hsla("+r.h+", "+r.s+"%, "+r.l+"%, "+r.a+")"},M=function(e){var r=e.h,t=e.s,o=e.v,n=e.a;r=r/360*6,t/=100,o/=100;var a=Math.floor(r),c=o*(1-t),l=o*(1-(r-a)*t),i=o*(1-(1-r+a)*t),u=a%6;return{r:_(255*[o,l,c,c,i,o][u]),g:_(255*[i,o,o,l,c,c][u]),b:_(255*[c,c,i,o,o,l][u]),a:_(n,2)}},z=function(e){var r=e.toString(16);return r.length<2?"0"+r:r},I=function(e){var r=e.r,t=e.g,o=e.b,n=e.a,a=n<1?z(_(255*n)):"";return"#"+z(r)+z(t)+z(o)+a},j=function(e){var r=e.r,t=e.g,o=e.b,n=e.a,a=Math.max(r,t,o),c=a-Math.min(r,t,o),l=c?a===r?(t-o)/c:a===t?2+(o-r)/c:4+(r-t)/c:0;return{h:_(60*(l<0?l+6:l)),s:_(a?c/a*100:0),v:_(a/255*100),a:n}},$=e.memo((function(r){var t=r.hue,o=r.onChange,n=x(["react-colorful__hue",r.className]);return e.createElement("div",{className:n},e.createElement(y,{onMove:function(e){o({h:360*e.left})},onKey:function(e){o({h:m(t+360*e.left,0,360)})},"aria-label":"Hue","aria-valuenow":_(t),"aria-valuemax":"360","aria-valuemin":"0"},e.createElement(w,{className:"react-colorful__hue-pointer",left:t/360,color:C({h:t,s:100,v:100,a:1})})))})),L=e.memo((function(r){var t=r.hsva,o=r.onChange,n={backgroundColor:C({h:t.h,s:100,v:100,a:1})};return e.createElement("div",{className:"react-colorful__saturation",style:n},e.createElement(y,{onMove:function(e){o({s:100*e.left,v:100-100*e.top})},onKey:function(e){o({s:m(t.s+100*e.left,0,100),v:m(t.v-100*e.top,0,100)})},"aria-label":"Color","aria-valuetext":"Saturation "+_(t.s)+"%, Brightness "+_(t.v)+"%"},e.createElement(w,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:C(t)})))})),O=function(e,r){if(e===r)return!0;for(var t in e)if(e[t]!==r[t])return!1;return!0};function H(e,t,c){var l=p(c),i=n((function(){return e.toHsva(t)})),u=i[0],s=i[1],f=r({color:t,hsva:u});o((function(){if(!e.equal(t,f.current.color)){var r=e.toHsva(t);f.current={hsva:r,color:t},s(r)}}),[t,e]),o((function(){var r;O(u,f.current.hsva)||e.equal(r=e.fromHsva(u),f.current.color)||(f.current={hsva:u,color:r},l(r))}),[u,e,l]);var d=a((function(e){s((function(r){return Object.assign({},r,e)}))}),[]);return[u,d]}var S="undefined"!=typeof window?t:o,A=new Map,B=function(e){S((function(){var r=e.current?e.current.ownerDocument:document;if(void 0!==r&&!A.has(r)){var t=r.createElement("style");t.innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}',A.set(r,t);var o="undefined"!=typeof __webpack_nonce__?__webpack_nonce__:void 0;o&&t.setAttribute("nonce",o),r.head.appendChild(t)}}),[])},F=function(r){var t=r.className,o=r.hsva,n=r.onChange,a={backgroundImage:"linear-gradient(90deg, "+E(Object.assign({},o,{a:0}))+", "+E(Object.assign({},o,{a:1}))+")"},c=x(["react-colorful__alpha",t]),l=_(100*o.a);return e.createElement("div",{className:c},e.createElement("div",{className:"react-colorful__alpha-gradient",style:a}),e.createElement(y,{onMove:function(e){n({a:e.left})},onKey:function(e){n({a:m(o.a+e.left)})},"aria-label":"Alpha","aria-valuetext":l+"%","aria-valuenow":l,"aria-valuemin":"0","aria-valuemax":"100"},e.createElement(w,{className:"react-colorful__alpha-pointer",left:o.a,color:E(o)})))},D=function(t){var o=t.className,n=t.colorModel,a=t.color,c=void 0===a?n.defaultColor:a,l=t.onChange,i=d(t,["className","colorModel","color","onChange"]),u=r(null);B(u);var s=H(n,c,l),p=s[0],m=s[1],h=x(["react-colorful",o]);return e.createElement("div",f({},i,{ref:u,className:h}),e.createElement(L,{hsva:p,onChange:m}),e.createElement($,{hue:p.h,onChange:m}),e.createElement(F,{hsva:p,onChange:m,className:"react-colorful__last-control"}))},K={defaultColor:"0001",toHsva:function(e){return j(N(e))},fromHsva:function(e){return I(M(e))},equal:function(e,r){return e.toLowerCase()===r.toLowerCase()||O(N(e),N(r))}},T=function(r){return e.createElement(D,f({},r,{colorModel:K}))};const q=({children:e})=>document.body?l(i(u,{children:e}),document.body):null,R=e=>Math.max(0,Math.min(255,e)),Y=e=>e.toString(16).padStart(2,"0"),X=(e,r,t=!0)=>{const{r:o,g:n,b:a,a:c}=((e,r=1)=>{if(3===(e=e.replace("#","")).length&&(e=e.split("").map((e=>e+e)).join("")),![6,8].includes(e.length))return{r:0,g:0,b:0,a:r};const t=parseInt(e.slice(0,6),16),o=t>>16&255,n=t>>8&255,a=255&t;return 8===e.length&&(r=parseInt(e.slice(6,8),16)/255),{r:o,g:n,b:a,a:r}})(e);if(t)return{backgroundColor:`rgba(${R(o+r)}, ${R(n+r)}, ${R(a+r)}, ${c})`};{const e=R(o+r),t=R(n+r),l=R(a+r),i=c;return`#${Y(e)}${Y(t)}${Y(l)}${Y(Math.round(255*i))}`}},W=({defaultValue:e="#ffffff",onChange:t,className:c="",labelFor:l})=>{const u=r(null),f=r(null),d=r(null),[p,m]=n(!1),[h,g]=n("transparent"===e?"#ffffff00":e),[b,v]=n({top:0,left:0}),y=r("transparent"===e?"#ffffff00":e),x=e=>{g(e),t&&t(e)};o((()=>{if(!l)return;const e=document.querySelector(`label[for="${l}"]`),r=()=>{f.current&&f.current.click()};return e&&e.addEventListener("click",r),()=>{e&&e.removeEventListener("click",r)}}),[l]);const w=a((()=>{p&&f.current&&((()=>{if(f.current){const e=f.current.getBoundingClientRect(),r=e.top>=0&&e.bottom<=window.innerHeight&&e.left>=0&&e.right<=window.innerWidth;return new IntersectionObserver((e=>{e.forEach((e=>{e.isIntersecting||m(!1)}))})).observe(f.current),r}return!1})()?requestAnimationFrame((()=>{const e=f.current.getBoundingClientRect(),r=e.top+window.scrollY;v(r>=200?{top:e.bottom+window.scrollY,left:e.left+window.scrollX+e.width/2-127}:{top:e.top+window.scrollY+20,left:e.left+window.scrollX+e.width/2-127})})):m(!1))}),[p]),_=e=>{u.current&&!u.current.contains(e.target)&&f.current&&!f.current.contains(e.target)&&d.current&&!d.current.contains(e.target)&&m(!1)},[N,k]=n(!1);o((()=>{h.length>7&&h.endsWith("00")?k(!0):k(!1)}),[h]),o((()=>(p?(document.addEventListener("mousedown",_),window.addEventListener("scroll",w,!0)):(document.removeEventListener("mousedown",_),window.removeEventListener("scroll",w,!0)),()=>{document.removeEventListener("mousedown",_),window.removeEventListener("scroll",w,!0)})),[p,w]),o((()=>{const e=new ResizeObserver((()=>w()));return f.current&&e.observe(f.current),()=>{f.current&&e.unobserve(f.current)}}),[w]);return i("div",{className:"react-colorify",children:s("div",{ref:u,children:[i("div",{className:`unset relative flex items-center justify-center mx-auto h-6 w-6 rounded colorify-picker ${c}`,"aria-label":"Open color picker",onClick:()=>{p||w(),m(!p)},ref:f,id:l,style:{border:N?"1px solid #000":"1px solid #d1d5db",background:N?"linear-gradient(to top left,\n rgba(0,0,0,0) 0%,\n rgba(0,0,0,0) calc(50% - 0.8px),\n rgba(0,0,0,1) 50%,\n rgba(0,0,0,0) calc(50% + 0.8px),\n rgba(0,0,0,0) 100%)":h,opacity:N?.2:1}}),p&&i(q,{children:i("div",{className:"react-colorify colorify-modal react-colorify-z-100 z-100 absolute react-colorify-absolute",style:{top:b.top+20,left:b.left},ref:d,children:s("div",{className:"z-50 rounded-md border bg-white p-4 shadow-md",children:[s("div",{className:"picker",children:[i(T,{color:h,onChange:x}),s("div",{className:"bg-muted col-span-2 mb-3 mt-3 flex w-full flex-1 gap-1 rounded-md text-center uppercase",children:[s("div",{className:"flex w-1/2 gap-1 rounded-md bg-slate-200 p-2 font-medium",children:[i("div",{className:"h-6 w-6 rounded-md border border-gray-600",style:{backgroundColor:h}}),i("input",{type:"text",size:7,value:h,onChange:e=>{const r=e.target.value;if(r.length<=9){/^#([0-9A-F]{3}){1,2}$/i.test(r)||/^#([0-9A-F]{4}){1,2}$/i.test(r)?x(r):g(r)}else g(y.current)},className:"my-auto flex-1 text-left text-sm uppercase text-gray-500 bg-transparent border-none outline-none w-full"})]}),i("div",{className:"flex w-1/2 gap-1 rounded-md bg-slate-200 p-2 font-medium",children:s("p",{className:"my-auto flex-1 text-left text-sm uppercase text-gray-500",children:[i("input",{type:"number",value:Math.round(parseInt(h.slice(7,9)||"FF",16)/255*100),onChange:e=>{let r=Math.round(parseInt(h.slice(7,9)||"FF",16)/255*100);const t=parseInt(e.target.value);if(t>=0&&t<=100){r=t;const e=Math.round(r/100*255).toString(16).padStart(2,"0"),o=h.slice(0,7)+e;x(o)}},step:"1",min:"0",max:"100",className:"[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none my-auto w-16 text-left text-sm uppercase text-gray-500 bg-transparent border-none outline-none"}),i("span",{className:"float-right",children:"%"})]})})]}),i("div",{className:"border-b-2"}),i("div",{className:"mt-3 flex justify-between gap-1",children:[...Array(10)].map(((e,r)=>i("button",{onClick:()=>{x(X(h,10*r,!1))},"aria-label":`Increment color ${r}`,className:"unset h-4 w-4 cursor-pointer rounded-sm border border-color-200",style:X(h,10*r)},`increment-${r}`)))}),i("div",{className:"mt-3 flex justify-between gap-1",children:[...Array(10)].map(((e,r)=>i("button",{onClick:()=>{x(X(h,-(10*r),!1))},"aria-label":`Decrement color ${r}`,className:"unset h-4 w-4 cursor-pointer rounded-sm border",style:X(h,10*-r)},`decrement-${r}`)))})]}),s("button",{onClick:()=>{g(y.current),t&&t(y.current),m(!1)},className:"unset cursor-pointer mx-auto flex items-center gap-1 pt-4 text-sm font-semibold",type:"button",children:[i("svg",{xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:2.5,stroke:"currentColor",className:"size-4",children:i("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"})}),"Reset Color"]})]})})})]})})};export{W as default};
//# sourceMappingURL=index.js.map