mui-language-picker 1.2.7 → 1.2.8

package/README.md

@@ -32,6 +32,7 @@ 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) => {
@@ -46,6 +47,7 @@ const MyComponent = (props: any) => {
       setName={setLgName}
       font={fontName}
       setFont={setFontName}
+      setDir={setRtl}
       displayName={displayName}
       setInfo={setTag}
       t={languagePickerStrings_en}
@@ -68,6 +70,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 |
+| 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 |
 | disabled\* | boolean                 | true if control disabled            |
@@ -105,9 +108,10 @@ export const languagePickerStrings_en = {
 ```typescript
 export interface LangTag {
   full: string;
-  iana?: string;
+  iana?: string[];
   iso639_3?: string;
   localname?: string;
+  localnames?: string[];
   name: string;
   names?: string[];
   nophonvars?: boolean;
@@ -116,11 +120,13 @@ export interface LangTag {
   regions?: string[];
   script: string;
   sldr: boolean;
+  suppress?: boolean;
   tag: string;
   tags?: string[];
   variants?: string[];
   defaultFont?: string;
   fonts?: string[];
+  windows?: string;
 }
 ```
 
@@ -149,8 +155,10 @@ npm run index
 npm test
 ```
 
-### Updaate snapshots
+### Testing Individual Suites
+
+Here is an example for Language Picker tests:
 
 ```sh
-npm test -- -u
+npm test -- --watch LanguagePicker
 ```

package/dist/LanguageChoice.js

@@ -66,7 +66,7 @@ function LanguageChoice(props) {
     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) },
+            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),

package/dist/LanguagePicker.d.ts

@@ -14,6 +14,7 @@ interface IProps extends IStateProps {
     setName?: (name: string) => void;
     setFont?: (font: string) => void;
     setInfo?: (tag: LangTag) => void;
+    setDir?: (rtl: boolean) => void;
     disabled?: boolean;
 }
 export declare const LanguagePicker: (props: IProps) => JSX.Element;

package/dist/LanguagePicker.js

@@ -31,6 +31,7 @@ var useDebounce_1 = __importDefault(require("./useDebounce"));
 var GrowingSpacer_1 = require("./GrowingSpacer");
 var ChangeName_1 = __importDefault(require("./ChangeName"));
 var getDisplayName_1 = require("./getDisplayName");
+var rtlScripts_1 = __importDefault(require("./data/rtlScripts"));
 var MAXOPTIONS = 50;
 var menuWidth = { width: 200 };
 var StyledDialog = (0, material_1.styled)(material_1.Dialog)(function () { return ({
@@ -42,7 +43,7 @@ var StyledDialog = (0, material_1.styled)(material_1.Dialog)(function () { retur
 var LanguagePicker = function (props) {
     var _a;
     var disabled = props.disabled;
-    var value = props.value, name = props.name, font = props.font, setCode = props.setCode, setName = props.setName, setFont = props.setFont, setInfo = props.setInfo, t = props.t;
+    var value = props.value, name = props.name, font = props.font, setCode = props.setCode, setName = props.setName, setFont = props.setFont, setInfo = props.setInfo, setDir = props.setDir, t = props.t;
     var displayName = props.displayName;
     var _b = react_1.default.useState(false), open = _b[0], setOpen = _b[1];
     var _c = react_1.default.useState(value), curValue = _c[0], setCurValue = _c[1];
@@ -52,9 +53,8 @@ var LanguagePicker = function (props) {
     var _g = react_1.default.useState(''), response = _g[0], setResponse = _g[1];
     var _h = react_1.default.useState(), tag = _h[0], setTag = _h[1];
     var _j = react_1.default.useState(''), defaultScript = _j[0], setDefaultScript = _j[1];
-    var _k = react_1.default.useState(''), defaultFont = _k[0], setDefaultFont = _k[1];
-    var _l = react_1.default.useState(Array()), fontOpts = _l[0], setFontOpts = _l[1];
-    var _m = react_1.default.useState(false), newName = _m[0], setNewName = _m[1];
+    var _k = react_1.default.useState(Array()), fontOpts = _k[0], setFontOpts = _k[1];
+    var _l = react_1.default.useState(false), newName = _l[0], setNewName = _l[1];
     var langEl = react_1.default.useRef();
     var debouncedResponse = (0, useDebounce_1.default)(response, 500);
     var TAB = 9;
@@ -77,7 +77,6 @@ var LanguagePicker = function (props) {
                 setTag(found);
                 selectFont(found);
                 setDefaultScript(found.script);
-                setDefaultFont(curFont);
             }
             else {
                 var key = curValue.toLocaleLowerCase();
@@ -87,7 +86,6 @@ var LanguagePicker = function (props) {
                     setTag(langTag);
                     selectFont(langTag);
                     setDefaultScript(langTag.script);
-                    setDefaultFont(curFont);
                 }
                 else {
                     handleClear();
@@ -100,7 +98,7 @@ var LanguagePicker = function (props) {
         setFontOpts([]);
         setResponse('');
         setTag(undefined);
-        setDefaultFont('');
+        setDefaultScript('');
         if (langEl.current)
             langEl.current.click();
     };
@@ -134,6 +132,8 @@ var LanguagePicker = function (props) {
             setName(curName);
         if (setFont)
             setFont(curFont);
+        if (setDir)
+            setDir(rtlScripts_1.default.includes(defaultScript));
         if (setInfo && tag)
             setInfo(tag);
         if (tag) {
@@ -148,7 +148,6 @@ var LanguagePicker = function (props) {
         setResponse(e.target.value);
     };
     var addFontInfo = function (e) {
-        setDefaultFont(e.target.value);
         setCurFont(e.target.value);
     };
     var safeFonts = [
@@ -159,7 +158,6 @@ var LanguagePicker = function (props) {
     ];
     var selectDefaultFont = function (code) {
         var fonts = LgFontMap_1.fontMap[code];
-        setDefaultFont(fonts[0]);
         setCurFont(fonts[0]);
         setFontOpts(fonts);
     };
@@ -177,7 +175,6 @@ var LanguagePicker = function (props) {
             }
         }
         if (!LgFontMap_1.fontMap.hasOwnProperty(code)) {
-            setDefaultFont(safeFonts[0].value);
             setCurFont(safeFonts[0].value);
             setFontOpts(safeFonts.map(function (f) { return f.value; }));
         }
@@ -375,18 +372,18 @@ var LanguagePicker = function (props) {
                                 react_1.default.createElement(Clear_1.default, { color: "primary" })))),
                     } }),
                 optList(),
-                react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.TextField, { id: "select-script", select: true, sx: { width: 150, mx: 1 }, label: t.script, value: defaultScript, onChange: handleScriptChange(tag), style: { width: 400 }, SelectProps: {
+                react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.TextField, { id: "select-script", select: true, sx: { width: 150, mx: 1 }, label: "".concat(t.script, " *"), value: defaultScript, onChange: handleScriptChange(tag), style: { width: 400 }, SelectProps: {
                             MenuProps: __assign({ sx: menuWidth }),
-                        }, helperText: '', margin: "normal", variant: "filled", required: true }, scriptList(tag)
+                        }, margin: "normal", variant: "filled" }, scriptList(tag)
                         .map(function (s) { return (react_1.default.createElement(material_1.MenuItem, { key: s, value: s }, LgScriptName_1.scriptName[s] + ' - ' + s)); })
                         .concat(scriptList(tag).includes(defaultScript)
                         ? []
                         : [
                             react_1.default.createElement(material_1.MenuItem, { key: defaultScript, value: defaultScript }, defaultScript),
                         ])), label: "" }),
-                react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.TextField, { id: "select-font", select: true, sx: { width: 300, mx: 1 }, label: t.font, value: defaultFont, onChange: addFontInfo, SelectProps: {
+                react_1.default.createElement(material_1.FormControlLabel, { control: react_1.default.createElement(material_1.TextField, { id: "select-font", select: true, sx: { width: 300, mx: 1 }, label: "".concat(t.font, " *"), value: fontOpts.includes(curFont) ? curFont : '', onChange: addFontInfo, SelectProps: {
                             MenuProps: __assign({ sx: menuWidth }),
-                        }, helperText: '', margin: "normal", variant: "filled", required: true }, fontOpts.map(function (s) { return (react_1.default.createElement(material_1.MenuItem, { key: s, value: s }, s)); })), label: "" })),
+                        }, margin: "normal", variant: "filled" }, fontOpts.map(function (s) { return (react_1.default.createElement(material_1.MenuItem, { key: s, value: s }, s)); })), label: "" })),
             react_1.default.createElement(material_1.DialogActions, null,
                 react_1.default.createElement("a", { href: "https://www.w3.org/International/questions/qa-choosing-language-tags", target: "_blank", rel: "noopener noreferrer" },
                     react_1.default.createElement(material_1.Typography, null, t.codeExplained)),