56 lines
1.5 KiB
TypeScript
56 lines
1.5 KiB
TypeScript
/*
|
|
* Vencord, a Discord client mod
|
|
* Copyright (c) 2025 Vendicated and contributors
|
|
* SPDX-License-Identifier: GPL-3.0-or-later
|
|
*/
|
|
|
|
import { BaseText } from "@components/BaseText";
|
|
import { React, useEffect, useRef, useState } from "@webpack/common";
|
|
|
|
interface EditableTextProps {
|
|
value: string;
|
|
onChange: (newValue: string) => void;
|
|
className?: string;
|
|
}
|
|
|
|
export function EditableText({ value, onChange, className }: EditableTextProps) {
|
|
const [editing, setEditing] = useState(false);
|
|
const [tempValue, setTempValue] = useState(value);
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (editing && inputRef.current) {
|
|
inputRef.current.focus();
|
|
}
|
|
}, [editing]);
|
|
|
|
return editing ? (
|
|
<input
|
|
ref={inputRef}
|
|
className={className}
|
|
value={tempValue}
|
|
onChange={e => setTempValue(e.target.value)}
|
|
onBlur={() => {
|
|
setEditing(false);
|
|
onChange(tempValue);
|
|
}}
|
|
onKeyDown={e => {
|
|
if (e.key === "Enter") {
|
|
setEditing(false);
|
|
onChange(tempValue);
|
|
} else if (e.key === "Escape") {
|
|
setEditing(false);
|
|
setTempValue(value);
|
|
}
|
|
}}
|
|
/>
|
|
) : (
|
|
<BaseText
|
|
className={className}
|
|
onClick={() => setEditing(true)}
|
|
style={{ cursor: "pointer" }}
|
|
>
|
|
{value}
|
|
</BaseText>
|
|
);
|
|
}
|