mui-language-picker 1.1.13 → 1.2.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 SIL LSDev
+Copyright (c) 2020-2022 SIL LSDev
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -4,7 +4,7 @@ Material UI react language picker
 
 ## Installation
 
-Complete installation for [material-ui](https://material-ui.com/getting-started/installation/).
+Complete information for [material-ui](https://mui.com/material-ui/).
 
 ```sh
 npm install mui-language-picker --save
@@ -12,19 +12,21 @@ npm install mui-language-picker --save
 
 ## Usage
 
-### TypeScript React 16 code
+### TypeScript React 18 code
 
 ```typescript
 import {
   LanguagePicker,
   ILanguagePickerStrings,
   languagePickerStrings_en,
+  LangTag,
 } from "mui-language-picker";
 
 const MyComponent = (props: any) => {
   const [bcp47, setBcp47] = React.useState("und");
   const [lgName, setLgName] = React.useState("");
   const [fontName, setFontName] = React.useState("");
+  const [tag, setTag] = React.useState<LangTag>()
 
   return (
     <LanguagePicker
@@ -34,6 +36,7 @@ const MyComponent = (props: any) => {
       setName={setLgName}
       font={fontName}
       setFont={setFontName}
+      setInfo={setTag}
       t={languagePickerStrings_en}
     />
   );
@@ -54,6 +57,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 |
+| setInfo\*  | (tag: LangTag) => void  | callback to receive tag information |
 | disabled\* | boolean                 | true if control disabled            |
 | t          | ILanguagePickerStrings  | localization strings (see below)    |
 
@@ -63,24 +67,29 @@ Output should be a Language Picker when entered opens a dialog
 
 ```typescript
 export const languagePickerStrings_en = {
-  font: "Font",
-  script: "Script",
-  language: "Language",
-  selectLanguage: "Choose Language Details",
-  findALanguage: "Find a language by name, code, or country",
-  codeExplained: "Code Explained",
-  subtags: "Subtags",
-  details: "Details",
-  languageOf: "A Language of $1$2.",
-  inScript: " in the $1 script",
-  select: "Save",
-  cancel: "Cancel",
-  phonetic: "Phonetic",
+  font: 'Font',
+  script: 'Script',
+  language: 'Language',
+  selectLanguage: 'Choose Language Details',
+  findALanguage: 'Find a language by name, code, or country',
+  codeExplained: 'Code Explained',
+  subtags: 'Subtags',
+  details: 'Details',
+  languageOf: 'A Language of $1$2.',
+  inScript: ' in the $1 script',
+  select: 'Save',
+  cancel: 'Cancel',
+  phonetic: 'Phonetic',
+  changeName: 'Change Name',
+  nameInstruction:
+    'If you would like to change the language name enter the new name here.',
+  newName: 'New Language Name',
+  change: 'Change',
 } as ILanguagePickerStrings;
 ```
 
 ### Change control background
-If the theme involves using a dark background, the control background can be changed with css. See also [material-ui](https://material-ui.com/) documentation.
+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
 #LangBcp47 .MuiFilledInput-root {
   background-color: rgba(255, 255, 255, 0.9);

package/dist/ChangeName.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ILanguagePickerStrings } from './model';
+interface IProps {
+    isOpen: boolean;
+    onClose?: () => void;
+    curName?: string;
+    onNewName?: (name: string) => void;
+    t?: ILanguagePickerStrings;
+}
+export default function ChangeName({ isOpen, onClose, curName, onNewName, t, }: IProps): JSX.Element;
+export {};

package/dist/ChangeName.js

@@ -0,0 +1,62 @@
+"use strict";
+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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var Button_1 = __importDefault(require("@mui/material/Button"));
+var TextField_1 = __importDefault(require("@mui/material/TextField"));
+var Dialog_1 = __importDefault(require("@mui/material/Dialog"));
+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"));
+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);
+        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'),
+        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(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'))));
+}
+exports.default = ChangeName;

package/dist/GrowingSpacer.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const GrowingSpacer: () => JSX.Element;

package/dist/GrowingSpacer.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.GrowingSpacer = void 0;
+var react_1 = __importDefault(require("react"));
+var material_1 = require("@mui/material");
+var GrowingSpacer = function () { return react_1.default.createElement(material_1.Box, { sx: { flexGrow: 1 } }, '\u00A0'); };
+exports.GrowingSpacer = GrowingSpacer;

package/dist/LanguageChoice.d.ts

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

package/dist/LanguageChoice.js

@@ -0,0 +1,79 @@
+"use strict";
+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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LanguageChoice = void 0;
+var react_1 = __importStar(require("react"));
+var material_1 = require("@mui/material");
+var lodash_1 = require("lodash");
+var GrowingSpacer_1 = require("./GrowingSpacer");
+function LanguageChoice(props) {
+    var list = props.list, langTags = props.langTags, scriptName = props.scriptName, secondary = props.secondary, t = props.t, choose = props.choose;
+    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 () {
+        choose(tag);
+    }; };
+    var handleKeydown = function (tag) { return function (e) {
+        if (e.keyCode === 32 || e.keyCode === 13) {
+            choose(tag);
+        }
+    }; };
+    (0, react_1.useEffect)(function () {
+        var handleResize = (0, lodash_1.debounce)(function () { return setHeight(window.innerHeight); }, 100);
+        window.addEventListener('resize', handleResize);
+        return function () {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, []);
+    var scriptDetail = function (tag) {
+        var tagParts = tag.tag.split('-');
+        return tagParts.length > 1 && tagParts[1].length === 4
+            ? t.inScript.replace('$1', scriptName[tagParts[1]])
+            : '';
+    };
+    var detail = function (tag) {
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(material_1.Typography, { component: 'span' }, t.languageOf
+                .replace('$1', tag.regionname ? tag.regionname : '')
+                .replace('$2', scriptDetail(tag))),
+            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];
+            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(GrowingSpacer_1.GrowingSpacer, null),
+                        react_1.default.createElement(material_1.Typography, null, tag.tag)), secondary: secondary ? detail(tag) : null })));
+        });
+    };
+    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)))));
+}
+exports.LanguageChoice = LanguageChoice;
+exports.default = LanguageChoice;

package/dist/LanguagePicker.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { ILanguagePickerStrings } from './model';
+import { LangTag } from './langPicker/types';
+interface IStateProps {
+    t: ILanguagePickerStrings;
+}
+interface IProps extends IStateProps {
+    value: string;
+    name: string;
+    font: string;
+    setCode?: (code: string) => void;
+    setName?: (name: string) => void;
+    setFont?: (font: string) => void;
+    setInfo?: (tag: LangTag) => void;
+    disabled?: boolean;
+}
+export declare const LanguagePicker: (props: IProps) => JSX.Element;
+export default LanguagePicker;