@opentf/react-ta-input
Version:
The Thamizhl (தமிழ்) language scripts input for ReactJS.
414 lines (413 loc) • 10.7 kB
JavaScript
import { jsxs as f, jsx as c } from "react/jsx-runtime";
import { useState as T, useEffect as E } from "react";
const H = () => /* @__PURE__ */ f(
"svg",
{
focusable: "false",
"aria-hidden": "true",
viewBox: "0 0 24 24",
"aria-label": "keyboard icon",
children: [
/* @__PURE__ */ c(
"path",
{
d: "M3 19h18V6H3zM17 8h2v2h-2zm0 4h2v2h-2zm-4-4h2v2h-2zm0 4h2v2h-2zM9 8h2v2H9zm0 4h2v2H9zm-1 4h8v1H8zM5 8h2v2H5zm0 4h2v2H5z",
opacity: ".3"
}
),
/* @__PURE__ */ c("path", { d: "M21 4H3c-1.1 0-2 .9-2 2v13c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2m0 15H3V6h18z" }),
/* @__PURE__ */ c("path", { d: "M9 8h2v2H9zM5 8h2v2H5zm3 8h8v1H8zm5-8h2v2h-2zm-4 4h2v2H9zm-4 0h2v2H5zm8 0h2v2h-2zm4-4h2v2h-2zm0 4h2v2h-2z" })
]
}
), I = H, l = {
q: "ு",
w: "ய",
e: "இ",
r: "ர",
t: "த",
y: "எ",
u: "உ",
i: "ி",
o: "ஒ",
p: "ப",
a: "அ",
s: "ச",
d: "ட",
f: "்",
g: "ெ",
h: "ை",
j: "ன",
k: "க",
l: "ல",
z: "ழ",
x: "ா",
c: "ங",
v: "வ",
b: "ொ",
n: "ந",
m: "ம",
Q: "ூ",
W: "ஐ",
E: "ஈ",
R: "ற",
T: null,
Y: "ஏ",
U: "ஊ",
I: "ீ",
O: "ஓ",
P: "௳",
A: "ஆ",
S: "ஸ",
D: "ஷ",
F: null,
G: "ே",
H: "ஹ",
J: "ஜ",
K: "ௌ",
L: "ள",
Z: "ஔ",
X: "ஃ",
C: "ஞ",
V: null,
B: "ோ",
N: "ண",
M: "ௐ"
};
function w(g, e, r, p, n, b = 1) {
const y = g === "ta" ? l[r] : r;
return y === null ? e.substring(0, p - b) + e.substring(n) : y === void 0 ? e.substring(0, p - b) + r + e.substring(n) : e.substring(0, p - b) + y + e.substring(n);
}
function C({
show: g,
lang: e,
onClose: r,
onPress: p,
shift: n
}) {
const b = [
{ l: "`", sl: "~" },
{ l: "1", sl: "!" },
{ l: "2", sl: "@" },
{ l: "3", sl: "#" },
{ l: "4", sl: "$" },
{ l: "5", sl: "%" },
{ l: "6", sl: "^" },
{ l: "7", sl: "&" },
{ l: "8", sl: "*" },
{ l: "9", sl: "(" },
{ l: "0", sl: ")" },
{ l: "-", sl: "_" },
{ l: "=", sl: "+" },
{ l: "BACKSPACE", ctrl: !0, code: "Backspace" }
], y = [
{ l: "TAB", disabled: !0 },
{ l: "q", sl: "Q", tl: l.q, stl: l.Q },
{ l: "w", sl: "W", tl: l.w, stl: l.W },
{ l: "e", sl: "E", tl: l.e, stl: l.E },
{ l: "r", sl: "R", tl: l.r, stl: l.R },
{ l: "t", sl: "T", tl: l.t, stl: l.T },
{ l: "y", sl: "Y", tl: l.y, stl: l.Y },
{ l: "u", sl: "U", tl: l.u, stl: l.U },
{ l: "i", sl: "I", tl: l.i, stl: l.I },
{ l: "o", sl: "O", tl: l.o, stl: l.O },
{ l: "p", sl: "P", tl: l.p, stl: l.P },
{ l: "[", sl: "{" },
{ l: "]", sl: "}" },
{ l: "\\", sl: "|" }
], L = [
{ l: "CAPS", disabled: !0 },
{ l: "a", sl: "A", tl: l.a, stl: l.A },
{ l: "s", sl: "S", tl: l.s, stl: l.S },
{ l: "d", sl: "D", tl: l.d, stl: l.D },
{ l: "f", sl: "F", tl: l.f, stl: l.F },
{ l: "g", sl: "G", tl: l.g, stl: l.G },
{ l: "h", sl: "H", tl: l.h, stl: l.H },
{ l: "j", sl: "J", tl: l.j, stl: l.J },
{ l: "k", sl: "K", tl: l.k, stl: l.K },
{ l: "l", sl: "L", tl: l.l, stl: l.L },
{ l: ";", sl: ":" },
{ l: "'", sl: '"' },
{ l: "ENTER", ctrl: !0, code: "Enter" }
], o = [
{
l: "SHIFT",
ctrl: !0,
code: "ShiftLeft",
styles: {
background: n ? "#2ECC40" : "revert",
color: n ? "white" : "revert"
}
},
{ l: "z", sl: "Z", tl: l.z, stl: l.Z },
{ l: "x", sl: "X", tl: l.x, stl: l.X },
{ l: "c", sl: "C", tl: l.c, stl: l.C },
{ l: "v", sl: "V", tl: l.v, stl: l.V },
{ l: "b", sl: "B", tl: l.b, stl: l.B },
{ l: "n", sl: "N", tl: l.n, stl: l.N },
{ l: "m", sl: "M", tl: l.m, stl: l.M },
{ l: ",", sl: "<" },
{ l: ".", sl: ">" },
{ l: "/", sl: "?" },
{
l: "SHIFT",
ctrl: !0,
code: "ShiftRight",
styles: {
background: n ? "#2ECC40" : "revert",
color: n ? "white" : "revert"
}
}
], k = [
{ l: "CTRL", disabled: !0 },
{ l: "OS", disabled: !0 },
{ l: "ALT", disabled: !0 },
{ l: "SPACE", ctrl: !0, code: "Space", styles: { flexGrow: 1 } },
{ l: "ALT", disabled: !0 },
{ l: "CXT", disabled: !0 },
{ l: "CTRL", disabled: !0 }
], z = (t) => {
if (t.ctrl || t.disabled)
return t.l;
let s = "";
return e === "ta" && (s = n ? t.stl ?? t.sl : t.tl ?? t.l), e === "system" && (s = n ? t.sl : t.l), s;
}, S = (t) => {
let s = "";
e === "ta" && (s = n ? t.stl ?? t.sl : t.tl ?? t.l), e === "system" && (s = n ? t.sl : t.l), p(s, t.ctrl, t.code);
}, m = (t) => /* @__PURE__ */ c("div", { style: { display: "flex", justifyContent: "space-between" }, children: t.map((s, x) => /* @__PURE__ */ c(
"button",
{
type: "button",
style: { ...s.styles, margin: "5px", fontSize: "16px" },
disabled: s.disabled,
onClick: () => S(s),
children: /* @__PURE__ */ c("div", { children: z(s) })
},
x
)) });
return /* @__PURE__ */ f(
"div",
{
style: {
backgroundColor: "white",
display: g ? "block" : "none",
position: "fixed",
bottom: "10px",
padding: "8px",
zIndex: 1,
left: "50%",
transform: "translateX(-50%)",
boxShadow: "rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px"
},
children: [
/* @__PURE__ */ f("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
/* @__PURE__ */ c("span", { style: { fontSize: "12px", color: "black" }, children: e === "ta" ? "தமிழ்" : "System" }),
/* @__PURE__ */ c(
"button",
{
type: "button",
title: "Close",
style: {
color: "red",
fontSize: "12px",
cursor: "pointer",
border: "none"
},
onClick: r,
children: "X"
}
)
] }),
/* @__PURE__ */ f("div", { style: { marginTop: "5px" }, children: [
m(b),
m(y),
m(L),
m(o),
m(k)
] })
]
}
);
}
function A({
children: g,
inputRef: e,
onChange: r,
kbd: p,
lang: n,
...b
}) {
const y = {
kbd: !1,
lang: "ta"
}, L = {
kbd: typeof p == "boolean" ? p : y.kbd,
lang: typeof n == "string" ? n : y.lang
}, [o, k] = T(L), [z, S] = T(!1), m = (t, s, x) => {
if (e.current === null)
return;
const { value: i, selectionStart: d, selectionEnd: v } = e.current;
let a = d, u = v, h = "";
if (s)
switch (x) {
case "Backspace":
h = i.substring(0, d - 1) + i.substring(v), a -= 1, u -= 1;
break;
case "Enter":
h = w(
o.lang,
i,
`
`,
d,
v,
0
), a += 1, u += 1;
break;
case "Space":
h = w(
o.lang,
i,
" ",
d,
v,
0
), a += 1, u += 1;
break;
case "ShiftLeft":
case "ShiftRight":
S(!z);
return;
}
else
h = w(
o.lang,
i,
t,
d,
v,
0
), a += 1, u += 1;
e.current.value = h, setTimeout(() => {
e.current && (e.current.setSelectionRange(
a < 0 ? 0 : a,
u < 0 ? 0 : u
), e.current.focus());
}), r == null || r(h);
};
return E(() => {
if (!e.current)
return;
function t(i) {
const d = i.target, { selectionStart: v, selectionEnd: a, value: u } = d;
switch (i.inputType) {
case "insertText": {
const h = w(
o.lang,
u,
i.data,
v,
a
);
d.value = h, setTimeout(() => {
d.setSelectionRange(v, a), d.focus();
}), r == null || r(h);
break;
}
case "deleteContentBackward":
case "deleteContentForward":
case "deleteWordForward":
case "deleteWordBackward":
case "insertFromPaste":
case "historyUndo":
case "historyRedo":
r == null || r(u);
break;
}
}
const s = (i) => {
(i.code === "ShiftLeft" || i.code === "ShiftRight") && S(!0);
}, x = (i) => {
(i.code === "ShiftLeft" || i.code === "ShiftRight") && S(!1);
};
return e.current.addEventListener(
"input",
t
), e.current.addEventListener(
"keydown",
s
), e.current.addEventListener(
"keyup",
x
), () => {
e.current && (e.current.removeEventListener(
"input",
t
), e.current.removeEventListener(
"keydown",
s
), e.current.removeEventListener(
"keyup",
x
));
};
}, [o.lang]), /* @__PURE__ */ f(
"div",
{
style: { position: "relative", display: "inline-block" },
...b,
children: [
g,
/* @__PURE__ */ c(
"div",
{
style: {
position: "absolute",
right: "0px",
marginTop: "3px",
zIndex: 1
},
children: /* @__PURE__ */ f("div", { style: { display: "flex", alignItems: "center" }, children: [
/* @__PURE__ */ c(
"button",
{
type: "button",
style: { width: "24px", height: "24px", padding: 0, margin: 0 },
title: "Toggle Virtual Keyboard",
onClick: () => k({ ...o, kbd: !o.kbd }),
children: /* @__PURE__ */ c(I, {})
}
),
" ",
/* @__PURE__ */ f(
"select",
{
style: { marginLeft: "5px" },
title: "Change Input",
value: o.lang,
onChange: (t) => k({ ...o, lang: t.target.value }),
children: [
/* @__PURE__ */ c("option", { value: "ta", children: "தமிழ்" }),
/* @__PURE__ */ c("option", { value: "system", children: "System" })
]
}
)
] })
}
),
/* @__PURE__ */ c(
C,
{
show: o.kbd,
lang: o.lang,
onClose: () => k({ ...o, kbd: !1 }),
onPress: m,
shift: z
}
)
]
}
);
}
export {
A as TaInput
};