145 lines
3.6 KiB
TypeScript
145 lines
3.6 KiB
TypeScript
import { getSymbol, getType, module2Env, ModuleStd, symbolFunction } from "dope2";
|
|
|
|
import { InputBlock, type InputBlockState } from "./InputBlock";
|
|
import { type Dynamic, type State2Props } from "./util/extra";
|
|
import { CallBlock, type CallBlockState } from "./CallBlock";
|
|
import { useEffect, useState } from "react";
|
|
import { Type } from "./Type";
|
|
|
|
import "./Editor.css"
|
|
import { focusNextElement, focusPrevElement } from "./util/dom_trickery";
|
|
|
|
interface LetInBlockState {
|
|
kind: "let";
|
|
env: any;
|
|
name: string;
|
|
value: EditorState;
|
|
inner: EditorState;
|
|
resolved: undefined | Dynamic;
|
|
rollback?: EditorState;
|
|
}
|
|
|
|
interface LambdaBlockState {
|
|
kind: "lambda";
|
|
env: any;
|
|
paramName: string;
|
|
expr: EditorState;
|
|
resolved: undefined | Dynamic;
|
|
rollback?: EditorState;
|
|
}
|
|
|
|
export type EditorState =
|
|
InputBlockState
|
|
| CallBlockState
|
|
| LetInBlockState
|
|
| LambdaBlockState;
|
|
|
|
export const initialEditorState: EditorState = {
|
|
kind: "input",
|
|
env: module2Env(ModuleStd),
|
|
text: "",
|
|
resolved: undefined,
|
|
rollback: undefined,
|
|
};
|
|
|
|
interface EditorProps extends State2Props<EditorState> {
|
|
onResolve: (state: EditorState) => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
const dontFilter = () => true;
|
|
|
|
function getCommands(type) {
|
|
const commands = ['u', 't', 'Enter', 'Backspace', 'ArrowLeft', 'Tab'];
|
|
if (getSymbol(type) === symbolFunction) {
|
|
commands.push('c');
|
|
}
|
|
return commands;
|
|
}
|
|
|
|
export function Editor({state, setState, onResolve, onCancel}: EditorProps) {
|
|
const [needCommand, setNeedCommand] = useState(false);
|
|
const onMyResolve = (editorState: EditorState) => {
|
|
setState(editorState);
|
|
if (editorState.resolved) {
|
|
setNeedCommand(true);
|
|
}
|
|
else {
|
|
// unresolved
|
|
setNeedCommand(false);
|
|
onResolve(editorState); // pass up the fact that we're unresolved
|
|
}
|
|
}
|
|
// const onMyCancel
|
|
const onCommand = (e: React.KeyboardEvent) => {
|
|
const type = getType(state.resolved);
|
|
const commands = getCommands(type);
|
|
if (!commands.includes(e.key)) {
|
|
return;
|
|
}
|
|
e.preventDefault();
|
|
setNeedCommand(false);
|
|
// u -> pass Up
|
|
if (e.key === "u" || e.key === "Enter" || e.key === "Tab") {
|
|
onResolve(state);
|
|
return;
|
|
}
|
|
// c -> Call
|
|
if (e.key === "c") {
|
|
// we become CallBlock
|
|
setState({
|
|
kind: "call",
|
|
env: state.env,
|
|
fn: state,
|
|
input: initialEditorState,
|
|
resolved: undefined,
|
|
rollback: state,
|
|
});
|
|
return;
|
|
}
|
|
// t -> Transform
|
|
if (e.key === "t") {
|
|
// we become CallBlock
|
|
setState({
|
|
kind: "call",
|
|
env: state.env,
|
|
fn: initialEditorState,
|
|
input: state,
|
|
resolved: undefined,
|
|
rollback: state,
|
|
});
|
|
return;
|
|
}
|
|
if (e.key === "Backspace" || e.key === "ArrowLeft") {
|
|
focusPrevElement();
|
|
return;
|
|
}
|
|
};
|
|
|
|
const renderBlock = () => {
|
|
switch (state.kind) {
|
|
case "input":
|
|
return <InputBlock state={state} setState={setState} filter={dontFilter} onResolve={onMyResolve} onCancel={onCancel} />;
|
|
case "call":
|
|
return <CallBlock state={state} setState={setState} onResolve={onMyResolve} />;
|
|
case "let":
|
|
return <></>;
|
|
case "lambda":
|
|
return <></>;
|
|
}
|
|
}
|
|
return <>
|
|
{renderBlock()}
|
|
{
|
|
(state.resolved)
|
|
? <div className="typeSignature">
|
|
:: <Type type={getType(state.resolved)} />
|
|
{ (needCommand)
|
|
? <input autoFocus={true} className="editable command" placeholder="<enter command>" onKeyDown={onCommand} value=""/>
|
|
: <></>
|
|
}
|
|
</div>
|
|
: <></>
|
|
}
|
|
</>;
|
|
}
|