ability to explode words
This commit is contained in:
parent
4da16037aa
commit
735bb8d6fd
|
@ -3,6 +3,7 @@
|
|||
"version": "0.1.0",
|
||||
"license": "MIT",
|
||||
"author": "lingdocs.com",
|
||||
"homepage": "https://dictionary.lingdocs.com",
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-free": "^5.15.2",
|
||||
|
|
|
@ -46,6 +46,7 @@ function IsolatedEntry({ state, dictionary, isolateEntry }: {
|
|||
dictionary: DictionaryAPI,
|
||||
isolateEntry: (ts: number) => void,
|
||||
}) {
|
||||
const [exploded, setExploded] = useState<boolean>(false);
|
||||
const [editing, setEditing] = useState<boolean>(false);
|
||||
const [comment, setComment] = useState<string>("");
|
||||
const [editSubmitted, setEditSubmitted] = useState<boolean>(false);
|
||||
|
@ -103,6 +104,27 @@ function IsolatedEntry({ state, dictionary, isolateEntry }: {
|
|||
return false;
|
||||
}
|
||||
})();
|
||||
function DisplayVPExplorer(props: {
|
||||
entry: T.DictionaryEntry,
|
||||
complement: T.DictionaryEntry | undefined,
|
||||
}) {
|
||||
try {
|
||||
return <VPExplorer
|
||||
verb={{
|
||||
// TODO: CLEAN THIS UP!
|
||||
// @ts-ignore
|
||||
entry: props.entry,
|
||||
complement: props.complement,
|
||||
}}
|
||||
opts={textOptions}
|
||||
entryFeeder={entryFeeder}
|
||||
handleLinkClick={isolateEntry}
|
||||
/>
|
||||
} catch (e) {
|
||||
console.error("error rendering VPExplorer", e);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
return <div className="width-limiter">
|
||||
<Helmet>
|
||||
<title>{entry.p} - LingDocs Pashto Dictionary</title>
|
||||
|
@ -111,15 +133,21 @@ function IsolatedEntry({ state, dictionary, isolateEntry }: {
|
|||
<div className="col-8">
|
||||
<Entry
|
||||
nonClickable
|
||||
entry={entry}
|
||||
entry={exploded ? explodeEntry(entry) : entry}
|
||||
textOptions={textOptions}
|
||||
isolateEntry={isolateEntry}
|
||||
/>
|
||||
</div>
|
||||
{state.user &&
|
||||
<div className="col-4">
|
||||
<div className="d-flex flex-row justify-content-end">
|
||||
{state.user.level === "editor" && <>
|
||||
<div
|
||||
className="clickable mr-3"
|
||||
onClick={() => setExploded(os => !os)}
|
||||
>
|
||||
<i className={`fas fa-${exploded ? "compress" : "expand"}-alt`} />
|
||||
</div>
|
||||
{state.user && <>
|
||||
(state.user.level === "editor" && <>
|
||||
<div className="clickable mr-3" onClick={() => navigator.clipboard.writeText(entry.ts.toString())}>
|
||||
<i className="fas fa-tag"></i>
|
||||
</div>
|
||||
|
@ -131,17 +159,16 @@ function IsolatedEntry({ state, dictionary, isolateEntry }: {
|
|||
className="clickable mr-3"
|
||||
data-testid="finalEditEntryButton"
|
||||
>
|
||||
<i className="fa fa-gavel"></i>
|
||||
<i className="fa fa-gavel" />
|
||||
</div>
|
||||
</Link>
|
||||
</>
|
||||
}
|
||||
</>)
|
||||
<div
|
||||
className="clickable mr-3"
|
||||
data-testid="editEntryButton"
|
||||
onClick={() => setEditing(!editing)}
|
||||
onClick={() => setEditing(os => !os)}
|
||||
>
|
||||
<i className="fa fa-pen"></i>
|
||||
<i className="fa fa-pen" />
|
||||
</div>
|
||||
{wordlistEnabled(state.user) && <div
|
||||
className="clickable"
|
||||
|
@ -153,9 +180,9 @@ function IsolatedEntry({ state, dictionary, isolateEntry }: {
|
|||
>
|
||||
<i className={`fa${wordlistWord ? "s" : "r"} fa-star fa-lg`}/>
|
||||
</div>}
|
||||
</>}
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
{wordlistWord && <>
|
||||
{hasAttachment(wordlistWord, "audio") && <AudioPlayButton word={wordlistWord} />}
|
||||
|
@ -207,17 +234,7 @@ function IsolatedEntry({ state, dictionary, isolateEntry }: {
|
|||
</div>}
|
||||
</>}
|
||||
{tp.isVerbEntry({ entry, complement }) && <div className="pb-4">
|
||||
<VPExplorer
|
||||
verb={{
|
||||
// TODO: CLEAN THIS UP!
|
||||
// @ts-ignore
|
||||
entry,
|
||||
complement,
|
||||
}}
|
||||
opts={textOptions}
|
||||
entryFeeder={entryFeeder}
|
||||
handleLinkClick={isolateEntry}
|
||||
/>
|
||||
<DisplayVPExplorer entry={entry} complement={complement} />
|
||||
</div>}
|
||||
|
||||
{relatedEntries && <>
|
||||
|
@ -257,4 +274,11 @@ function IsolatedEntry({ state, dictionary, isolateEntry }: {
|
|||
</div>;
|
||||
}
|
||||
|
||||
function explodeEntry(entry: T.DictionaryEntry): T.DictionaryEntry {
|
||||
return {
|
||||
...entry,
|
||||
p: entry.p.split("").join(" "),
|
||||
};
|
||||
}
|
||||
|
||||
export default IsolatedEntry;
|
Loading…
Reference in New Issue