89 lines
2.6 KiB
TypeScript
89 lines
2.6 KiB
TypeScript
import { useState, useEffect, useRef } from 'react';
|
|
import { X } from 'lucide-react';
|
|
import '../styles/PromptDialog.css';
|
|
|
|
interface PromptDialogProps {
|
|
title: string;
|
|
message: string;
|
|
defaultValue?: string;
|
|
placeholder?: string;
|
|
confirmText: string;
|
|
cancelText: string;
|
|
onConfirm: (value: string) => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
export function PromptDialog({
|
|
title,
|
|
message,
|
|
defaultValue = '',
|
|
placeholder,
|
|
confirmText,
|
|
cancelText,
|
|
onConfirm,
|
|
onCancel
|
|
}: PromptDialogProps) {
|
|
const [value, setValue] = useState(defaultValue);
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (inputRef.current) {
|
|
inputRef.current.focus();
|
|
inputRef.current.select();
|
|
}
|
|
}, []);
|
|
|
|
const handleConfirm = () => {
|
|
if (value.trim()) {
|
|
onConfirm(value.trim());
|
|
}
|
|
};
|
|
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
|
if (e.key === 'Enter') {
|
|
e.preventDefault();
|
|
handleConfirm();
|
|
} else if (e.key === 'Escape') {
|
|
e.preventDefault();
|
|
onCancel();
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="prompt-dialog-overlay" onClick={onCancel}>
|
|
<div className="prompt-dialog" onClick={(e) => e.stopPropagation()}>
|
|
<div className="prompt-dialog-header">
|
|
<h2>{title}</h2>
|
|
<button className="close-btn" onClick={onCancel}>
|
|
<X size={16} />
|
|
</button>
|
|
</div>
|
|
<div className="prompt-dialog-content">
|
|
<p>{message}</p>
|
|
<input
|
|
ref={inputRef}
|
|
type="text"
|
|
className="prompt-dialog-input"
|
|
value={value}
|
|
onChange={(e) => setValue(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder={placeholder}
|
|
/>
|
|
</div>
|
|
<div className="prompt-dialog-footer">
|
|
<button className="prompt-dialog-btn cancel" onClick={onCancel}>
|
|
{cancelText}
|
|
</button>
|
|
<button
|
|
className="prompt-dialog-btn confirm"
|
|
onClick={handleConfirm}
|
|
disabled={!value.trim()}
|
|
>
|
|
{confirmText}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|