mui-language-picker 2.0.0 → 2.1.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/.eslintrc.js +157 -171
- package/README.md +222 -164
- package/dist/LanguagePicker.js +3 -22
- package/dist/index.d.ts +1 -0
- package/dist/index.js +5 -0
- package/dist/langPicker/types.d.ts +3 -3
- package/dist/langTags.d.ts +3 -0
- package/dist/langTags.js +37 -1
- package/package.json +7 -10
- package/tsconfig.json +16 -15
package/.eslintrc.js
CHANGED
|
@@ -12,177 +12,163 @@ https://github.com/typescript-eslint/tslint-to-eslint-config/blob/master/docs/FA
|
|
|
12
12
|
Happy linting! 💖
|
|
13
13
|
*/
|
|
14
14
|
module.exports = {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
15
|
+
env: {
|
|
16
|
+
browser: true,
|
|
17
|
+
node: true,
|
|
18
|
+
},
|
|
19
|
+
extends: [
|
|
20
|
+
'plugin:@typescript-eslint/recommended',
|
|
21
|
+
'plugin:@typescript-eslint/recommended-requiring-type-checking',
|
|
22
|
+
'prettier',
|
|
23
|
+
],
|
|
24
|
+
parser: '@typescript-eslint/parser',
|
|
25
|
+
parserOptions: {
|
|
26
|
+
project: 'tsconfig.json',
|
|
27
|
+
sourceType: 'module',
|
|
28
|
+
},
|
|
29
|
+
plugins: [
|
|
30
|
+
'eslint-plugin-jsdoc',
|
|
31
|
+
'eslint-plugin-prefer-arrow',
|
|
32
|
+
'@typescript-eslint',
|
|
33
|
+
],
|
|
34
|
+
root: true,
|
|
35
|
+
rules: {
|
|
36
|
+
'@typescript-eslint/adjacent-overload-signatures': 'error',
|
|
37
|
+
'@typescript-eslint/array-type': [
|
|
38
|
+
'error',
|
|
39
|
+
{
|
|
40
|
+
default: 'array',
|
|
41
|
+
},
|
|
23
42
|
],
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
43
|
+
'@typescript-eslint/ban-types': [
|
|
44
|
+
'error',
|
|
45
|
+
{
|
|
46
|
+
types: {
|
|
47
|
+
Object: {
|
|
48
|
+
message: 'Avoid using the `Object` type. Did you mean `object`?',
|
|
49
|
+
},
|
|
50
|
+
Function: {
|
|
51
|
+
message:
|
|
52
|
+
'Avoid using the `Function` type. Prefer a specific function type, like `() => void`.',
|
|
53
|
+
},
|
|
54
|
+
Boolean: {
|
|
55
|
+
message: 'Avoid using the `Boolean` type. Did you mean `boolean`?',
|
|
56
|
+
},
|
|
57
|
+
Number: {
|
|
58
|
+
message: 'Avoid using the `Number` type. Did you mean `number`?',
|
|
59
|
+
},
|
|
60
|
+
String: {
|
|
61
|
+
message: 'Avoid using the `String` type. Did you mean `string`?',
|
|
62
|
+
},
|
|
63
|
+
Symbol: {
|
|
64
|
+
message: 'Avoid using the `Symbol` type. Did you mean `symbol`?',
|
|
65
|
+
},
|
|
66
|
+
},
|
|
67
|
+
},
|
|
33
68
|
],
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
],
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
1
|
|
140
|
-
],
|
|
141
|
-
"new-parens": "error",
|
|
142
|
-
"no-bitwise": "error",
|
|
143
|
-
"no-caller": "error",
|
|
144
|
-
"no-cond-assign": "error",
|
|
145
|
-
"no-console": "error",
|
|
146
|
-
"no-debugger": "error",
|
|
147
|
-
"no-empty": "error",
|
|
148
|
-
"no-empty-function": "off",
|
|
149
|
-
"no-eval": "error",
|
|
150
|
-
"no-fallthrough": "off",
|
|
151
|
-
"no-invalid-this": "off",
|
|
152
|
-
"no-new-wrappers": "error",
|
|
153
|
-
"no-shadow": "off",
|
|
154
|
-
"no-throw-literal": "error",
|
|
155
|
-
"no-trailing-spaces": "error",
|
|
156
|
-
"no-undef-init": "error",
|
|
157
|
-
"no-underscore-dangle": "off",
|
|
158
|
-
"no-unsafe-finally": "error",
|
|
159
|
-
"no-unused-expressions": "off",
|
|
160
|
-
"no-unused-labels": "error",
|
|
161
|
-
"no-use-before-define": "off",
|
|
162
|
-
"no-var": "error",
|
|
163
|
-
"object-shorthand": "error",
|
|
164
|
-
"one-var": [
|
|
165
|
-
"error",
|
|
166
|
-
"never"
|
|
167
|
-
],
|
|
168
|
-
"prefer-arrow/prefer-arrow-functions": [
|
|
169
|
-
"error",
|
|
170
|
-
{
|
|
171
|
-
"allowStandaloneDeclarations": true
|
|
172
|
-
}
|
|
173
|
-
],
|
|
174
|
-
"prefer-const": "error",
|
|
175
|
-
"radix": "error",
|
|
176
|
-
"spaced-comment": [
|
|
177
|
-
"error",
|
|
178
|
-
"always",
|
|
179
|
-
{
|
|
180
|
-
"markers": [
|
|
181
|
-
"/"
|
|
182
|
-
]
|
|
183
|
-
}
|
|
184
|
-
],
|
|
185
|
-
"use-isnan": "error",
|
|
186
|
-
"valid-typeof": "off"
|
|
187
|
-
}
|
|
69
|
+
'@typescript-eslint/consistent-type-assertions': 'error',
|
|
70
|
+
'@typescript-eslint/dot-notation': 'error',
|
|
71
|
+
'@typescript-eslint/explicit-function-return-type': 'off',
|
|
72
|
+
'@typescript-eslint/explicit-module-boundary-types': 'off',
|
|
73
|
+
'@typescript-eslint/naming-convention': [
|
|
74
|
+
'error',
|
|
75
|
+
{
|
|
76
|
+
selector: 'variable',
|
|
77
|
+
format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
|
|
78
|
+
leadingUnderscore: 'allow',
|
|
79
|
+
trailingUnderscore: 'forbid',
|
|
80
|
+
},
|
|
81
|
+
],
|
|
82
|
+
'@typescript-eslint/no-empty-function': 'error',
|
|
83
|
+
'@typescript-eslint/no-empty-interface': 'error',
|
|
84
|
+
'@typescript-eslint/no-explicit-any': 'off',
|
|
85
|
+
'@typescript-eslint/no-misused-new': 'error',
|
|
86
|
+
'@typescript-eslint/no-namespace': 'error',
|
|
87
|
+
'@typescript-eslint/no-parameter-properties': 'off',
|
|
88
|
+
'@typescript-eslint/no-shadow': [
|
|
89
|
+
'error',
|
|
90
|
+
{
|
|
91
|
+
hoist: 'all',
|
|
92
|
+
},
|
|
93
|
+
],
|
|
94
|
+
'@typescript-eslint/no-unused-expressions': 'error',
|
|
95
|
+
'@typescript-eslint/no-use-before-define': 'off',
|
|
96
|
+
'@typescript-eslint/no-var-requires': 'error',
|
|
97
|
+
'@typescript-eslint/prefer-for-of': 'error',
|
|
98
|
+
'@typescript-eslint/prefer-function-type': 'error',
|
|
99
|
+
'@typescript-eslint/prefer-namespace-keyword': 'error',
|
|
100
|
+
'@typescript-eslint/triple-slash-reference': [
|
|
101
|
+
'error',
|
|
102
|
+
{
|
|
103
|
+
path: 'always',
|
|
104
|
+
types: 'prefer-import',
|
|
105
|
+
lib: 'always',
|
|
106
|
+
},
|
|
107
|
+
],
|
|
108
|
+
'@typescript-eslint/typedef': 'off',
|
|
109
|
+
'@typescript-eslint/unified-signatures': 'error',
|
|
110
|
+
complexity: 'off',
|
|
111
|
+
'constructor-super': 'error',
|
|
112
|
+
'dot-notation': 'off',
|
|
113
|
+
eqeqeq: ['error', 'smart'],
|
|
114
|
+
'guard-for-in': 'error',
|
|
115
|
+
'id-denylist': [
|
|
116
|
+
'error',
|
|
117
|
+
'any',
|
|
118
|
+
'Number',
|
|
119
|
+
'number',
|
|
120
|
+
'String',
|
|
121
|
+
'string',
|
|
122
|
+
'Boolean',
|
|
123
|
+
'boolean',
|
|
124
|
+
'Undefined',
|
|
125
|
+
'undefined',
|
|
126
|
+
],
|
|
127
|
+
'id-match': 'error',
|
|
128
|
+
'jsdoc/check-alignment': 'error',
|
|
129
|
+
'jsdoc/check-indentation': 'error',
|
|
130
|
+
'jsdoc/newline-after-description': 'off',
|
|
131
|
+
'max-classes-per-file': ['error', 1],
|
|
132
|
+
'new-parens': 'error',
|
|
133
|
+
'no-bitwise': 'error',
|
|
134
|
+
'no-caller': 'error',
|
|
135
|
+
'no-cond-assign': 'error',
|
|
136
|
+
'no-console': 'error',
|
|
137
|
+
'no-debugger': 'error',
|
|
138
|
+
'no-empty': 'error',
|
|
139
|
+
'no-empty-function': 'off',
|
|
140
|
+
'no-eval': 'error',
|
|
141
|
+
'no-fallthrough': 'off',
|
|
142
|
+
'no-invalid-this': 'off',
|
|
143
|
+
'no-new-wrappers': 'error',
|
|
144
|
+
'no-shadow': 'off',
|
|
145
|
+
'no-throw-literal': 'error',
|
|
146
|
+
'no-trailing-spaces': 'error',
|
|
147
|
+
'no-undef-init': 'error',
|
|
148
|
+
'no-underscore-dangle': 'off',
|
|
149
|
+
'no-unsafe-finally': 'error',
|
|
150
|
+
'no-unused-expressions': 'off',
|
|
151
|
+
'no-unused-labels': 'error',
|
|
152
|
+
'no-use-before-define': 'off',
|
|
153
|
+
'no-var': 'error',
|
|
154
|
+
'object-shorthand': 'error',
|
|
155
|
+
'one-var': ['error', 'never'],
|
|
156
|
+
'prefer-arrow/prefer-arrow-functions': [
|
|
157
|
+
'error',
|
|
158
|
+
{
|
|
159
|
+
allowStandaloneDeclarations: true,
|
|
160
|
+
},
|
|
161
|
+
],
|
|
162
|
+
'prefer-const': 'error',
|
|
163
|
+
radix: 'error',
|
|
164
|
+
'spaced-comment': [
|
|
165
|
+
'error',
|
|
166
|
+
'always',
|
|
167
|
+
{
|
|
168
|
+
markers: ['/'],
|
|
169
|
+
},
|
|
170
|
+
],
|
|
171
|
+
'use-isnan': 'error',
|
|
172
|
+
'valid-typeof': 'off',
|
|
173
|
+
},
|
|
188
174
|
};
|
package/README.md
CHANGED
|
@@ -1,164 +1,222 @@
|
|
|
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)
|
|
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
|
-
| disabled\* | boolean | true if control disabled |
|
|
77
|
-
| t | ILanguagePickerStrings | localization strings (see below) |
|
|
78
|
-
|
|
79
|
-
\* parameters marked with an asterisk are optional
|
|
80
|
-
|
|
81
|
-
###
|
|
82
|
-
|
|
83
|
-
```typescript
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
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)
|
|
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
|
+
| disabled\* | boolean | true if control disabled |
|
|
77
|
+
| t | ILanguagePickerStrings | localization strings (see below) |
|
|
78
|
+
|
|
79
|
+
\* parameters marked with an asterisk are optional
|
|
80
|
+
|
|
81
|
+
### Helper functions
|
|
82
|
+
|
|
83
|
+
```typescript
|
|
84
|
+
import {
|
|
85
|
+
getLangTag,
|
|
86
|
+
getRtl,
|
|
87
|
+
getFamily
|
|
88
|
+
} from "mui-language-picker";
|
|
89
|
+
|
|
90
|
+
console.log(getLangTag(tag)) // Return langTag object (see below)
|
|
91
|
+
console.log(getRtl(tag)) // returns true if rtl script
|
|
92
|
+
console.log(getFamily(familyId)) // Returns fontFamily object (see below)
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
The `fontName` returned by the Language Picker is the `familyId`. Refer to [fonts.languagetechnology.org](https://fonts.languagetechnology.org/) for more information.
|
|
96
|
+
|
|
97
|
+
### Localization Strings
|
|
98
|
+
|
|
99
|
+
```typescript
|
|
100
|
+
export const languagePickerStrings_en = {
|
|
101
|
+
font: 'Font',
|
|
102
|
+
script: 'Script',
|
|
103
|
+
language: 'Language',
|
|
104
|
+
selectLanguage: 'Choose Language Details',
|
|
105
|
+
findALanguage: 'Find a language by name, code, or country',
|
|
106
|
+
codeExplained: 'Code Explained',
|
|
107
|
+
subtags: 'Subtags',
|
|
108
|
+
details: 'Details',
|
|
109
|
+
languageOf: 'A Language of $1$2.',
|
|
110
|
+
inScript: ' in the $1 script',
|
|
111
|
+
select: 'Save',
|
|
112
|
+
cancel: 'Cancel',
|
|
113
|
+
phonetic: 'Phonetic',
|
|
114
|
+
changeName: 'Change Name',
|
|
115
|
+
nameInstruction:
|
|
116
|
+
'If you would like to change the language name enter the new name here.',
|
|
117
|
+
newName: 'New Language Name',
|
|
118
|
+
change: 'Change',
|
|
119
|
+
} as ILanguagePickerStrings;
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
### Information returned by setInfo
|
|
123
|
+
|
|
124
|
+
```typescript
|
|
125
|
+
export interface LangTag {
|
|
126
|
+
full: string;
|
|
127
|
+
iana?: string[];
|
|
128
|
+
iso639_3?: string;
|
|
129
|
+
localname?: string;
|
|
130
|
+
localnames?: string[];
|
|
131
|
+
name: string;
|
|
132
|
+
names?: string[];
|
|
133
|
+
nophonvars?: boolean;
|
|
134
|
+
region?: string;
|
|
135
|
+
regionname?: string;
|
|
136
|
+
regions?: string[];
|
|
137
|
+
script: string;
|
|
138
|
+
sldr: boolean;
|
|
139
|
+
suppress?: boolean;
|
|
140
|
+
tag: string;
|
|
141
|
+
tags?: string[];
|
|
142
|
+
variants?: string[];
|
|
143
|
+
defaultFont?: string;
|
|
144
|
+
fonts?: string[];
|
|
145
|
+
windows?: string;
|
|
146
|
+
}
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
### Information returned by getFamily
|
|
150
|
+
|
|
151
|
+
```typescript
|
|
152
|
+
export interface IFamily {
|
|
153
|
+
defaults?: {
|
|
154
|
+
ttf: string;
|
|
155
|
+
woff?: string;
|
|
156
|
+
woff2?: string;
|
|
157
|
+
};
|
|
158
|
+
distributable: boolean;
|
|
159
|
+
fallback?: string;
|
|
160
|
+
family: string;
|
|
161
|
+
familyid: string;
|
|
162
|
+
files?: {
|
|
163
|
+
[fileid: string]: {
|
|
164
|
+
axes: {
|
|
165
|
+
ital?: number;
|
|
166
|
+
wght: number;
|
|
167
|
+
};
|
|
168
|
+
flourl?: string;
|
|
169
|
+
packagepath: string;
|
|
170
|
+
url?: string;
|
|
171
|
+
zippath?: string;
|
|
172
|
+
};
|
|
173
|
+
};
|
|
174
|
+
license?: 'OFL' | 'GPL3' | 'GPL' | 'Freeware' | 'proprietary' | 'shareware';
|
|
175
|
+
packageurl?: string;
|
|
176
|
+
siteurl?: string;
|
|
177
|
+
source?:
|
|
178
|
+
| 'SIL'
|
|
179
|
+
| 'Google'
|
|
180
|
+
| 'Microsoft'
|
|
181
|
+
| 'NLCI'
|
|
182
|
+
| 'STAR'
|
|
183
|
+
| 'Evertype'
|
|
184
|
+
| 'Lao Script';
|
|
185
|
+
status?: 'current' | 'archived' | 'deprecated';
|
|
186
|
+
version?: string;
|
|
187
|
+
ziproot?: string;
|
|
188
|
+
}
|
|
189
|
+
```
|
|
190
|
+
|
|
191
|
+
### Change control background
|
|
192
|
+
|
|
193
|
+
If the theme involves using a dark background, the control background can be changed with css. See also [material-ui](https://mui.com/) documentation.
|
|
194
|
+
|
|
195
|
+
```css
|
|
196
|
+
#LangBcp47 .MuiFilledInput-root {
|
|
197
|
+
background-color: rgba(255, 255, 255, 0.9);
|
|
198
|
+
}
|
|
199
|
+
```
|
|
200
|
+
|
|
201
|
+
### Build
|
|
202
|
+
|
|
203
|
+
```sh
|
|
204
|
+
npm install
|
|
205
|
+
npm run build
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
### Test
|
|
209
|
+
|
|
210
|
+
```sh
|
|
211
|
+
npm run clean
|
|
212
|
+
npm run index
|
|
213
|
+
npm test
|
|
214
|
+
```
|
|
215
|
+
|
|
216
|
+
### Testing Individual Suites
|
|
217
|
+
|
|
218
|
+
Here is an example for Language Picker tests:
|
|
219
|
+
|
|
220
|
+
```sh
|
|
221
|
+
npm test -- --watch LanguagePicker
|
|
222
|
+
```
|
package/dist/LanguagePicker.js
CHANGED
|
@@ -322,28 +322,9 @@ var LanguagePicker = function (props) {
|
|
|
322
322
|
var optList = function () {
|
|
323
323
|
if (!tag && debouncedResponse) {
|
|
324
324
|
var list = [];
|
|
325
|
-
|
|
326
|
-
if (
|
|
327
|
-
|
|
328
|
-
if (langTag)
|
|
329
|
-
list.push(langTag);
|
|
330
|
-
}
|
|
331
|
-
// check for a short tag match
|
|
332
|
-
if (list.length === 0 && (0, bcp47_1.bcp47Match)(debouncedResponse)) {
|
|
333
|
-
var lastDash = debouncedResponse.lastIndexOf('-');
|
|
334
|
-
while (lastDash > 0) {
|
|
335
|
-
var shortTag = debouncedResponse.slice(0, lastDash);
|
|
336
|
-
if ((0, langTags_1.hasExact)(shortTag)) {
|
|
337
|
-
var langTag = (0, langTags_1.getExact)(shortTag);
|
|
338
|
-
if (langTag) {
|
|
339
|
-
list.push(langTag);
|
|
340
|
-
break;
|
|
341
|
-
}
|
|
342
|
-
}
|
|
343
|
-
else {
|
|
344
|
-
lastDash = shortTag.lastIndexOf('-');
|
|
345
|
-
}
|
|
346
|
-
}
|
|
325
|
+
var tagLookup = (0, langTags_1.getLangTag)(debouncedResponse);
|
|
326
|
+
if (tagLookup) {
|
|
327
|
+
list.push(tagLookup);
|
|
347
328
|
}
|
|
348
329
|
// check for a part match
|
|
349
330
|
var words = debouncedResponse.split(' ');
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -14,5 +14,10 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
|
14
14
|
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
15
|
};
|
|
16
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.getFamily = exports.getRtl = exports.getLangTag = void 0;
|
|
17
18
|
__exportStar(require("./LanguagePicker"), exports);
|
|
18
19
|
__exportStar(require("./model"), exports);
|
|
20
|
+
var langTags_1 = require("./langTags");
|
|
21
|
+
Object.defineProperty(exports, "getLangTag", { enumerable: true, get: function () { return langTags_1.getLangTag; } });
|
|
22
|
+
Object.defineProperty(exports, "getRtl", { enumerable: true, get: function () { return langTags_1.getRtl; } });
|
|
23
|
+
Object.defineProperty(exports, "getFamily", { enumerable: true, get: function () { return langTags_1.getFamily; } });
|
|
@@ -52,11 +52,11 @@ export interface IFamily {
|
|
|
52
52
|
zippath?: string;
|
|
53
53
|
};
|
|
54
54
|
};
|
|
55
|
-
license?: 'OFL' | 'GPL3';
|
|
55
|
+
license?: 'OFL' | 'GPL3' | 'GPL' | 'Freeware' | 'proprietary' | 'shareware';
|
|
56
56
|
packageurl?: string;
|
|
57
57
|
siteurl?: string;
|
|
58
|
-
source?: 'SIL';
|
|
59
|
-
status?: 'current';
|
|
58
|
+
source?: 'SIL' | 'Google' | 'Microsoft' | 'NLCI' | 'STAR' | 'Evertype' | 'Lao Script';
|
|
59
|
+
status?: 'current' | 'archived' | 'deprecated';
|
|
60
60
|
version?: string;
|
|
61
61
|
ziproot?: string;
|
|
62
62
|
}
|
package/dist/langTags.d.ts
CHANGED
|
@@ -11,3 +11,6 @@ export declare const getScripts: (code: string) => string[];
|
|
|
11
11
|
export declare const scriptName: Map<string, string>;
|
|
12
12
|
export declare const fontMap: Map<string, string>;
|
|
13
13
|
export declare const displayFamily: (familyId: string) => string;
|
|
14
|
+
export declare const getFamily: (familyId: string) => import("./langPicker/types").IFamily;
|
|
15
|
+
export declare const getLangTag: (tag: string) => LangTag | undefined;
|
|
16
|
+
export declare const getRtl: (tag: string) => boolean;
|
package/dist/langTags.js
CHANGED
|
@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
3
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
4
|
};
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.displayFamily = exports.fontMap = exports.scriptName = exports.getScripts = exports.getPart = exports.hasPart = exports.getExact = exports.hasExact = exports.langTags = void 0;
|
|
6
|
+
exports.getRtl = exports.getLangTag = exports.getFamily = exports.displayFamily = exports.fontMap = exports.scriptName = exports.getScripts = exports.getPart = exports.hasPart = exports.getExact = exports.hasExact = exports.langTags = void 0;
|
|
7
7
|
var langtags_json_1 = __importDefault(require("./data/langtags.json"));
|
|
8
8
|
var tagIndex_1 = __importDefault(require("./data/tagIndex"));
|
|
9
9
|
var langtagsIndex_1 = __importDefault(require("./data/langtagsIndex"));
|
|
@@ -11,6 +11,8 @@ var scriptFontIndex_1 = __importDefault(require("./data/scriptFontIndex"));
|
|
|
11
11
|
var codeScripts_1 = __importDefault(require("./data/codeScripts"));
|
|
12
12
|
var scriptName_1 = __importDefault(require("./data/scriptName"));
|
|
13
13
|
var families_json_1 = __importDefault(require("./data/families.json"));
|
|
14
|
+
var bcp47_1 = require("./bcp47");
|
|
15
|
+
var rtlScripts_1 = __importDefault(require("./data/rtlScripts"));
|
|
14
16
|
exports.langTags = langtags_json_1.default;
|
|
15
17
|
exports.langTags.push({
|
|
16
18
|
full: 'qaa',
|
|
@@ -73,3 +75,37 @@ exports.fontMap = new Map(scriptFontIndex_1.default);
|
|
|
73
75
|
var families = families_json_1.default;
|
|
74
76
|
var displayFamily = function (familyId) { var _a, _b; return (_b = (_a = families[familyId]) === null || _a === void 0 ? void 0 : _a.family) !== null && _b !== void 0 ? _b : familyId; };
|
|
75
77
|
exports.displayFamily = displayFamily;
|
|
78
|
+
var getFamily = function (familyId) { return families[familyId]; };
|
|
79
|
+
exports.getFamily = getFamily;
|
|
80
|
+
var getLangTag = function (tag) {
|
|
81
|
+
// put exact code match at the top of the list
|
|
82
|
+
if ((0, exports.hasExact)(tag)) {
|
|
83
|
+
var langTag = (0, exports.getExact)(tag);
|
|
84
|
+
if (langTag)
|
|
85
|
+
return langTag;
|
|
86
|
+
}
|
|
87
|
+
// check for a short tag match
|
|
88
|
+
if ((0, bcp47_1.bcp47Match)(tag)) {
|
|
89
|
+
var lastDash = tag.lastIndexOf('-');
|
|
90
|
+
while (lastDash > 0) {
|
|
91
|
+
var shortTag = tag.slice(0, lastDash);
|
|
92
|
+
if ((0, exports.hasExact)(shortTag)) {
|
|
93
|
+
var langTag = (0, exports.getExact)(shortTag);
|
|
94
|
+
if (langTag) {
|
|
95
|
+
return langTag;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
else {
|
|
99
|
+
lastDash = shortTag.lastIndexOf('-');
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
};
|
|
104
|
+
exports.getLangTag = getLangTag;
|
|
105
|
+
var getRtl = function (tag) {
|
|
106
|
+
var langTag = (0, exports.getLangTag)(tag);
|
|
107
|
+
if (langTag)
|
|
108
|
+
return rtlScripts_1.default.includes(langTag.script);
|
|
109
|
+
return false;
|
|
110
|
+
};
|
|
111
|
+
exports.getRtl = getRtl;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mui-language-picker",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.1.0",
|
|
4
4
|
"description": "Material UI language picker",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
"clean": "rimraf dist coverage",
|
|
9
9
|
"index": "node src/langPicker/makeIndex2.js",
|
|
10
10
|
"build": "npm test && tsc",
|
|
11
|
-
"lint": "
|
|
11
|
+
"lint": "eslint src",
|
|
12
12
|
"pretest": "npm run lint",
|
|
13
13
|
"test": "jest"
|
|
14
14
|
},
|
|
@@ -37,30 +37,26 @@
|
|
|
37
37
|
"@emotion/styled": "^11.11.5",
|
|
38
38
|
"@mui/icons-material": "^5.15.14",
|
|
39
39
|
"@mui/material": "^5.15.14",
|
|
40
|
-
"@testing-library/jest-dom": "^6.4.2",
|
|
41
|
-
"@testing-library/react": "^14.2.2",
|
|
42
|
-
"@testing-library/user-event": "^14.5.2",
|
|
43
40
|
"@types/jest": "^29.5.12",
|
|
44
41
|
"@types/lodash": "^4.14.162",
|
|
45
42
|
"@types/node": "^16.18.61",
|
|
46
43
|
"@types/react": "^18.2.74",
|
|
47
44
|
"@types/react-dom": "^18.2.23",
|
|
48
|
-
"@typescript-eslint/eslint-plugin": "^7.
|
|
49
|
-
"@typescript-eslint/parser": "^7.
|
|
45
|
+
"@typescript-eslint/eslint-plugin": "^7.7.1",
|
|
46
|
+
"@typescript-eslint/parser": "^7.7.1",
|
|
50
47
|
"axios": "^1.6.8",
|
|
51
48
|
"copyfiles": "^2.4.1",
|
|
49
|
+
"eslint": "^8.57.0",
|
|
52
50
|
"eslint-config-prettier": "^9.1.0",
|
|
53
|
-
"eslint-plugin-jsdoc": "^48.2.
|
|
51
|
+
"eslint-plugin-jsdoc": "^48.2.3",
|
|
54
52
|
"eslint-plugin-prefer-arrow": "^1.2.3",
|
|
55
53
|
"jest": "^28.1.3",
|
|
56
54
|
"jest-environment-jsdom": "^28.1.3",
|
|
57
55
|
"prop-types": "^15.8.1",
|
|
58
56
|
"react": "^18.2.0",
|
|
59
57
|
"react-dom": "^18.2.0",
|
|
60
|
-
"react-testing-library": "^8.0.1",
|
|
61
58
|
"rimraf": "^5.0.5",
|
|
62
59
|
"ts-jest": "^28.0.8",
|
|
63
|
-
"tslint": "^6.1.3",
|
|
64
60
|
"typescript": "^4.9.5",
|
|
65
61
|
"write": "^2.0.0"
|
|
66
62
|
},
|
|
@@ -76,6 +72,7 @@
|
|
|
76
72
|
"trailingComma": "es5"
|
|
77
73
|
},
|
|
78
74
|
"dependencies": {
|
|
75
|
+
"@testing-library/react": "^15.0.4",
|
|
79
76
|
"lodash": "^4.17.21"
|
|
80
77
|
},
|
|
81
78
|
"jest": {
|
package/tsconfig.json
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
|
-
{
|
|
2
|
-
"compilerOptions": {
|
|
3
|
-
"target": "es5",
|
|
4
|
-
"module": "commonjs",
|
|
5
|
-
"declaration": true,
|
|
6
|
-
"outDir": "./dist",
|
|
7
|
-
"strict": true,
|
|
8
|
-
"allowJs": true,
|
|
9
|
-
"esModuleInterop": true,
|
|
10
|
-
"resolveJsonModule": true,
|
|
11
|
-
"moduleResolution": "node",
|
|
12
|
-
"isolatedModules": true,
|
|
13
|
-
"jsx": "react"
|
|
14
|
-
|
|
15
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "es5",
|
|
4
|
+
"module": "commonjs",
|
|
5
|
+
"declaration": true,
|
|
6
|
+
"outDir": "./dist",
|
|
7
|
+
"strict": true,
|
|
8
|
+
"allowJs": true,
|
|
9
|
+
"esModuleInterop": true,
|
|
10
|
+
"resolveJsonModule": true,
|
|
11
|
+
"moduleResolution": "node",
|
|
12
|
+
"isolatedModules": true,
|
|
13
|
+
"jsx": "react",
|
|
14
|
+
"skipLibCheck": true
|
|
15
|
+
}
|
|
16
|
+
}
|