mui-language-picker 2.6.0 → 2.6.1

package/dist/ChangeFeat.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ILanguagePickerStrings } from './model';
+interface IProps {
+    isOpen: boolean;
+    onClose?: () => void;
+    curFeats?: string;
+    onNewFeat?: (feats: string) => void;
+    offline?: boolean;
+    t?: ILanguagePickerStrings;
+}
+export default function ChangeFeat({ isOpen, onClose, curFeats, onNewFeat, offline, t, }: IProps): React.JSX.Element;
+export {};

package/dist/ChangeFeat.js

@@ -0,0 +1,125 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(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"));
+var Info_1 = __importDefault(require("@mui/icons-material/Info"));
+var localization_1 = require("./localization");
+var material_1 = require("@mui/material");
+function ChangeFeat(_a) {
+    var isOpen = _a.isOpen, onClose = _a.onClose, curFeats = _a.curFeats, onNewFeat = _a.onNewFeat, _b = _a.offline, offline = _b === void 0 ? false : _b, t = _a.t;
+    var _c = react_1.default.useState(isOpen), openFeat = _c[0], setOpenFeat = _c[1];
+    var _d = react_1.default.useState(false), openAdd = _d[0], setOpenAdd = _d[1];
+    var _e = react_1.default.useState([]), chipData = _e[0], setChipData = _e[1];
+    var _f = react_1.default.useState(''), oneFeat = _f[0], setOneFeat = _f[1];
+    var _g = react_1.default.useState(1), nextKey = _g[0], setNextKey = _g[1];
+    var _h = react_1.default.useState(''), helpText = _h[0], setHelpText = _h[1];
+    react_1.default.useEffect(function () {
+        if (curFeats) {
+            var n_1 = 0;
+            var feats = curFeats
+                .split(',')
+                .map(function (feat) {
+                var m = /^"(\w\w\w\w)"\s*([0-9]?)$/.exec(feat.trim());
+                if (!m)
+                    return undefined;
+                return {
+                    key: ++n_1,
+                    label: m[2] ? "".concat(m[1], " ").concat(m[2]) : m[1],
+                };
+            })
+                .filter(function (v) { return Boolean(v); });
+            setChipData(feats);
+        }
+    }, [curFeats]);
+    var makeCssFeat = function (chipValue) {
+        var m = /^(\w\w\w\w)\s*([0-9]?)$/.exec(chipValue.trim());
+        return m ? (m[2] ? "\"".concat(m[1], "\" ").concat(m[2]) : "\"".concat(m[1], "\"")) : '';
+    };
+    var handleCloseFeatures = function (save) { return function () {
+        if (save && onNewFeat) {
+            onNewFeat(chipData.map(function (chip) { return makeCssFeat(chip.label); }).join(', '));
+        }
+        if (onClose)
+            onClose();
+        setOpenFeat(false);
+    }; };
+    react_1.default.useEffect(function () {
+        setOpenFeat(isOpen);
+    }, [isOpen]);
+    var handleDelete = function (chipToDelete) { return function () {
+        setChipData(function (chips) {
+            return chips.filter(function (chip) { return chip.key !== chipToDelete.key; });
+        });
+    }; };
+    var handleAdd = function () {
+        setOneFeat('');
+        setOpenAdd(true);
+    };
+    var handleCloseAdd = function (label) { return function () {
+        if (label && !makeCssFeat(label)) {
+            setHelpText((t === null || t === void 0 ? void 0 : t.invalidFeature) || localization_1.languagePickerStrings_en.invalidFeature || '');
+            return;
+        }
+        if (label) {
+            setChipData(chipData.concat([{ key: nextKey, label: label }]));
+            setNextKey(nextKey + 1);
+        }
+        setOpenAdd(false);
+        setHelpText('');
+    }; };
+    var handleSelect = function (chipToSelect) { return function () {
+        setOneFeat(chipToSelect.label);
+        setOpenAdd(true);
+    }; };
+    var handleChange = function (event) {
+        setOneFeat(event.target.value);
+    };
+    return (react_1.default.createElement(Dialog_1.default, { open: openFeat, onClose: handleCloseFeatures() },
+        react_1.default.createElement(DialogTitle_1.default, null, (t === null || t === void 0 ? void 0 : t.changeFeatures) || localization_1.languagePickerStrings_en.changeFeatures),
+        react_1.default.createElement(DialogContent_1.default, null,
+            react_1.default.createElement(DialogContentText_1.default, null,
+                react_1.default.createElement(react_1.default.Fragment, null,
+                    (t === null || t === void 0 ? void 0 : t.featureInstruction) || localization_1.languagePickerStrings_en.featureInstruction,
+                    ' ',
+                    !offline && (react_1.default.createElement("a", { href: "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/OpenType_fonts_guide#Font_features", title: (t === null || t === void 0 ? void 0 : t.openTypeFeatures) || localization_1.languagePickerStrings_en.openTypeFeatures, target: "_blank", rel: "noopener noreferrer" },
+                        react_1.default.createElement(Info_1.default, { fontSize: "small" }))))),
+            react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(material_1.Paper, { sx: {
+                        display: 'flex',
+                        justifyContent: 'center',
+                        flexWrap: 'wrap',
+                        listStyle: 'none',
+                        flexDirection: 'row',
+                        p: 0.5,
+                        m: 0,
+                    }, component: "ul" }, chipData
+                    .map(function (data) {
+                    return (react_1.default.createElement(material_1.ListItem, { key: data.key, sx: { width: 'auto' } },
+                        react_1.default.createElement(material_1.Chip, { label: data.label, onClick: handleSelect(data), onDelete: chipData.length > 0 ? handleDelete(data) : undefined })));
+                })
+                    .concat([
+                    react_1.default.createElement(material_1.ListItem, { key: 99, sx: { width: 'auto' } },
+                        react_1.default.createElement(material_1.Chip, { label: (t === null || t === void 0 ? void 0 : t.addFeature) || localization_1.languagePickerStrings_en.addFeature, "data-testid": "add-feature", onClick: handleAdd })),
+                ])),
+                react_1.default.createElement(Dialog_1.default, { open: openAdd, onClose: handleCloseAdd(undefined) },
+                    react_1.default.createElement(DialogTitle_1.default, null, (t === null || t === void 0 ? void 0 : t.addFeatureTitle) || localization_1.languagePickerStrings_en.addFeatureTitle),
+                    react_1.default.createElement(DialogContent_1.default, null,
+                        react_1.default.createElement(DialogContentText_1.default, null, (t === null || t === void 0 ? void 0 : t.addFeatureInstruction) || localization_1.languagePickerStrings_en.addFeatureInstruction),
+                        react_1.default.createElement(TextField_1.default, { autoFocus: true, margin: "dense", id: "feature", "data-testid": "feature-input", label: (t === null || t === void 0 ? void 0 : t.featureInput) || localization_1.languagePickerStrings_en.featureInput, fullWidth: true, variant: "standard", value: oneFeat, onChange: handleChange, helperText: helpText })),
+                    react_1.default.createElement(DialogActions_1.default, null,
+                        react_1.default.createElement(Button_1.default, { onClick: handleCloseAdd(undefined) }, (t === null || t === void 0 ? void 0 : t.cancel) || localization_1.languagePickerStrings_en.cancel),
+                        react_1.default.createElement(Button_1.default, { onClick: handleCloseAdd(oneFeat), "data-testid": "do-add-feature" }, (t === null || t === void 0 ? void 0 : t.addFeature) || localization_1.languagePickerStrings_en.addFeature))))),
+        react_1.default.createElement(DialogActions_1.default, null,
+            react_1.default.createElement(Button_1.default, { onClick: handleCloseFeatures() }, (t === null || t === void 0 ? void 0 : t.cancel) || localization_1.languagePickerStrings_en.cancel),
+            react_1.default.createElement(Button_1.default, { onClick: handleCloseFeatures(true) }, (t === null || t === void 0 ? void 0 : t.change) || localization_1.languagePickerStrings_en.change))));
+}
+exports.default = ChangeFeat;

package/dist/ChangeName.d.ts

@@ -0,0 +1,11 @@
+import React from '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): React.JSX.Element;
+export {};

package/dist/ChangeName.js

@@ -0,0 +1,41 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importDefault(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"));
+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_1.default.useState(isOpen), open = _b[0], setOpen = _b[1];
+    var _c = react_1.default.useState(curName || ''), name = _c[0], setName = _c[1];
+    var handleClose = function (save) { return function () {
+        if (save && name && onNewName)
+            onNewName(name);
+        if (onClose)
+            onClose();
+        setOpen(false);
+    }; };
+    var handleNameChange = function (event) {
+        setName(event.target.value);
+    };
+    react_1.default.useEffect(function () {
+        setOpen(isOpen);
+    }, [isOpen]);
+    return (react_1.default.createElement(Dialog_1.default, { open: open, onClose: handleClose() },
+        react_1.default.createElement(DialogTitle_1.default, null, (t === null || t === void 0 ? void 0 : t.changeName) || localization_1.languagePickerStrings_en.changeName),
+        react_1.default.createElement(DialogContent_1.default, null,
+            react_1.default.createElement(DialogContentText_1.default, null, (t === null || t === void 0 ? void 0 : t.nameInstruction) || localization_1.languagePickerStrings_en.nameInstruction),
+            react_1.default.createElement(TextField_1.default, { autoFocus: true, margin: "dense", id: "name", "data-testid": "name", label: (t === null || t === void 0 ? void 0 : t.newName) || localization_1.languagePickerStrings_en.newName, fullWidth: true, value: name, onChange: handleNameChange })),
+        react_1.default.createElement(DialogActions_1.default, null,
+            react_1.default.createElement(Button_1.default, { onClick: handleClose() }, (t === null || t === void 0 ? void 0 : t.cancel) || localization_1.languagePickerStrings_en.cancel),
+            react_1.default.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/GrowingSpacer.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const GrowingSpacer: () => React.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 @@
+import React from 'react';
+import { ILanguagePickerStrings } from './model';
+import { LangTag } from './langPicker/types';
+import { DisplayName } from './getDisplayName';
+interface IProps {
+    list: LangTag[];
+    choose: (tag: LangTag) => void;
+    secondary?: boolean;
+    displayName?: DisplayName;
+    t: ILanguagePickerStrings;
+}
+export declare function LanguageChoice(props: IProps): React.JSX.Element;
+export default LanguageChoice;

package/dist/LanguageChoice.js

@@ -0,0 +1,94 @@
+"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 __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));
+};
+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, 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 () {
+        choose(tag);
+    }; };
+    var handleKeydown = function (tag) { return function (e) {
+        if (e.key === ' ' || e.key === 'Enter') {
+            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 _a;
+        var tagParts = tag.tag.split('-');
+        return tagParts.length > 1 && tagParts[1].length === 4
+            ? t.inScript.replace('$1', (_a = langTags_1.scriptName.get(tagParts[1])) !== null && _a !== void 0 ? _a : tagParts[1])
+            : '';
+    };
+    var detail = function (tag) {
+        var _a, _b;
+        var namesSet = new Set(__spreadArray(__spreadArray([], (_a = tag.localnames) !== null && _a !== void 0 ? _a : [], true), (_b = tag.names) !== null && _b !== void 0 ? _b : [], true));
+        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 : tag.region ? tag.region : '')
+                .replace('$2', scriptDetail(tag))),
+            react_1.default.createElement("br", null),
+            react_1.default.createElement(material_1.Typography, { component: 'span' }, Array.from(namesSet).sort().join(', '))));
+    };
+    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)),
+                        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)))));
+}
+exports.LanguageChoice = LanguageChoice;
+exports.default = LanguageChoice;

package/dist/LanguagePicker.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ILanguagePickerStrings } from './model';
+import { LangTag } from './langPicker/types';
+import { DisplayName } from './getDisplayName';
+interface IStateProps {
+    t: ILanguagePickerStrings;
+}
+interface IProps extends IStateProps {
+    value: string;
+    name: string;
+    font: string;
+    feats?: string;
+    displayName?: DisplayName;
+    setCode?: (code: string) => void;
+    setName?: (name: string) => void;
+    setFont?: (font: string) => void;
+    setFeats?: (features?: string) => void;
+    setInfo?: (tag: LangTag) => void;
+    setDir?: (rtl: boolean) => void;
+    filter?: (code: string) => boolean;
+    disabled?: boolean;
+    offline?: boolean;
+    required?: boolean;
+    noScript?: boolean;
+    noFont?: boolean;
+}
+export declare const LanguagePicker: (props: IProps) => React.JSX.Element;
+export default LanguagePicker;