better-looking parameters

src/InputBlock.tsx

@@ -1,5 +1,5 @@
 import { Double, getType, Int, newDynamic, trie } from "dope2";
-import { focusNextElement, focusPrevElement, getCaretPosition, setRightMostCaretPosition } from "./util/dom_trickery";
+import { focusNextElement, focusPrevElement, setRightMostCaretPosition } from "./util/dom_trickery";
 import { parseDouble, parseInt } from "./util/parse";
 
 import { useEffect, useRef, useState } from "react";
@@ -7,13 +7,13 @@ import { Type } from "./Type";
 
 import "./InputBlock.css";
 import type { Dynamic, State2Props } from "./util/extra";
-import type { EditorState } from "./Editor";
 
 export interface InputBlockState {
   kind: "input";
   env: any;
   text: string;
   resolved: undefined | Dynamic;
+  focus: boolean
 }
 
 interface InputBlockProps extends State2Props<InputBlockState> {
@@ -22,70 +22,73 @@ interface InputBlockProps extends State2Props<InputBlockState> {
   onCancel: () => void;
 }
 
-export function InputBlock({ state: {kind, env, text, resolved}, setState, filter, onResolve, onCancel }: InputBlockProps) {
-  const ref = useRef<any>(null);
-  useEffect(() => {
-    ref.current?.focus();
-  }, []);
-
-  const [i, setI] = useState(0); // selected suggestion
-  const [haveFocus, setHaveFocus] = useState(false); // whether to render suggestions or not
-
-  const setText = (text: string) => {
-    setState({kind, env, text, resolved});
-  }
-  const setResolved = (resolved: Dynamic) => {
-    setState({kind, env, text, resolved});
-  }
-
-  const singleSuggestion = trie.growPrefix(env.name2dyn)(text);
-
+const computeSuggestions = (text, env, filter) => {
   const asDouble = parseDouble(text);
   const asInt = parseInt(text);
 
-  const suggestions = [
+  const ls = [
     ... (asDouble ? [[asDouble.toString(), newDynamic(asDouble)(Double)]] : []),
     ... (asInt ? [[asInt.toString(), newDynamic(BigInt(asInt))(Int)]] : []),
+    ... trie.suggest(env.name2dyn)(text)(10),
+  ]
+  return [
+    ...ls.filter(filter), // ones that match filter come first
+    ...ls.filter(s => !filter(s)),
+  ];
+}
 
-    ... (text !== '') ? trie.suggest(env.name2dyn)(text)(Infinity) : [],
-  ].filter(filter);
+export function InputBlock({ state, setState, filter, onResolve, onCancel }: InputBlockProps) {
+  const {env, text, resolved, focus} = state;
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [i, setI] = useState(0); // selected suggestion idx
+  const [haveFocus, setHaveFocus] = useState(false); // whether to render suggestions or not
+
+  const setText = (text: string) => {
+    setState({...state, text});
+  }
+
+  const singleSuggestion = trie.growPrefix(env.name2dyn)(text);
+  const suggestions = computeSuggestions(text, env, filter);
 
   useEffect(() => {
     setI(0); // reset
-    if (ref.current) {
-      ref.current.style.width = `${text.length === 0 ? 140 : (text.length*8.7)}px`;
+    if (inputRef.current) {
+      inputRef.current.style.width = `${text.length === 0 ? 140 : (text.length*8.7)}px`;
     }
   }, [text]);
 
+  useEffect(() => {
+    if (focus) {
+      inputRef.current?.focus();
+    }
+  }, [focus]);
+
   const onSelectSuggestion = ([name, dynamic]) => {
-    // setText(name);
-    // ref.current.textContent = name;
-    // setRightMostCaretPosition(ref.current);
-    // setI(0);
-    // setResolved(dynamic);
-    console.log("onResolve inputblock..")
     onResolve({
       kind: "input",
       env,
       text: name,
       resolved: dynamic,
+      focus: false,
     });
   };
 
   const onInput = e => {
     setText(e.target.value);
     if (resolved) {
+      // un-resolve
       onResolve({
         kind: "input",
         env,
         text: e.target.value,
         resolved: undefined,
+        focus: true,
       });
     }
   };
 
   const getCaretPosition = () => {
-    return ref.current.selectionStart;
+    return inputRef.current?.selectionStart || -1;
   }
 
   const onKeyDown = (e: React.KeyboardEvent) => {
@@ -100,8 +103,7 @@ export function InputBlock({ state: {kind, env, text, resolved}, setState, filte
           if (singleSuggestion.length > 0) {
             const newText = text + singleSuggestion;
             setText(newText);
-            // ref.current.textContent = newText;
-            setRightMostCaretPosition(ref.current);
+            setRightMostCaretPosition(inputRef.current);
             e.preventDefault();  
           }
           else {
@@ -156,7 +158,7 @@ export function InputBlock({ state: {kind, env, text, resolved}, setState, filte
         </span>
       }
       {/* Input box */}
-      <input ref={ref}
+      <input ref={inputRef}
         placeholder="start typing..."
         className="editable"
         value={text}
@@ -179,8 +181,7 @@ function Suggestions({ suggestions, onSelect, i, setI }) {
     setI(j);
     onSelect(suggestions[i]);
   };
-
-  return (suggestions.length > 0) ?
+  return <>{(suggestions.length > 0) &&
     <div className={"suggestions"}>
       {suggestions.map(([name, dynamic], j) =>
         <div
@@ -189,8 +190,7 @@ function Suggestions({ suggestions, onSelect, i, setI }) {
           onMouseEnter={onMouseEnter(j)}
           onMouseDown={onMouseDown(j)}>
             {name} :: <Type type={getType(dynamic)} />
-        </div>)
-      }
+        </div>)}
     </div>
-    : <></>;
+  }</>;
 }