mui-language-picker 1.3.0 → 2.0.0

package/dist/LanguageChoice.d.ts

@@ -1,13 +1,11 @@
 import React from 'react';
 import { ILanguagePickerStrings } from './model';
-import { LangTag, ScriptName } from './langPicker/types';
+import { LangTag } from './langPicker/types';
 import { DisplayName } from './getDisplayName';
 interface IProps {
-    list: number[];
+    list: LangTag[];
     choose: (tag: LangTag) => void;
     secondary?: boolean;
-    langTags: LangTag[];
-    scriptName: ScriptName;
     displayName?: DisplayName;
     t: ILanguagePickerStrings;
 }

package/dist/LanguageChoice.js

@@ -26,11 +26,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LanguageChoice = void 0;
 var react_1 = __importStar(require("react"));
 var material_1 = require("@mui/material");
+var langTags_1 = require("./langTags");
 var lodash_1 = require("lodash");
 var GrowingSpacer_1 = require("./GrowingSpacer");
 var getDisplayName_1 = require("./getDisplayName");
 function LanguageChoice(props) {
-    var list = props.list, langTags = props.langTags, scriptName = props.scriptName, secondary = props.secondary, t = props.t, choose = props.choose;
+    var list = props.list, secondary = props.secondary, t = props.t, choose = props.choose;
     var displayName = props.displayName;
     var dense = (0, react_1.useState)(true)[0];
     var _a = (0, react_1.useState)(window.innerHeight), height = _a[0], setHeight = _a[1];
@@ -38,7 +39,7 @@ function LanguageChoice(props) {
         choose(tag);
     }; };
     var handleKeydown = function (tag) { return function (e) {
-        if (e.key === " " || e.key === "Enter") {
+        if (e.key === ' ' || e.key === 'Enter') {
             choose(tag);
         }
     }; };
@@ -50,9 +51,10 @@ function LanguageChoice(props) {
         };
     }, []);
     var scriptDetail = function (tag) {
+        var _a;
         var tagParts = tag.tag.split('-');
         return tagParts.length > 1 && tagParts[1].length === 4
-            ? t.inScript.replace('$1', scriptName[tagParts[1]])
+            ? t.inScript.replace('$1', (_a = langTags_1.scriptName.get(tagParts[1])) !== null && _a !== void 0 ? _a : tagParts[1])
             : '';
     };
     var detail = function (tag) {
@@ -63,9 +65,9 @@ function LanguageChoice(props) {
             react_1.default.createElement("br", null),
             react_1.default.createElement(material_1.Typography, { component: 'span' }, tag.names ? tag.names.join(', ') : '')));
     };
-    var langElems = function (refList, refTags) {
-        return refList.map(function (r, i) {
-            var tag = refTags[r];
+    var langElems = function (refList) {
+        var filteredList = refList.filter(function (tag) { return Boolean(tag === null || tag === void 0 ? void 0 : tag.tag); });
+        return filteredList.map(function (tag, i) {
             return (react_1.default.createElement(material_1.ListItemButton, { key: "".concat(tag.tag, " ").concat(i), onClick: handleChoose(tag), onKeyDown: handleKeydown(tag) },
                 react_1.default.createElement(material_1.ListItemText, { primary: react_1.default.createElement(material_1.Box, { sx: { display: 'flex' } },
                         react_1.default.createElement(material_1.Typography, null, (0, getDisplayName_1.getDisplayName)(tag.name, tag, displayName)),
@@ -75,7 +77,7 @@ function LanguageChoice(props) {
     };
     return (react_1.default.createElement(material_1.Box, { sx: { flexGrow: 1, maxWidth: 752 } },
         react_1.default.createElement(material_1.Box, { sx: { backgroundColor: 'background.paper' } },
-            react_1.default.createElement(material_1.List, { dense: dense, sx: { overflowY: 'scroll' }, style: { maxHeight: Math.max(height - 450, 200) } }, langElems(list, langTags)))));
+            react_1.default.createElement(material_1.List, { dense: dense, sx: { overflowY: 'scroll' }, style: { maxHeight: Math.max(height - 450, 200) } }, langElems(list)))));
 }
 exports.LanguageChoice = LanguageChoice;
 exports.default = LanguageChoice;

package/dist/LanguagePicker.js

@@ -19,12 +19,7 @@ var react_1 = __importDefault(require("react"));
 var material_1 = require("@mui/material");
 var Clear_1 = __importDefault(require("@mui/icons-material/Clear"));
 var BorderColor_1 = __importDefault(require("@mui/icons-material/BorderColor"));
-var util_1 = require("./util");
 var LanguageChoice_1 = __importDefault(require("./LanguageChoice"));
-var LgExact_1 = require("./index/LgExact");
-var LgScripts_1 = require("./index/LgScripts");
-var LgScriptName_1 = require("./index/LgScriptName");
-var LgFontMap_1 = require("./index/LgFontMap");
 var bcp47_1 = require("./bcp47");
 var langTags_1 = require("./langTags");
 var useDebounce_1 = __importDefault(require("./useDebounce"));
@@ -58,13 +53,14 @@ var LanguagePicker = function (props) {
     var langEl = react_1.default.useRef(null);
     var debouncedResponse = (0, useDebounce_1.default)({ value: response, delay: 500 });
     var IpaTag = 'fonipa';
-    if (!LgScriptName_1.scriptName.hasOwnProperty(IpaTag))
-        LgScriptName_1.scriptName[IpaTag] = t.phonetic;
+    if (!langTags_1.scriptName.has(IpaTag))
+        langTags_1.scriptName.set(IpaTag, t.phonetic);
     var respFormat = function (iname, tagVal) { return "".concat(iname, " (").concat(tagVal, ")"); };
     var handleClickOpen = function (e) {
         if (disabled)
             return;
-        if ((e === null || e === void 0 ? void 0 : e.key) && ["Tab", "Shift", "Control"].indexOf(e.key) !== -1)
+        if ((e === null || e === void 0 ? void 0 : e.key) &&
+            ['Tab', 'Shift', 'Control'].indexOf(e.key) !== -1)
             return;
         var found = (0, bcp47_1.bcp47Find)(curValue);
         if (curValue !== 'und') {
@@ -76,13 +72,15 @@ var LanguagePicker = function (props) {
                 setDefaultScript(found.script);
             }
             else {
-                var key = (curValue !== null && curValue !== void 0 ? curValue : '').toLocaleLowerCase();
-                if ((0, LgExact_1.hasExact)(key)) {
+                var key = curValue !== null && curValue !== void 0 ? curValue : '';
+                if ((0, langTags_1.hasExact)(key)) {
                     setResponse(respFormat(curName, curValue));
-                    var langTag = langTags_1.langTags[(0, LgExact_1.getExact)(key)[0]];
-                    setTag(langTag);
-                    selectFont(langTag);
-                    setDefaultScript(langTag.script);
+                    var langTag = (0, langTags_1.getExact)(key);
+                    if (langTag) {
+                        setTag(langTag);
+                        selectFont(langTag);
+                        setDefaultScript(langTag.script);
+                    }
                 }
                 else {
                     handleClear();
@@ -157,15 +155,19 @@ var LanguagePicker = function (props) {
         setCurFont(e.target.value);
     };
     var safeFonts = [
-        { value: 'NotoSansLatn', label: 'Noto Sans (Recommended)', rtl: false },
-        { value: 'AnnapurnaSIL', label: 'Annapurna SIL (Indic)', rtl: false },
-        { value: 'Scheherazade', label: 'Scheherazade (Arabic)', rtl: true },
-        { value: 'SimSun', label: 'SimSun (Chinese)', rtl: false },
+        { value: 'charissil', label: 'Charis SIL (Recommended)', rtl: false },
+        { value: 'annapurnasil', label: 'Annapurna SIL (Indic)', rtl: false },
+        { value: 'scheherazadenew', label: 'Scheherazade New (Arabic)', rtl: true },
+        { value: 'notosanstc', label: 'Noto Sans TC (Chinese)', rtl: false },
     ];
     var selectDefaultFont = function (code) {
-        var fonts = LgFontMap_1.fontMap[code];
-        setCurFont(fonts[0]);
-        setFontOpts(fonts);
+        var fontFamilyText = langTags_1.fontMap.get(code);
+        if (fontFamilyText) {
+            var fontFamily_1 = JSON.parse(fontFamilyText);
+            var familyId = fontFamily_1.defaultfamily[0];
+            setCurFont(fontFamily_1.families[familyId].familyid);
+            setFontOpts(Object.keys(fontFamily_1.families).map(function (f) { return fontFamily_1.families[f].familyid; }));
+        }
     };
     var selectFont = function (tagP) {
         if (!tagP || tagP.tag === 'und')
@@ -176,11 +178,11 @@ var LanguagePicker = function (props) {
         var code = script;
         if (region) {
             code = script + '-' + region;
-            if (!LgFontMap_1.fontMap.hasOwnProperty(code)) {
+            if (!langTags_1.fontMap.has(code)) {
                 code = script;
             }
         }
-        if (!LgFontMap_1.fontMap.hasOwnProperty(code)) {
+        if (!langTags_1.fontMap.has(code)) {
             setCurFont(safeFonts[0].value);
             setFontOpts(safeFonts.map(function (f) { return f.value; }));
         }
@@ -213,7 +215,11 @@ var LanguagePicker = function (props) {
         var val = e.target.value;
         setDefaultScript(val);
         var parse = (0, bcp47_1.bcp47Parse)(curValue);
-        var script = parse.script ? parse.script : tagP === null || tagP === void 0 ? void 0 : tagP.script;
+        var script = parse.variant === IpaTag
+            ? IpaTag
+            : parse.script
+                ? parse.script
+                : tagP === null || tagP === void 0 ? void 0 : tagP.script;
         if (script !== val) {
             var newTag = parse.language || 'und';
             if (val !== IpaTag)
@@ -236,7 +242,7 @@ var LanguagePicker = function (props) {
                 });
                 displayTag(__assign(__assign({}, firstFind), { tag: myTag_1 }));
                 if (val === IpaTag)
-                    selectDefaultFont(IpaTag);
+                    selectDefaultFont('Latn');
                 else
                     selectFont(firstFind);
             }
@@ -250,7 +256,7 @@ var LanguagePicker = function (props) {
     var scriptList = function (tagP) {
         if (!tagP)
             return [];
-        return (0, LgScripts_1.getScripts)(tagP.tag.split('-')[0]).concat(IpaTag);
+        return (0, langTags_1.getScripts)(tagP.tag.split('-')[0]).concat(IpaTag);
     };
     var handleLanguageClick = function () {
         if (tag)
@@ -313,55 +319,59 @@ var LanguagePicker = function (props) {
         selectScript(newTag);
         selectFont(newTag);
     };
-    var mergeList = function (list, adds) {
-        var result = list.filter(function (e) { return adds.filter(function (f) { return e === f; }).length > 0; });
-        result = result.concat(list.filter(function (e) { return adds.filter(function (f) { return e === f; }).length === 0; }));
-        return result.concat(adds.filter(function (e) { return list.filter(function (f) { return e === f; }).length === 0; }));
-    };
     var optList = function () {
-        if (!tag && response) {
-            var list_1 = Array();
-            debouncedResponse.split(' ').forEach(function (w) {
-                if (w.length > 1) {
-                    var wLangTags = (0, bcp47_1.bcp47Index)(w);
-                    if (wLangTags) {
-                        list_1 = mergeList(list_1, wLangTags);
+        if (!tag && debouncedResponse) {
+            var list = [];
+            // put exact code match at the top of the list
+            if ((0, langTags_1.hasExact)(debouncedResponse)) {
+                var langTag = (0, langTags_1.getExact)(debouncedResponse);
+                if (langTag)
+                    list.push(langTag);
+            }
+            // check for a short tag match
+            if (list.length === 0 && (0, bcp47_1.bcp47Match)(debouncedResponse)) {
+                var lastDash = debouncedResponse.lastIndexOf('-');
+                while (lastDash > 0) {
+                    var shortTag = debouncedResponse.slice(0, lastDash);
+                    if ((0, langTags_1.hasExact)(shortTag)) {
+                        var langTag = (0, langTags_1.getExact)(shortTag);
+                        if (langTag) {
+                            list.push(langTag);
+                            break;
+                        }
                     }
                     else {
-                        var token = (0, util_1.woBadChar)(w).toLocaleLowerCase();
-                        if ((0, LgExact_1.hasExact)(token)) {
-                            list_1 = mergeList(list_1, (0, LgExact_1.getExact)(token));
-                        }
+                        lastDash = shortTag.lastIndexOf('-');
                     }
                 }
-            });
-            debouncedResponse.split(' ').forEach(function (w) {
-                if (w.length > 1) {
-                    var lastDash = w.lastIndexOf('-');
-                    if (lastDash !== -1) {
-                        var wLangTags = (0, bcp47_1.bcp47Index)(w.slice(0, lastDash));
-                        if (wLangTags)
-                            list_1 = mergeList(list_1, wLangTags);
+            }
+            // check for a part match
+            var words = debouncedResponse.split(' ');
+            var firstWord = words[0];
+            if ((0, langTags_1.hasPart)(firstWord)) {
+                var matches = (0, langTags_1.getPart)(firstWord);
+                if (matches) {
+                    var result_1 = matches.result;
+                    if (list.length > 0) {
+                        var exact_1 = list[0].tag;
+                        result_1 = result_1.filter(function (e) { return e.tag !== exact_1; });
                     }
-                    else {
-                        var token_1 = (0, util_1.woBadChar)(w).toLocaleLowerCase();
-                        if ((0, LgExact_1.hasPart)(token_1)) {
-                            var tokLen_1 = token_1.length;
-                            Object.keys((0, LgExact_1.getPart)(token_1)).forEach(function (k) {
-                                if (list_1.length < MAXOPTIONS) {
-                                    if (token_1 === k.slice(0, tokLen_1))
-                                        list_1 = mergeList(list_1, (0, LgExact_1.getExact)(k));
-                                }
-                            });
-                        }
+                    if (words.length > 1) {
+                        words.slice(1).forEach(function (word) {
+                            var nextMatches = (0, langTags_1.getPart)(word);
+                            if (nextMatches) {
+                                result_1 = result_1.filter(function (e) { return nextMatches.result.includes(e); });
+                            }
+                        });
                     }
+                    list.push.apply(list, result_1);
                 }
-            });
-            if (list_1.length > 0) {
+            }
+            if (list.slice(0, MAXOPTIONS).length > 0) {
                 return (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement(material_1.FormGroup, { row: true, sx: { justifyContent: 'flex-end' } },
                         react_1.default.createElement(material_1.FormControlLabel, { sx: { flexDirection: 'row-reverse', mr: 0 }, control: react_1.default.createElement(material_1.Checkbox, { checked: secondary, onChange: function (event) { return setSecondary(event.target.checked); }, value: "secondary" }), label: t.details })),
-                    react_1.default.createElement(LanguageChoice_1.default, { list: list_1, secondary: secondary, choose: handleChoose, langTags: langTags_1.langTags, scriptName: LgScriptName_1.scriptName, displayName: displayName, t: t })));
+                    react_1.default.createElement(LanguageChoice_1.default, { list: list, secondary: secondary, choose: handleChoose, displayName: displayName, t: t })));
             }
         }
         return react_1.default.createElement(react_1.default.Fragment, null);
@@ -381,7 +391,7 @@ var LanguagePicker = function (props) {
                 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: { width: 150, mx: 1 }, label: "".concat(t.script, " *"), value: defaultScript, onChange: handleScriptChange(tag), style: { width: 400 }, SelectProps: {
                             MenuProps: __assign({ sx: menuWidth }),
                         }, margin: "normal", variant: "filled" }, scriptList(tag)
-                        .map(function (s) { return (react_1.default.createElement(material_1.MenuItem, { key: s, value: s }, LgScriptName_1.scriptName[s] + ' - ' + s)); })
+                        .map(function (s) { return (react_1.default.createElement(material_1.MenuItem, { key: s, value: s }, langTags_1.scriptName.get(s) + ' - ' + s)); })
                         .concat(scriptList(tag).includes(defaultScript)
                         ? []
                         : [
@@ -389,7 +399,7 @@ var LanguagePicker = function (props) {
                         ])), label: "" }),
                 react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.TextField, { id: "select-font", "data-testid": "select-font", select: true, sx: { width: 300, mx: 1 }, label: "".concat(t.font, " *"), value: fontOpts.includes(curFont) ? curFont : '', onChange: addFontInfo, SelectProps: {
                             MenuProps: __assign({ sx: menuWidth }),
-                        }, margin: "normal", variant: "filled" }, fontOpts.map(function (s) { return (react_1.default.createElement(material_1.MenuItem, { key: s, value: s }, s)); })), label: "" })),
+                        }, 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: "" })),
             react_1.default.createElement(material_1.DialogActions, null,
                 react_1.default.createElement("a", { href: "https://www.w3.org/International/questions/qa-choosing-language-tags", target: "_blank", rel: "noopener noreferrer" },
                     react_1.default.createElement(material_1.Typography, null, t.codeExplained)),

package/dist/data/codeScripts.d.ts

@@ -0,0 +1,2 @@
+declare const _default: ((string | null[])[] | (string | string[])[])[];
+export default _default;