feat: enter key to submit dialog

This commit is contained in:
trafficlunar 2025-01-29 20:31:13 +00:00
parent 9cd8c0f18d
commit 88b43829bc
8 changed files with 41 additions and 18 deletions

View file

@ -10,7 +10,7 @@ import { Input } from "@/components/ui/input";
import { useTextures } from "@/hooks/useTextures";
function SaveImage({ close }: DialogProps) {
function SaveImage({ close, registerSubmit, dialogKeyHandler }: DialogProps) {
const { blocks, canvasSize, version } = useContext(CanvasContext);
const { missingTexture } = useContext(TexturesContext);
@ -59,15 +59,17 @@ function SaveImage({ close }: DialogProps) {
close();
};
registerSubmit(onSubmit);
return (
<DialogContent>
<DialogContent onKeyDown={dialogKeyHandler}>
<DialogHeader>
<DialogTitle>Save as image (.png)</DialogTitle>
<DialogDescription>Save your canvas as a full size image</DialogDescription>
</DialogHeader>
<div className="flex items-center gap-2">
<Input value={fileName} onChange={(e) => setFileName(e.target.value)} />
<Input value={fileName} onChange={(e) => setFileName(e.target.value)} autoFocus />
<span>.png</span>
</div>

View file

@ -19,7 +19,7 @@ type BlockStatePalette = {
Properties?: Record<string, string>;
}[];
function SaveLitematic({ close }: DialogProps) {
function SaveLitematic({ close, registerSubmit, dialogKeyHandler }: DialogProps) {
const { canvasSize, blocks, version } = useContext(CanvasContext);
const { setLoading } = useContext(LoadingContext);
@ -164,15 +164,17 @@ function SaveLitematic({ close }: DialogProps) {
close();
};
registerSubmit(onSubmit);
return (
<DialogContent>
<DialogContent onKeyDown={dialogKeyHandler}>
<DialogHeader>
<DialogTitle>Save as .litematic</DialogTitle>
<DialogDescription>Save your image as a litematic</DialogDescription>
</DialogHeader>
<div className="flex items-center gap-2">
<Input value={fileName} onChange={(e) => setFileName(e.target.value)} />
<Input value={fileName} onChange={(e) => setFileName(e.target.value)} autoFocus />
<span>.litematic</span>
</div>

View file

@ -43,7 +43,7 @@ const blockEntitiesWhitelist = [
"vault",
];
function SaveSchem({ close }: DialogProps) {
function SaveSchem({ close, registerSubmit, dialogKeyHandler }: DialogProps) {
const { canvasSize, blocks, version } = useContext(CanvasContext);
const { setLoading } = useContext(LoadingContext);
@ -166,15 +166,17 @@ function SaveSchem({ close }: DialogProps) {
close();
};
registerSubmit(onSubmit);
return (
<DialogContent>
<DialogContent onKeyDown={dialogKeyHandler}>
<DialogHeader>
<DialogTitle>Save as .schem</DialogTitle>
<DialogDescription>Save your image as a .schem (Sponge Version 3)</DialogDescription>
</DialogHeader>
<div className="flex items-center gap-2">
<Input value={fileName} onChange={(e) => setFileName(e.target.value)} />
<Input value={fileName} onChange={(e) => setFileName(e.target.value)} autoFocus />
<span>.schem</span>
</div>

View file

@ -7,7 +7,7 @@ import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
function SetCoords({ close }: DialogProps) {
function SetCoords({ close, registerSubmit, dialogKeyHandler }: DialogProps) {
const { stageSize, coords, scale, setCoords } = useContext(CanvasContext);
const [newTilemapCoords, setNewTilemapCoords] = useState(coords);
@ -30,6 +30,8 @@ function SetCoords({ close }: DialogProps) {
close();
};
registerSubmit(onSubmit);
// Sets the current coordinates when the dialog is first opened
useEffect(() => {
// Get center of screen
@ -47,7 +49,7 @@ function SetCoords({ close }: DialogProps) {
}, []);
return (
<DialogContent>
<DialogContent onKeyDown={dialogKeyHandler}>
<DialogHeader>
<DialogTitle>Set Coordinates</DialogTitle>
<DialogDescription>Set your coordinates to a particular position</DialogDescription>
@ -62,6 +64,7 @@ function SetCoords({ close }: DialogProps) {
placeholder="X"
value={newTilemapCoords.x}
onChange={(e) => setNewTilemapCoords((prev) => ({ ...prev, x: parseInt(e.target.value) }))}
autoFocus
/>
</div>

View file

@ -6,7 +6,7 @@ import { DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTit
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
function SetScale({ close }: DialogProps) {
function SetScale({ close, registerSubmit, dialogKeyHandler }: DialogProps) {
const { scale, setScale } = useContext(CanvasContext);
const [newScale, setNewScale] = useState(scale * 100);
@ -16,14 +16,16 @@ function SetScale({ close }: DialogProps) {
close();
};
registerSubmit(onSubmit);
return (
<DialogContent>
<DialogContent onKeyDown={dialogKeyHandler}>
<DialogHeader>
<DialogTitle>Set Scale</DialogTitle>
<DialogDescription>Set your scale to a particular percentage</DialogDescription>
</DialogHeader>
<Input type="number" value={newScale} onChange={(e) => setNewScale(parseInt(e.target.value))} />
<Input type="number" value={newScale} onChange={(e) => setNewScale(parseInt(e.target.value))} autoFocus />
<DialogFooter>
<Button variant="outline" onClick={close}>

View file

@ -29,7 +29,7 @@ function SetVersion({ close }: DialogProps) {
<Button variant="outline" onClick={close}>
Cancel
</Button>
<Button type="submit" onClick={onSubmit}>
<Button type="submit" onClick={onSubmit} autoFocus>
Set
</Button>
</DialogFooter>