make ts happy

Author: burhanuday

.eslintrc

@@ -6,7 +6,8 @@
     "plugin:prettier/recommended",
     "prettier/standard",
     "prettier/react",
-    "plugin:@typescript-eslint/eslint-recommended"
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended"
   ],
   "env": {
     "browser": true,
@@ -30,6 +31,7 @@
     "react/jsx-handler-names": 0,
     "react/jsx-fragments": 0,
     "react/no-unused-prop-types": 0,
-    "import/export": 0
+    "import/export": 0,
+    "@typescript-eslint/explicit-function-return-type": "off"
   }
 }

src/index.tsx

@@ -3,6 +3,7 @@ import { useEffect, useRef, useState } from "react";
 import getInputSelection, { setCaretPosition } from "./util";
 import getCaretCoordinates from "textarea-caret";
 import classes from "./styles.module.css";
+import { Languages } from "./languages";
 
 const KEY_UP = 38;
 const KEY_DOWN = 40;
@@ -23,58 +24,25 @@ interface Props
   containerStyles: React.CSSProperties;
   activeItemStyles: React.CSSProperties;
   maxOptions: number;
-  lang:
-    | "am"
-    | "ar"
-    | "bn"
-    | "be"
-    | "bg"
-    | "yue-hant"
-    | "zh"
-    | "zh-hant"
-    | "fr"
-    | "de"
-    | "el"
-    | "gu"
-    | "he"
-    | "hi"
-    | "it"
-    | "ja"
-    | "kn"
-    | "ml"
-    | "mr"
-    | "ne"
-    | "or"
-    | "fa"
-    | "pt"
-    | "pa"
-    | "ru"
-    | "sa"
-    | "sr"
-    | "si"
-    | "es"
-    | "ta"
-    | "te"
-    | "ti"
-    | "uk"
-    | "ur"
-    | "vi";
+  lang: Languages;
 }
 
 export const ReactTransliterate = ({
   Component = <input />,
   lang = "hi",
   offsetX = 0,
   offsetY = 10,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   onChange = () => {},
   value,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   onKeyDown = () => {},
   containerClassName = "",
   containerStyles = {},
   activeItemStyles = {},
   maxOptions = 5,
   ...rest
-}: Props) => {
+}: Props): JSX.Element => {
   const [options, setOptions] = useState<string[]>([]);
   const [left, setLeft] = useState(0);
   const [top, setTop] = useState(0);
@@ -83,6 +51,41 @@ export const ReactTransliterate = ({
   const [matchEnd, setMatchEnd] = useState(-1);
   const inputRef = useRef<HTMLInputElement>(null);
 
+  const reset = () => {
+    // reset the component
+    setSelection(0);
+    setOptions([]);
+  };
+
+  const handleSelection = (index: number) => {
+    const currentString = value;
+    // create a new string with the currently typed word
+    // replaced with the word in transliterated language
+    if (typeof currentString !== "string") return;
+    const newValue =
+      currentString.substring(0, matchStart) +
+      options[index] +
+      " " +
+      currentString.substring(matchEnd + 1, currentString.length);
+
+    // set the position of the caret (cursor) one character after the
+    // the position of the new word
+    setTimeout(() => {
+      setCaretPosition(
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        inputRef.current!,
+        matchStart + options[index].length + 1,
+      );
+    }, 1);
+
+    // bubble up event to the parent component
+    const e = ({ target: { value: newValue } } as unknown) as React.FormEvent<
+      HTMLInputElement
+    >;
+    onChange(e);
+    reset();
+  };
+
   const getSuggestions = async (lastWord: string) => {
     // fetch suggestion from api
     // const url = `https://www.google.com/inputtools/request?ime=transliteration_en_${lang}&num=5&cp=0&cs=0&ie=utf-8&oe=utf-8&app=jsapi&text=${lastWord}`;
@@ -204,40 +207,6 @@ export const ReactTransliterate = ({
     // the helper on screen size change
   };
 
-  const handleSelection = (index: number) => {
-    const currentString = value;
-    // create a new string with the currently typed word
-    // replaced with the word in transliterated language
-    if (typeof currentString !== "string") return;
-    const newValue =
-      currentString.substring(0, matchStart) +
-      options[index] +
-      " " +
-      currentString.substring(matchEnd + 1, currentString.length);
-
-    // set the position of the caret (cursor) one character after the
-    // the position of the new word
-    setTimeout(() => {
-      setCaretPosition(
-        inputRef.current!,
-        matchStart + options[index].length + 1,
-      );
-    }, 1);
-
-    // bubble up event to the parent component
-    const e = ({ target: { value: newValue } } as unknown) as React.FormEvent<
-      HTMLInputElement
-    >;
-    onChange(e);
-    reset();
-  };
-
-  const reset = () => {
-    // reset the component
-    setSelection(0);
-    setOptions([]);
-  };
-
   useEffect(() => {
     window.addEventListener("resize", handleResize);
 
@@ -263,13 +232,6 @@ export const ReactTransliterate = ({
         value: value,
         ...rest,
       })}
-      {/* <Component
-        onChange={handleChange}
-        onKeyDown={handleKeyDown}
-        ref={inputRef}
-        value={value}
-        {...rest}
-      /> */}
       {options.length > 0 && (
         <ul
           style={{