File size: 1,944 Bytes
bbae7a9 1fe47b1 e9e1da2 1fe47b1 e9e1da2 1fe47b1 e9e1da2 1fe47b1 bbae7a9 1fe47b1 a54cb5b e9e1da2 1fe47b1 e9e1da2 1fe47b1 e9e1da2 1fe47b1 bbae7a9 1fe47b1 e9e1da2 1fe47b1 a54cb5b 1fe47b1 a54cb5b 1fe47b1 a54cb5b e9e1da2 1fe47b1 0970991 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 |
import React, { useState, useEffect, useRef } from "react"
export const WordChip = ({
word,
logprob,
threshold,
replacements,
onReplace
}: {
word: string,
logprob: number,
threshold: number,
replacements: string[],
onReplace: (newWord: string) => void
}) => {
const [isExpanded, setIsExpanded] = useState(false);
const dropdownRef = useRef<HTMLSelectElement>(null);
useEffect(() => {
const handleClickOutside = (event: MouseEvent) => {
if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
setIsExpanded(false);
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, []);
const handleClick = () => {
if (logprob < threshold && replacements.length > 0) {
setIsExpanded(true);
}
}
const handleReplacement = (event: React.ChangeEvent<HTMLSelectElement>) => {
console.log("handleReplacement", event.target.value)
const newWord = event.target.value
onReplace(newWord)
setIsExpanded(false);
}
return (
<span
title={logprob.toFixed(2)}
className={`word-chip ${logprob < threshold ? "flagged" : ""}`}
style={{ position: "relative", cursor: logprob < threshold ? "pointer" : "default" }}
onClick={handleClick}
>
{word}
{isExpanded && (
<select
ref={dropdownRef}
onChange={handleReplacement}
value={word}
style={{
position: "absolute",
top: "100%",
left: 0,
zIndex: 1000,
overflowY: "auto"
}}
size={replacements.length + 1}
>
<option key="original" hidden>{word}</option>
{replacements.map((r, i) => (
<option key={i} value={r}>{r}</option>
))}
</select>
)}
</span>
)
}
|