@bothub-chat/ui/dist/components/color-picker/menu/index.js

Bothub UI Components

import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useState as n,useRef as o,useCallback as r,useEffect as i}from"react";import{ColorPickerMenuStyled as l,ColorPickerMenuHeader as c,ColorPickerMenuHeaderLeft as u,ColorPickerMenuHeaderHexCodeInput as s,ColorPickerMenuPreview as d,ColorPickerMenuCloseButton as a,ColorPickerMenuArea as m,ColorPickerMenuSelector as h,ColorPickerMenuHueSlider as v}from"./styled.js";import"../../../theme/index.js";import{hexToRgb as p}from"../../../utils/colors/hexToRgb.js";import{hsvToRgb as f}from"../../../utils/colors/hsvToRgb.js";import{rgbToHex as g}from"../../../utils/colors/rgbToHex.js";import{rgbToHsv as w}from"../../../utils/colors/rgbToHsv.js";import{useTheme as M}from"../../../theme/hook.js";const C=({color:C,parentRef:j,onChange:x,onClose:b})=>{const k=M(),[E,y]=n(180),[L,R]=n(100),[$,B]=n(100),[T,D]=n((null!=C?C:k.colors.accent.primary).toUpperCase()),[X,F]=n(!1),H=o(!0),U=o(null),A=o(null),I=r(t=>{if(!U.current)return;const e=U.current.getBoundingClientRect(),{width:n}=e,o=t.clientX-e.left,r=Math.max(0,Math.min(359,Math.round(o/n*360)));y(r)},[]),W=r(t=>{if(!A.current)return;const e=A.current.getBoundingClientRect(),{width:n,height:o}=e,r=t.clientX-e.left,i=t.clientY-e.top,l=Math.max(0,Math.min(100,Math.round(r/n*100))),c=Math.max(0,Math.min(100,Math.round(100-i/o*100)));R(l),B(c)},[]),Y=r((t,e)=>{e(t);const n=t=>{e(t)},o=()=>{document.removeEventListener("mousemove",n),document.removeEventListener("mouseup",o)};document.addEventListener("mousemove",n),document.addEventListener("mouseup",o)},[]),q=r(t=>{var e;H.current||(null===(e=null==j?void 0:j.current)||void 0===e?void 0:e.contains(t.target))||null==b||b()},[]),z=r(t=>{const e=t.target.value.toUpperCase();if(/^#[\dABCDEF]{0,6}$/.test(e)){if(7===e.length){const t=p(e),[n,o,r]=w(t);return y(n),R(o),void B(r)}D(e)}},[]),G=r(()=>{D("#")},[]);i(()=>{var t,e,n;const o=null===(e=null===(t=null==j?void 0:j.current)||void 0===t?void 0:t.getBoundingClientRect)||void 0===e?void 0:e.call(t);window.innerWidth-(null!==(n=null==o?void 0:o.right)&&void 0!==n?n:0)<=250?F(!0):F(!1)},[]),i(()=>{if(!H.current||!C)return;const t=p(C),[e,n,o]=w(t);y(e),R(n),B(o)},[]),i(()=>{if(H.current)return void(H.current=!1);const t=f([E,L,$]),e=g(t);D(e),null==x||x(e)},[E,L,$]),i(()=>(window.addEventListener("click",q),()=>{window.removeEventListener("click",q)}),[]);const J=`hsl(${E}, 100%, 50%)`,K=E/360*100+"%",N=`${L}%`,O=100-$+"%";return t(l,{$centeredX:X,children:[t(c,{children:[t(u,{children:[e(s,{value:T,onInput:z,onFocus:G}),e(d,{style:{backgroundColor:T}})]}),e(a,{onClick:b})]}),e(m,{ref:A,style:{background:`\n          linear-gradient(to right, white, ${J}), \n          linear-gradient(to top, black, transparent)\n        `},onMouseDown:t=>Y(t,W),children:e(h,{style:{top:O,left:N}})}),e(v,{ref:U,onMouseDown:t=>Y(t,I),children:e(h,{style:{top:"50%",left:K}})})]})};export{C as ColorPickerMenu};