Skip to content

Commit 58a0b92

Browse files
mikebarkminmikebarkmin
authored
Merge pull request #10 from openpatch/copilot/improve-array-node-creation
Replace window.prompt with custom dialogs and add String object mode with automatic conversion
2 parents 8de8ad2 + 46f91ec commit 58a0b92

9 files changed

Lines changed: 720 additions & 1809 deletions

‎package-lock.json‎

Lines changed: 4 additions & 1697 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ input {
2828
border-style: solid;
2929
border-radius: 8px;
3030
border-color: grey;
31-
width: 140px;
31+
width: 80px;
3232
padding: 4px;
3333
}
3434

‎src/ArrayCreationDialog.tsx‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
import { DataType } from "./memory";
2+
3+
interface ArrayCreationDialogProps {
4+
onConfirm: (name: string, length: number, elementType: DataType) => void;
5+
onCancel: () => void;
6+
availableTypes: DataType[];
7+
}
8+
9+
export const ArrayCreationDialog = ({
10+
onConfirm,
11+
onCancel,
12+
availableTypes,
13+
}: ArrayCreationDialogProps) => {
14+
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
15+
e.preventDefault();
16+
const formData = new FormData(e.currentTarget);
17+
const name = formData.get("name") as string;
18+
const length = parseInt(formData.get("length") as string, 10);
19+
const elementType = formData.get("elementType") as DataType;
20+
21+
if (name && !isNaN(length) && length > 0 && elementType) {
22+
onConfirm(name, length, elementType);
23+
}
24+
};
25+
26+
return (
27+
<div
28+
style={{
29+
position: "fixed",
30+
top: 0,
31+
left: 0,
32+
right: 0,
33+
bottom: 0,
34+
backgroundColor: "rgba(0, 0, 0, 0.5)",
35+
display: "flex",
36+
alignItems: "center",
37+
justifyContent: "center",
38+
zIndex: 1000,
39+
}}
40+
onClick={onCancel}
41+
>
42+
<div
43+
style={{
44+
backgroundColor: "white",
45+
padding: "24px",
46+
borderRadius: "8px",
47+
minWidth: "400px",
48+
maxWidth: "90vw",
49+
border: "1px solid #e5e7eb",
50+
margin: "20px",
51+
}}
52+
onClick={(e) => e.stopPropagation()}
53+
>
54+
<h3
55+
style={{
56+
margin: "0 0 16px 0",
57+
fontSize: "18px",
58+
fontWeight: "600",
59+
color: "#111827",
60+
}}
61+
>
62+
Create New Array
63+
</h3>
64+
<form onSubmit={handleSubmit}>
65+
<div style={{ marginBottom: "16px" }}>
66+
<label
67+
style={{
68+
display: "block",
69+
marginBottom: "6px",
70+
fontSize: "14px",
71+
fontWeight: "500",
72+
color: "#374151",
73+
}}
74+
>
75+
Array Name
76+
</label>
77+
<input
78+
type="text"
79+
name="name"
80+
required
81+
autoFocus
82+
style={{
83+
width: "100%",
84+
padding: "8px 12px",
85+
borderRadius: "6px",
86+
border: "1px solid #d1d5db",
87+
fontSize: "14px",
88+
boxSizing: "border-box",
89+
}}
90+
/>
91+
</div>
92+
<div style={{ marginBottom: "16px" }}>
93+
<label
94+
style={{
95+
display: "block",
96+
marginBottom: "6px",
97+
fontSize: "14px",
98+
fontWeight: "500",
99+
color: "#374151",
100+
}}
101+
>
102+
Length
103+
</label>
104+
<input
105+
type="number"
106+
name="length"
107+
required
108+
min="1"
109+
defaultValue="5"
110+
style={{
111+
width: "100%",
112+
padding: "8px 12px",
113+
borderRadius: "6px",
114+
border: "1px solid #d1d5db",
115+
fontSize: "14px",
116+
boxSizing: "border-box",
117+
}}
118+
/>
119+
</div>
120+
<div style={{ marginBottom: "20px" }}>
121+
<label
122+
style={{
123+
display: "block",
124+
marginBottom: "6px",
125+
fontSize: "14px",
126+
fontWeight: "500",
127+
color: "#374151",
128+
}}
129+
>
130+
Element Type
131+
</label>
132+
<select
133+
name="elementType"
134+
defaultValue="int"
135+
style={{
136+
width: "100%",
137+
padding: "8px 12px",
138+
borderRadius: "6px",
139+
border: "1px solid #d1d5db",
140+
fontSize: "14px",
141+
backgroundColor: "white",
142+
cursor: "pointer",
143+
boxSizing: "border-box",
144+
}}
145+
>
146+
{availableTypes.map((type) => (
147+
<option key={type} value={type}>
148+
{type}
149+
</option>
150+
))}
151+
</select>
152+
</div>
153+
<div
154+
style={{
155+
display: "flex",
156+
gap: "8px",
157+
justifyContent: "flex-end",
158+
}}
159+
>
160+
<button
161+
type="button"
162+
onClick={onCancel}
163+
style={{
164+
backgroundColor: "white",
165+
color: "#374151",
166+
padding: "8px 16px",
167+
fontSize: "14px",
168+
fontWeight: "500",
169+
border: "1px solid #d1d5db",
170+
borderRadius: "6px",
171+
cursor: "pointer",
172+
}}
173+
>
174+
Cancel
175+
</button>
176+
<button
177+
type="submit"
178+
style={{
179+
backgroundColor: "#111827",
180+
color: "white",
181+
padding: "8px 16px",
182+
fontSize: "14px",
183+
fontWeight: "500",
184+
border: "none",
185+
borderRadius: "6px",
186+
cursor: "pointer",
187+
}}
188+
>
189+
Create
190+
</button>
191+
</div>
192+
</form>
193+
</div>
194+
</div>
195+
);
196+
};

‎src/ConfigView.tsx‎

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { shallow } from "zustand/shallow";
22
import useStore, { RFState } from "./store";
33
import { useCallback, useState, useEffect } from "react";
44
import { DataType, primitveDataTypes } from "./memory";
5+
import { SimpleInputDialog } from "./SimpleInputDialog";
56

67
const selector = (state: RFState) => ({
78
updateMemory: state.updateMemory,
@@ -24,6 +25,7 @@ export const ConfigView = () => {
2425
const [newAttrType, setNewAttrType] = useState<DataType>("String");
2526
const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
2627
const [showSaveSuccess, setShowSaveSuccess] = useState(false);
28+
const [showAddClassDialog, setShowAddClassDialog] = useState(false);
2729

2830
// Get available data types: primitives + Array + defined classes
2931
const availableDataTypes = [
@@ -108,15 +110,17 @@ export const ConfigView = () => {
108110
);
109111

110112
const handleAddKlass = useCallback(() => {
111-
const name = window.prompt("Enter class name:");
112-
if (name && name.trim()) {
113-
setKlasses((prev) => ({
114-
...prev,
115-
[name.trim()]: {
116-
attributes: {},
117-
},
118-
}));
119-
}
113+
setShowAddClassDialog(true);
114+
}, []);
115+
116+
const handleAddKlassConfirm = useCallback((name: string) => {
117+
setKlasses((prev) => ({
118+
...prev,
119+
[name]: {
120+
attributes: {},
121+
},
122+
}));
123+
setShowAddClassDialog(false);
120124
}, []);
121125

122126
const handleRemoveKlass = useCallback((name: string) => {
@@ -888,6 +892,17 @@ export const ConfigView = () => {
888892
</div>
889893
</div>
890894
)}
895+
896+
{/* Add Class Dialog */}
897+
{showAddClassDialog && (
898+
<SimpleInputDialog
899+
title="Add Class"
900+
label="Class Name"
901+
placeholder="Enter class name"
902+
onConfirm={handleAddKlassConfirm}
903+
onCancel={() => setShowAddClassDialog(false)}
904+
/>
905+
)}
891906
</div>
892907
);
893908
};

0 commit comments

Comments
 (0)