mui-language-picker 2.1.4 → 2.1.5

package/README.md

@@ -74,6 +74,8 @@ Output should be a Language Picker when entered opens a dialog
 | displayName\* | DisplayName          | function to control display of name |
 | setInfo\*  | (tag: LangTag) => void  | callback to receive tag information |
 | disabled\* | boolean                 | true if control disabled            |
+| offline\*  | boolean                 | true if picker in offline setting   |
+| required\* | boolean                 | true if language required (show *)  |
 | t          | ILanguagePickerStrings  | localization strings (see below)    |
 
 \* parameters marked with an asterisk are optional
@@ -116,6 +118,7 @@ export const languagePickerStrings_en = {
     'If you would like to change the language name enter the new name here.',
   newName: 'New Language Name',
   change: 'Change',
+  noFonts: 'No recommended fonts',
 } as ILanguagePickerStrings;
 ```
 

package/dist/LanguagePicker.d.ts

@@ -16,6 +16,8 @@ interface IProps extends IStateProps {
     setInfo?: (tag: LangTag) => void;
     setDir?: (rtl: boolean) => void;
     disabled?: boolean;
+    offline?: boolean;
+    required?: boolean;
 }
 export declare const LanguagePicker: (props: IProps) => React.JSX.Element;
 export default LanguagePicker;

package/dist/LanguagePicker.js

@@ -10,12 +10,44 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.LanguagePicker = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(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"));
@@ -28,7 +60,6 @@ var ChangeName_1 = __importDefault(require("./ChangeName"));
 var getDisplayName_1 = require("./getDisplayName");
 var rtlScripts_1 = __importDefault(require("./data/rtlScripts"));
 var MAXOPTIONS = 50;
-var menuWidth = { width: 200 };
 var StyledDialog = (0, material_1.styled)(material_1.Dialog)(function () { return ({
     '& .MuiDialog-paperScrollPaper': {
         marginBottom: 'auto',
@@ -37,7 +68,7 @@ var StyledDialog = (0, material_1.styled)(material_1.Dialog)(function () { retur
 }); });
 var LanguagePicker = function (props) {
     var _a;
-    var disabled = props.disabled;
+    var disabled = props.disabled, offline = props.offline, required = props.required;
     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;
     var displayName = props.displayName;
     var _b = react_1.default.useState(false), open = _b[0], setOpen = _b[1];
@@ -169,8 +200,10 @@ var LanguagePicker = function (props) {
         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; }));
+            if (familyId && fontFamily_1.families[familyId]) {
+                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) {
@@ -193,6 +226,7 @@ var LanguagePicker = function (props) {
         else
             selectDefaultFont(key);
     };
+    var hasFonts = (0, react_1.useMemo)(function () { return fontOpts && fontOpts.length > 0; }, [fontOpts]);
     var handleNewName = function () {
         setNewName(true);
     };
@@ -349,7 +383,19 @@ var LanguagePicker = function (props) {
                             }
                         });
                     }
-                    list.push.apply(list, result_1);
+                    // put canonical name matches first
+                    var canonical_1 = [];
+                    var nonCanonical_1 = [];
+                    var lcFirst_1 = firstWord.toLowerCase();
+                    result_1.forEach(function (e) {
+                        if ((e === null || e === void 0 ? void 0 : e.name.toLowerCase()) === lcFirst_1) {
+                            canonical_1.push(e);
+                        }
+                        else {
+                            nonCanonical_1.push(e);
+                        }
+                    });
+                    list.push.apply(list, __spreadArray(__spreadArray([], canonical_1, false), nonCanonical_1, false));
                 }
             }
             if (list.slice(0, MAXOPTIONS).length > 0) {
@@ -362,7 +408,7 @@ var LanguagePicker = function (props) {
         return react_1.default.createElement(react_1.default.Fragment, null);
     };
     return (react_1.default.createElement("div", { id: "LangBcp47" },
-        react_1.default.createElement(material_1.TextField, { variant: "filled", margin: "dense", id: "lang-bcp47", label: t.language, required: true, style: { width: 300 }, value: value !== 'und' ? name + ' (' + value + ')' : '', onClick: handleClickOpen, onKeyDown: handleClickOpen, disabled: disabled ? disabled : false }),
+        react_1.default.createElement(material_1.TextField, { variant: "filled", margin: "dense", id: "lang-bcp47", label: t.language, required: required, style: { width: 300 }, value: value !== 'und' ? name + ' (' + value + ')' : '', onClick: handleClickOpen, onKeyDown: handleClickOpen, disabled: disabled ? disabled : false }),
         react_1.default.createElement(StyledDialog, { id: "LanguagePicker", open: open, onClose: handleCancel, "aria-labelledby": "form-dialog-title" },
             react_1.default.createElement(material_1.DialogTitle, { id: "form-dialog-title" }, t.selectLanguage),
             react_1.default.createElement(material_1.DialogContent, { dividers: true },
@@ -373,28 +419,25 @@ var LanguagePicker = function (props) {
                                 react_1.default.createElement(Clear_1.default, { color: "primary" })))),
                     } }),
                 optList(),
-                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)
+                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)
                         .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)
                         ? []
                         : [
                             react_1.default.createElement(material_1.MenuItem, { key: defaultScript, value: defaultScript }, defaultScript),
-                        ])), 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 }, (0, langTags_1.displayFamily)(s))); })), label: "" })),
+                        ])), label: "", sx: { width: '100%' } }),
+                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: '100%' } })),
             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)),
+                !offline && (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))),
                 curName !== '' && (react_1.default.createElement(material_1.Tooltip, { title: (_a = t.changeName) !== null && _a !== void 0 ? _a : 'Change name' },
                     react_1.default.createElement(material_1.IconButton, { color: "primary", size: "small", "data-testid": "change-name", onClick: handleNewName },
                         react_1.default.createElement(BorderColor_1.default, { fontSize: "small" })))),
                 react_1.default.createElement(GrowingSpacer_1.GrowingSpacer, null),
                 react_1.default.createElement(material_1.Button, { onClick: handleCancel, color: "primary" },
                     react_1.default.createElement(material_1.Typography, null, t.cancel)),
-                react_1.default.createElement(material_1.Button, { onClick: handleSelect, color: "primary", disabled: tag === undefined },
+                react_1.default.createElement(material_1.Button, { onClick: handleSelect, color: "primary", disabled: required &&
+                        (tag === undefined || (tag === null || tag === void 0 ? void 0 : tag.tag) === 'und' || defaultScript === '') },
                     react_1.default.createElement(material_1.Typography, null, t.select)))),
         newName && (react_1.default.createElement(ChangeName_1.default, { isOpen: newName, onClose: handleCloseName, curName: curName, onNewName: handleSetName, t: t }))));
 };

package/dist/langPicker/makeIndex2.js

@@ -78,14 +78,11 @@ jsonData.forEach(function (element, i) {
 var result = Array.from(elementTokens).sort(function (a, b) {
     return a[0].localeCompare(b[0]);
 });
-// sorts the matches in order by what field they are in and just keepts the index
+// sorts the matches in order by what field they are in and just keeps the index
 result.forEach(function (r) {
     r[1].sort(function (a, b) { return a.kn - b.kn; });
     r[1] = r[1].map(function (e) { return e.i; });
 });
-// for (const idx of Array.from(Array(20)).map((_, i) => i)) {
-//   console.log(result[idx]);
-// }
 var maxSet = new Set();
 result.forEach(function (r) {
     maxSet.add(r[1].length);

package/dist/localization/index.d.ts

@@ -16,5 +16,6 @@ export interface ILanguagePickerStrings {
     nameInstruction?: string;
     newName?: string;
     change?: string;
+    noFonts?: string;
 }
 export declare const languagePickerStrings_en: ILanguagePickerStrings;

package/dist/localization/index.js

@@ -20,4 +20,5 @@ exports.languagePickerStrings_en = {
     nameInstruction: 'If you would like to change the language name enter the new name here.',
     newName: 'New Language Name',
     change: 'Change',
+    noFonts: 'No recommended fonts',
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-language-picker",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "description": "Material UI language picker",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",