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

nicer, nested rendering when currying

Browse source
This commit is contained in:
Joeri Exelmans 2025-05-12 16:26:25 +02:00
parent f75d0641b4
commit 8744bad0b8
9 changed files with 144 additions and 91 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/InputBlock.tsx
View file

@ -8,14 +8,12 @@ import { Type } from "./Type";
import "./InputBlock.css";
import type { Dynamic, State2Props } from "./util/extra";
import type { EditorState } from "./Editor";
import { ShowIf } from "./ShowIf";
export interface InputBlockState {
kind: "input";
env: any;
text: string;
resolved: undefined | Dynamic;
rollback?: EditorState;
}
interface InputBlockProps extends State2Props<InputBlockState> {
@ -24,7 +22,7 @@ interface InputBlockProps extends State2Props<InputBlockState> {
onCancel: () => void;
}
export function InputBlock({ state: {kind, env, text, resolved, rollback}, setState, filter, onResolve, onCancel }: InputBlockProps) {
export function InputBlock({ state: {kind, env, text, resolved}, setState, filter, onResolve, onCancel }: InputBlockProps) {
const ref = useRef<any>(null);
useEffect(() => {
ref.current?.focus();
@ -34,10 +32,10 @@ export function InputBlock({ state: {kind, env, text, resolved, rollback}, setSt
const [haveFocus, setHaveFocus] = useState(false); // whether to render suggestions or not
const setText = (text: string) => {
setState({kind, env, text, resolved, rollback});
setState({kind, env, text, resolved});
}
const setResolved = (resolved: Dynamic) => {
setState({kind, env, text, resolved, rollback});
setState({kind, env, text, resolved});
}
const singleSuggestion = trie.growPrefix(env.name2dyn)(text);
@ -60,7 +58,6 @@ export function InputBlock({ state: {kind, env, text, resolved, rollback}, setSt
}, [text]);
const onSelectSuggestion = ([name, dynamic]) => {
console.log(name);
// setText(name);
// ref.current.textContent = name;
// setRightMostCaretPosition(ref.current);
@ -72,7 +69,6 @@ export function InputBlock({ state: {kind, env, text, resolved, rollback}, setSt
env,
text: name,
resolved: dynamic,
rollback,
});
};
@ -84,7 +80,6 @@ export function InputBlock({ state: {kind, env, text, resolved, rollback}, setSt
env,
text: e.target.value,
resolved: undefined,
rollback,
});
}
};
@ -151,6 +146,16 @@ export function InputBlock({ state: {kind, env, text, resolved, rollback}, setSt
return <span>
<span className="">
{/* Dropdown suggestions */}
{haveFocus &&
<span style={{display:'inline-block'}}>
<Suggestions
suggestions={suggestions}
onSelect={onSelectSuggestion}
i={i} setI={setI} />
</span>
}
{/* Input box */}
<input ref={ref}
placeholder="start typing..."
className="editable"
@ -159,15 +164,10 @@ export function InputBlock({ state: {kind, env, text, resolved, rollback}, setSt
onKeyDown={onKeyDown}
onFocus={() => setHaveFocus(true)}
onBlur={() => setHaveFocus(false)}
/>
spellCheck={false}/>
{/* Single 'grey' suggestion */}
<span className="text-block suggest">{singleSuggestion}</span>
</span>
<ShowIf cond={haveFocus}>
<Suggestions
suggestions={suggestions}
onSelect={onSelectSuggestion}
i={i} setI={setI} />
</ShowIf>
</span>
</span>;
}