diff --git a/media/editor/components.tsx b/media/editor/components.tsx index 1abef8a..2327617 100644 --- a/media/editor/components.tsx +++ b/media/editor/components.tsx @@ -1,20 +1,26 @@ import { VSCodeTextField } from "@vscode/webview-ui-toolkit/react"; import React, { useEffect, useRef, useState } from "react"; +import { useGlobalHandler } from "./useHelpers"; interface EditableFieldsProps extends React.HTMLProps { value: string; displayValue?: string; label?: string; onChange: (value: any) => void; + onEditingStateChanged?: (value: boolean) => void; } // Text editable by doubleclicking it export const EditableField: React.FC = props => { - const { value, displayValue, label, onChange, ...rest } = props; + const { value, displayValue, label, onChange, onEditingStateChanged, ...rest } = props; const rawDisplayValue = displayValue || value; const [editing, setEditing] = useState(false); const inputRef = useRef(null); - + useEffect(() => { + if (onEditingStateChanged) { + onEditingStateChanged(editing); + } + }, [editing, onEditingStateChanged]); const pushChange = () => { props.onChange((inputRef?.current as unknown as HTMLInputElement).value); setEditing(false); @@ -23,15 +29,34 @@ export const EditableField: React.FC = props => { const toggleEdit = () => { setEditing(!editing); }; - + const enableRename = () => { + setEditing(true); + }; useEffect(() => { if (editing) { (inputRef?.current as unknown as HTMLInputElement).focus(); } }, [editing]); + useGlobalHandler( + "keydown", + (e:KeyboardEvent) => { + if(editing){ + switch (e.code) { + case "Escape": + case "Enter": + setEditing(false); + e.preventDefault(); + break; + } + } + }, + [editing] + ); + return ( -
+
+ {!editing && rawDisplayValue} {editing && ( = props => { onBlur={() => setEditing(false)} /> )} - {!editing && rawDisplayValue}
); }; diff --git a/media/editor/listView.tsx b/media/editor/listView.tsx index 0fdefe3..deed0ca 100644 --- a/media/editor/listView.tsx +++ b/media/editor/listView.tsx @@ -1,5 +1,5 @@ import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"; -import React, { useState } from "react"; +import React, { useEffect, useState } from "react"; import { DmiState, Dirs, Dmi } from "../../shared/dmi"; import { EditableField } from "./components"; import { buildClassName, useGlobalHandler } from "./useHelpers"; @@ -12,14 +12,21 @@ type ListStateDisplayProps = { selected: boolean; hidden: boolean; duplicate: boolean; + editing?: boolean; delete: () => void; select: () => void; open: () => void; + onEditingStateChanged?: (value: boolean) => void; modify: (modified_state: DmiState) => void; }; // icon state preview on the state list const ListStateDisplay: React.FC = props => { + const [editing, setEditing] = useState(false); + useEffect(() => { + if (props.onEditingStateChanged) + props.onEditingStateChanged(editing); + }, [editing, props.onEditingStateChanged]); const iconState = props.state; const listClassName = buildClassName({ statePreviewBox: true, @@ -40,13 +47,16 @@ const ListStateDisplay: React.FC = props => { new_state.name = value; props.modify(new_state); }; - + const _renaming_node = (editing: boolean) => { + setEditing(editing); + }; return (