61 lines
1.6 KiB
TypeScript
61 lines
1.6 KiB
TypeScript
import React from "react";
|
|
|
|
interface Props {
|
|
closeRemapFunction: () => void;
|
|
renameCallback: (file: any, newName: string) => void;
|
|
file: any;
|
|
}
|
|
|
|
const Rename = (props: Props) => {
|
|
const { closeRemapFunction, file, renameCallback } = props;
|
|
const [newName, setNewName] = React.useState(file.attributes.name);
|
|
|
|
const handleKeyDown = (event: React.KeyboardEvent) => {
|
|
if (event.key === "Escape") {
|
|
console.log("esc");
|
|
closeRemapFunction();
|
|
} else if (event.key === "Enter") {
|
|
console.log("enter pressed");
|
|
}
|
|
};
|
|
|
|
const handleRename = (event: React.MouseEvent) => {
|
|
// use from parent function named putRenameFile
|
|
// renameFunction(file, newName);
|
|
renameCallback(file, newName);
|
|
};
|
|
|
|
const ref = React.useRef<HTMLDivElement>(null);
|
|
|
|
React.useEffect(() => {
|
|
if (ref.current) {
|
|
ref.current.focus();
|
|
}
|
|
}, []);
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
onKeyDown={handleKeyDown}
|
|
tabIndex={-1} // Dodano tabIndex, aby element był fokusowalny
|
|
className="fixed inset-0 flex items-center justify-center z-50"
|
|
>
|
|
<div className="absolute inset-0 bg-black bg-opacity-75"></div>
|
|
<div className="flex bg-secondary p-6 rounded-lg shadow-lg z-10">
|
|
<input
|
|
type="text"
|
|
placeholder="Type here"
|
|
className="input w-full max-w-xs text-primary"
|
|
value={newName}
|
|
onChange={(e) => setNewName(e.target.value)}
|
|
/>
|
|
<button className="ml-2 btn" onClick={handleRename}>
|
|
Rename
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Rename;
|