wedding-planner-frontend/app/ui/components/form/inlineTextField.tsx

/* Copyright (C) 2024-2025 LibreWeddingPlanner contributors*/

import React, { useState } from 'react';

export default function InlineTextField({ initialValue, onChange }: { initialValue: string, onChange: (value: string) => void }) {
    const [editing, setEditing] = useState(false);
    const [value, setValue] = useState(initialValue);

    const renderText = () => <span onClick={() => setEditing(true)}>{value}</span>

    const onConfirm = () => {
        onChange(value);
        setEditing(false);
    }

    function renderForm() {
        return (
            <div className="flex flex-row">
                <input
                    type="text"
                    value={value}
                    className="px-2 py-0 h-5 max-w-48"
                    onChange={(e) => setValue(e.target.value)}
                    onBlur={onConfirm}
                    autoFocus
                />
            </div>
        )
    }

    return (
        editing ? (renderForm()) : (renderText())
    );
}