@google-translate-select/react
Version:
🚀 The package offer react library for @google-translate-select!
216 lines (215 loc) • 6.92 kB
JavaScript
import { jsxs as g, Fragment as re, jsx as r } from "./index3.mjs";
import { useState as i, useMemo as le, useEffect as m } from "react";
import L from "./index4.mjs";
import { GOOGLE_TRANSLATE_STOP_TRANSLATE_CLASSNAME as ce, GOOGLE_TRANSLATE_ORIGINAL_DOM_ID as ie, GOOGLE_TRANSLATE_SELECT_LANGUAGES as ue, GOOGLE_TRANSLATE_COOKIE_NAME as de, GOOGLE_TRANSLATE_ORIGINAL_SELECT_CLASSNAME as D, GOOGLE_TRANSLATE_JSSDK_URL as ge } from "./index5.mjs";
import { useMutationObserver as j, createScriptTag as me, createGoogleTranslateJsonpCallback as fe, getCookie as Le, createStyleTag as pe, createNamespace as Ne, removeIcon as he, isString as Se, GoogleTranslateFireEvent as Te } from "./index6.mjs";
import "./index7.mjs";
const o = Ne("select");
function _e(B) {
const {
languages: c = ue,
defaultLanguageCode: E = "en",
defaultPageLanguageCode: F = "en",
fetchBrowserLanguage: b = !0,
animateTimeout: v = 150,
dropdownClassName: V = "",
dropdownStyles: H = {},
showArrow: q = !0,
trigger: p = "hover",
className: J = "",
select: C
} = B, [w, N] = i(!1), [f, $] = i(""), [h, z] = i(""), [
s,
U
] = i({}), [l, K] = i({}), [A, P] = i(!0), [G, _] = i(-1), k = (e) => {
const a = c.find(
(n) => n.code === e
), t = c.find(
(n) => n.code === E
);
return a || t;
}, u = le(
() => k(f),
[f]
);
m(() => {
Q(), W();
}, []), m(() => {
X();
}, [h]), m(() => (l != null && l.start && l.start(), () => {
l != null && l.stop && l.stop();
}), [l]), m(() => (s != null && s.start && s.start(), () => {
s != null && s.stop && s.stop();
}), [s]), m(() => {
s != null && s.stop && s.stop();
}, [A]);
const W = () => {
const e = j(
document.querySelector("html"),
(a) => {
a.forEach((t) => {
if (t.attributeName === "lang") {
const n = t.target.getAttribute(
"lang"
), d = t.oldValue;
d !== n && d && d !== "auto" && n === "auto" && S(f);
}
}), he();
},
{
attributes: !0,
attributeOldValue: !0
}
);
K(e);
}, Q = () => {
ne(), Y();
}, X = () => h ? me(
`${ge}?cb=${h}`
) : null, Y = () => {
const { jsonpCallbackName: e } = fe(
{
pageLanguage: F
},
Z
);
z(e);
}, Z = () => {
const e = ae(), a = b ? te(ee()) : "", t = !!e, n = b, d = E || "en", R = (x) => !!c.find(
(se) => se.code === x
) ? x : d;
let T = d;
!t && n ? T = R(a) : T = R(e), S(T);
};
function ee() {
const e = window.navigator.language || document.documentElement.lang || "en";
return ["zh-CN", "zh-TW"].every((t) => t !== e) && e.indexOf("-") > -1 ? e.split("-")[0] : e;
}
function te(e) {
return c.find((t) => t.code === e) ? e : "en";
}
const ae = () => {
const e = Le(de);
if (e) {
const a = e.split("/");
return a[2] ? a[2] : "en";
} else
return "";
}, ne = () => pe(
"body { top: 0 !important; } .skiptranslate { display: none !important; }"
), O = () => {
p === "hover" && (clearTimeout(G), _(
window.setTimeout(() => {
N(!0);
}, v)
));
}, y = () => {
p === "hover" && (clearTimeout(G), _(
window.setTimeout(() => {
N(!1);
}, v)
));
}, oe = (e) => {
const a = j(
document.querySelector(D),
(t) => {
t.forEach((n) => {
n.addedNodes[0] && n.addedNodes[0].value && e === n.addedNodes[0].value && I(
n.addedNodes[0].value
);
});
},
{
childList: !0,
subtree: !0
}
);
U(a);
}, I = (e) => {
if (!e)
return;
const a = Se(e) ? e : e.value ?? "", t = document.querySelector(
D
), n = document.querySelector(`.${o.b()}`);
!n || !t || n.innerHTML.length === 0 || t.options.length === 0 ? oe(a) : (t.value = a, Te(t, "change"), P(!A));
}, S = (e) => {
I(e), $(e), C && C(k(e));
}, M = () => {
p === "click" && N((e) => !e);
};
return !c || !c.length ? null : /* @__PURE__ */ g(re, { children: [
/* @__PURE__ */ r(
"div",
{
className: L([
o.b(),
ce,
J
]),
children: /* @__PURE__ */ g("div", { className: o.b("dropdown"), children: [
/* @__PURE__ */ g(
"div",
{
className: o.be("dropdown", "activator"),
onMouseEnter: O,
onMouseLeave: y,
onClick: M,
children: [
/* @__PURE__ */ g("div", { className: o.b("language"), children: [
/* @__PURE__ */ r("div", { className: o.b("flag"), children: /* @__PURE__ */ r("div", { className: o.be("flag", u == null ? void 0 : u.code) }) }),
u == null ? void 0 : u.name
] }),
q && /* @__PURE__ */ r(
"div",
{
className: L([o.b("icon"), w ? o.is("reverse") : ""]),
children: /* @__PURE__ */ r("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1024 1024", children: /* @__PURE__ */ r(
"path",
{
fill: "currentColor",
d: "M831.872 340.864 512 652.672 192.128 340.864a30.592 30.592 0 0 0-42.752 0 29.12 29.12 0 0 0 0 41.6L489.664 714.24a32 32 0 0 0 44.672 0l340.288-331.712a29.12 29.12 0 0 0 0-41.728 30.592 30.592 0 0 0-42.752 0z"
}
) })
}
)
]
}
),
/* @__PURE__ */ r(
"div",
{
className: L([o.be("dropdown", "menu"), V]),
style: { display: w ? "" : "none", ...H },
onMouseEnter: O,
onMouseLeave: y,
onClick: M,
children: /* @__PURE__ */ r("ul", { children: c.map((e) => /* @__PURE__ */ r(
"li",
{
className: L([
o.be("dropdown", "menu__item"),
f === e.code ? "selected" : ""
]),
"data-language-code": e.code,
onClick: () => {
S(e.code);
},
children: /* @__PURE__ */ g("div", { className: o.b("language"), children: [
/* @__PURE__ */ r("div", { className: o.b("flag"), children: /* @__PURE__ */ r("div", { className: o.be("flag", e.code) }) }),
e.name
] })
},
`language-${e.code}`
)) })
}
)
] })
}
),
/* @__PURE__ */ r("div", { id: ie })
] });
}
export {
_e as default
};
//# sourceMappingURL=index2.mjs.map