53 lines
1.2 KiB
TypeScript
53 lines
1.2 KiB
TypeScript
|
import React, { useState } from "react";
|
||
|
|
import { RenameIcon } from "../../icons/ContextMenuIcons";
|
||
|
|
import {
|
||
|
|
useLeftData,
|
||
|
|
useTopData,
|
||
|
|
} from "../../../store/visualization/useZone3DWidgetStore";
|
||
|
|
|
||
|
|
type RenameTooltipProps = {
|
||
|
|
name: string;
|
||
|
|
onSubmit: (newName: string) => void;
|
||
|
|
};
|
||
|
|
|
||
|
|
const RenameTooltip: React.FC<RenameTooltipProps> = ({ name, onSubmit }) => {
|
||
|
|
const [value, setValue] = useState(name);
|
||
|
|
|
||
|
|
const { top } = useTopData();
|
||
|
|
const { left } = useLeftData();
|
||
|
|
|
||
|
|
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
|
||
|
|
e.preventDefault();
|
||
|
|
onSubmit(value.trim());
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
className="rename-tool-tip"
|
||
|
|
style={{
|
||
|
|
position: "absolute",
|
||
|
|
top: `${top}px`,
|
||
|
|
left: `${left}px`,
|
||
|
|
zIndex: 100,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div className="header">
|
||
|
|
<div className="icon">
|
||
|
|
<RenameIcon />
|
||
|
|
</div>
|
||
|
|
<div className="name">Name</div>
|
||
|
|
</div>
|
||
|
|
<form className="input" onSubmit={handleSubmit}>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
value={value}
|
||
|
|
onChange={(e) => setValue(e.target.value)}
|
||
|
|
autoFocus
|
||
|
|
/>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default RenameTooltip;
|