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

a bit more progress

Browse source
This commit is contained in:
Joeri Exelmans 2025-05-12 00:02:14 +02:00
parent a9ae4f9888
commit 2b0d8bc2c6
8 changed files with 109 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

41
src/InputBlock.tsx
View file

@ -8,6 +8,7 @@ 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";
@ -27,9 +28,6 @@ export function InputBlock({ state: {kind, env, text, resolved, rollback}, setSt
const ref = useRef<any>(null);
useEffect(() => {
ref.current?.focus();
if (ref.current) {
// ref.current.textContent = text;
}
}, []);
const [i, setI] = useState(0); // selected suggestion
@ -111,6 +109,10 @@ export function InputBlock({ state: {kind, env, text, resolved, rollback}, setSt
setRightMostCaretPosition(ref.current);
e.preventDefault();
}
else {
onSelectSuggestion(suggestions[i]);
e.preventDefault();
}
}
},
ArrowDown: () => {
@ -149,21 +151,38 @@ export function InputBlock({ state: {kind, env, text, resolved, rollback}, setSt
return <span>
<span className="">
<input ref={ref} placeholder="start typing..." autoFocus={true} className="editable" value={text} onInput={onInput} onKeyDown={onKeyDown} onFocus={() => setHaveFocus(true)} onBlur={() => setHaveFocus(false)}/>
<input ref={ref} placeholder="start typing..." className="editable" value={text} onInput={onInput} onKeyDown={onKeyDown} onFocus={() => setHaveFocus(true)} onBlur={() => setTimeout(() => setHaveFocus(false), 200)}/>
<span className="text-block suggest">{singleSuggestion}</span>
</span>
{
(haveFocus)
? <Suggestions suggestions={suggestions} onSelect={onSelectSuggestion} i={i} setI={setI} />
: <></>
}
<ShowIf cond={haveFocus}>
<Suggestions
suggestions={suggestions}
onSelect={onSelectSuggestion}
i={i} setI={setI} />
</ShowIf>
</span>;
}
function Suggestions({ suggestions, onSelect, i, setI }) {
const onMouseEnter = j => () => {
setI(j);
};
const onMouseDown = j => () => {
setI(j);
onSelect(suggestions[i]);
};
return (suggestions.length > 0) ?
<div className="suggestions">
{suggestions.map(([name, dynamic], j) => <div key={`${j}_${name}`} className={i === j ? "selected" : ""} onClick={() => onSelect(suggestions[i])}>{name} :: <Type type={getType(dynamic)} /></div>)}
<div className={"suggestions"}>
{suggestions.map(([name, dynamic], j) =>
<div
key={`${j}_${name}`}
className={i === j ? "selected" : ""}
onMouseEnter={onMouseEnter(j)}
onMouseDown={onMouseDown(j)}>
{name} :: <Type type={getType(dynamic)} />
</div>)
}
</div>
: <></>;
}