feat: show more
This commit is contained in:
parent
82c205e22e
commit
3c74ab6236
@ -170,3 +170,10 @@
|
|||||||
.light .note.active>.footer>.reaction-pill.reacted {
|
.light .note.active>.footer>.reaction-pill.reacted {
|
||||||
color: var(--highlight);
|
color: var(--highlight);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.note-expand .body {
|
||||||
|
max-height: 300px;
|
||||||
|
overflow-y: hidden;
|
||||||
|
mask-image: linear-gradient(to bottom, var(--note-bg) 60%, rgba(0,0,0,0));
|
||||||
|
-webkit-mask-image: linear-gradient(to bottom, var(--note-bg) 60%, rgba(0,0,0,0));
|
||||||
|
}
|
@ -1,5 +1,5 @@
|
|||||||
import "./Note.css";
|
import "./Note.css";
|
||||||
import { useCallback, useMemo } from "react";
|
import { useCallback, useLayoutEffect, useMemo, useState } from "react";
|
||||||
import { useNavigate } from "react-router-dom";
|
import { useNavigate } from "react-router-dom";
|
||||||
|
|
||||||
import { default as NEvent } from "Nostr/Event";
|
import { default as NEvent } from "Nostr/Event";
|
||||||
@ -33,7 +33,9 @@ export default function Note(props: NoteProps) {
|
|||||||
const pubKeys = useMemo(() => ev.Thread?.PubKeys || [], [ev]);
|
const pubKeys = useMemo(() => ev.Thread?.PubKeys || [], [ev]);
|
||||||
const users = useUserProfiles(pubKeys);
|
const users = useUserProfiles(pubKeys);
|
||||||
const deletions = useMemo(() => getReactions(related, ev.Id, EventKind.Deletion), [related]);
|
const deletions = useMemo(() => getReactions(related, ev.Id, EventKind.Deletion), [related]);
|
||||||
const { ref, inView } = useInView({ triggerOnce: true });
|
const { ref, inView, entry } = useInView({ triggerOnce: true });
|
||||||
|
const [extendable, setExtendable] = useState<boolean>(false);
|
||||||
|
const [showMore, setShowMore] = useState<boolean>(false);
|
||||||
|
|
||||||
const options = {
|
const options = {
|
||||||
showHeader: true,
|
showHeader: true,
|
||||||
@ -50,6 +52,15 @@ export default function Note(props: NoteProps) {
|
|||||||
return <Text content={body} tags={ev.Tags} users={users || new Map()} />;
|
return <Text content={body} tags={ev.Tags} users={users || new Map()} />;
|
||||||
}, [ev]);
|
}, [ev]);
|
||||||
|
|
||||||
|
useLayoutEffect(() => {
|
||||||
|
if (entry && inView && extendable === false) {
|
||||||
|
let h = entry?.target.clientHeight ?? 0;
|
||||||
|
if (h > 650) {
|
||||||
|
setExtendable(true);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [inView, entry, extendable]);
|
||||||
|
|
||||||
function goToEvent(e: any, id: u256) {
|
function goToEvent(e: any, id: u256) {
|
||||||
if (!window.location.pathname.startsWith("/e/")) {
|
if (!window.location.pathname.startsWith("/e/")) {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
@ -109,13 +120,17 @@ export default function Note(props: NoteProps) {
|
|||||||
<div className="body" onClick={(e) => goToEvent(e, ev.Id)}>
|
<div className="body" onClick={(e) => goToEvent(e, ev.Id)}>
|
||||||
{transformBody()}
|
{transformBody()}
|
||||||
</div>
|
</div>
|
||||||
|
{extendable && !showMore && (<div className="flex f-center">
|
||||||
|
<button className="btn mt10" onClick={() => setShowMore(true)}>Show more</button>
|
||||||
|
</div>)}
|
||||||
{options.showFooter ? <NoteFooter ev={ev} related={related} /> : null}
|
{options.showFooter ? <NoteFooter ev={ev} related={related} /> : null}
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`note card${highlight ? " active" : ""}${isThread ? " thread" : ""}`} ref={ref}>
|
<div className={`note card${highlight ? " active" : ""}${isThread ? " thread" : ""}${extendable && !showMore ? " note-expand" : ""}`}
|
||||||
|
ref={ref} >
|
||||||
{content()}
|
{content()}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
Loading…
Reference in New Issue
Block a user