Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make PID row input component React-controlled to better fix #292 and #293 #301

Closed
wants to merge 2 commits into from
Closed

Make PID row input component React-controlled to better fix #292 and #293 #301

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a708c10
Make the PID row input element React-controlled
diegodlh Sep 25, 2024
8f23a02
Reintroduced comment about replacing with component
diegodlh Sep 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 10 additions & 15 deletions src/components/pidRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,37 +14,28 @@ function PIDRow(props: {
const [value, setValue] = useState(props.item.getPID(props.type));
const [url, setUrl] = useState(props.item.getPidUrl(props.type));

const [oldPid, setOldPid] = useState(value);

useEffect(() => {
setValue(props.item.getPID(props.type));
}, [props.item, props.type]);

useEffect(() => {
setUrl(props.item.getPidUrl(props.type));
// update the value of the input to match the new PID
(
document.getElementById(
`pid-row-input-${props.item.key}-${props.type}`,
)! as HTMLInputElement
).value = props.item.getPID(props.type) || "";
}, [props.type, value]);

function handleCommit(newPid: string) {
if (newPid != value) {
if (newPid != oldPid) {
if (props.validate && !props.validate(props.type, newPid)) {
setValue(oldPid);
return;
}
props.item.setPID(props.type, newPid, props.autosave);
// set new value immediately
// if autosave is true, it will be updated twice
// but second time (via props.item) might take some time
setValue(props.item.getPID(props.type));
}
}

async function onFetch() {
await props.item.fetchPID(props.type, props.autosave);
// set new value immediately (see note in handleCommit)
setValue(props.item.getPID(props.type));
}

return (
Expand All @@ -56,12 +47,16 @@ function PIDRow(props: {
{props.type.toUpperCase()}
</label>
<div className="editable-container">
{/* <Editable */}
{/* 973e924 replaced Editable with input until we work out how to import zotero components */}
<input
type="text"
id={`pid-row-input-${props.item.key}-${props.type}`}
className={props.editable ? "zotero-clicky" : ""}
readOnly={!props.editable}
defaultValue={value || ""}
value={value || ""}
onChange={(event) => setValue(event.target.value)}
// when the input gains focus, save its value for reference
onFocus={() => setOldPid(value || "")}
// when the input loses focus, update the item's PID
onBlur={(event) => handleCommit(event.target.value)}
/>
Expand Down