referenceentry.tsx

import React, { useState } from "react";
import { DescriptiveReference } from "../../common/graph/node";
import "./nodetypeentry.css";

type ReferenceEntryProps = {
    reference: DescriptiveReference;
    onReferenceDelete: () => void;
    onReferenceChange: (reference: DescriptiveReference) => void;
};

function ReferenceEntry({
    reference,
    onReferenceDelete,
    onReferenceChange,
}: ReferenceEntryProps) {
    const [change, setChange] = useState(false);

    const onPropChange = (
        prop: keyof DescriptiveReference,
        newValue: string
    ) => {
        reference[prop] = newValue;
        setChange(true);
    };

    const handleOnBlur = () => {
        // Did anything change?
        if (!change) {
            return;
        }

        onReferenceChange(reference);
        setChange(false);
    };

    return (
        <div className="reference" onBlur={handleOnBlur}>
            <label htmlFor="reference-url">Url</label>
            <br />
            <input
                className="reference-url"
                type={"text"}
                value={reference.url}
                onChange={(event) => onPropChange("url", event.target.value)}
            />
            <br />
            <label htmlFor="reference-description">Description</label>
            <br />
            <textarea
                className="reference-description"
                value={reference.description}
                onChange={(event) =>
                    onPropChange("description", event.target.value)
                }
            />
            <br />
            <button onClick={onReferenceDelete}>Delete</button>
        </div>
    );
}

export default ReferenceEntry;