mui-language-picker 1.2.0 → 1.2.3

package/README.md

@@ -20,6 +20,7 @@ import {
   ILanguagePickerStrings,
   languagePickerStrings_en,
   LangTag,
+  DisplayName,
 } from "mui-language-picker";
 
 const MyComponent = (props: any) => {
@@ -28,6 +29,10 @@ const MyComponent = (props: any) => {
   const [fontName, setFontName] = React.useState("");
   const [tag, setTag] = React.useState<LangTag>()
 
+  const displayName = (name: string, tag?:LangTag) => {
+    return tag.localname || tag.name
+  }
+
   return (
     <LanguagePicker
       value={bcp47}
@@ -36,6 +41,7 @@ const MyComponent = (props: any) => {
       setName={setLgName}
       font={fontName}
       setFont={setFontName}
+      displayName={displayName}
       setInfo={setTag}
       t={languagePickerStrings_en}
     />
@@ -57,6 +63,7 @@ Output should be a Language Picker when entered opens a dialog
 | setName\*  | (name: string) => void  | callback to change language name    |
 | font       | string                  | font family name                    |
 | setFont\*  | (font: string) => void  | callback to change font family name |
+| displayName\* | DisplayName          | function to control display of name |
 | setInfo\*  | (tag: LangTag) => void  | callback to receive tag information |
 | disabled\* | boolean                 | true if control disabled            |
 | t          | ILanguagePickerStrings  | localization strings (see below)    |
@@ -88,6 +95,30 @@ export const languagePickerStrings_en = {
 } as ILanguagePickerStrings;
 ```
 
+### Information returned by setInfo
+
+```typescript
+export interface LangTag {
+  full: string;
+  iana?: string;
+  iso639_3?: string;
+  localname?: string;
+  name: string;
+  names?: string[];
+  nophonvars?: boolean;
+  region?: string;
+  regionname?: string;
+  regions?: string[];
+  script: string;
+  sldr: boolean;
+  tag: string;
+  tags?: string[];
+  variants?: string[];
+  defaultFont?: string;
+  fonts?: string[];
+}
+```
+
 ### Change control background
 If the theme involves using a dark background, the control background can be changed with css. See also [material-ui](https://mui.com/) documentation.
 ```css

package/dist/ChangeName.js

@@ -34,29 +34,30 @@ var DialogActions_1 = __importDefault(require("@mui/material/DialogActions"));
 var DialogContent_1 = __importDefault(require("@mui/material/DialogContent"));
 var DialogContentText_1 = __importDefault(require("@mui/material/DialogContentText"));
 var DialogTitle_1 = __importDefault(require("@mui/material/DialogTitle"));
+var localization_1 = require("./localization");
 function ChangeName(_a) {
     var isOpen = _a.isOpen, onClose = _a.onClose, curName = _a.curName, onNewName = _a.onNewName, t = _a.t;
     var _b = React.useState(isOpen), open = _b[0], setOpen = _b[1];
     var _c = React.useState(curName || ''), name = _c[0], setName = _c[1];
-    var handleClose = function () {
-        onNewName && onNewName(name);
+    var handleClose = function (save) { return function () {
+        if (save && name)
+            onNewName && onNewName(name);
         onClose && onClose();
         setOpen(false);
-    };
+    }; };
     var handleNameChange = function (event) {
         setName(event.target.value);
     };
     React.useEffect(function () {
         setOpen(isOpen);
     }, [isOpen]);
-    return (React.createElement(Dialog_1.default, { open: open, onClose: handleClose },
-        React.createElement(DialogTitle_1.default, null, (t === null || t === void 0 ? void 0 : t.changeName) || 'Change Name'),
+    return (React.createElement(Dialog_1.default, { open: open, onClose: handleClose() },
+        React.createElement(DialogTitle_1.default, null, (t === null || t === void 0 ? void 0 : t.changeName) || localization_1.languagePickerStrings_en.changeName),
         React.createElement(DialogContent_1.default, null,
-            React.createElement(DialogContentText_1.default, null, (t === null || t === void 0 ? void 0 : t.nameInstruction) ||
-                'If you would like to change the language name enter the new name here.'),
-            React.createElement(TextField_1.default, { autoFocus: true, margin: "dense", id: "name", label: (t === null || t === void 0 ? void 0 : t.newName) || 'New Language Name', fullWidth: true, value: name, onChange: handleNameChange })),
+            React.createElement(DialogContentText_1.default, null, (t === null || t === void 0 ? void 0 : t.nameInstruction) || localization_1.languagePickerStrings_en.nameInstruction),
+            React.createElement(TextField_1.default, { autoFocus: true, margin: "dense", id: "name", label: (t === null || t === void 0 ? void 0 : t.newName) || localization_1.languagePickerStrings_en.newName, fullWidth: true, value: name, onChange: handleNameChange })),
         React.createElement(DialogActions_1.default, null,
-            React.createElement(Button_1.default, { onClick: handleClose }, t === null || t === void 0 ? void 0 : t.cancel),
-            React.createElement(Button_1.default, { onClick: handleClose }, (t === null || t === void 0 ? void 0 : t.change) || 'Change'))));
+            React.createElement(Button_1.default, { onClick: handleClose() }, (t === null || t === void 0 ? void 0 : t.cancel) || localization_1.languagePickerStrings_en.cancel),
+            React.createElement(Button_1.default, { onClick: handleClose(true) }, (t === null || t === void 0 ? void 0 : t.change) || localization_1.languagePickerStrings_en.change))));
 }
 exports.default = ChangeName;

package/dist/LanguageChoice.d.ts

@@ -1,12 +1,14 @@
 /// <reference types="react" />
 import { ILanguagePickerStrings } from './model';
 import { LangTag, ScriptName } from './langPicker/types';
+import { DisplayName } from './getDisplayName';
 interface IProps {
     list: number[];
     choose: (tag: LangTag) => void;
     secondary?: boolean;
     langTags: LangTag[];
     scriptName: ScriptName;
+    displayName?: DisplayName;
     t: ILanguagePickerStrings;
 }
 export declare function LanguageChoice(props: IProps): JSX.Element;

package/dist/LanguageChoice.js

@@ -28,8 +28,10 @@ var react_1 = __importStar(require("react"));
 var material_1 = require("@mui/material");
 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 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];
     var handleChoose = function (tag) { return function () {
@@ -66,7 +68,7 @@ function LanguageChoice(props) {
             var tag = refTags[r];
             return (react_1.default.createElement(material_1.ListItem, { key: "".concat(tag.tag, " ").concat(i), button: true, 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, tag.localname ? "".concat(tag.localname, " / ").concat(tag.name) : tag.name),
+                        react_1.default.createElement(material_1.Typography, null, (0, getDisplayName_1.getDisplayName)(tag.name, tag, displayName)),
                         react_1.default.createElement(GrowingSpacer_1.GrowingSpacer, null),
                         react_1.default.createElement(material_1.Typography, null, tag.tag)), secondary: secondary ? detail(tag) : null })));
         });

package/dist/LanguagePicker.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { ILanguagePickerStrings } from './model';
 import { LangTag } from './langPicker/types';
+import { DisplayName } from './getDisplayName';
 interface IStateProps {
     t: ILanguagePickerStrings;
 }
@@ -8,6 +9,7 @@ interface IProps extends IStateProps {
     value: string;
     name: string;
     font: string;
+    displayName?: DisplayName;
     setCode?: (code: string) => void;
     setName?: (name: string) => void;
     setFont?: (font: string) => void;

package/dist/LanguagePicker.js

@@ -30,6 +30,7 @@ var langTags_1 = require("./langTags");
 var useDebounce_1 = __importDefault(require("./useDebounce"));
 var GrowingSpacer_1 = require("./GrowingSpacer");
 var ChangeName_1 = __importDefault(require("./ChangeName"));
+var getDisplayName_1 = require("./getDisplayName");
 var MAXOPTIONS = 50;
 var menuWidth = { width: 200 };
 var StyledDialog = (0, material_1.styled)(material_1.Dialog)(function () { return ({
@@ -42,6 +43,7 @@ var LanguagePicker = function (props) {
     var _a;
     var disabled = props.disabled;
     var value = props.value, name = props.name, font = props.font, setCode = props.setCode, setName = props.setName, setFont = props.setFont, setInfo = props.setInfo, t = props.t;
+    var displayName = props.displayName;
     var _b = react_1.default.useState(false), open = _b[0], setOpen = _b[1];
     var _c = react_1.default.useState(value), curValue = _c[0], setCurValue = _c[1];
     var _d = react_1.default.useState(name), curName = _d[0], setCurName = _d[1];
@@ -61,6 +63,7 @@ var LanguagePicker = function (props) {
     var IpaTag = 'fonipa';
     if (!LgScriptName_1.scriptName.hasOwnProperty(IpaTag))
         LgScriptName_1.scriptName[IpaTag] = t.phonetic;
+    var respFormat = function (name, tagVal) { return "".concat(name, " (").concat(tagVal, ")"); };
     var handleClickOpen = function (e) {
         if (disabled)
             return;
@@ -69,10 +72,8 @@ var LanguagePicker = function (props) {
         var found = (0, bcp47_1.bcp47Find)(curValue);
         if (curValue !== 'und') {
             if (found && !Array.isArray(found)) {
-                var tagName = curName;
-                if (found.localname)
-                    tagName = "".concat(found.localname, " / ").concat(curName);
-                setResponse(tagName + ' (' + curValue + ')');
+                var tagName = (0, getDisplayName_1.getDisplayName)(curName, found, displayName);
+                setResponse(respFormat(tagName, curValue));
                 setTag(found);
                 selectFont(found);
                 setDefaultScript(found.script);
@@ -81,7 +82,7 @@ var LanguagePicker = function (props) {
             else {
                 var key = curValue.toLocaleLowerCase();
                 if ((0, LgExact_1.hasExact)(key)) {
-                    setResponse(curName + ' (' + curValue + ')');
+                    setResponse(respFormat(curName, curValue));
                     var langTag = langTags_1.langTags[(0, LgExact_1.getExact)(key)[0]];
                     setTag(langTag);
                     selectFont(langTag);
@@ -114,10 +115,8 @@ var LanguagePicker = function (props) {
     };
     var displayTag = function (tagP, val) {
         if (tagP && tagP.name) {
-            var tagName = tagP.name;
-            if (tagP.localname)
-                tagName = "".concat(tagP.localname, " / ").concat(tagP.name);
-            setResponse(tagName + ' (' + tagP.tag + ')');
+            var tagName = (0, getDisplayName_1.getDisplayName)(tagP.name, tagP, displayName);
+            setResponse(respFormat(tagName, tagP.tag));
             setCurValue(val ? val : tagP.tag);
             setCurName(tagP.name);
         }
@@ -187,10 +186,9 @@ var LanguagePicker = function (props) {
     };
     var handleSetName = function (name) {
         setCurName(name);
-        var tagName = name;
-        if (tag === null || tag === void 0 ? void 0 : tag.localname)
-            tagName = "".concat(tag.localname, " / ").concat(name);
-        setResponse(tagName);
+        var tagName = (0, getDisplayName_1.getDisplayName)(name, tag, displayName);
+        if (tag)
+            setResponse(respFormat(tagName, tag.tag));
     };
     react_1.default.useEffect(function () {
         if (response === '')
@@ -354,7 +352,7 @@ var LanguagePicker = function (props) {
                 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, t: t })));
+                    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 })));
             }
         }
         return react_1.default.createElement(react_1.default.Fragment, null);

package/dist/getDisplayName.d.ts

@@ -0,0 +1,3 @@
+import { LangTag } from './model';
+export declare type DisplayName = (curName: string, tag: LangTag | undefined) => string;
+export declare const getDisplayName: (curName: string, tag: LangTag | undefined, displayName?: DisplayName) => string;

package/dist/getDisplayName.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDisplayName = void 0;
+var getDisplayName = function (curName, tag, displayName) {
+    // If user setup a custom language name
+    if (tag && curName !== tag.name)
+        return curName;
+    // if caller provided a custom name formatter
+    if (displayName)
+        return displayName(curName, tag);
+    // By default show the local name if present and the name
+    var tagName = curName;
+    if ((tag === null || tag === void 0 ? void 0 : tag.localname) && tag.localname.toLowerCase() !== curName.toLowerCase())
+        tagName = "".concat(tag.localname, " / ").concat(curName);
+    return tagName;
+};
+exports.getDisplayName = getDisplayName;

package/package.json

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