Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | 1x | import React from 'react';
interface LayerNameEditorProps {
layerId: string;
layerName: string;
isEditing: boolean;
onRenameSubmit: (id: string, name: string) => Promise<void>;
}
export const LayerNameEditor = React.memo(function LayerNameEditor({
layerId,
layerName,
isEditing,
onRenameSubmit,
}: LayerNameEditorProps) {
// Prevents the click from activating the layer selection when interacting with the input field.
const handleInputClick = (mouseEvent: React.MouseEvent) =>
mouseEvent.stopPropagation();
// Handles form submission (Enter key) to save the new layer name.
const handleFormSubmit = (formEvent: React.FormEvent<HTMLFormElement>) => {
formEvent.preventDefault();
const form = formEvent.target as HTMLFormElement;
const input = form.elements.namedItem('name') as HTMLInputElement;
onRenameSubmit(layerId, input.value).then((r) => r);
};
// Handles loss of focus (click outside input) to save the new layer name.
const handleInputBlur = (focusEvent: React.FocusEvent<HTMLInputElement>) => {
onRenameSubmit(layerId, focusEvent.currentTarget.value).then((r) => r);
};
return (
<div className="min-w-0">
{isEditing ? (
<form onSubmit={handleFormSubmit}>
<input
name="name"
autoFocus
defaultValue={layerName}
onClick={handleInputClick}
onBlur={handleInputBlur}
className="w-44 text-sm px-1 py-0.5 rounded border border-indigo-300"
/>
</form>
) : (
<div className="truncate text-sm" title={layerName}>
{layerName}
</div>
)}
</div>
);
});
|