78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
import React from 'react';
|
|
import { CheckIcon, CloseIcon } from '../../ui/icons';
|
|
|
|
interface InlineRenameInputProps {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
onSubmit: () => void;
|
|
onCancel: (event?: React.SyntheticEvent) => void;
|
|
isSaving?: boolean;
|
|
canSubmit?: boolean;
|
|
inputRef?: React.Ref<HTMLInputElement>;
|
|
className?: string;
|
|
}
|
|
|
|
const InlineRenameInput: React.FC<InlineRenameInputProps> = ({
|
|
value,
|
|
onChange,
|
|
onSubmit,
|
|
onCancel,
|
|
isSaving = false,
|
|
canSubmit = true,
|
|
inputRef,
|
|
className = 'doc-title-edit',
|
|
}) => {
|
|
return (
|
|
<span className={className}>
|
|
<input
|
|
type="text"
|
|
ref={inputRef}
|
|
value={value}
|
|
onChange={(event) => onChange(event.target.value)}
|
|
onClick={(event) => event.stopPropagation()}
|
|
onKeyDown={(event) => {
|
|
if (event.key === 'Enter') {
|
|
event.preventDefault();
|
|
onSubmit();
|
|
} else if (event.key === 'Escape') {
|
|
event.preventDefault();
|
|
onCancel(event);
|
|
}
|
|
}}
|
|
onBlur={(event) => {
|
|
const nextFocus = event.relatedTarget;
|
|
if (!nextFocus || !event.currentTarget.parentElement?.contains(nextFocus)) {
|
|
onCancel();
|
|
}
|
|
}}
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="icon-button"
|
|
aria-label="Save"
|
|
title="Save"
|
|
disabled={!canSubmit || isSaving}
|
|
onClick={(event) => {
|
|
event.stopPropagation();
|
|
onSubmit();
|
|
}}
|
|
>
|
|
<CheckIcon />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="icon-button"
|
|
aria-label="Cancel"
|
|
title="Cancel"
|
|
onClick={(event) => {
|
|
onCancel(event);
|
|
}}
|
|
>
|
|
<CloseIcon />
|
|
</button>
|
|
</span>
|
|
);
|
|
};
|
|
|
|
export default InlineRenameInput;
|