mui-language-picker
Version:
Material UI language picker
104 lines (103 loc) • 5.47 kB
JavaScript
;
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 () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__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 = LanguageChoice;
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.default = LanguageChoice;