Newer
Older
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);
<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;