research/dope2-webapp
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

move 'env' from state to context

Browse source
This commit is contained in:
Joeri Exelmans 2025-05-13 14:33:35 +02:00
parent 9ef160aeb7
commit f09261df93
13 changed files with 178 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/InputBlock.tsx
View file

@ -1,16 +1,16 @@
import { Double, getType, Int, newDynamic, trie } from "dope2";
import { focusNextElement, focusPrevElement, setRightMostCaretPosition } from "./util/dom_trickery";
import { autoInputWidth, focusNextElement, focusPrevElement, setRightMostCaretPosition } from "./util/dom_trickery";
import { parseDouble, parseInt } from "./util/parse";
import { useEffect, useMemo, useRef, useState } from "react";
import { useContext, useEffect, useMemo, useRef, useState } from "react";
import { Type } from "./Type";
import "./InputBlock.css";
import type { Dynamic, State2Props } from "./util/extra";
import { EnvContext } from "./EnvContext";
export interface InputBlockState {
kind: "input";
env: any;
text: string;
resolved: undefined | Dynamic;
focus: boolean
@ -39,7 +39,8 @@ const computeSuggestions = (text, env, filter) => {
}
export function InputBlock({ state, setState, filter, onResolve, onCancel }: InputBlockProps) {
const {env, text, resolved, focus} = state;
const {text, resolved, focus} = state;
const env = useContext(EnvContext);
const inputRef = useRef<HTMLInputElement>(null);
const [i, setI] = useState(0); // selected suggestion idx
const [haveFocus, setHaveFocus] = useState(false); // whether to render suggestions or not
@ -51,12 +52,7 @@ export function InputBlock({ state, setState, filter, onResolve, onCancel }: Inp
const singleSuggestion = trie.growPrefix(env.name2dyn)(text);
const suggestions = useMemo(() => computeSuggestions(text, env, filter), [text]);
useEffect(() => {
setI(0); // reset
if (inputRef.current) {
inputRef.current.style.width = `${text.length === 0 ? 140 : (text.length*8.7)}px`;
}
}, [text]);
useEffect(() => autoInputWidth(inputRef, text), [inputRef, text]);
useEffect(() => {
if (focus) {
@ -67,7 +63,6 @@ export function InputBlock({ state, setState, filter, onResolve, onCancel }: Inp
const onSelectSuggestion = ([name, dynamic]) => {
onResolve({
kind: "input",
env,
text: name,
resolved: dynamic,
focus: false,
@ -80,7 +75,6 @@ export function InputBlock({ state, setState, filter, onResolve, onCancel }: Inp
// un-resolve
onResolve({
kind: "input",
env,
text: e.target.value,
resolved: undefined,
focus: true,