mui-language-picker
Version:
Material UI language picker
126 lines (125 loc) • 8.45 kB
JavaScript
"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;