mui-language-picker 2.4.2 → 2.5.0

package/README.md

@@ -1,227 +1,236 @@
-# mui-language-picker
-
-Material UI react language picker
-
-## Installation
-
-Complete information for [material-ui](https://mui.com/material-ui/).
-
-```sh
-npm install mui-language-picker --save
-```
-
-## Demo
-
-[Demo of mui-language-picker](https://giphy.com/embed/5OkWd7aMlxOClWuF0J) / [Same demo as a video](https://youtu.be/aviV8aEaNOo) / [Try it yourself](http://mui-language-picker-demo.org.s3-website-us-east-1.amazonaws.com)
-
-see also: [demo repo](https://github.com/sillsdev/mui-language-picker-demo)
-
-## Usage
-
-### 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 [rtl, setRtl] = React.useState(false);
-  const [tag, setTag] = React.useState<LangTag>();
-
-  const displayName = (name: string, tag?: LangTag) => {
-    return tag?.localname ? `${tag?.localname} / ${name}` : tag?.name || name;
-  };
-
-  return (
-    <LanguagePicker
-      value={bcp47}
-      setCode={setBcp47}
-      name={lgName}
-      setName={setLgName}
-      font={fontName}
-      setFont={setFontName}
-      setDir={setRtl}
-      displayName={displayName}
-      setInfo={setTag}
-      t={languagePickerStrings_en}
-    />
-  );
-};
-```
-
-```sh
-Output should be a Language Picker when entered opens a dialog
-```
-
-### Parameter definitions
-
-| Parameter  | Type                    | Meaning                             |
-| ---------- | ----------------------- | ----------------------------------- |
-| value      | string                  | BCP 47 language code                |
-| setCode\*  | (value: string) => void | callback to change BCP 47 value     |
-| name       | string                  | language name                       |
-| setName\*  | (name: string) => void  | callback to change language name    |
-| font       | string                  | font family name                    |
-| setFont\*  | (font: string) => void  | callback to change font family name |
-| setDir\*   | (rtl: boolean) => void  | callback to change script direction |
-| displayName\* | DisplayName          | function to control display of name |
-| setInfo\*  | (tag: LangTag) => void  | callback to receive tag information |
-| filter\*   | (tag: LangTag) => boolean  | allows filtering languages found by tag |
-| disabled\* | boolean                 | true if control disabled            |
-| offline\*  | boolean                 | true if picker in offline setting   |
-| required\* | boolean                 | true if language required (show *)  |
-| t          | ILanguagePickerStrings  | localization strings (see below)    |
-
-\* parameters marked with an asterisk are optional
-
-### Helper functions
-
-```typescript
-import {
-  getLangTag,
-  getRtl,
-  getFamily
-} from "mui-language-picker";
-
-console.log(getLangTag(tag)) // Return langTag object (see below)
-console.log(getRtl(tag)) // returns true if rtl script
-console.log(getFamily(familyId)) // Returns fontFamily object (see below)
-```
-
-The `fontName` returned by the Language Picker is the `familyId`. Refer to [fonts.languagetechnology.org](https://fonts.languagetechnology.org/) for more information.
-
-### Localization Strings
-
-```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',
-  changeName: 'Change Name',
-  nameInstruction:
-    'If you would like to change the language name enter the new name here.',
-  newName: 'New Language Name',
-  change: 'Change',
-  noFonts: 'No recommended fonts',
-} as ILanguagePickerStrings;
-```
-
-### Information returned by setInfo
-
-```typescript
-export interface LangTag {
-  full: string;
-  iana?: string[];
-  iso639_3?: string;
-  localname?: string;
-  localnames?: string[];
-  name: string;
-  names?: string[];
-  nophonvars?: boolean;
-  region?: string;
-  regionname?: string;
-  regions?: string[];
-  script: string;
-  sldr: boolean;
-  suppress?: boolean;
-  tag: string;
-  tags?: string[];
-  variants?: string[];
-  defaultFont?: string;
-  fonts?: string[];
-  windows?: string;
-}
-```
-
-### Information returned by getFamily
-
-```typescript
-export interface IFamily {
-  defaults?: {
-    ttf: string;
-    woff?: string;
-    woff2?: string;
-  };
-  distributable: boolean;
-  fallback?: string;
-  family: string;
-  familyid: string;
-  files?: {
-    [fileid: string]: {
-      axes: {
-        ital?: number;
-        wght: number;
-      };
-      flourl?: string;
-      packagepath: string;
-      url?: string;
-      zippath?: string;
-    };
-  };
-  license?: 'OFL' | 'GPL3' | 'GPL' | 'Freeware' | 'proprietary' | 'shareware';
-  packageurl?: string;
-  siteurl?: string;
-  source?:
-    | 'SIL'
-    | 'Google'
-    | 'Microsoft'
-    | 'NLCI'
-    | 'STAR'
-    | 'Evertype'
-    | 'Lao Script';
-  status?: 'current' | 'archived' | 'deprecated';
-  version?: string;
-  ziproot?: 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
-#LangBcp47 .MuiFilledInput-root {
-  background-color: rgba(255, 255, 255, 0.9);
-}
-```
-
-### Build
-
-```sh
-npm install
-npm run data
-npm run index
-npm run build
-```
-
-### Test
-
-```sh
-npm run clean
-npm test
-```
-
-### Testing Individual Suites
-
-Here is an example for Language Picker tests:
-
-```sh
-npm test -- --watch LanguagePicker
-```
+# mui-language-picker
+
+Material UI react language picker
+
+## Installation
+
+Complete information for [material-ui](https://mui.com/material-ui/).
+
+```sh
+npm install mui-language-picker --save
+```
+
+## Demo
+
+[Demo of mui-language-picker](https://giphy.com/embed/5OkWd7aMlxOClWuF0J) / [Same demo as a video](https://youtu.be/aviV8aEaNOo) / [Try it yourself](http://mui-language-picker-demo.org.s3-website-us-east-1.amazonaws.com)
+
+see also: [demo repo](https://github.com/sillsdev/mui-language-picker-demo)
+
+## Usage
+
+### 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 [rtl, setRtl] = React.useState(false);
+  const [tag, setTag] = React.useState<LangTag>();
+
+  const displayName = (name: string, tag?: LangTag) => {
+    return tag?.localname ? `${tag?.localname} / ${name}` : tag?.name || name;
+  };
+
+  return (
+    <LanguagePicker
+      value={bcp47}
+      setCode={setBcp47}
+      name={lgName}
+      setName={setLgName}
+      font={fontName}
+      setFont={setFontName}
+      setDir={setRtl}
+      displayName={displayName}
+      setInfo={setTag}
+      t={languagePickerStrings_en}
+    />
+  );
+};
+```
+
+```sh
+Output should be a Language Picker when entered opens a dialog
+```
+
+### Parameter definitions
+
+| Parameter  | Type                    | Meaning                             |
+| ---------- | ----------------------- | ----------------------------------- |
+| value      | string                  | BCP 47 language code                |
+| setCode\*  | (value: string) => void | callback to change BCP 47 value     |
+| name       | string                  | language name                       |
+| setName\*  | (name: string) => void  | callback to change language name    |
+| font       | string                  | font family name                    |
+| setFont\*  | (font: string) => void  | callback to change font family name |
+| feats\*    | string                  | font features                       |
+| setFeats\* | (feats: string) => void | callback to change font features    |
+| setDir\*   | (rtl: boolean) => void  | callback to change script direction |
+| displayName\* | DisplayName          | function to control display of name |
+| setInfo\*  | (tag: LangTag) => void  | callback to receive tag information |
+| filter\*   | (tag: LangTag) => boolean  | allows filtering languages found by tag |
+| disabled\* | boolean                 | true if control disabled            |
+| offline\*  | boolean                 | true if picker in offline setting   |
+| required\* | boolean                 | true if language required (show *)  |
+| t          | ILanguagePickerStrings  | localization strings (see below)    |
+
+\* parameters marked with an asterisk are optional
+
+The `feats` parameter is formtted like the font-feature-settings css property.
+See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings) for more information.
+
+### Helper functions
+
+```typescript
+import {
+  getLangTag,
+  getRtl,
+  getFamily
+} from "mui-language-picker";
+
+console.log(getLangTag(tag)) // Return langTag object (see below)
+console.log(getRtl(tag)) // returns true if rtl script
+console.log(getFamily(familyId)) // Returns fontFamily object (see below)
+```
+
+The `fontName` returned by the Language Picker is the `familyId`. Refer to [fonts.languagetechnology.org](https://fonts.languagetechnology.org/) for more information.
+
+### Localization Strings
+
+```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',
+  changeName: 'Change Name',
+  nameInstruction:
+    'If you would like to change the language name enter the new name here.',
+  changeFeatures: 'Change Features',
+  featureInstruction:
+    'Font feastures are optional. They are four characters followed by an optional number.',
+  invalidFeature: 'Invalid Feature',
+  newName: 'New Language Name',
+  change: 'Change',
+  noFonts: 'No recommended fonts',
+} as ILanguagePickerStrings;
+```
+
+### Information returned by setInfo
+
+```typescript
+export interface LangTag {
+  full: string;
+  iana?: string[];
+  iso639_3?: string;
+  localname?: string;
+  localnames?: string[];
+  name: string;
+  names?: string[];
+  nophonvars?: boolean;
+  region?: string;
+  regionname?: string;
+  regions?: string[];
+  script: string;
+  sldr: boolean;
+  suppress?: boolean;
+  tag: string;
+  tags?: string[];
+  variants?: string[];
+  defaultFont?: string;
+  fonts?: string[];
+  windows?: string;
+}
+```
+
+### Information returned by getFamily
+
+```typescript
+export interface IFamily {
+  defaults?: {
+    ttf: string;
+    woff?: string;
+    woff2?: string;
+  };
+  distributable: boolean;
+  fallback?: string;
+  family: string;
+  familyid: string;
+  files?: {
+    [fileid: string]: {
+      axes: {
+        ital?: number;
+        wght: number;
+      };
+      flourl?: string;
+      packagepath: string;
+      url?: string;
+      zippath?: string;
+    };
+  };
+  license?: 'OFL' | 'GPL3' | 'GPL' | 'Freeware' | 'proprietary' | 'shareware';
+  packageurl?: string;
+  siteurl?: string;
+  source?:
+    | 'SIL'
+    | 'Google'
+    | 'Microsoft'
+    | 'NLCI'
+    | 'STAR'
+    | 'Evertype'
+    | 'Lao Script';
+  status?: 'current' | 'archived' | 'deprecated';
+  version?: string;
+  ziproot?: 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
+#LangBcp47 .MuiFilledInput-root {
+  background-color: rgba(255, 255, 255, 0.9);
+}
+```
+
+### Build
+
+```sh
+npm install
+npm run data
+npm run index
+npm run build
+```
+
+### Test
+
+```sh
+npm run clean
+npm test
+```
+
+### Testing Individual Suites
+
+Here is an example for Language Picker tests:
+
+```sh
+npm test -- --watch LanguagePicker
+```

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/LanguagePicker.d.ts

@@ -9,10 +9,12 @@ 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;