@bothub-chat/ui/dist/components/lang-switcher/index.js

Bothub UI Components

import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useTransition as n}from"@react-spring/web";import{useRef as o,useState as r,useMemo as a,useCallback as c,useEffect as i}from"react";import{LangSwitcherStyled as l,LangSwitcherButton as s,LangSwitcherIcon as d,LangSwitcherItem as u,LangSwitcherList as v,LangSwitcherLabel as f,LangSwitcherInput as g}from"./styled.js";const m=({lang:m,region:p,dataRegions:b,dataLanguages:h,onChange:y})=>{const w=o(null),[j,L]=r(!1),E=a(()=>b.find(e=>"object"==typeof e&&e.value===p.value),[b,p]),k=a(()=>h.find(e=>"object"==typeof e&&e.value===m.value),[h,m]),C=c(()=>{L(e=>!e)},[]),H=c(()=>{L(!1)},[]),x=c((e,t)=>{"object"==typeof e&&e.value&&y({lang:"lang"===t?e.value:m.value,region:"region"===t?e.value:p.value})},[y,m.value,p.value]);i(()=>{const e=w.current;if(null!==e){const t=t=>{e.contains(t.target)||L(!1)},n=()=>L(!1);return document.addEventListener("click",t),window.addEventListener("blur",n),()=>{document.removeEventListener("click",t),window.removeEventListener("blur",n)}}},[]),i(()=>{if(!j)return;const e=e=>{const t=w.current,n=e.target;t&&t.contains(n)||H()};return window.addEventListener("scroll",e,!0),()=>{window.removeEventListener("scroll",e,!0)}},[j,H]);const O=n(j,{from:{opacity:0,transform:"scale(0)"},enter:{opacity:j?1:.5,transform:`scale(${j?1:.999})`},leave:{opacity:0,transform:"scale(0.999)"},config:{duration:150}});return e(l,{ref:w,children:[t(s,{onClick:C,disableHoverColor:!0,endIcon:t(d,{$open:j}),children:e(u,{children:["object"==typeof E&&E.icon,"/ ","object"==typeof k&&k.value]})}),O((n,o)=>o&&e(v,{style:n,children:[t(f,{children:m.label}),t(g,{contentHeight:"fit-content",compactWidth:!0,onOptionClick:e=>x(e,"lang"),value:k,data:h,dataTest:"lang-select"}),t(f,{children:p.label}),t(g,{contentHeight:"fit-content",compactWidth:!0,onOptionClick:e=>x(e,"region"),value:E,data:b,dataTest:"region-select"})]}))]})};export{m as LangSwitcher};