@blocklet/translation-input 2.4.36 → 2.4.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/translation-input.d.ts +2 -1
- package/dist/components/translation-input.mjs +51 -0
- package/dist/components/translation-tag.d.ts +2 -1
- package/dist/components/translation-tag.mjs +31 -0
- package/dist/components/translation-text-field.d.ts +3 -2
- package/dist/components/translation-text-field.mjs +59 -0
- package/dist/components/utils.d.ts +2 -2
- package/dist/components/utils.mjs +4 -0
- package/dist/global.d.ts +1 -0
- package/dist/index.mjs +3 -0
- package/dist/vite-env.d.ts +1 -0
- package/package.json +8 -12
- package/dist/index.es.js +0 -139
- package/dist/index.umd.js +0 -137
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
1
2
|
interface Props {
|
|
2
3
|
value: {
|
|
3
4
|
[locale: string]: string;
|
|
@@ -8,5 +9,5 @@ interface Props {
|
|
|
8
9
|
onCancel?: () => void;
|
|
9
10
|
excludes?: string[];
|
|
10
11
|
}
|
|
11
|
-
export declare function TranslationInput({ value, onChange, onCancel, excludes, ...rest }: Props): import("react
|
|
12
|
+
export declare function TranslationInput({ value, onChange, onCancel, excludes, ...rest }: Props): import("react").JSX.Element;
|
|
12
13
|
export {};
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Box, Button, InputAdornment, TextField } from "@mui/material";
|
|
3
|
+
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
|
|
4
|
+
import { useState } from "react";
|
|
5
|
+
export function TranslationInput({ value, onChange, onCancel, excludes = [], ...rest }) {
|
|
6
|
+
const { t, languages } = useLocaleContext();
|
|
7
|
+
const filteredLangs = languages.filter((item) => !excludes.includes(item.code));
|
|
8
|
+
const translate = (key, defaultValue) => {
|
|
9
|
+
const translated = t(key);
|
|
10
|
+
return translated === key ? defaultValue : translated;
|
|
11
|
+
};
|
|
12
|
+
const [internalValue, setInternalValue] = useState(value);
|
|
13
|
+
return /* @__PURE__ */ jsxs(Box, { sx: { bgcolor: "grey.50" }, ...rest, children: [
|
|
14
|
+
/* @__PURE__ */ jsxs(
|
|
15
|
+
Box,
|
|
16
|
+
{
|
|
17
|
+
sx: {
|
|
18
|
+
display: "flex",
|
|
19
|
+
alignItems: "center",
|
|
20
|
+
justifyContent: "space-between",
|
|
21
|
+
px: 2,
|
|
22
|
+
py: 0.8,
|
|
23
|
+
bgcolor: "grey.200"
|
|
24
|
+
},
|
|
25
|
+
children: [
|
|
26
|
+
/* @__PURE__ */ jsx(Box, { sx: { color: "grey.600", fontSize: 13, fontWeight: "bold" }, children: translate("TranslationInput.translations", "Translations") }),
|
|
27
|
+
/* @__PURE__ */ jsxs(Box, { children: [
|
|
28
|
+
/* @__PURE__ */ jsx(Button, { variant: "text", color: "inherit", size: "small", onClick: onCancel, sx: { mr: 1 }, children: translate("TranslationInput.cancel", "Cancel") }),
|
|
29
|
+
/* @__PURE__ */ jsx(Button, { variant: "outlined", size: "small", onClick: () => onChange(internalValue), children: translate("TranslationInput.apply", "Apply") })
|
|
30
|
+
] })
|
|
31
|
+
]
|
|
32
|
+
}
|
|
33
|
+
),
|
|
34
|
+
/* @__PURE__ */ jsx(Box, { sx: { maxHeight: 400, overflowY: "auto", p: 2 }, children: filteredLangs.map(({ code, name }) => {
|
|
35
|
+
return /* @__PURE__ */ jsx(Box, { sx: { "& + &": { mt: 1 } }, children: /* @__PURE__ */ jsx(Box, { sx: { flex: 1 }, children: /* @__PURE__ */ jsx(
|
|
36
|
+
TextField,
|
|
37
|
+
{
|
|
38
|
+
value: internalValue[code] || "",
|
|
39
|
+
size: "small",
|
|
40
|
+
sx: { width: 1 },
|
|
41
|
+
onChange: (e) => setInternalValue({ ...internalValue, [code]: e.target.value }),
|
|
42
|
+
slotProps: {
|
|
43
|
+
input: {
|
|
44
|
+
startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", sx: { minWidth: 64 }, children: name })
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
) }) }, code);
|
|
49
|
+
}) })
|
|
50
|
+
] });
|
|
51
|
+
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Box } from "@mui/material";
|
|
3
|
+
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
|
|
4
|
+
export function TranslationTag({
|
|
5
|
+
locale,
|
|
6
|
+
value,
|
|
7
|
+
displayLanguageName
|
|
8
|
+
}) {
|
|
9
|
+
const { languages } = useLocaleContext();
|
|
10
|
+
return /* @__PURE__ */ jsxs(
|
|
11
|
+
Box,
|
|
12
|
+
{
|
|
13
|
+
sx: {
|
|
14
|
+
display: "flex",
|
|
15
|
+
alignItems: "center",
|
|
16
|
+
flex: "0 0 auto",
|
|
17
|
+
px: 1,
|
|
18
|
+
py: 0.25,
|
|
19
|
+
fontSize: 12,
|
|
20
|
+
color: "grey.800",
|
|
21
|
+
bgcolor: "grey.300",
|
|
22
|
+
borderRadius: 1
|
|
23
|
+
},
|
|
24
|
+
className: "label-translation-tag",
|
|
25
|
+
children: [
|
|
26
|
+
/* @__PURE__ */ jsx(Box, { sx: { pr: 0.5, borderRight: 1, borderColor: "grey.400" }, children: displayLanguageName ? languages.find((x) => x.code === locale)?.name || locale : locale }),
|
|
27
|
+
/* @__PURE__ */ jsx(Box, { sx: { pl: 0.5, color: "grey.700", fontWeight: "bold" }, children: value })
|
|
28
|
+
]
|
|
29
|
+
}
|
|
30
|
+
);
|
|
31
|
+
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { type TextFieldProps } from '@mui/material';
|
|
2
3
|
type Translation = {
|
|
3
4
|
[locale: string]: string;
|
|
4
5
|
};
|
|
@@ -8,5 +9,5 @@ interface Props {
|
|
|
8
9
|
onChange: (translation: Translation) => void;
|
|
9
10
|
};
|
|
10
11
|
}
|
|
11
|
-
export declare function TranslationTextField({ translationInputProps, InputProps, ...rest }: TextFieldProps & Props): import("react
|
|
12
|
+
export declare function TranslationTextField({ translationInputProps, InputProps, ...rest }: TextFieldProps & Props): import("react").JSX.Element;
|
|
12
13
|
export {};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { IconButton, InputAdornment, TextField } from "@mui/material";
|
|
3
|
+
import { Translate as TranslateIcon } from "@mui/icons-material";
|
|
4
|
+
import Popover from "@mui/material/Popover";
|
|
5
|
+
import { useState } from "react";
|
|
6
|
+
import { TranslationInput } from "./translation-input.mjs";
|
|
7
|
+
export function TranslationTextField({ translationInputProps, InputProps, ...rest }) {
|
|
8
|
+
const { value: translation, onChange } = translationInputProps;
|
|
9
|
+
const [anchorEl, setAnchorEl] = useState(null);
|
|
10
|
+
const handleClick = (event) => {
|
|
11
|
+
const el = event.currentTarget.closest(".MuiInputBase-root");
|
|
12
|
+
if (el) {
|
|
13
|
+
setAnchorEl(el);
|
|
14
|
+
}
|
|
15
|
+
};
|
|
16
|
+
const handleClose = () => {
|
|
17
|
+
setAnchorEl(null);
|
|
18
|
+
};
|
|
19
|
+
const handleChange = (v) => {
|
|
20
|
+
onChange(v);
|
|
21
|
+
handleClose();
|
|
22
|
+
};
|
|
23
|
+
return /* @__PURE__ */ jsx(
|
|
24
|
+
TextField,
|
|
25
|
+
{
|
|
26
|
+
...rest,
|
|
27
|
+
slotProps: {
|
|
28
|
+
input: {
|
|
29
|
+
endAdornment: /* @__PURE__ */ jsxs(InputAdornment, { position: "end", children: [
|
|
30
|
+
/* @__PURE__ */ jsx(IconButton, { edge: "end", onClick: handleClick, children: /* @__PURE__ */ jsx(TranslateIcon, { sx: { fontSize: 18 } }) }),
|
|
31
|
+
/* @__PURE__ */ jsx(
|
|
32
|
+
Popover,
|
|
33
|
+
{
|
|
34
|
+
open: !!anchorEl,
|
|
35
|
+
anchorEl,
|
|
36
|
+
transformOrigin: {
|
|
37
|
+
vertical: "top",
|
|
38
|
+
horizontal: "right"
|
|
39
|
+
},
|
|
40
|
+
anchorOrigin: {
|
|
41
|
+
vertical: "bottom",
|
|
42
|
+
horizontal: "right"
|
|
43
|
+
},
|
|
44
|
+
slotProps: {
|
|
45
|
+
paper: { sx: { width: anchorEl?.clientWidth } }
|
|
46
|
+
},
|
|
47
|
+
elevation: 1,
|
|
48
|
+
transitionDuration: 0,
|
|
49
|
+
sx: { mt: 0.5 },
|
|
50
|
+
children: /* @__PURE__ */ jsx(TranslationInput, { value: translation, onChange: handleChange, onCancel: handleClose })
|
|
51
|
+
}
|
|
52
|
+
)
|
|
53
|
+
] }),
|
|
54
|
+
...InputProps
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
);
|
|
59
|
+
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { SxProps, Theme } from '@mui/material';
|
|
2
|
-
import { SystemStyleObject } from '@mui/system';
|
|
1
|
+
import type { SxProps, Theme } from '@mui/material';
|
|
2
|
+
import type { SystemStyleObject } from '@mui/system';
|
|
3
3
|
export declare const mergeSx: (initial: SystemStyleObject<Theme>, sx?: SxProps<Theme>) => any[];
|
package/dist/global.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
declare module '@arcblock/ux/*';
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/// <reference types="vite/client" />
|
package/package.json
CHANGED
|
@@ -1,19 +1,16 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@blocklet/translation-input",
|
|
3
|
-
"version": "2.4.
|
|
3
|
+
"version": "2.4.38",
|
|
4
4
|
"files": [
|
|
5
5
|
"dist"
|
|
6
6
|
],
|
|
7
|
-
"main": "./dist/index.umd.js",
|
|
8
|
-
"module": "./dist/index.es.js",
|
|
9
|
-
"types": "./dist/index.d.ts",
|
|
10
7
|
"exports": {
|
|
11
|
-
".":
|
|
12
|
-
"import": "./dist/index.es.js",
|
|
13
|
-
"require": "./dist/index.umd.js"
|
|
14
|
-
},
|
|
15
|
-
"./src/*": "./src/*"
|
|
8
|
+
".": "./dist/index.mjs"
|
|
16
9
|
},
|
|
10
|
+
"main": "./dist/index.mjs",
|
|
11
|
+
"module": "./dist/index.mjs",
|
|
12
|
+
"types": "./dist/index.d.ts",
|
|
13
|
+
"sideEffects": false,
|
|
17
14
|
"publishConfig": {
|
|
18
15
|
"access": "public"
|
|
19
16
|
},
|
|
@@ -48,15 +45,14 @@
|
|
|
48
45
|
"react-dom": "^19.1.0",
|
|
49
46
|
"rollup-plugin-node-externals": "^7.1.3",
|
|
50
47
|
"typescript": "^4.9.5",
|
|
48
|
+
"unbuild": "^3.6.0",
|
|
51
49
|
"unplugin-icons": "^0.14.15",
|
|
52
50
|
"vite": "^7.0.0",
|
|
53
51
|
"vite-plugin-dts": "^4.5.4",
|
|
54
52
|
"vite-plugin-libcss": "^1.1.2"
|
|
55
53
|
},
|
|
56
54
|
"scripts": {
|
|
57
|
-
"build": "
|
|
58
|
-
"build:watch": "vite build --watch",
|
|
59
|
-
"preview": "vite preview",
|
|
55
|
+
"build": "unbuild",
|
|
60
56
|
"lint": "eslint src --ext .mjs,.js,.jsx,.ts,.tsx",
|
|
61
57
|
"lint:fix": "eslint src --ext .mjs,.js,.jsx,.ts,.tsx --fix"
|
|
62
58
|
}
|
package/dist/index.es.js
DELETED
|
@@ -1,139 +0,0 @@
|
|
|
1
|
-
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Box, Button, TextField, InputAdornment, IconButton } from "@mui/material";
|
|
3
|
-
import { Translate } from "@mui/icons-material";
|
|
4
|
-
import Popover from "@mui/material/Popover";
|
|
5
|
-
import { useState } from "react";
|
|
6
|
-
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
|
|
7
|
-
function TranslationInput({ value, onChange, onCancel, excludes = [], ...rest }) {
|
|
8
|
-
const { t, languages } = useLocaleContext();
|
|
9
|
-
const filteredLangs = languages.filter((item) => !excludes.includes(item.code));
|
|
10
|
-
const translate = (key, defaultValue) => {
|
|
11
|
-
const translated = t(key);
|
|
12
|
-
return translated === key ? defaultValue : translated;
|
|
13
|
-
};
|
|
14
|
-
const [internalValue, setInternalValue] = useState(value);
|
|
15
|
-
return /* @__PURE__ */ jsxs(Box, { sx: { bgcolor: "grey.50" }, ...rest, children: [
|
|
16
|
-
/* @__PURE__ */ jsxs(
|
|
17
|
-
Box,
|
|
18
|
-
{
|
|
19
|
-
sx: {
|
|
20
|
-
display: "flex",
|
|
21
|
-
alignItems: "center",
|
|
22
|
-
justifyContent: "space-between",
|
|
23
|
-
px: 2,
|
|
24
|
-
py: 0.8,
|
|
25
|
-
bgcolor: "grey.200"
|
|
26
|
-
},
|
|
27
|
-
children: [
|
|
28
|
-
/* @__PURE__ */ jsx(Box, { sx: { color: "grey.600", fontSize: 13, fontWeight: "bold" }, children: translate("TranslationInput.translations", "Translations") }),
|
|
29
|
-
/* @__PURE__ */ jsxs(Box, { children: [
|
|
30
|
-
/* @__PURE__ */ jsx(Button, { variant: "text", color: "inherit", size: "small", onClick: onCancel, sx: { mr: 1 }, children: translate("TranslationInput.cancel", "Cancel") }),
|
|
31
|
-
/* @__PURE__ */ jsx(Button, { variant: "outlined", size: "small", onClick: () => onChange(internalValue), children: translate("TranslationInput.apply", "Apply") })
|
|
32
|
-
] })
|
|
33
|
-
]
|
|
34
|
-
}
|
|
35
|
-
),
|
|
36
|
-
/* @__PURE__ */ jsx(Box, { sx: { maxHeight: 400, overflowY: "auto", p: 2 }, children: filteredLangs.map(({ code, name }) => {
|
|
37
|
-
return /* @__PURE__ */ jsx(Box, { sx: { "& + &": { mt: 1 } }, children: /* @__PURE__ */ jsx(Box, { sx: { flex: 1 }, children: /* @__PURE__ */ jsx(
|
|
38
|
-
TextField,
|
|
39
|
-
{
|
|
40
|
-
value: internalValue[code] || "",
|
|
41
|
-
size: "small",
|
|
42
|
-
sx: { width: 1 },
|
|
43
|
-
onChange: (e) => setInternalValue({ ...internalValue, [code]: e.target.value }),
|
|
44
|
-
slotProps: {
|
|
45
|
-
input: {
|
|
46
|
-
startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", sx: { minWidth: 64 }, children: name })
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
) }) }, code);
|
|
51
|
-
}) })
|
|
52
|
-
] });
|
|
53
|
-
}
|
|
54
|
-
function TranslationTextField({ translationInputProps, InputProps, ...rest }) {
|
|
55
|
-
const { value: translation, onChange } = translationInputProps;
|
|
56
|
-
const [anchorEl, setAnchorEl] = useState(null);
|
|
57
|
-
const handleClick = (event) => {
|
|
58
|
-
const el = event.currentTarget.closest(".MuiInputBase-root");
|
|
59
|
-
if (el) {
|
|
60
|
-
setAnchorEl(el);
|
|
61
|
-
}
|
|
62
|
-
};
|
|
63
|
-
const handleClose = () => {
|
|
64
|
-
setAnchorEl(null);
|
|
65
|
-
};
|
|
66
|
-
const handleChange = (v) => {
|
|
67
|
-
onChange(v);
|
|
68
|
-
handleClose();
|
|
69
|
-
};
|
|
70
|
-
return /* @__PURE__ */ jsx(
|
|
71
|
-
TextField,
|
|
72
|
-
{
|
|
73
|
-
...rest,
|
|
74
|
-
slotProps: {
|
|
75
|
-
input: {
|
|
76
|
-
endAdornment: /* @__PURE__ */ jsxs(InputAdornment, { position: "end", children: [
|
|
77
|
-
/* @__PURE__ */ jsx(IconButton, { edge: "end", onClick: handleClick, children: /* @__PURE__ */ jsx(Translate, { sx: { fontSize: 18 } }) }),
|
|
78
|
-
/* @__PURE__ */ jsx(
|
|
79
|
-
Popover,
|
|
80
|
-
{
|
|
81
|
-
open: !!anchorEl,
|
|
82
|
-
anchorEl,
|
|
83
|
-
transformOrigin: {
|
|
84
|
-
vertical: "top",
|
|
85
|
-
horizontal: "right"
|
|
86
|
-
},
|
|
87
|
-
anchorOrigin: {
|
|
88
|
-
vertical: "bottom",
|
|
89
|
-
horizontal: "right"
|
|
90
|
-
},
|
|
91
|
-
slotProps: {
|
|
92
|
-
paper: { sx: { width: anchorEl?.clientWidth } }
|
|
93
|
-
},
|
|
94
|
-
elevation: 1,
|
|
95
|
-
transitionDuration: 0,
|
|
96
|
-
sx: { mt: 0.5 },
|
|
97
|
-
children: /* @__PURE__ */ jsx(TranslationInput, { value: translation, onChange: handleChange, onCancel: handleClose })
|
|
98
|
-
}
|
|
99
|
-
)
|
|
100
|
-
] }),
|
|
101
|
-
...InputProps
|
|
102
|
-
}
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
);
|
|
106
|
-
}
|
|
107
|
-
function TranslationTag({
|
|
108
|
-
locale,
|
|
109
|
-
value,
|
|
110
|
-
displayLanguageName
|
|
111
|
-
}) {
|
|
112
|
-
const { languages } = useLocaleContext();
|
|
113
|
-
return /* @__PURE__ */ jsxs(
|
|
114
|
-
Box,
|
|
115
|
-
{
|
|
116
|
-
sx: {
|
|
117
|
-
display: "flex",
|
|
118
|
-
alignItems: "center",
|
|
119
|
-
flex: "0 0 auto",
|
|
120
|
-
px: 1,
|
|
121
|
-
py: 0.25,
|
|
122
|
-
fontSize: 12,
|
|
123
|
-
color: "grey.800",
|
|
124
|
-
bgcolor: "grey.300",
|
|
125
|
-
borderRadius: 1
|
|
126
|
-
},
|
|
127
|
-
className: "label-translation-tag",
|
|
128
|
-
children: [
|
|
129
|
-
/* @__PURE__ */ jsx(Box, { sx: { pr: 0.5, borderRight: 1, borderColor: "grey.400" }, children: displayLanguageName ? languages.find((x) => x.code === locale)?.name || locale : locale }),
|
|
130
|
-
/* @__PURE__ */ jsx(Box, { sx: { pl: 0.5, color: "grey.700", fontWeight: "bold" }, children: value })
|
|
131
|
-
]
|
|
132
|
-
}
|
|
133
|
-
);
|
|
134
|
-
}
|
|
135
|
-
export {
|
|
136
|
-
TranslationInput,
|
|
137
|
-
TranslationTag,
|
|
138
|
-
TranslationTextField
|
|
139
|
-
};
|
package/dist/index.umd.js
DELETED
|
@@ -1,137 +0,0 @@
|
|
|
1
|
-
(function(global, factory) {
|
|
2
|
-
typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("@mui/material"), require("@mui/icons-material"), require("@mui/material/Popover"), require("react"), require("@arcblock/ux/lib/Locale/context")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "@mui/material", "@mui/icons-material", "@mui/material/Popover", "react", "@arcblock/ux/lib/Locale/context"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.TranslationInput = {}, global.jsxRuntime, global.material, global.iconsMaterial, global.Popover, global.react, global.context));
|
|
3
|
-
})(this, function(exports2, jsxRuntime, material, iconsMaterial, Popover, react, context) {
|
|
4
|
-
"use strict";
|
|
5
|
-
function TranslationInput({ value, onChange, onCancel, excludes = [], ...rest }) {
|
|
6
|
-
const { t, languages } = context.useLocaleContext();
|
|
7
|
-
const filteredLangs = languages.filter((item) => !excludes.includes(item.code));
|
|
8
|
-
const translate = (key, defaultValue) => {
|
|
9
|
-
const translated = t(key);
|
|
10
|
-
return translated === key ? defaultValue : translated;
|
|
11
|
-
};
|
|
12
|
-
const [internalValue, setInternalValue] = react.useState(value);
|
|
13
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { bgcolor: "grey.50" }, ...rest, children: [
|
|
14
|
-
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
15
|
-
material.Box,
|
|
16
|
-
{
|
|
17
|
-
sx: {
|
|
18
|
-
display: "flex",
|
|
19
|
-
alignItems: "center",
|
|
20
|
-
justifyContent: "space-between",
|
|
21
|
-
px: 2,
|
|
22
|
-
py: 0.8,
|
|
23
|
-
bgcolor: "grey.200"
|
|
24
|
-
},
|
|
25
|
-
children: [
|
|
26
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { color: "grey.600", fontSize: 13, fontWeight: "bold" }, children: translate("TranslationInput.translations", "Translations") }),
|
|
27
|
-
/* @__PURE__ */ jsxRuntime.jsxs(material.Box, { children: [
|
|
28
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.Button, { variant: "text", color: "inherit", size: "small", onClick: onCancel, sx: { mr: 1 }, children: translate("TranslationInput.cancel", "Cancel") }),
|
|
29
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.Button, { variant: "outlined", size: "small", onClick: () => onChange(internalValue), children: translate("TranslationInput.apply", "Apply") })
|
|
30
|
-
] })
|
|
31
|
-
]
|
|
32
|
-
}
|
|
33
|
-
),
|
|
34
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { maxHeight: 400, overflowY: "auto", p: 2 }, children: filteredLangs.map(({ code, name }) => {
|
|
35
|
-
return /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { "& + &": { mt: 1 } }, children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { flex: 1 }, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
36
|
-
material.TextField,
|
|
37
|
-
{
|
|
38
|
-
value: internalValue[code] || "",
|
|
39
|
-
size: "small",
|
|
40
|
-
sx: { width: 1 },
|
|
41
|
-
onChange: (e) => setInternalValue({ ...internalValue, [code]: e.target.value }),
|
|
42
|
-
slotProps: {
|
|
43
|
-
input: {
|
|
44
|
-
startAdornment: /* @__PURE__ */ jsxRuntime.jsx(material.InputAdornment, { position: "start", sx: { minWidth: 64 }, children: name })
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
}
|
|
48
|
-
) }) }, code);
|
|
49
|
-
}) })
|
|
50
|
-
] });
|
|
51
|
-
}
|
|
52
|
-
function TranslationTextField({ translationInputProps, InputProps, ...rest }) {
|
|
53
|
-
const { value: translation, onChange } = translationInputProps;
|
|
54
|
-
const [anchorEl, setAnchorEl] = react.useState(null);
|
|
55
|
-
const handleClick = (event) => {
|
|
56
|
-
const el = event.currentTarget.closest(".MuiInputBase-root");
|
|
57
|
-
if (el) {
|
|
58
|
-
setAnchorEl(el);
|
|
59
|
-
}
|
|
60
|
-
};
|
|
61
|
-
const handleClose = () => {
|
|
62
|
-
setAnchorEl(null);
|
|
63
|
-
};
|
|
64
|
-
const handleChange = (v) => {
|
|
65
|
-
onChange(v);
|
|
66
|
-
handleClose();
|
|
67
|
-
};
|
|
68
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
69
|
-
material.TextField,
|
|
70
|
-
{
|
|
71
|
-
...rest,
|
|
72
|
-
slotProps: {
|
|
73
|
-
input: {
|
|
74
|
-
endAdornment: /* @__PURE__ */ jsxRuntime.jsxs(material.InputAdornment, { position: "end", children: [
|
|
75
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.IconButton, { edge: "end", onClick: handleClick, children: /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Translate, { sx: { fontSize: 18 } }) }),
|
|
76
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
77
|
-
Popover,
|
|
78
|
-
{
|
|
79
|
-
open: !!anchorEl,
|
|
80
|
-
anchorEl,
|
|
81
|
-
transformOrigin: {
|
|
82
|
-
vertical: "top",
|
|
83
|
-
horizontal: "right"
|
|
84
|
-
},
|
|
85
|
-
anchorOrigin: {
|
|
86
|
-
vertical: "bottom",
|
|
87
|
-
horizontal: "right"
|
|
88
|
-
},
|
|
89
|
-
slotProps: {
|
|
90
|
-
paper: { sx: { width: anchorEl?.clientWidth } }
|
|
91
|
-
},
|
|
92
|
-
elevation: 1,
|
|
93
|
-
transitionDuration: 0,
|
|
94
|
-
sx: { mt: 0.5 },
|
|
95
|
-
children: /* @__PURE__ */ jsxRuntime.jsx(TranslationInput, { value: translation, onChange: handleChange, onCancel: handleClose })
|
|
96
|
-
}
|
|
97
|
-
)
|
|
98
|
-
] }),
|
|
99
|
-
...InputProps
|
|
100
|
-
}
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
);
|
|
104
|
-
}
|
|
105
|
-
function TranslationTag({
|
|
106
|
-
locale,
|
|
107
|
-
value,
|
|
108
|
-
displayLanguageName
|
|
109
|
-
}) {
|
|
110
|
-
const { languages } = context.useLocaleContext();
|
|
111
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
112
|
-
material.Box,
|
|
113
|
-
{
|
|
114
|
-
sx: {
|
|
115
|
-
display: "flex",
|
|
116
|
-
alignItems: "center",
|
|
117
|
-
flex: "0 0 auto",
|
|
118
|
-
px: 1,
|
|
119
|
-
py: 0.25,
|
|
120
|
-
fontSize: 12,
|
|
121
|
-
color: "grey.800",
|
|
122
|
-
bgcolor: "grey.300",
|
|
123
|
-
borderRadius: 1
|
|
124
|
-
},
|
|
125
|
-
className: "label-translation-tag",
|
|
126
|
-
children: [
|
|
127
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { pr: 0.5, borderRight: 1, borderColor: "grey.400" }, children: displayLanguageName ? languages.find((x) => x.code === locale)?.name || locale : locale }),
|
|
128
|
-
/* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { pl: 0.5, color: "grey.700", fontWeight: "bold" }, children: value })
|
|
129
|
-
]
|
|
130
|
-
}
|
|
131
|
-
);
|
|
132
|
-
}
|
|
133
|
-
exports2.TranslationInput = TranslationInput;
|
|
134
|
-
exports2.TranslationTag = TranslationTag;
|
|
135
|
-
exports2.TranslationTextField = TranslationTextField;
|
|
136
|
-
Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
|
|
137
|
-
});
|