mui-language-picker 2.3.1 → 2.4.0
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/README.md +227 -227
- package/dist/LanguagePicker.d.ts +2 -0
- package/dist/LanguagePicker.js +4 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,227 +1,227 @@
|
|
|
1
|
-
# mui-language-picker
|
|
2
|
-
|
|
3
|
-
Material UI react language picker
|
|
4
|
-
|
|
5
|
-
## Installation
|
|
6
|
-
|
|
7
|
-
Complete information for [material-ui](https://mui.com/material-ui/).
|
|
8
|
-
|
|
9
|
-
```sh
|
|
10
|
-
npm install mui-language-picker --save
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
## Demo
|
|
14
|
-
|
|
15
|
-
[Demo of mui-language-picker](https://giphy.com/embed/5OkWd7aMlxOClWuF0J) / [Same demo as a video](https://youtu.be/aviV8aEaNOo) / [Try it yourself](http://mui-language-picker-demo.org.s3-website-us-east-1.amazonaws.com)
|
|
16
|
-
|
|
17
|
-
see also: [demo repo](https://github.com/sillsdev/mui-language-picker-demo)
|
|
18
|
-
|
|
19
|
-
## Usage
|
|
20
|
-
|
|
21
|
-
### TypeScript React 18 code
|
|
22
|
-
|
|
23
|
-
```typescript
|
|
24
|
-
import {
|
|
25
|
-
LanguagePicker,
|
|
26
|
-
ILanguagePickerStrings,
|
|
27
|
-
languagePickerStrings_en,
|
|
28
|
-
LangTag,
|
|
29
|
-
} from "mui-language-picker";
|
|
30
|
-
|
|
31
|
-
const MyComponent = (props: any) => {
|
|
32
|
-
const [bcp47, setBcp47] = React.useState("und");
|
|
33
|
-
const [lgName, setLgName] = React.useState("");
|
|
34
|
-
const [fontName, setFontName] = React.useState("");
|
|
35
|
-
const [rtl, setRtl] = React.useState(false);
|
|
36
|
-
const [tag, setTag] = React.useState<LangTag>();
|
|
37
|
-
|
|
38
|
-
const displayName = (name: string, tag?: LangTag) => {
|
|
39
|
-
return tag?.localname ? `${tag?.localname} / ${name}` : tag?.name || name;
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
return (
|
|
43
|
-
<LanguagePicker
|
|
44
|
-
value={bcp47}
|
|
45
|
-
setCode={setBcp47}
|
|
46
|
-
name={lgName}
|
|
47
|
-
setName={setLgName}
|
|
48
|
-
font={fontName}
|
|
49
|
-
setFont={setFontName}
|
|
50
|
-
setDir={setRtl}
|
|
51
|
-
displayName={displayName}
|
|
52
|
-
setInfo={setTag}
|
|
53
|
-
t={languagePickerStrings_en}
|
|
54
|
-
/>
|
|
55
|
-
);
|
|
56
|
-
};
|
|
57
|
-
```
|
|
58
|
-
|
|
59
|
-
```sh
|
|
60
|
-
Output should be a Language Picker when entered opens a dialog
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
### Parameter definitions
|
|
64
|
-
|
|
65
|
-
| Parameter | Type | Meaning |
|
|
66
|
-
| ---------- | ----------------------- | ----------------------------------- |
|
|
67
|
-
| value | string | BCP 47 language code |
|
|
68
|
-
| setCode\* | (value: string) => void | callback to change BCP 47 value |
|
|
69
|
-
| name | string | language name |
|
|
70
|
-
| setName\* | (name: string) => void | callback to change language name |
|
|
71
|
-
| font | string | font family name |
|
|
72
|
-
| setFont\* | (font: string) => void | callback to change font family name |
|
|
73
|
-
| setDir\* | (rtl: boolean) => void | callback to change script direction |
|
|
74
|
-
| displayName\* | DisplayName | function to control display of name |
|
|
75
|
-
| setInfo\* | (tag: LangTag) => void | callback to receive tag information |
|
|
76
|
-
| filter\* | (tag: LangTag) => boolean | allows filtering languages found by tag |
|
|
77
|
-
| disabled\* | boolean | true if control disabled |
|
|
78
|
-
| offline\* | boolean | true if picker in offline setting |
|
|
79
|
-
| required\* | boolean | true if language required (show *) |
|
|
80
|
-
| t | ILanguagePickerStrings | localization strings (see below) |
|
|
81
|
-
|
|
82
|
-
\* parameters marked with an asterisk are optional
|
|
83
|
-
|
|
84
|
-
### Helper functions
|
|
85
|
-
|
|
86
|
-
```typescript
|
|
87
|
-
import {
|
|
88
|
-
getLangTag,
|
|
89
|
-
getRtl,
|
|
90
|
-
getFamily
|
|
91
|
-
} from "mui-language-picker";
|
|
92
|
-
|
|
93
|
-
console.log(getLangTag(tag)) // Return langTag object (see below)
|
|
94
|
-
console.log(getRtl(tag)) // returns true if rtl script
|
|
95
|
-
console.log(getFamily(familyId)) // Returns fontFamily object (see below)
|
|
96
|
-
```
|
|
97
|
-
|
|
98
|
-
The `fontName` returned by the Language Picker is the `familyId`. Refer to [fonts.languagetechnology.org](https://fonts.languagetechnology.org/) for more information.
|
|
99
|
-
|
|
100
|
-
### Localization Strings
|
|
101
|
-
|
|
102
|
-
```typescript
|
|
103
|
-
export const languagePickerStrings_en = {
|
|
104
|
-
font: 'Font',
|
|
105
|
-
script: 'Script',
|
|
106
|
-
language: 'Language',
|
|
107
|
-
selectLanguage: 'Choose Language Details',
|
|
108
|
-
findALanguage: 'Find a language by name, code, or country',
|
|
109
|
-
codeExplained: 'Code Explained',
|
|
110
|
-
subtags: 'Subtags',
|
|
111
|
-
details: 'Details',
|
|
112
|
-
languageOf: 'A Language of $1$2.',
|
|
113
|
-
inScript: ' in the $1 script',
|
|
114
|
-
select: 'Save',
|
|
115
|
-
cancel: 'Cancel',
|
|
116
|
-
phonetic: 'Phonetic',
|
|
117
|
-
changeName: 'Change Name',
|
|
118
|
-
nameInstruction:
|
|
119
|
-
'If you would like to change the language name enter the new name here.',
|
|
120
|
-
newName: 'New Language Name',
|
|
121
|
-
change: 'Change',
|
|
122
|
-
noFonts: 'No recommended fonts',
|
|
123
|
-
} as ILanguagePickerStrings;
|
|
124
|
-
```
|
|
125
|
-
|
|
126
|
-
### Information returned by setInfo
|
|
127
|
-
|
|
128
|
-
```typescript
|
|
129
|
-
export interface LangTag {
|
|
130
|
-
full: string;
|
|
131
|
-
iana?: string[];
|
|
132
|
-
iso639_3?: string;
|
|
133
|
-
localname?: string;
|
|
134
|
-
localnames?: string[];
|
|
135
|
-
name: string;
|
|
136
|
-
names?: string[];
|
|
137
|
-
nophonvars?: boolean;
|
|
138
|
-
region?: string;
|
|
139
|
-
regionname?: string;
|
|
140
|
-
regions?: string[];
|
|
141
|
-
script: string;
|
|
142
|
-
sldr: boolean;
|
|
143
|
-
suppress?: boolean;
|
|
144
|
-
tag: string;
|
|
145
|
-
tags?: string[];
|
|
146
|
-
variants?: string[];
|
|
147
|
-
defaultFont?: string;
|
|
148
|
-
fonts?: string[];
|
|
149
|
-
windows?: string;
|
|
150
|
-
}
|
|
151
|
-
```
|
|
152
|
-
|
|
153
|
-
### Information returned by getFamily
|
|
154
|
-
|
|
155
|
-
```typescript
|
|
156
|
-
export interface IFamily {
|
|
157
|
-
defaults?: {
|
|
158
|
-
ttf: string;
|
|
159
|
-
woff?: string;
|
|
160
|
-
woff2?: string;
|
|
161
|
-
};
|
|
162
|
-
distributable: boolean;
|
|
163
|
-
fallback?: string;
|
|
164
|
-
family: string;
|
|
165
|
-
familyid: string;
|
|
166
|
-
files?: {
|
|
167
|
-
[fileid: string]: {
|
|
168
|
-
axes: {
|
|
169
|
-
ital?: number;
|
|
170
|
-
wght: number;
|
|
171
|
-
};
|
|
172
|
-
flourl?: string;
|
|
173
|
-
packagepath: string;
|
|
174
|
-
url?: string;
|
|
175
|
-
zippath?: string;
|
|
176
|
-
};
|
|
177
|
-
};
|
|
178
|
-
license?: 'OFL' | 'GPL3' | 'GPL' | 'Freeware' | 'proprietary' | 'shareware';
|
|
179
|
-
packageurl?: string;
|
|
180
|
-
siteurl?: string;
|
|
181
|
-
source?:
|
|
182
|
-
| 'SIL'
|
|
183
|
-
| 'Google'
|
|
184
|
-
| 'Microsoft'
|
|
185
|
-
| 'NLCI'
|
|
186
|
-
| 'STAR'
|
|
187
|
-
| 'Evertype'
|
|
188
|
-
| 'Lao Script';
|
|
189
|
-
status?: 'current' | 'archived' | 'deprecated';
|
|
190
|
-
version?: string;
|
|
191
|
-
ziproot?: string;
|
|
192
|
-
}
|
|
193
|
-
```
|
|
194
|
-
|
|
195
|
-
### Change control background
|
|
196
|
-
|
|
197
|
-
If the theme involves using a dark background, the control background can be changed with css. See also [material-ui](https://mui.com/) documentation.
|
|
198
|
-
|
|
199
|
-
```css
|
|
200
|
-
#LangBcp47 .MuiFilledInput-root {
|
|
201
|
-
background-color: rgba(255, 255, 255, 0.9);
|
|
202
|
-
}
|
|
203
|
-
```
|
|
204
|
-
|
|
205
|
-
### Build
|
|
206
|
-
|
|
207
|
-
```sh
|
|
208
|
-
npm install
|
|
209
|
-
npm run data
|
|
210
|
-
npm run index
|
|
211
|
-
npm run build
|
|
212
|
-
```
|
|
213
|
-
|
|
214
|
-
### Test
|
|
215
|
-
|
|
216
|
-
```sh
|
|
217
|
-
npm run clean
|
|
218
|
-
npm test
|
|
219
|
-
```
|
|
220
|
-
|
|
221
|
-
### Testing Individual Suites
|
|
222
|
-
|
|
223
|
-
Here is an example for Language Picker tests:
|
|
224
|
-
|
|
225
|
-
```sh
|
|
226
|
-
npm test -- --watch LanguagePicker
|
|
227
|
-
```
|
|
1
|
+
# mui-language-picker
|
|
2
|
+
|
|
3
|
+
Material UI react language picker
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
Complete information for [material-ui](https://mui.com/material-ui/).
|
|
8
|
+
|
|
9
|
+
```sh
|
|
10
|
+
npm install mui-language-picker --save
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
## Demo
|
|
14
|
+
|
|
15
|
+
[Demo of mui-language-picker](https://giphy.com/embed/5OkWd7aMlxOClWuF0J) / [Same demo as a video](https://youtu.be/aviV8aEaNOo) / [Try it yourself](http://mui-language-picker-demo.org.s3-website-us-east-1.amazonaws.com)
|
|
16
|
+
|
|
17
|
+
see also: [demo repo](https://github.com/sillsdev/mui-language-picker-demo)
|
|
18
|
+
|
|
19
|
+
## Usage
|
|
20
|
+
|
|
21
|
+
### TypeScript React 18 code
|
|
22
|
+
|
|
23
|
+
```typescript
|
|
24
|
+
import {
|
|
25
|
+
LanguagePicker,
|
|
26
|
+
ILanguagePickerStrings,
|
|
27
|
+
languagePickerStrings_en,
|
|
28
|
+
LangTag,
|
|
29
|
+
} from "mui-language-picker";
|
|
30
|
+
|
|
31
|
+
const MyComponent = (props: any) => {
|
|
32
|
+
const [bcp47, setBcp47] = React.useState("und");
|
|
33
|
+
const [lgName, setLgName] = React.useState("");
|
|
34
|
+
const [fontName, setFontName] = React.useState("");
|
|
35
|
+
const [rtl, setRtl] = React.useState(false);
|
|
36
|
+
const [tag, setTag] = React.useState<LangTag>();
|
|
37
|
+
|
|
38
|
+
const displayName = (name: string, tag?: LangTag) => {
|
|
39
|
+
return tag?.localname ? `${tag?.localname} / ${name}` : tag?.name || name;
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
return (
|
|
43
|
+
<LanguagePicker
|
|
44
|
+
value={bcp47}
|
|
45
|
+
setCode={setBcp47}
|
|
46
|
+
name={lgName}
|
|
47
|
+
setName={setLgName}
|
|
48
|
+
font={fontName}
|
|
49
|
+
setFont={setFontName}
|
|
50
|
+
setDir={setRtl}
|
|
51
|
+
displayName={displayName}
|
|
52
|
+
setInfo={setTag}
|
|
53
|
+
t={languagePickerStrings_en}
|
|
54
|
+
/>
|
|
55
|
+
);
|
|
56
|
+
};
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
```sh
|
|
60
|
+
Output should be a Language Picker when entered opens a dialog
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
### Parameter definitions
|
|
64
|
+
|
|
65
|
+
| Parameter | Type | Meaning |
|
|
66
|
+
| ---------- | ----------------------- | ----------------------------------- |
|
|
67
|
+
| value | string | BCP 47 language code |
|
|
68
|
+
| setCode\* | (value: string) => void | callback to change BCP 47 value |
|
|
69
|
+
| name | string | language name |
|
|
70
|
+
| setName\* | (name: string) => void | callback to change language name |
|
|
71
|
+
| font | string | font family name |
|
|
72
|
+
| setFont\* | (font: string) => void | callback to change font family name |
|
|
73
|
+
| setDir\* | (rtl: boolean) => void | callback to change script direction |
|
|
74
|
+
| displayName\* | DisplayName | function to control display of name |
|
|
75
|
+
| setInfo\* | (tag: LangTag) => void | callback to receive tag information |
|
|
76
|
+
| filter\* | (tag: LangTag) => boolean | allows filtering languages found by tag |
|
|
77
|
+
| disabled\* | boolean | true if control disabled |
|
|
78
|
+
| offline\* | boolean | true if picker in offline setting |
|
|
79
|
+
| required\* | boolean | true if language required (show *) |
|
|
80
|
+
| t | ILanguagePickerStrings | localization strings (see below) |
|
|
81
|
+
|
|
82
|
+
\* parameters marked with an asterisk are optional
|
|
83
|
+
|
|
84
|
+
### Helper functions
|
|
85
|
+
|
|
86
|
+
```typescript
|
|
87
|
+
import {
|
|
88
|
+
getLangTag,
|
|
89
|
+
getRtl,
|
|
90
|
+
getFamily
|
|
91
|
+
} from "mui-language-picker";
|
|
92
|
+
|
|
93
|
+
console.log(getLangTag(tag)) // Return langTag object (see below)
|
|
94
|
+
console.log(getRtl(tag)) // returns true if rtl script
|
|
95
|
+
console.log(getFamily(familyId)) // Returns fontFamily object (see below)
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
The `fontName` returned by the Language Picker is the `familyId`. Refer to [fonts.languagetechnology.org](https://fonts.languagetechnology.org/) for more information.
|
|
99
|
+
|
|
100
|
+
### Localization Strings
|
|
101
|
+
|
|
102
|
+
```typescript
|
|
103
|
+
export const languagePickerStrings_en = {
|
|
104
|
+
font: 'Font',
|
|
105
|
+
script: 'Script',
|
|
106
|
+
language: 'Language',
|
|
107
|
+
selectLanguage: 'Choose Language Details',
|
|
108
|
+
findALanguage: 'Find a language by name, code, or country',
|
|
109
|
+
codeExplained: 'Code Explained',
|
|
110
|
+
subtags: 'Subtags',
|
|
111
|
+
details: 'Details',
|
|
112
|
+
languageOf: 'A Language of $1$2.',
|
|
113
|
+
inScript: ' in the $1 script',
|
|
114
|
+
select: 'Save',
|
|
115
|
+
cancel: 'Cancel',
|
|
116
|
+
phonetic: 'Phonetic',
|
|
117
|
+
changeName: 'Change Name',
|
|
118
|
+
nameInstruction:
|
|
119
|
+
'If you would like to change the language name enter the new name here.',
|
|
120
|
+
newName: 'New Language Name',
|
|
121
|
+
change: 'Change',
|
|
122
|
+
noFonts: 'No recommended fonts',
|
|
123
|
+
} as ILanguagePickerStrings;
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
### Information returned by setInfo
|
|
127
|
+
|
|
128
|
+
```typescript
|
|
129
|
+
export interface LangTag {
|
|
130
|
+
full: string;
|
|
131
|
+
iana?: string[];
|
|
132
|
+
iso639_3?: string;
|
|
133
|
+
localname?: string;
|
|
134
|
+
localnames?: string[];
|
|
135
|
+
name: string;
|
|
136
|
+
names?: string[];
|
|
137
|
+
nophonvars?: boolean;
|
|
138
|
+
region?: string;
|
|
139
|
+
regionname?: string;
|
|
140
|
+
regions?: string[];
|
|
141
|
+
script: string;
|
|
142
|
+
sldr: boolean;
|
|
143
|
+
suppress?: boolean;
|
|
144
|
+
tag: string;
|
|
145
|
+
tags?: string[];
|
|
146
|
+
variants?: string[];
|
|
147
|
+
defaultFont?: string;
|
|
148
|
+
fonts?: string[];
|
|
149
|
+
windows?: string;
|
|
150
|
+
}
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
### Information returned by getFamily
|
|
154
|
+
|
|
155
|
+
```typescript
|
|
156
|
+
export interface IFamily {
|
|
157
|
+
defaults?: {
|
|
158
|
+
ttf: string;
|
|
159
|
+
woff?: string;
|
|
160
|
+
woff2?: string;
|
|
161
|
+
};
|
|
162
|
+
distributable: boolean;
|
|
163
|
+
fallback?: string;
|
|
164
|
+
family: string;
|
|
165
|
+
familyid: string;
|
|
166
|
+
files?: {
|
|
167
|
+
[fileid: string]: {
|
|
168
|
+
axes: {
|
|
169
|
+
ital?: number;
|
|
170
|
+
wght: number;
|
|
171
|
+
};
|
|
172
|
+
flourl?: string;
|
|
173
|
+
packagepath: string;
|
|
174
|
+
url?: string;
|
|
175
|
+
zippath?: string;
|
|
176
|
+
};
|
|
177
|
+
};
|
|
178
|
+
license?: 'OFL' | 'GPL3' | 'GPL' | 'Freeware' | 'proprietary' | 'shareware';
|
|
179
|
+
packageurl?: string;
|
|
180
|
+
siteurl?: string;
|
|
181
|
+
source?:
|
|
182
|
+
| 'SIL'
|
|
183
|
+
| 'Google'
|
|
184
|
+
| 'Microsoft'
|
|
185
|
+
| 'NLCI'
|
|
186
|
+
| 'STAR'
|
|
187
|
+
| 'Evertype'
|
|
188
|
+
| 'Lao Script';
|
|
189
|
+
status?: 'current' | 'archived' | 'deprecated';
|
|
190
|
+
version?: string;
|
|
191
|
+
ziproot?: string;
|
|
192
|
+
}
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
### Change control background
|
|
196
|
+
|
|
197
|
+
If the theme involves using a dark background, the control background can be changed with css. See also [material-ui](https://mui.com/) documentation.
|
|
198
|
+
|
|
199
|
+
```css
|
|
200
|
+
#LangBcp47 .MuiFilledInput-root {
|
|
201
|
+
background-color: rgba(255, 255, 255, 0.9);
|
|
202
|
+
}
|
|
203
|
+
```
|
|
204
|
+
|
|
205
|
+
### Build
|
|
206
|
+
|
|
207
|
+
```sh
|
|
208
|
+
npm install
|
|
209
|
+
npm run data
|
|
210
|
+
npm run index
|
|
211
|
+
npm run build
|
|
212
|
+
```
|
|
213
|
+
|
|
214
|
+
### Test
|
|
215
|
+
|
|
216
|
+
```sh
|
|
217
|
+
npm run clean
|
|
218
|
+
npm test
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
### Testing Individual Suites
|
|
222
|
+
|
|
223
|
+
Here is an example for Language Picker tests:
|
|
224
|
+
|
|
225
|
+
```sh
|
|
226
|
+
npm test -- --watch LanguagePicker
|
|
227
|
+
```
|
package/dist/LanguagePicker.d.ts
CHANGED
|
@@ -19,6 +19,8 @@ interface IProps extends IStateProps {
|
|
|
19
19
|
disabled?: boolean;
|
|
20
20
|
offline?: boolean;
|
|
21
21
|
required?: boolean;
|
|
22
|
+
noScript?: boolean;
|
|
23
|
+
noFont?: boolean;
|
|
22
24
|
}
|
|
23
25
|
export declare const LanguagePicker: (props: IProps) => React.JSX.Element;
|
|
24
26
|
export default LanguagePicker;
|
package/dist/LanguagePicker.js
CHANGED
|
@@ -68,7 +68,7 @@ var StyledDialog = (0, material_1.styled)(material_1.Dialog)(function () { retur
|
|
|
68
68
|
}); });
|
|
69
69
|
var LanguagePicker = function (props) {
|
|
70
70
|
var _a;
|
|
71
|
-
var disabled = props.disabled, offline = props.offline, required = props.required, filter = props.filter;
|
|
71
|
+
var disabled = props.disabled, offline = props.offline, required = props.required, filter = props.filter, noScript = props.noScript, noFont = props.noFont;
|
|
72
72
|
var value = props.value, name = props.name, font = props.font, setCode = props.setCode, setName = props.setName, setFont = props.setFont, setInfo = props.setInfo, setDir = props.setDir, t = props.t;
|
|
73
73
|
var displayName = props.displayName;
|
|
74
74
|
var _b = react_1.default.useState(false), open = _b[0], setOpen = _b[1];
|
|
@@ -423,14 +423,14 @@ var LanguagePicker = function (props) {
|
|
|
423
423
|
react_1.default.createElement(Clear_1.default, { color: "primary" })))),
|
|
424
424
|
} }),
|
|
425
425
|
optList(),
|
|
426
|
-
react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.TextField, { id: "select-script", "data-testid": "select-script", select: true, sx: { mx: 1 }, fullWidth: true, label: "".concat(t.script, " *"), value: defaultScript, onChange: handleScriptChange(tag), margin: "normal", variant: "filled" }, scriptList(tag)
|
|
426
|
+
!noScript && (react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.TextField, { id: "select-script", "data-testid": "select-script", select: true, sx: { mx: 1 }, fullWidth: true, label: "".concat(t.script, " *"), value: defaultScript, onChange: handleScriptChange(tag), margin: "normal", variant: "filled" }, scriptList(tag)
|
|
427
427
|
.map(function (s) { return (react_1.default.createElement(material_1.MenuItem, { key: s, value: s }, langTags_1.scriptName.get(s) + ' - ' + s)); })
|
|
428
428
|
.concat(scriptList(tag).includes(defaultScript)
|
|
429
429
|
? []
|
|
430
430
|
: [
|
|
431
431
|
react_1.default.createElement(material_1.MenuItem, { key: defaultScript, value: defaultScript }, defaultScript),
|
|
432
|
-
])), label: "", sx: { width: '95%' } }),
|
|
433
|
-
react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.TextField, { id: "select-font", "data-testid": "select-font", select: hasFonts, helperText: !hasFonts ? t.noFonts : undefined, sx: { mx: 1 }, fullWidth: true, label: "".concat(t.font).concat(hasFonts ? ' *' : ''), value: fontOpts.includes(curFont) ? curFont : '', onChange: addFontInfo, margin: "normal", variant: "filled" }, fontOpts.map(function (s) { return (react_1.default.createElement(material_1.MenuItem, { key: s, value: s }, (0, langTags_1.displayFamily)(s))); })), label: "", sx: { width: '95%' } })),
|
|
432
|
+
])), label: "", sx: { width: '95%' } })),
|
|
433
|
+
!noFont && (react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.TextField, { id: "select-font", "data-testid": "select-font", select: hasFonts, helperText: !hasFonts ? t.noFonts : undefined, sx: { mx: 1 }, fullWidth: true, label: "".concat(t.font).concat(hasFonts ? ' *' : ''), value: fontOpts.includes(curFont) ? curFont : '', onChange: addFontInfo, margin: "normal", variant: "filled" }, fontOpts.map(function (s) { return (react_1.default.createElement(material_1.MenuItem, { key: s, value: s }, (0, langTags_1.displayFamily)(s))); })), label: "", sx: { width: '95%' } }))),
|
|
434
434
|
react_1.default.createElement(material_1.DialogActions, null,
|
|
435
435
|
!offline && (react_1.default.createElement("a", { href: "https://www.w3.org/International/questions/qa-choosing-language-tags", target: "_blank", rel: "noopener noreferrer" },
|
|
436
436
|
react_1.default.createElement(material_1.Typography, null, t.codeExplained))),
|