@devgateway/dvz-ui-react
Version:
A modular, embeddable React component library for data visualization and UI, built with TypeScript. Provides reusable components for charts, maps, dashboards, and more, with built-in support for internationalization and Redux integration.
2 lines (1 loc) • 2.66 kB
JavaScript
"use strict";const t=require("react/jsx-runtime"),h=require("../conf/index.js"),m=require("react"),p=require("semantic-ui-react"),g=a=>{window.location=window.location.origin+"/"+a.toLowerCase()+window.location.pathname.toString().substring(3)},u=(a,s,o)=>Object.keys(a).map(n=>({key:n,text:s==="name"||s==="both"?a[n].name:n.toUpperCase(),value:n,selected:n.toUpperCase()===o.toUpperCase(),icon:s==="flag"||s==="both"?t.jsx(p.Image,{src:"/wp/wp-content/plugins/wp-multilang/flags/"+a[n].flag}):null})),w=a=>{const{menu:{menu_item_languages_show:s},settings:{languages:o},locale:n}=a,c=u(o,s,n);return t.jsx(p.Dropdown,{button:!0,className:"icon language selector",floating:!0,labeled:!0,icon:"world",options:c,onChange:(e,{name:r,value:l})=>{g(l)},text:"Language"})},x=a=>{const{menu:{menu_item_languages_show:s},settings:{languages:o},locale:n}=a,c=u(o,s,n);return t.jsx("p",{className:"inline language selector",children:c.map(e=>t.jsxs("span",{className:e.selected?"selected":"",children:[e.icon,t.jsx("a",{onClick:r=>g(e.value),children:e.text})," "]}))})},j=a=>{const{menu:{menu_item_languages_show:s},settings:{languages:o},locale:n}=a,c=u(o,s,n);return t.jsx("p",{className:"single language selector",children:c.map(e=>t.jsx("a",{className:e.selected?"selected":"",onClick:r=>g(e.value),children:e.value}))})},_=a=>{const{menu:{menu_item_languages_show:s},settings:{languages:o},locale:n}=a;u(o,s,n);const[c,e]=m.useState(n),r=()=>{const l=c==="en"?"fr":"en";e(l);const i=document.querySelector(".circle");i.classList.toggle("en"),i.classList.toggle("fr"),setTimeout(()=>{g(l)},300)};return t.jsxs("div",{className:"toggler language selector",children:[t.jsx("a",{className:`language-label ${c==="en"?"active":""}`,onClick:()=>{g("en"),e("en")},children:"EN"}),t.jsx("button",{className:"toggle-button",onClick:r,children:t.jsx("div",{className:`circle ${c==="en"?"en":"fr"}`})}),t.jsx("a",{className:`language-label ${c==="fr"?"active":""}`,onClick:()=>{g("fr"),e("fr")},children:"FR"})]})},f=a=>{const{locale:s,menu:o}=a,n=o.items.filter(l=>l.url==="#wpm-languages"),c=n.length>0,[e,r]=m.useState(null);return m.useEffect(()=>{async function l(){const d=await(await fetch(h.Config.REACT_APP_WP_API+"/dg/v1/settings",{headers:{"Content-Type":"application/json"}})).json();r(d)}l()},[]),c&&e?n.map(l=>{const i=l.menu_item_languages_type;switch(l.menu_item_languages_show,i){case"dropdown":return t.jsx(w,{locale:s,menu:l,settings:e});case"inline":return t.jsx(x,{locale:s,menu:l,settings:e});case"single":return t.jsx(j,{locale:s,menu:l,settings:e});case"toggler":return t.jsx(_,{locale:s,menu:l,settings:e})}return null}):null};module.exports=f;