131 lines
5.4 KiB
TypeScript
131 lines
5.4 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useAppDispatch, useAppState } from '../state';
|
|
|
|
export function EventsPanel() {
|
|
const dispatch = useAppDispatch();
|
|
const { design, selectedWidgetId, vscode } = useAppState();
|
|
const [eventType, setEventType] = useState('command');
|
|
const [eventName, setEventName] = useState('onClick');
|
|
const [eventCode, setEventCode] = useState('print("clicked")');
|
|
|
|
const w = design.widgets.find((x) => x.id === selectedWidgetId);
|
|
const widgetEvents = (id: string | undefined) =>
|
|
(design.events || []).filter((e) => e.widget === id);
|
|
|
|
const add = () => {
|
|
if (!w) {
|
|
vscode.postMessage({
|
|
type: 'showError',
|
|
text: 'Select a widget to add events to',
|
|
});
|
|
return;
|
|
}
|
|
if (!eventType || !eventName || !eventCode) {
|
|
vscode.postMessage({
|
|
type: 'showError',
|
|
text: 'Please fill in all fields: event type, name, and code',
|
|
});
|
|
return;
|
|
}
|
|
dispatch({
|
|
type: 'addEvent',
|
|
payload: {
|
|
widget: w.id,
|
|
type: eventType,
|
|
name: eventName,
|
|
code: eventCode,
|
|
},
|
|
});
|
|
vscode.postMessage({
|
|
type: 'showInfo',
|
|
text: `Event added: ${eventType} -> ${eventName}`,
|
|
});
|
|
};
|
|
|
|
const remove = (type: string) => {
|
|
if (!w) return;
|
|
dispatch({ type: 'removeEvent', payload: { widget: w.id, type } });
|
|
vscode.postMessage({ type: 'showInfo', text: 'Event removed' });
|
|
};
|
|
|
|
return (
|
|
<div className="events-panel">
|
|
<h3>Events & Commands</h3>
|
|
<div id="eventsContent">
|
|
{!w ? (
|
|
<p>Select a widget to configure events</p>
|
|
) : (
|
|
<div className="event-section">
|
|
<div className="event-controls">
|
|
<label className="property-label">
|
|
Event Type:
|
|
</label>
|
|
<input
|
|
className="event-type-select"
|
|
type="text"
|
|
value={eventType}
|
|
onChange={(e) => setEventType(e.target.value)}
|
|
/>
|
|
<label className="property-label">
|
|
Handler Name:
|
|
</label>
|
|
<input
|
|
className="event-handler-input"
|
|
type="text"
|
|
value={eventName}
|
|
onChange={(e) => setEventName(e.target.value)}
|
|
/>
|
|
<label className="property-label">
|
|
Handler Code:
|
|
</label>
|
|
<textarea
|
|
className="event-handler-input"
|
|
value={eventCode}
|
|
onChange={(e) => setEventCode(e.target.value)}
|
|
/>
|
|
</div>
|
|
<div className="event-buttons">
|
|
<button className="event-btn primary" onClick={add}>
|
|
Add Event
|
|
</button>
|
|
</div>
|
|
<div className="event-list">
|
|
<h4>Configured Events</h4>
|
|
{widgetEvents(w.id).length === 0 ? (
|
|
<p>No events added yet.</p>
|
|
) : (
|
|
widgetEvents(w.id).map((ev) => (
|
|
<div
|
|
className="event-item"
|
|
key={`${ev.widget}-${ev.type}`}
|
|
>
|
|
<div className="event-info">
|
|
<span className="event-name">
|
|
{ev.name}
|
|
</span>{' '}
|
|
<span className="event-handler">
|
|
{ev.type}
|
|
</span>
|
|
<div className="event-code">
|
|
{ev.code}
|
|
</div>
|
|
</div>
|
|
<div className="event-actions">
|
|
<button
|
|
className="event-btn secondary"
|
|
onClick={() => remove(ev.type)}
|
|
>
|
|
Remove
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|